@mhamz.01/easyflow-whiteboard 2.120.0 → 2.121.0

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":"AAGA,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":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAU9C,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;AAkBD,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,2CAimBzB"}

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

@@ -1,8 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import TaskNode from "./custom-node";
 import DocumentNode from "./document-node";
+import { memo } from "react";
+// Wrap TaskNode and DocumentNode
+const MemoTaskNode = memo(TaskNode);
+const MemoDocumentNode = memo(DocumentNode);
 // ─── Component ────────────────────────────────────────────────────────────────
 export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, onDocumentsUpdate, canvasZoom = 1, canvasViewport = { x: 0, y: 0 }, selectionBox = null, selectedCanvasObjects = [], fabricCanvas, }) {
     const [localTasks, setLocalTasks] = useState(tasks);
@@ -14,6 +18,13 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         tasks: [],
         documents: [],
     });
+    // In render, replace TaskNode/DocumentNode with memoized versions
+    {
+        localTasks.map((task) => renderItem(task.id, task.x, task.y, _jsx(MemoTaskNode, { ...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(MemoDocumentNode, { ...doc, isSelected: selectedIds.has(doc.id), onSelect: handleSelect, onDragStart: handleDragStart })));
+    }
     const dragStateRef = useRef({
         isDragging: false,
         itemIds: [],
@@ -25,7 +36,16 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
     const rafIdRef = useRef(null);
     const overlayRef = useRef(null);
     const selectedIdsRef = useRef(selectedIds);
+    // Add these refs
+    const localTasksRef = useRef(localTasks);
+    const localDocsRef = useRef(localDocuments);
+    const onTasksUpdateRef = useRef(onTasksUpdate);
+    const onDocsUpdateRef = useRef(onDocumentsUpdate);
     selectedIdsRef.current = selectedIds;
+    localTasksRef.current = localTasks;
+    localDocsRef.current = localDocuments;
+    onTasksUpdateRef.current = onTasksUpdate;
+    onDocsUpdateRef.current = onDocumentsUpdate;
     // ── Sync props → local state ────────────────────────────────────────────────
     useEffect(() => { setLocalTasks(tasks); }, [tasks]);
     useEffect(() => { setLocalDocuments(documents); }, [documents]);
@@ -106,7 +126,7 @@ 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, canvasReady]); // Re-bind when zoom changes to keep closure fresh
     // ── Fabric → Overlay Sync (Fixes Dragging from Fabric area) ──────────────────
     useEffect(() => {
         const canvas = fabricCanvas?.current;
@@ -165,7 +185,7 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         // 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, canvasReady]);
     // ── Helpers ─────────────────────────────────────────────────────────────────
     const getItemPosition = (id) => {
         const task = localTasks.find((t) => t.id === id);
@@ -219,72 +239,61 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             return e.touches[0];
         return e;
     };
-    const handleDragStart = (itemId, e) => {
-        // 1. Safety check for the Fabric instance
+    const handleDragStart = useCallback((itemId, e) => {
         const canvas = fabricCanvas?.current;
         if (!canvas)
             return;
-        // 2. Normalize the event (Touch vs Mouse)
         if (e.cancelable)
             e.preventDefault();
         const pointer = getPointerEvent(e);
-        // 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);
-        }
-        else {
-            itemsToDrag = [itemId];
-        }
-        // 4. Capture current World Transform (Zoom & Pan)
-        // We read directly from the canvas to ensure zero-frame lag
+        // read from ref — always fresh
+        const currentSelectedIds = selectedIdsRef.current;
+        let itemsToDrag = currentSelectedIds.has(itemId)
+            ? Array.from(currentSelectedIds)
+            : [itemId];
         const vpt = canvas.viewportTransform || [1, 0, 0, 1, 0, 0];
         const liveZoom = vpt[0];
         const liveVpX = vpt[4];
         const liveVpY = vpt[5];
-        // 5. Convert the Click Position from Screen Pixels to World Units
         const clickWorldX = (pointer.clientX - liveVpX) / liveZoom;
         const clickWorldY = (pointer.clientY - liveVpY) / liveZoom;
-        // 6. Get the clicked item's current World Position
-        const clickedPos = getItemPosition(itemId);
+        // read positions from refs
+        const getPos = (id) => {
+            const t = localTasksRef.current.find((t) => t.id === id);
+            if (t)
+                return { x: t.x, y: t.y };
+            const d = localDocsRef.current.find((d) => d.id === id);
+            if (d)
+                return { x: d.x, y: d.y };
+        };
+        const clickedPos = getPos(itemId);
         if (!clickedPos)
             return;
-        // 7. Calculate the Offset in WORLD UNITS
-        // This is the distance from the mouse to the node's top-left in the infinite grid.
-        // This value remains constant even if you zoom during the drag.
-        const worldOffsetX = clickWorldX - clickedPos.x;
-        const worldOffsetY = clickWorldY - clickedPos.y;
-        // 8. Snapshot starting positions for all selected HTML nodes
         const startPositions = new Map();
         itemsToDrag.forEach((id) => {
-            const pos = getItemPosition(id);
+            const pos = getPos(id);
             if (pos)
                 startPositions.set(id, pos);
         });
-        // 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 });
         });
-        // 10. Commit to the ref for the requestAnimationFrame loop
         dragStateRef.current = {
             isDragging: true,
             itemIds: itemsToDrag,
             startPositions,
             canvasObjectsStartPos,
-            offsetX: clickWorldX, // Now stored as World Units
-            offsetY: clickWorldY, // Now stored as World Units
+            offsetX: clickWorldX,
+            offsetY: clickWorldY,
         };
-        if (!selectedIds.has(itemId) && dragStateRef.current.itemIds.length === 0) {
+        if (!currentSelectedIds.has(itemId))
             setSelectedIds(new Set([itemId]));
-        }
-        // 11. Trigger UI states
         setDragging({ itemIds: itemsToDrag });
         document.body.style.cursor = "grabbing";
         document.body.style.userSelect = "none";
         document.body.style.touchAction = "none";
-    };
+    }, []); // now truly stable
     // ── Drag move (HTML Node side) ───────────────────────────────────────────────
     useEffect(() => {
         if (!dragging)
@@ -363,8 +372,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);
+            onTasksUpdateRef.current?.(localTasksRef.current); // ref instead of closure
+            onDocsUpdateRef.current?.(localDocsRef.current);
         };
         window.addEventListener("mousemove", handleMove, { passive: false });
         window.addEventListener("mouseup", handleEnd);
@@ -378,9 +387,9 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             window.removeEventListener("touchend", handleEnd);
             window.removeEventListener("touchcancel", handleEnd);
         };
-    }, [dragging, localTasks, localDocuments, fabricCanvas]);
+    }, [dragging, fabricCanvas]);
     // ── Selection, Status, Keyboard Logic ────────────────────────────────────────
-    const handleSelect = (id, e) => {
+    const handleSelect = useCallback((id, e) => {
         if (e?.shiftKey || e?.ctrlKey || e?.metaKey) {
             setSelectedIds((prev) => {
                 const next = new Set(prev);
@@ -391,41 +400,38 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         else {
             setSelectedIds(new Set([id]));
         }
-    };
-    const handleStatusChange = (taskId, newStatus) => {
-        const updated = localTasks.map((t) => (t.id === taskId ? { ...t, status: newStatus } : t));
-        setLocalTasks(updated);
-        onTasksUpdate?.(updated);
-    };
+    }, []);
+    const handleStatusChange = useCallback((taskId, newStatus) => {
+        setLocalTasks((prev) => {
+            const updated = prev.map((t) => t.id === taskId ? { ...t, status: newStatus } : t);
+            onTasksUpdateRef.current?.(updated);
+            return updated;
+        });
+    }, []);
     useEffect(() => {
         const handleKeyDown = (e) => {
-            // Don't trigger if typing in input
             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), ...localDocsRef.current.map((d) => d.id)]));
             }
-            // Clear selection
-            if (e.key === "Escape") {
+            if (e.key === "Escape")
                 setSelectedIds(new Set());
-            }
-            // ← ADD THIS: Delete selected nodes
-            if ((e.key === "Delete" || e.key === "Backspace") && selectedIds.size > 0) {
+            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 updatedTasks = localTasksRef.current.filter((t) => !selectedIdsRef.current.has(t.id));
+                const updatedDocs = localDocsRef.current.filter((d) => !selectedIdsRef.current.has(d.id));
                 setLocalTasks(updatedTasks);
                 setLocalDocuments(updatedDocs);
                 setSelectedIds(new Set());
-                onTasksUpdate?.(updatedTasks);
-                onDocumentsUpdate?.(updatedDocs);
+                onTasksUpdateRef.current?.(updatedTasks);
+                onDocsUpdateRef.current?.(updatedDocs);
             }
         };
         window.addEventListener("keydown", handleKeyDown);
         return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [localTasks, localDocuments, selectedIds, onTasksUpdate, onDocumentsUpdate]);
+    }, []); // stable — everything via refs
     // ── Render helper ────────────────────────────────────────────────────────────
     const renderItem = (id, x, y, children) => {
         const screenX = x * canvasZoom;
@@ -454,5 +460,5 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         }, children: _jsxs("div", { className: "absolute top-0 left-0 pointer-events-none", style: {
                 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 })))] }) }));
+            }, children: [localTasks.map((task) => renderItem(task.id, task.x, task.y, _jsx(MemoTaskNode, { ...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(MemoDocumentNode, { ...doc, isSelected: selectedIds.has(doc.id), onSelect: handleSelect, onDragStart: handleDragStart })))] }) }));
 }

package/package.json

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