mask

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

@@ -1,58 +1,55 @@
+import { useCallback } from "react";
 import { useEditorStore, type EditorObject } from "../../store/editorStore";
 
 export const useObjectHandlers = () => {
-  const { updateObject, groupObjects, ungroupObjects, updateCellValue, setEditingCell, editingCell } =
-    useEditorStore();
+  // All handlers read live state via getState() and are wrapped in useCallback
+  // with empty deps so their references never change between renders.
+  // This prevents ObjectsLayer (and every ObjectRenderer inside it) from
+  // re-rendering whenever unrelated EditorCanvas state (e.g. active guide IDs)
+  // changes during drag — eliminating lag and flickering on masked groups.
 
-  const handleObjectUpdate = (id: string, updates: Partial<EditorObject>) => {
-    // همیشه آخرین state را بخوان تا چند dragmove پشت‌سرهم قبل از رِندر React، دلتا درست بماند
-    const liveObjects = useEditorStore.getState().objects;
-    const obj = liveObjects.find((o) => o.id === id);
+  const handleObjectUpdate = useCallback((id: string, updates: Partial<EditorObject>) => {
+    const { objects, updateObject } = useEditorStore.getState();
+    const obj = objects.find((o) => o.id === id);
     if (!obj) return;
 
-    // اگر group object است و position تغییر کرد، همه objectهای داخل group را جابجا کن
     if (obj.type === "group" && (updates.x !== undefined || updates.y !== undefined)) {
-      const groupMembers = liveObjects.filter((o) => o.groupId === id);
+      const groupMembers = objects.filter((o) => o.groupId === id);
       const deltaX = updates.x !== undefined ? updates.x - (obj.x || 0) : 0;
       const deltaY = updates.y !== undefined ? updates.y - (obj.y || 0) : 0;
 
-      // به‌روزرسانی group object
       updateObject(id, updates);
 
-      // به‌روزرسانی همه اعضای گروه
       groupMembers.forEach((member) => {
         updateObject(member.id, {
           x: (member.x || 0) + deltaX,
           y: (member.y || 0) + deltaY,
         });
       });
-    } else if (obj.groupId && (updates.x !== undefined || updates.y !== undefined)) {
-      // اگر object در یک گروه است و position تغییر کرد، فقط object را به‌روزرسانی کن
-      // bounds group فقط موقع transform به‌روزرسانی می‌شود
-      updateObject(id, updates);
     } else {
       updateObject(id, updates);
     }
-  };
+  }, []);
 
-  const handleGroupWithMask = (objectId: string, maskId: string) => {
-    groupObjects([objectId, maskId]);
-  };
+  const handleGroupWithMask = useCallback((objectId: string, maskId: string) => {
+    useEditorStore.getState().groupObjects([objectId, maskId]);
+  }, []);
 
-  const handleUngroupFromMask = (groupId: string) => {
-    ungroupObjects(groupId);
-  };
+  const handleUngroupFromMask = useCallback((groupId: string) => {
+    useEditorStore.getState().ungroupObjects(groupId);
+  }, []);
 
-  const handleCellEditorSave = (text: string) => {
+  const handleCellEditorSave = useCallback((text: string) => {
+    const { editingCell, updateCellValue, setEditingCell } = useEditorStore.getState();
     if (editingCell) {
       updateCellValue(editingCell.tableId, editingCell.cellId, text);
       setEditingCell(null);
     }
-  };
+  }, []);
 
-  const handleCellEditorCancel = () => {
-    setEditingCell(null);
-  };
+  const handleCellEditorCancel = useCallback(() => {
+    useEditorStore.getState().setEditingCell(null);
+  }, []);
 
   return {
     handleObjectUpdate,
@@ -62,4 +59,3 @@ export const useObjectHandlers = () => {
     handleCellEditorCancel,
   };
 };
-