From f2bc3fd1d8c55a9d1ed4a18fa6d9f284ce9a26e0 Mon Sep 17 00:00:00 2001
From: Jeremie Pardou <571533+jrmi@users.noreply.github.com>
Date: Sun, 21 Jul 2024 18:33:10 +0200
Subject: [PATCH] Use board uid and getElementById

---
 src/lib/board/Items/Item.jsx               |  2 +-
 src/lib/board/Items/useGetSelectedItems.js |  8 ++++++++
 src/lib/board/Items/useItemActions.js      |  8 ++++----
 src/lib/board/Selection.jsx                |  4 ++--
 src/lib/board/useDim.js                    |  4 ++--
 src/lib/utils.js                           | 13 ++++++-------
 6 files changed, 23 insertions(+), 16 deletions(-)
 create mode 100644 src/lib/board/Items/useGetSelectedItems.js

diff --git a/src/lib/board/Items/Item.jsx b/src/lib/board/Items/Item.jsx
index bdaa2ec..e14dadf 100644
--- 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
new file mode 100644
index 0000000..750ef11
--- /dev/null
+++ 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
index 7e0ddb8..b52c573 100644
--- 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
index ecdd7a1..8d6e914 100644
--- 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
index d620884..0489bd5 100644
--- 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
index 8631c0d..1dc7215 100644
--- 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) {