mask

src/pages/editor/components/canvas/useSelectionHandlers.ts

@@ -1,20 +1,25 @@
+import { useCallback } from "react";
 import Konva from "konva";
 import { useEditorStore } from "../../store/editorStore";
 
 export const useSelectionHandlers = () => {
-  const {
-    objects,
-    selectedObjectIds,
-    setSelectedObjectId,
-    addToSelection,
-    removeFromSelection,
-    setSelectedTableId,
-    setSelectedCellId,
-    tool,
-    setTool,
-  } = useEditorStore();
+  // Read live state via getState() so callbacks never go stale and can have
+  // empty deps — this prevents ObjectsLayer from re-rendering every time
+  // unrelated React state (e.g. active guide IDs) changes in EditorCanvas.
+
+  const handleSelect = useCallback((id: string, _node: Konva.Node, e?: Konva.KonvaEventObject<MouseEvent>) => {
+    const {
+      objects,
+      selectedObjectIds,
+      tool,
+      setTool,
+      setSelectedObjectId,
+      addToSelection,
+      removeFromSelection,
+      setSelectedTableId,
+      setSelectedCellId,
+    } = useEditorStore.getState();
 
-  const handleSelect = (id: string, _node: Konva.Node, e?: Konva.KonvaEventObject<MouseEvent>) => {
     if (tool !== "select") {
       setTool("select");
     }
@@ -22,7 +27,6 @@ export const useSelectionHandlers = () => {
     const obj = objects.find((o) => o.id === id);
     const isMultiSelect = e?.evt?.metaKey || e?.evt?.ctrlKey || e?.evt?.shiftKey;
 
-    // اگر object در یک group است، group را انتخاب کن نه object
     if (obj?.groupId && obj.type !== "group") {
       const groupObject = objects.find((o) => o.id === obj.groupId);
       if (groupObject) {
@@ -40,16 +44,12 @@ export const useSelectionHandlers = () => {
     }
 
     if (isMultiSelect) {
-      // انتخاب چندتایی
       if (selectedObjectIds.includes(id)) {
-        // اگر قبلاً انتخاب شده بود، از انتخاب خارج کن
         removeFromSelection(id);
       } else {
-        // اگر انتخاب نشده بود، به انتخاب اضافه کن
         addToSelection(id);
       }
     } else {
-      // انتخاب تک‌تایی
       setSelectedObjectId(id);
     }
 
@@ -62,13 +62,21 @@ export const useSelectionHandlers = () => {
     if (!isMultiSelect) {
       setSelectedCellId(null);
     }
-  };
+  }, []);
+
+  const handleCellClick = useCallback((tableId: string, cellId: string, e?: Konva.KonvaEventObject<MouseEvent>) => {
+    const {
+      selectedObjectIds,
+      addToSelection,
+      removeFromSelection,
+      setSelectedTableId,
+      setSelectedObjectId,
+      setSelectedCellId,
+    } = useEditorStore.getState();
 
-  const handleCellClick = (tableId: string, cellId: string, e?: Konva.KonvaEventObject<MouseEvent>) => {
     const isMultiSelect = e?.evt?.metaKey || e?.evt?.ctrlKey || e?.evt?.shiftKey;
 
     if (isMultiSelect) {
-      // انتخاب چندتایی
       if (selectedObjectIds.includes(tableId)) {
         removeFromSelection(tableId);
       } else {
@@ -80,20 +88,19 @@ export const useSelectionHandlers = () => {
     }
 
     setSelectedCellId(cellId);
-  };
+  }, []);
 
-  const handleCellDblClick = (
+  const handleCellDblClick = useCallback((
     tableId: string,
     cellId: string,
     x: number,
     y: number,
     width: number,
     height: number,
-    text: string
+    text: string,
   ) => {
-    const { setEditingCell } = useEditorStore.getState();
-    setEditingCell({ tableId, cellId, x, y, width, height, value: text });
-  };
+    useEditorStore.getState().setEditingCell({ tableId, cellId, x, y, width, height, value: text });
+  }, []);
 
   return {
     handleSelect,
@@ -101,4 +108,3 @@ export const useSelectionHandlers = () => {
     handleCellDblClick,
   };
 };
-