@mhamz.01/easyflow-whiteboard 2.122.0 → 2.124.0

package/dist/components/node/custom-node-overlay-layer.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { FabricObject, Canvas } from "fabric";
 export interface Task {
     id: string;
@@ -40,6 +41,6 @@ interface CanvasOverlayLayerProps {
     fabricCanvas?: React.RefObject<Canvas | null>;
     canvasReady?: boolean;
 }
-export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, onDocumentsUpdate, canvasZoom, canvasViewport, selectionBox, selectedCanvasObjects, fabricCanvas, }: CanvasOverlayLayerProps): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const _default: React.NamedExoticComponent<CanvasOverlayLayerProps>;
+export default _default;
 //# sourceMappingURL=custom-node-overlay-layer.d.ts.map

package/dist/components/node/custom-node-overlay-layer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-node-overlay-layer.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node-overlay-layer.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAS9C,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,UAAU,uBAAuB;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,YAAY,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACzE,qBAAqB,CAAC,EAAE,YAAY,EAAE,CAAC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAaD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,UAAc,EACd,cAA+B,EAC/B,YAAmB,EACnB,qBAA0B,EAC1B,YAAY,GACb,EAAE,uBAAuB,2CAglBzB"}
+{"version":3,"file":"custom-node-overlay-layer.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node-overlay-layer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAI9C,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,UAAU,uBAAuB;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,YAAY,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACzE,qBAAqB,CAAC,EAAE,YAAY,EAAE,CAAC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;;AAaD,wBA6pBG"}

package/dist/components/node/custom-node-overlay-layer.js

@@ -1,19 +1,25 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import TaskNode from "./custom-node";
 import DocumentNode from "./document-node";
 // ─── Component ────────────────────────────────────────────────────────────────
-export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, onDocumentsUpdate, canvasZoom = 1, canvasViewport = { x: 0, y: 0 }, selectionBox = null, selectedCanvasObjects = [], fabricCanvas, }) {
+export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, onDocumentsUpdate, canvasZoom = 1, canvasViewport = { x: 0, y: 0 }, selectionBox = null, selectedCanvasObjects = [], fabricCanvas, canvasReady: canvasReadyProp = false, }) {
     const [localTasks, setLocalTasks] = useState(tasks);
     const [localDocuments, setLocalDocuments] = useState(documents);
     const [selectedIds, setSelectedIds] = useState(new Set());
     const [dragging, setDragging] = useState(null);
-    const [canvasReady, setCanvasReady] = useState(false);
     const nodeClipboardRef = useRef({
         tasks: [],
         documents: [],
     });
+    // ── Refs for always-current state (Issue 4) ────────────────────────────────
+    const localTasksRef = useRef(localTasks);
+    const localDocumentsRef = useRef(localDocuments);
+    const selectedIdsRef = useRef(selectedIds);
+    localTasksRef.current = localTasks;
+    localDocumentsRef.current = localDocuments;
+    selectedIdsRef.current = selectedIds;
     const dragStateRef = useRef({
         isDragging: false,
         itemIds: [],
@@ -23,29 +29,18 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         offsetY: 0,
     });
     const rafIdRef = useRef(null);
+    const fabricMoveRafRef = useRef(null); // Issue 7
     const overlayRef = useRef(null);
-    const selectedIdsRef = useRef(selectedIds);
-    selectedIdsRef.current = selectedIds;
     // ── Sync props → local state ────────────────────────────────────────────────
-    useEffect(() => { setLocalTasks(tasks); }, [tasks]);
-    useEffect(() => { setLocalDocuments(documents); }, [documents]);
-    // effect — polls until fabricCanvas.current is available:
     useEffect(() => {
-        if (canvasReady)
-            return;
-        if (fabricCanvas?.current) {
-            setCanvasReady(true);
-            return;
-        }
-        // Poll every 50ms until canvas is ready (only needed on first load)
-        const interval = setInterval(() => {
-            if (fabricCanvas?.current) {
-                setCanvasReady(true);
-                clearInterval(interval);
-            }
-        }, 50);
-        return () => clearInterval(interval);
-    }, [fabricCanvas, canvasReady]);
+        setLocalTasks(tasks);
+    }, [tasks]);
+    useEffect(() => {
+        setLocalDocuments(documents);
+    }, [documents]);
+    // Issue 2: Remove internal canvasReady state and polling — use prop directly
+    // No longer needed: const [canvasReady, setCanvasReady] = useState(false);
+    // No longer needed: polling useEffect with setInterval
     // ── Event Forwarding (Fixes Zooming on Nodes) ───────────────────────────────
     const handleOverlayWheel = (e) => {
         if (e.ctrlKey || e.metaKey || e.shiftKey) {
@@ -61,7 +56,7 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
                 x: nativeEvent.clientX - rect.left,
                 y: nativeEvent.clientY - rect.top,
             };
-            // We cast to 'any' here because we are manually triggering an internal 
+            // We cast to 'any' here because we are manually triggering an internal
             // event bus, and Fabric's internal types for .fire() can be overly strict.
             canvas.fire("mouse:wheel", {
                 e: nativeEvent,
@@ -72,6 +67,7 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             e.stopPropagation();
         }
     };
+    // Issue 6: Remove canvasZoom from deps — not used in handler
     useEffect(() => {
         const overlayEl = overlayRef.current;
         const canvas = fabricCanvas?.current;
@@ -106,12 +102,14 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         return () => {
             overlayEl.removeEventListener("wheel", handleGlobalWheel);
         };
-    }, [fabricCanvas, canvasZoom, canvasReady]); // Re-bind when zoom changes to keep closure fresh
+    }, [fabricCanvas, canvasReadyProp]); // Issue 6: removed canvasZoom
     // ── Fabric → Overlay Sync (Fixes Dragging from Fabric area) ──────────────────
+    // Issue 5: Remove canvasZoom from deps — not used in handlers
     useEffect(() => {
         const canvas = fabricCanvas?.current;
         if (!canvas)
             return;
+        // Issue 7: Throttle handleObjectMoving with rAF gate
         const handleObjectMoving = (e) => {
             const target = e.transform?.target || e.target;
             if (!target)
@@ -122,10 +120,19 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             target._prevTop = target.top;
             if (deltaX === 0 && deltaY === 0)
                 return;
-            // ── Read from ref — always fresh, never stale ──
             const sel = selectedIdsRef.current;
-            setLocalTasks((prev) => prev.map((t) => sel.has(t.id) ? { ...t, x: t.x + deltaX, y: t.y + deltaY } : t));
-            setLocalDocuments((prev) => prev.map((d) => sel.has(d.id) ? { ...d, x: d.x + deltaX, y: d.y + deltaY } : d));
+            // Skip if frame already queued
+            if (fabricMoveRafRef.current !== null)
+                return;
+            fabricMoveRafRef.current = requestAnimationFrame(() => {
+                fabricMoveRafRef.current = null;
+                setLocalTasks((prev) => prev.map((t) => sel.has(t.id)
+                    ? { ...t, x: t.x + deltaX, y: t.y + deltaY }
+                    : t));
+                setLocalDocuments((prev) => prev.map((d) => sel.has(d.id)
+                    ? { ...d, x: d.x + deltaX, y: d.y + deltaY }
+                    : d));
+            });
         };
         const handleMouseDown = (e) => {
             const target = e.target;
@@ -160,18 +167,17 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             canvas.off("object:moving", handleObjectMoving);
             canvas.off("mouse:down", handleMouseDown);
             canvas.off("selection:cleared", handleSelectionCleared);
+            if (fabricMoveRafRef.current !== null) {
+                cancelAnimationFrame(fabricMoveRafRef.current);
+            }
         };
-        // ── selectedIds REMOVED from deps — read via selectedIdsRef instead ──────
-        // Having selectedIds here caused the effect to re-register on every selection
-        // change, creating a new closure each time. The second drag captured a stale
-        // or empty selectedIds from the closure at re-registration time.
-    }, [canvasZoom, fabricCanvas, canvasReady]);
+    }, [fabricCanvas, canvasReadyProp]); // Issue 5: removed canvasZoom
     // ── Helpers ─────────────────────────────────────────────────────────────────
     const getItemPosition = (id) => {
-        const task = localTasks.find((t) => t.id === id);
+        const task = localTasksRef.current.find((t) => t.id === id);
         if (task)
             return { x: task.x, y: task.y };
-        const doc = localDocuments.find((d) => d.id === id);
+        const doc = localDocumentsRef.current.find((d) => d.id === id);
         if (doc)
             return { x: doc.x, y: doc.y };
         return undefined;
@@ -193,11 +199,11 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             return;
         // ── O(n) single pass — no sort, no join, no extra allocations ──
         const newSelected = new Set();
-        for (const task of localTasks) {
+        for (const task of localTasksRef.current) {
             if (isItemInSelectionBox(task.x, task.y, 300, 140, selectionBox))
                 newSelected.add(task.id);
         }
-        for (const doc of localDocuments) {
+        for (const doc of localDocumentsRef.current) {
             if (isItemInSelectionBox(doc.x, doc.y, 320, 160, selectionBox))
                 newSelected.add(doc.id);
         }
@@ -215,7 +221,7 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
     // ── Drag start (HTML Node side) ──────────────────────────────────────────────
     // Helper to extract coordinates regardless of event type
     const getPointerEvent = (e) => {
-        if ('touches' in e && e.touches.length > 0)
+        if ("touches" in e && e.touches.length > 0)
             return e.touches[0];
         return e;
     };
@@ -231,8 +237,8 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         // 3. Determine which items are being dragged
         // selection update DOES NOT trigger before drag snapshot
         let itemsToDrag;
-        if (selectedIds.has(itemId)) {
-            itemsToDrag = Array.from(selectedIds);
+        if (selectedIdsRef.current.has(itemId)) {
+            itemsToDrag = Array.from(selectedIdsRef.current);
         }
         else {
             itemsToDrag = [itemId];
@@ -265,7 +271,10 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         // 9. Snapshot starting positions for all selected Fabric objects
         const canvasObjectsStartPos = new Map();
         selectedCanvasObjects.forEach((obj) => {
-            canvasObjectsStartPos.set(obj, { left: obj.left || 0, top: obj.top || 0 });
+            canvasObjectsStartPos.set(obj, {
+                left: obj.left || 0,
+                top: obj.top || 0,
+            });
         });
         // 10. Commit to the ref for the requestAnimationFrame loop
         dragStateRef.current = {
@@ -276,7 +285,7 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             offsetX: clickWorldX, // Now stored as World Units
             offsetY: clickWorldY, // Now stored as World Units
         };
-        if (!selectedIds.has(itemId) && dragStateRef.current.itemIds.length === 0) {
+        if (!selectedIdsRef.current.has(itemId) && dragStateRef.current.itemIds.length === 0) {
             setSelectedIds(new Set([itemId]));
         }
         // 11. Trigger UI states
@@ -286,10 +295,10 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         document.body.style.touchAction = "none";
     };
     // ── Drag move (HTML Node side) ───────────────────────────────────────────────
+    // Issue 3: Remove localTasks/localDocuments from deps — use refs instead
     useEffect(() => {
         if (!dragging)
             return;
-        // Inside the useEffect that watches [dragging, localTasks, localDocuments, fabricCanvas]
         const handleMove = (e) => {
             if (!dragStateRef.current.isDragging)
                 return;
@@ -300,7 +309,7 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             if (rafIdRef.current !== null)
                 cancelAnimationFrame(rafIdRef.current);
             rafIdRef.current = requestAnimationFrame(() => {
-                const { itemIds, startPositions, canvasObjectsStartPos, offsetX, offsetY } = dragStateRef.current;
+                const { itemIds, startPositions, canvasObjectsStartPos, offsetX, offsetY, } = dragStateRef.current;
                 const canvas = fabricCanvas?.current;
                 if (!canvas)
                     return;
@@ -316,33 +325,27 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
                 // (Current Mouse World - Initial World Offset from Start)
                 const deltaX = currentWorldX - offsetX;
                 const deltaY = currentWorldY - offsetY;
-                // if (itemIds.length > 0) {
-                //   console.groupCollapsed(`Dragging Node: ${itemIds[0]}`);
-                //   console.log("Screen Mouse:", { x: pointer.clientX, y: pointer.clientY });
-                //   console.log("World Mouse:", { x: currentWorldX.toFixed(2), y: currentWorldY.toFixed(2) });
-                //   console.log("Canvas Zoom:", liveZoom.toFixed(2));
-                //   console.log("New Node Pos:", { x: deltaX.toFixed(2), y: deltaY.toFixed(2) });
-                //   console.groupEnd();
-                // }
                 // 5. Calculate the Movement Delta in World Units
                 // We compare where the first item started vs where it is now.
                 const firstId = itemIds[0];
                 const firstStart = startPositions.get(firstId);
                 if (!firstStart)
                     return;
-                // The real problem of task jumps 
-                // const deltaX = deltaX - firstStart.x;
                 // 6. Update HTML Nodes (Batching these into one state update)
-                setLocalTasks((prev) => prev.map((t) => itemIds.includes(t.id) ? {
-                    ...t,
-                    x: (startPositions.get(t.id)?.x ?? t.x) + deltaX,
-                    y: (startPositions.get(t.id)?.y ?? t.y) + deltaY,
-                } : t));
-                setLocalDocuments((prev) => prev.map((d) => itemIds.includes(d.id) ? {
-                    ...d,
-                    x: (startPositions.get(d.id)?.x ?? d.x) + deltaX,
-                    y: (startPositions.get(d.id)?.y ?? d.y) + deltaY,
-                } : d));
+                setLocalTasks((prev) => prev.map((t) => itemIds.includes(t.id)
+                    ? {
+                        ...t,
+                        x: (startPositions.get(t.id)?.x ?? t.x) + deltaX,
+                        y: (startPositions.get(t.id)?.y ?? t.y) + deltaY,
+                    }
+                    : t));
+                setLocalDocuments((prev) => prev.map((d) => itemIds.includes(d.id)
+                    ? {
+                        ...d,
+                        x: (startPositions.get(d.id)?.x ?? d.x) + deltaX,
+                        y: (startPositions.get(d.id)?.y ?? d.y) + deltaY,
+                    }
+                    : d));
                 // 7. Sync Fabric Objects (Imperative update for performance)
                 canvasObjectsStartPos.forEach((startPos, obj) => {
                     obj.set({
@@ -355,6 +358,7 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
                 canvas.requestRenderAll();
             });
         };
+        // Issue 4: Use refs for always-current values
         const handleEnd = () => {
             if (rafIdRef.current !== null)
                 cancelAnimationFrame(rafIdRef.current);
@@ -363,8 +367,8 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             document.body.style.cursor = "";
             document.body.style.userSelect = "";
             document.body.style.touchAction = "";
-            onTasksUpdate?.(localTasks);
-            onDocumentsUpdate?.(localDocuments);
+            onTasksUpdate?.(localTasksRef.current);
+            onDocumentsUpdate?.(localDocumentsRef.current);
         };
         window.addEventListener("mousemove", handleMove, { passive: false });
         window.addEventListener("mouseup", handleEnd);
@@ -378,7 +382,7 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             window.removeEventListener("touchend", handleEnd);
             window.removeEventListener("touchcancel", handleEnd);
         };
-    }, [dragging, localTasks, localDocuments, fabricCanvas]);
+    }, [dragging, fabricCanvas]); // Issue 3: removed localTasks/localDocuments
     // ── Selection, Status, Keyboard Logic ────────────────────────────────────────
     const handleSelect = (id, e) => {
         if (e?.shiftKey || e?.ctrlKey || e?.metaKey) {
@@ -393,29 +397,36 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         }
     };
     const handleStatusChange = (taskId, newStatus) => {
-        const updated = localTasks.map((t) => (t.id === taskId ? { ...t, status: newStatus } : t));
+        const updated = localTasksRef.current.map((t) => t.id === taskId ? { ...t, status: newStatus } : t);
         setLocalTasks(updated);
         onTasksUpdate?.(updated);
     };
+    // Issue 9: Use refs and only depend on stable callbacks
     useEffect(() => {
         const handleKeyDown = (e) => {
             // Don't trigger if typing in input
-            if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)
+            if (e.target instanceof HTMLInputElement ||
+                e.target instanceof HTMLTextAreaElement)
                 return;
             // Select All
             if ((e.ctrlKey || e.metaKey) && e.key === "a") {
                 e.preventDefault();
-                setSelectedIds(new Set([...localTasks.map((t) => t.id), ...localDocuments.map((d) => d.id)]));
+                setSelectedIds(new Set([
+                    ...localTasksRef.current.map((t) => t.id),
+                    ...localDocumentsRef.current.map((d) => d.id),
+                ]));
             }
             // Clear selection
             if (e.key === "Escape") {
                 setSelectedIds(new Set());
             }
-            // ← ADD THIS: Delete selected nodes
-            if ((e.key === "Delete" || e.key === "Backspace") && selectedIds.size > 0) {
+            // Delete selected nodes
+            if ((e.key === "Delete" || e.key === "Backspace") &&
+                selectedIdsRef.current.size > 0) {
                 e.preventDefault();
-                const updatedTasks = localTasks.filter((t) => !selectedIds.has(t.id));
-                const updatedDocs = localDocuments.filter((d) => !selectedIds.has(d.id));
+                const sel = selectedIdsRef.current;
+                const updatedTasks = localTasksRef.current.filter((t) => !sel.has(t.id));
+                const updatedDocs = localDocumentsRef.current.filter((d) => !sel.has(d.id));
                 setLocalTasks(updatedTasks);
                 setLocalDocuments(updatedDocs);
                 setSelectedIds(new Set());
@@ -425,14 +436,12 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         };
         window.addEventListener("keydown", handleKeyDown);
         return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [localTasks, localDocuments, selectedIds, onTasksUpdate, onDocumentsUpdate]);
+    }, [onTasksUpdate, onDocumentsUpdate]); // Issue 9: only stable callbacks
     // ── Render helper ────────────────────────────────────────────────────────────
     const renderItem = (id, x, y, children) => {
         const screenX = x * canvasZoom;
         const screenY = y * canvasZoom;
         // 1. Detect if the user is interacting with the canvas at all
-        // 'dragging' is your existing state. 
-        // You might want to pass 'isZooming' or 'isPanning' from your main canvas component here.
         const isDragging = dragging?.itemIds.includes(id);
         return (_jsx("div", { className: "pointer-events-auto absolute", style: {
                 left: 0,
@@ -455,4 +464,19 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
                 transform: `translate(${canvasViewport.x}px, ${canvasViewport.y}px)`,
                 transformOrigin: "top left",
             }, children: [localTasks.map((task) => renderItem(task.id, task.x, task.y, _jsx(TaskNode, { ...task, isSelected: selectedIds.has(task.id), onSelect: handleSelect, onDragStart: handleDragStart, onStatusChange: handleStatusChange, zoom: 1 }))), localDocuments.map((doc) => renderItem(doc.id, doc.x, doc.y, _jsx(DocumentNode, { ...doc, isSelected: selectedIds.has(doc.id), onSelect: handleSelect, onDragStart: handleDragStart })))] }) }));
-}
+}, (prev, next) => {
+    // Custom comparator — skip re-render if props are equal
+    // Return true to skip re-render, false to re-render
+    return (prev.tasks === next.tasks &&
+        prev.documents === next.documents &&
+        prev.canvasZoom === next.canvasZoom &&
+        prev.canvasViewport?.x === next.canvasViewport?.x &&
+        prev.canvasViewport?.y === next.canvasViewport?.y &&
+        prev.selectionBox === next.selectionBox &&
+        prev.selectedCanvasObjects === next.selectedCanvasObjects &&
+        prev.onTasksUpdate === next.onTasksUpdate &&
+        prev.onDocumentsUpdate === next.onDocumentsUpdate &&
+        prev.canvasReady === next.canvasReady
+    // fabricCanvas ref intentionally omitted — it's stable and doesn't need comparison
+    );
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mhamz.01/easyflow-whiteboard",
-    "version": "2.122.0",
+    "version": "2.124.0",
     "description": "A feature-rich whiteboard component built with Fabric.js and React",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",