fix the issue with clicking on overlapping objects

Author: KARM99

src/components/EditorCanvas/Area.jsx

@@ -19,7 +19,12 @@ import {
 import { useTranslation } from "react-i18next";
 import { useHover } from "usehooks-ts";
 
-export default function Area({ data, setResize, setInitDimensions }) {
+export default function Area({
+  data,
+  onPointerDown,
+  setResize,
+  setInitDimensions,
+}) {
   const ref = useRef(null);
   const isHovered = useHover(ref);
   const { layout } = useLayout();
@@ -60,16 +65,19 @@ export default function Area({ data, setResize, setInitDimensions }) {
     };
 
     const unlockArea = () => {
+      const elementInBulk = {
+        id: data.id,
+        type: ObjectType.AREA,
+        initialCoords: { x: data.x, y: data.y },
+        currentCoords: { x: data.x, y: data.y },
+      };
       if (e.ctrlKey) {
         setBulkSelectedElements((prev) => [
           ...prev,
-          {
-            id: data.id,
-            type: ObjectType.AREA,
-            initialCoords: { x: data.x, y: data.y },
-            currentCoords: { x: data.x, y: data.y },
-          },
+          elementInBulk,
         ]);
+      } else {
+        setBulkSelectedElements([elementInBulk]);
       }
       setSelectedElement((prev) => ({
         ...prev,
@@ -147,6 +155,7 @@ export default function Area({ data, setResize, setInitDimensions }) {
         y={data.y}
         width={data.width > 0 ? data.width : 0}
         height={data.height > 0 ? data.height : 0}
+        onPointerDown={onPointerDown}
       >
         <div
           className={`w-full h-full p-2 rounded cursor-move border-2 ${

src/components/EditorCanvas/Canvas.jsx

@@ -104,6 +104,9 @@ export default function Canvas() {
     show: false,
     ctrlKey: false,
   });
+  // this is used to store the element that is clicked on
+  // at the moment, and shouldn't be a part of the state
+  let elementPointerDown = null;
 
   const isSameElement = (el1, el2) => {
     return el1.id === el2.id && el1.type === el2.type;
@@ -172,39 +175,6 @@ export default function Canvas() {
     }
   };
 
-  const getElementFromCoords = (coords) => {
-    for (const table of tables) {
-      if (pointIsInsideRect(coords, tableRect(table, settings))) {
-        return {
-          element: table,
-          type: ObjectType.TABLE,
-        };
-      }
-    }
-    for (const area of areas) {
-      if (pointIsInsideRect(coords, areaRect(area))) {
-        return {
-          element: area,
-          type: ObjectType.AREA,
-        };
-      }
-    }
-    for (const note of notes) {
-      if (pointIsInsideRect(coords, noteRect(note))) {
-        return {
-          element: note,
-          type: ObjectType.NOTE,
-        };
-      }
-    }
-    return null;
-  };
-
-  /**
-   * @param {PointerEvent} e
-   * @param {number} id
-   * @param {ObjectType[keyof ObjectType]} type
-   */
   const handlePointerDownOnElement = (e, { element, type }) => {
     if (selectedElement.open && !layout.sidebar) return;
 
@@ -422,17 +392,16 @@ export default function Canvas() {
     const isMouseMiddleButton = e.button === 1;
 
     if (isMouseLeftButton) {
-      const elementAndType = getElementFromCoords(pointer.spaces.diagram);
       setBulkSelectRectPts({
         x1: pointer.spaces.diagram.x,
         y1: pointer.spaces.diagram.y,
         x2: pointer.spaces.diagram.x,
         y2: pointer.spaces.diagram.y,
-        show: elementAndType === null || !elementAndType.element.locked,
+        show: elementPointerDown === null || !elementPointerDown.element.locked,
         ctrlKey: e.ctrlKey,
       });
-      if (elementAndType !== null) {
-        handlePointerDownOnElement(e, elementAndType);
+      if (elementPointerDown !== null) {
+        handlePointerDownOnElement(e, elementPointerDown);
       }
       pointer.setStyle("crosshair");
     } else if (isMouseMiddleButton) {
@@ -711,6 +680,12 @@ export default function Canvas() {
               data={a}
               setResize={setAreaResize}
               setInitDimensions={setAreaInitDimensions}
+              onPointerDown={() => {
+                elementPointerDown = {
+                  element: a,
+                  type: ObjectType.AREA,
+                };
+              }}
             />
           ))}
           {relationships.map((e, i) => (
@@ -723,6 +698,12 @@ export default function Canvas() {
               setHoveredTable={setHoveredTable}
               handleGripField={handleGripField}
               setLinkingLine={setLinkingLine}
+              onPointerDown={() => {
+                elementPointerDown = {
+                  element: table,
+                  type: ObjectType.TABLE,
+                };
+              }}
             />
           ))}
           {linking && (
@@ -734,7 +715,16 @@ export default function Canvas() {
             />
           )}
           {notes.map((n) => (
-            <Note key={n.id} data={n} />
+            <Note
+              key={n.id}
+              data={n}
+              onPointerDown={() => {
+                elementPointerDown = {
+                  element: n,
+                  type: ObjectType.NOTE,
+                };
+              }}
+            />
           ))}
           {bulkSelectRectPts.show && (
             <rect

src/components/EditorCanvas/Note.jsx

@@ -18,7 +18,7 @@ import {
 import { useTranslation } from "react-i18next";
 import { noteWidth, noteRadius, noteFold } from "../../data/constants";
 
-export default function Note({ data }) {
+export default function Note({ data, onPointerDown }) {
   const [editField, setEditField] = useState({});
   const [hovered, setHovered] = useState(false);
   const { layout } = useLayout();
@@ -117,16 +117,19 @@ export default function Note({ data }) {
     };
 
     const unlockNote = () => {
+      const elementInBulk = {
+        id: data.id,
+        type: ObjectType.NOTE,
+        initialCoords: { x: data.x, y: data.y },
+        currentCoords: { x: data.x, y: data.y },
+      };
       if (e.ctrlKey) {
         setBulkSelectedElements((prev) => [
           ...prev,
-          {
-            id: data.id,
-            type: ObjectType.NOTE,
-            initialCoords: { x: data.x, y: data.y },
-            currentCoords: { x: data.x, y: data.y },
-          },
+          elementInBulk,
         ]);
+      } else {
+        setBulkSelectedElements([elementInBulk]);
       }
       setSelectedElement((prev) => ({
         ...prev,
@@ -225,6 +228,7 @@ export default function Note({ data }) {
         y={data.y}
         width={noteWidth}
         height={data.height}
+        onPointerDown={onPointerDown}
       >
         <div className="text-gray-900 select-none w-full h-full cursor-move px-3 py-2">
           <div className="flex justify-between gap-1 w-full">

src/components/EditorCanvas/Table.jsx

@@ -26,6 +26,7 @@ import { getTableHeight } from "../../utils/utils";
 
 export default function Table({
   tableData,
+  onPointerDown,
   setHoveredTable,
   handleGripField,
   setLinkingLine,
@@ -79,16 +80,19 @@ export default function Table({
     };
 
     const unlockTable = () => {
+      const elementInBulk = {
+        id: tableData.id,
+        type: ObjectType.TABLE,
+        initialCoords: { x: tableData.x, y: tableData.y },
+        currentCoords: { x: tableData.x, y: tableData.y },
+      };
       if (e.ctrlKey) {
         setBulkSelectedElements((prev) => [
           ...prev,
-          {
-            id: tableData.id,
-            type: ObjectType.TABLE,
-            initialCoords: { x: tableData.x, y: tableData.y },
-            currentCoords: { x: tableData.x, y: tableData.y },
-          },
+          elementInBulk,
         ]);
+      } else {
+        setBulkSelectedElements([elementInBulk]);
       }
       setSelectedElement((prev) => ({
         ...prev,
@@ -137,6 +141,7 @@ export default function Table({
         width={settings.tableWidth}
         height={height}
         className="group drop-shadow-lg rounded-md cursor-move"
+        onPointerDown={onPointerDown}
       >
         <div
           onDoubleClick={openEditor}