Calender View Block Elements Overlapping

anwendung/src/components/CalenderView.jsx

@@ -1,6 +1,7 @@
 import {useEffect, useState} from "react";
 import {CalenderEntry} from "@/components/CalenderEntry";
 import Button from "@/components/Button";
+import {list} from "postcss";
 
 //all entries of the current week
 let entries = {mo: [], tu: [], we: [], th: [], fr: [], sa: []}
@@ -34,6 +35,30 @@ export default function CalenderView(p)
         window.addEventListener("contextmenu", (e) => (e.preventDefault()))
     })
 
+    function does_element_overlap(entry, start, end, search_list)
+    {
+        let current = null;
+        for(let i = 0; i < search_list.length; i++)
+        {
+            current = search_list[i];
+            if(current !== entry)
+            {
+                if (start > current.start_point && start < current.end_point)
+                {
+                    return true;
+                } else if (end > current.start_point && end < current.end_point)
+                {
+                    return true;
+                } else if (start <= current.start_point && end >= current.end_point)
+                {
+                    return true;
+                }
+            }
+        }
+
+        return false;
+    }
+
     //function to delete an elemente and resize the corresponding list in the entries dictionary
     function delete_element(index, element)
     {
@@ -50,22 +75,29 @@ export default function CalenderView(p)
     }
 
     //resize a grabbed element to the row paramter
-    function size_grabbed(row)
+    function size_grabbed(row, current_list)
     {
         if (row >= 0 && row <= 96)
         {
             if (grabbedUp)
             {
+                console.log(grabbed.start_point)
 
                 if (row < grabbed.end_point - 1)
                 {
-                    grabbed.start_point = row;
+                    if(!does_element_overlap(grabbed, row, grabbed.end_point, current_list))
+                    {
+                        grabbed.start_point = row;
+                    }
                 }
             } else
             {
                 if (row > grabbed.start_point)
                 {
-                    grabbed.end_point = row + 1;
+                    if(!does_element_overlap(grabbed, grabbed.start_point, row + 1, current_list))
+                    {
+                        grabbed.end_point = row + 1;
+                    }
                 }
             }
         }
@@ -77,15 +109,21 @@ export default function CalenderView(p)
     {
         if (selectedListID !== id)
         {
-            delete_element(selectedListID, selectedElement);
+            if(!does_element_overlap(selectedElement, row - selectedOffsetTop, row + selectedOffsetBottom, entries[id]))
-            entries[id].push(selectedElement);
+            {
-            selectedListID = id;
+                delete_element(selectedListID, selectedElement);
+                entries[id].push(selectedElement);
+                selectedListID = id;
+            }
         }
 
         if (row - selectedOffsetTop > 0 && row + selectedOffsetBottom <= 97)
         {
-            selectedElement.start_point = row - selectedOffsetTop;
+            if(!does_element_overlap(selectedElement, row - selectedOffsetTop, row + selectedOffsetBottom, entries[id]))
-            selectedElement.end_point = row + selectedOffsetBottom;
+            {
+                selectedElement.start_point = row - selectedOffsetTop;
+                selectedElement.end_point = row + selectedOffsetBottom;
+            }
         }
     }
 
@@ -103,11 +141,12 @@ export default function CalenderView(p)
             let id = e.currentTarget.id;
             //calcultes the current row the cursor hovers
             let row = Math.floor((y_window - y_target_offset) / cellHeight) + 1
+            let current_list = entries[e.currentTarget.id];
 
             //if a edge of an element was grabbed, resize it
             if (grabbed != null)
             {
-                size_grabbed(row);
+                size_grabbed(row, current_list);
                 //if a whole element was grabbed, move it
             } else if (selectedElement != null)
             {
@@ -164,7 +203,7 @@ export default function CalenderView(p)
             {
                 let current = list[i];
 
-                for (let r = row; r < row + 2; r++)
+                for (let r = row; r < row + 3; r++)
                 {
                     for (let s = current.start_point; s < current.end_point; s++)
                     {
@@ -222,14 +261,15 @@ export default function CalenderView(p)
                 //get the startRow of the entry
                 let rowStart = parseInt(window.getComputedStyle(entry).gridRowStart);
 
-                grabbed = find_current(row, current_list);
-
                 //check if the upper or lower resize bar was grabbed
                 if (row === rowStart)
                 {
+                    //+ / - 1 to avoid select the wrong element when overlapping
+                    grabbed = find_current(row + 1, current_list);
                     grabbedUp = true;
                 } else
                 {
+                    grabbed = find_current(row - 1, current_list);
                     grabbedUp = false;
                 }
             }

anwendung/src/pages/index.js

@@ -6,6 +6,7 @@ import {arrowLeft, arrowRight} from "@/components/Icons";
 import WeekSelector from "@/components/WeekSelector";
 import PopUp from "@/components/PopUp";
 import CalenderView from "@/components/CalenderView";
+import DateElement from "@/components/DateElement";
 
 
 const inter = Inter({subsets: ['latin']})

anwendung/src/styles/globals.css

@@ -18,6 +18,7 @@ body {
     )
     rgb(var(--background-start-rgb));
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
 }
@@ -230,14 +231,8 @@ Calender View
 
 .calender-view
 {
-  /*
-  Test
-   */
   width: 1000px;
   height: 2400px;
-  /*
-  End Test
-   */
   background-color: #363636;
   display: flex;
   flex-direction: row;
@@ -285,6 +280,8 @@ Calender View
   cursor: move;
   z-index: 10;
   overflow: hidden;
+  margin-top: 4px;
+  margin-bottom: 4px;
 }
 
 .entry .resize-grab