Use board uid and getElementById

jrmi · Jul 21, 2024 · f2bc3fd · f2bc3fd
1 parent 8726105
commit f2bc3fd
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 16 deletions.
diff --git a/src/lib/board/Items/Item.jsx b/src/lib/board/Items/Item.jsx
@@ -247,7 +247,7 @@ const Item = ({
     <div
       style={{ transform: `rotate(${rotation}deg` }}
       data-id={id}
-      id={`${uid}_${id}`}
+      id={`${uid}__${id}`}
       className={className}
     >
       <div

diff --git a/src/lib/board/Items/useGetSelectedItems.js b/src/lib/board/Items/useGetSelectedItems.js
@@ -0,0 +1,8 @@
+import useMainStore from "../store/main";
+
+const useGetSelectedItems = () => {
+  const [getSelection] = useMainStore((state) => [state.getSelection]);
+  return getSelection;
+};
+
+export default useGetSelectedItems;
diff --git a/src/lib/board/Items/useItemActions.js b/src/lib/board/Items/useItemActions.js
@@ -142,12 +142,12 @@ const useItemActions = () => {
 
   const stickOnGrid = React.useCallback(
     (itemIds, { type: globalType, size: globalSize } = {}) => {
-      const { boardWrapper } = getConfiguration();
+      const { uid } = getConfiguration();
 
       batchUpdateItems(
         itemIds,
         (item) => {
-          const elem = getItemElem(boardWrapper, item.id);
+          const elem = getItemElem(uid, item.id);
 
           if (!elem) {
             return;
@@ -348,11 +348,11 @@ const useItemActions = () => {
         if (hasClass(target, "passthrough")) {
           // Get current value
           const itemList = getItemIds();
-          const { boardWrapper } = getConfiguration();
+          const { uid } = getConfiguration();
 
           // Found element under the cursor
           const elements = itemList.reduce((prev, itemId) => {
-            const elem = getItemElem(boardWrapper, itemId);
+            const elem = getItemElem(uid, itemId);
             const itemRect = elem.getBoundingClientRect();
             if (isPointInsideRect({ x: clientX, y: clientY }, itemRect)) {
               prev.unshift(elem);

diff --git a/src/lib/board/Selection.jsx b/src/lib/board/Selection.jsx
@@ -45,14 +45,14 @@ const BoundingBox = () => {
   // Update selection bounding box
   const updateBox = React.useCallback(() => {
     const currentSelectedItems = getSelection();
-    const { boardWrapperRect, boardWrapper } = getConfiguration();
+    const { boardWrapperRect, uid } = getConfiguration();
 
     if (currentSelectedItems.length === 0) {
       setSelectionBox(null);
       return;
     }
 
-    const boundingBox = getItemsBoundingBox(currentSelectedItems, boardWrapper);
+    const boundingBox = getItemsBoundingBox(currentSelectedItems, uid);
 
     if (!boundingBox) {
       setSelectionBox(null);

diff --git a/src/lib/board/useDim.js b/src/lib/board/useDim.js
@@ -323,11 +323,11 @@ const useDim = () => {
   const updateItemExtent = React.useCallback(() => {
     // Update item extent
     const items = getItemList();
-    const { boardWrapper, boardSize } = getConfiguration();
+    const { boardSize, uid } = getConfiguration();
 
     const newRes = items.reduce(
       (boundingBox, item) => {
-        const elem = getItemElem(boardWrapper, item.id);
+        const elem = getItemElem(uid, item.id);
 
         if (elem) {
           boundingBox.left = Math.min(item.x, boundingBox.left);

diff --git a/src/lib/utils.js b/src/lib/utils.js
@@ -122,18 +122,17 @@ export const isItemInsideElement = (itemElement, otherElem) => {
   return result;
 };
 
-export const getItemElem = (wrapper, itemId) => {
+export const getItemElem = (uid, itemId) => {
   try {
-    const elems = wrapper.getElementsByClassName(`item ${itemId}`);
-    const elem = elems[0];
+    const elem = document.getElementById(`${uid}__${itemId}`);
     if (!elem) {
       console.error(`Missing item ${itemId}`);
     }
     return elem;
   } catch (e) {
     console.error(
-      `Error while getting item with id ${itemId} with wrapper`,
-      wrapper
+      `Error while getting item with id ${itemId} inside wrapper`,
+      uid
     );
     return undefined;
   }
@@ -153,9 +152,9 @@ export const getIdFromElem = (elem) => {
   return value;
 };
 
-export const getItemsBoundingBox = (itemIds, wrapper = document) => {
+export const getItemsBoundingBox = (itemIds, uid) => {
   const result = itemIds.reduce((prev, itemId) => {
-    const elem = getItemElem(wrapper, itemId);
+    const elem = getItemElem(uid, itemId);
 
     if (!elem) {
       if (!prev) {