Improve perfs

CHANGELOG.md

@@ -1,4 +1,11 @@
 
+1.2.7 / 2024-07-21
+==================
+
+  * Use board uid and getElementById
+  * Improve performances
+  * Fix bug if missing linked item
+
 1.2.6 / 2024-03-09
 ==================
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-sync-board",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "React-sync-board is a board for react",
   "type": "module",
   "files": [

src/lib/board/Items/Item.jsx

@@ -1,9 +1,11 @@
 import React, { memo } from "react";
 
-import ResizeHandler from "./ResizeHandler";
 import { css } from "goober";
 import deepEqual from "fast-deep-equal";
 
+import ResizeHandler from "./ResizeHandler";
+import useMainStore from "../store/main";
+
 const itemClass = css`
   display: inline-block;
   transition: transform 150ms;
@@ -184,6 +186,7 @@ const Item = ({
   showResizeHandle = true,
 }) => {
   const itemWrapperRef = React.useRef(null);
+  const [uid] = useMainStore((state) => [state.config.uid]);
 
   const {
     component: Component = () => null,
@@ -244,6 +247,7 @@ const Item = ({
     <div
       style={{ transform: `rotate(${rotation}deg` }}
       data-id={id}
+      id={`${uid}__${id}`}
       className={className}
     >
       <div

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;

src/lib/board/Items/useItemActions.js

@@ -123,10 +123,8 @@ const useItemActions = () => {
         getLinkedItems(getStoreItems(), getItemIds(), itemIds),
         posDelta
       );
-
-      updateItemExtent();
     },
-    [getItemIds, getStoreItems, moveStoreItems, updateItemExtent]
+    [getItemIds, getStoreItems, moveStoreItems]
   );
 
   const putItemsOnTop = React.useCallback(
@@ -144,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;
@@ -292,10 +290,9 @@ const useItemActions = () => {
       });
 
       insertItems(itemsWithPosition, beforeId);
-
-      updateItemExtent();
+      placeItems(itemsToInsert.map(({ id }) => id));
     },
-    [getCenter, insertItems, updateItemExtent]
+    [getCenter, insertItems, placeItems]
   );
 
   const pushItem = React.useCallback(
@@ -351,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);

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);

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);
@@ -392,6 +392,12 @@ const useDim = () => {
     200
   );
 
+  React.useEffect(() => {
+    window.debugUpdateExtent = () => updateItemExtent();
+    window.debugDisplayExtent = () =>
+      console.log(getConfiguration().itemExtent);
+  }, [getConfiguration, updateItemExtent]);
+
   return {
     setDim: setDimSafe,
     rotateBoard,

src/lib/index.js

@@ -3,6 +3,7 @@ export { default as useWire } from "@/hooks/useWire";
 export { default as useItems } from "@/board/Items/useItems";
 export { default as useDebouncedItems } from "@/board/Items/useDebouncedItems";
 export { default as useSelectedItems } from "@/board/Items/useSelectedItems";
+export { default as useGetSelectedItems } from "@/board/Items/useGetSelectedItems";
 export { default as useItemActions } from "@/board/Items/useItemActions";
 export { default as useItemInteraction } from "@/board/Items/useItemInteraction";
 export { default as useAvailableActions } from "@/board/Items/useAvailableActions";

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) {
@@ -212,14 +211,19 @@ const getLinkedItemsRecursive = (itemMap, itemIds, alreadyMet = null) => {
         return [];
       } else {
         alreadyMet.add(itemId);
-        return [
-          itemId,
-          ...getLinkedItemsRecursive(
-            itemMap,
-            itemMap[itemId].linkedItems,
-            alreadyMet
-          ),
-        ];
+        if (itemMap[itemId]) {
+          // If the item has been removed but not from linked list
+          return [
+            itemId,
+            ...getLinkedItemsRecursive(
+              itemMap,
+              itemMap[itemId].linkedItems,
+              alreadyMet
+            ),
+          ];
+        } else {
+          return [];
+        }
       }
     })
     .flat();