@mhamz.01/easyflow-whiteboard 2.67.0 → 2.69.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,2CAujBzB"}
+{"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;AAM9C,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;AA2BD,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,2CAsiBzB"}

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

@@ -1,8 +1,17 @@
 "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";
+// ─── Pure helper: world → screen using the live VPT ──────────────────────────
+// This is the SINGLE source of truth for positioning.
+// screenX = worldX * zoom + vpX  (same math Fabric uses internally)
+function worldToScreen(worldX, worldY, vpt) {
+    return {
+        x: worldX * vpt[0] + vpt[4],
+        y: worldY * vpt[3] + vpt[5],
+    };
+}
 // ─── 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);
@@ -10,10 +19,7 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
     const [selectedIds, setSelectedIds] = useState(new Set());
     const [dragging, setDragging] = useState(null);
     const [canvasReady, setCanvasReady] = useState(false);
-    const nodeClipboardRef = useRef({
-        tasks: [],
-        documents: [],
-    });
+    // ── Refs (always-fresh values, never stale closures) ─────────────────────────
     const dragStateRef = useRef({
         isDragging: false,
         itemIds: [],
@@ -24,12 +30,24 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
     });
     const rafIdRef = useRef(null);
     const overlayRef = useRef(null);
+    const localTasksRef = useRef(localTasks);
+    const localDocumentsRef = useRef(localDocuments);
     const selectedIdsRef = useRef(selectedIds);
+    // ── THE KEY REF: always holds the live VPT from Fabric ───────────────────────
+    // This is what eliminates the double-transform mismatch.
+    // Instead of using canvasZoom/canvasViewport props (which are 1 render behind),
+    // we read directly from the canvas during render via this ref.
+    const liveVptRef = useRef([1, 0, 0, 1, 0, 0]);
+    // Sync all refs on every render — O(1), no cost
     selectedIdsRef.current = selectedIds;
-    // ── Sync props → local state ────────────────────────────────────────────────
+    localTasksRef.current = localTasks;
+    localDocumentsRef.current = localDocuments;
+    // Keep liveVptRef up to date from props as a fallback (canvas updates it directly too)
+    liveVptRef.current = [canvasZoom, 0, 0, canvasZoom, canvasViewport.x, canvasViewport.y];
+    // ── Sync props → local state ──────────────────────────────────────────────────
     useEffect(() => { setLocalTasks(tasks); }, [tasks]);
     useEffect(() => { setLocalDocuments(documents); }, [documents]);
-    // effect — polls until fabricCanvas.current is available:
+    // ── Poll until Fabric canvas is ready ────────────────────────────────────────
     useEffect(() => {
         if (canvasReady)
             return;
@@ -37,7 +55,6 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             setCanvasReady(true);
             return;
         }
-        // Poll every 50ms until canvas is ready (only needed on first load)
         const interval = setInterval(() => {
             if (fabricCanvas?.current) {
                 setCanvasReady(true);
@@ -46,68 +63,46 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         }, 50);
         return () => clearInterval(interval);
     }, [fabricCanvas, canvasReady]);
-    // ── Event Forwarding (Fixes Zooming on Nodes) ───────────────────────────────
-    const handleOverlayWheel = (e) => {
-        if (e.ctrlKey || e.metaKey || e.shiftKey) {
-            const canvas = fabricCanvas?.current;
-            if (!canvas)
-                return;
-            const nativeEvent = e.nativeEvent;
-            // getScenePoint handles the transformation from screen to canvas space
-            const scenePoint = canvas.getScenePoint(nativeEvent);
-            // Viewport point is simply the mouse position relative to the canvas element
-            const rect = canvas.getElement().getBoundingClientRect();
-            const viewportPoint = {
-                x: nativeEvent.clientX - rect.left,
-                y: nativeEvent.clientY - rect.top,
-            };
-            // 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,
-                scenePoint,
-                viewportPoint,
-            });
-            e.preventDefault();
-            e.stopPropagation();
-        }
-    };
+    // ── Sync liveVptRef directly from Fabric on every viewport change ─────────────
+    // This is the critical piece: we hook into Fabric's own viewport events so
+    // liveVptRef is updated BEFORE React re-renders, not after.
+    useEffect(() => {
+        const canvas = fabricCanvas?.current;
+        if (!canvas)
+            return;
+        const syncVpt = () => {
+            const vpt = canvas.viewportTransform;
+            if (vpt)
+                liveVptRef.current = [...vpt];
+        };
+        // These fire on every pan/zoom frame
+        canvas.on("after:render", syncVpt);
+        return () => {
+            canvas.off("after:render", syncVpt);
+        };
+    }, [fabricCanvas, canvasReady]);
+    // ── Event forwarding: wheel over nodes → Fabric ───────────────────────────────
     useEffect(() => {
         const overlayEl = overlayRef.current;
         const canvas = fabricCanvas?.current;
         if (!overlayEl || !canvas)
             return;
         const handleGlobalWheel = (e) => {
-            // Check if the user is hovering over an element that has pointer-events: auto
-            // (meaning they are hovering over a Task or Document)
             const target = e.target;
             const isOverNode = target !== overlayEl;
             if ((e.ctrlKey || e.metaKey) && isOverNode) {
-                // 1. Prevent Browser Zoom immediately
                 e.preventDefault();
                 e.stopPropagation();
-                // 2. Calculate coordinates for Fabric
                 const scenePoint = canvas.getScenePoint(e);
                 const rect = canvas.getElement().getBoundingClientRect();
-                const viewportPoint = {
-                    x: e.clientX - rect.left,
-                    y: e.clientY - rect.top,
-                };
-                // 3. Manually fire the event into Fabric
-                canvas.fire("mouse:wheel", {
-                    e: e,
-                    scenePoint,
-                    viewportPoint,
-                });
+                const viewportPoint = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+                canvas.fire("mouse:wheel", { e, scenePoint, viewportPoint });
             }
         };
-        // CRITICAL: { passive: false } allows us to cancel the browser's zoom
         overlayEl.addEventListener("wheel", handleGlobalWheel, { passive: false });
-        return () => {
-            overlayEl.removeEventListener("wheel", handleGlobalWheel);
-        };
-    }, [fabricCanvas, canvasZoom, canvasReady]); // Re-bind when zoom changes to keep closure fresh
-    // ── Fabric → Overlay Sync (Fixes Dragging from Fabric area) ──────────────────
+        return () => overlayEl.removeEventListener("wheel", handleGlobalWheel);
+    }, [fabricCanvas, canvasReady]);
+    // ── Fabric object:moving → sync HTML nodes ────────────────────────────────────
     useEffect(() => {
         const canvas = fabricCanvas?.current;
         if (!canvas)
@@ -122,10 +117,17 @@ 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));
+            setLocalTasks((prev) => {
+                const next = prev.map((t) => sel.has(t.id) ? { ...t, x: t.x + deltaX, y: t.y + deltaY } : t);
+                localTasksRef.current = next;
+                return next;
+            });
+            setLocalDocuments((prev) => {
+                const next = prev.map((d) => sel.has(d.id) ? { ...d, x: d.x + deltaX, y: d.y + deltaY } : d);
+                localDocumentsRef.current = next;
+                return next;
+            });
         };
         const handleMouseDown = (e) => {
             const target = e.target;
@@ -137,22 +139,16 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
                 setSelectedIds(new Set());
                 return;
             }
-            // At zoom=1 with identity VPT, getActiveObject() can return null before
-            // Fabric updates _activeObject. Use e.transform as the primary check —
-            // it is populated by Fabric's hit-test regardless of zoom level.
-            const transformTarget = e.transform?.target;
             const activeObject = canvas.getActiveObject();
             const activeObjects = canvas.getActiveObjects();
-            const isPartOfActiveSelection = transformTarget === target || // most reliable — direct from event
-                activeObject === target || // selection box group
-                activeObjects.includes(target); // individual object in multi-select
-            if (!isPartOfActiveSelection) {
+            const transformTarget = e.transform?.target;
+            const isPartOfActiveSelection = transformTarget === target ||
+                activeObject === target ||
+                activeObjects.includes(target);
+            if (!isPartOfActiveSelection)
                 setSelectedIds(new Set());
-            }
-        };
-        const handleSelectionCleared = () => {
-            setSelectedIds(new Set());
         };
+        const handleSelectionCleared = () => setSelectedIds(new Set());
         canvas.on("object:moving", handleObjectMoving);
         canvas.on("mouse:down", handleMouseDown);
         canvas.on("selection:cleared", handleSelectionCleared);
@@ -161,100 +157,101 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             canvas.off("mouse:down", handleMouseDown);
             canvas.off("selection:cleared", handleSelectionCleared);
         };
-        // ── 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]);
-    // ── Helpers ─────────────────────────────────────────────────────────────────
-    const getItemPosition = (id) => {
-        const task = localTasks.find((t) => t.id === id);
+    }, [fabricCanvas, canvasReady]);
+    // ── Helpers ───────────────────────────────────────────────────────────────────
+    // Always reads from refs — never from stale closure state
+    const getItemPosition = useCallback((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;
-    };
-    const isItemInSelectionBox = (x, y, width, height, box) => {
-        const itemX1 = x * canvasZoom + canvasViewport.x;
-        const itemY1 = y * canvasZoom + canvasViewport.y;
-        const itemX2 = itemX1 + width * canvasZoom;
-        const itemY2 = itemY1 + height * canvasZoom;
-        const boxX1 = Math.min(box.x1, box.x2);
-        const boxY1 = Math.min(box.y1, box.y2);
-        const boxX2 = Math.max(box.x1, box.x2);
-        const boxY2 = Math.max(box.y1, box.y2);
-        return !(boxX2 < itemX1 || boxX1 > itemX2 || boxY2 < itemY1 || boxY1 > itemY2);
-    };
-    // ── Selection box detection ──────────────────────────────────────────────────
+    }, [] // no deps — reads from refs, always fresh
+    );
+    // ── Selection box ─────────────────────────────────────────────────────────────
     useEffect(() => {
         if (!selectionBox)
             return;
-        // ── O(n) single pass — no sort, no join, no extra allocations ──
+        const vpt = liveVptRef.current;
+        const zoom = vpt[0];
+        const vpX = vpt[4];
+        const vpY = vpt[5];
         const newSelected = new Set();
+        const check = (x, y, w, h) => {
+            // Use the same worldToScreen math for accurate hit testing
+            const sx = x * zoom + vpX;
+            const sy = y * zoom + vpY;
+            const sx2 = sx + w * zoom;
+            const sy2 = sy + h * zoom;
+            const bx1 = Math.min(selectionBox.x1, selectionBox.x2);
+            const by1 = Math.min(selectionBox.y1, selectionBox.y2);
+            const bx2 = Math.max(selectionBox.x1, selectionBox.x2);
+            const by2 = Math.max(selectionBox.y1, selectionBox.y2);
+            return !(bx2 < sx || bx1 > sx2 || by2 < sy || by1 > sy2);
+        };
         for (const task of localTasks) {
-            if (isItemInSelectionBox(task.x, task.y, 300, 140, selectionBox))
+            if (check(task.x, task.y, 300, 140))
                 newSelected.add(task.id);
         }
         for (const doc of localDocuments) {
-            if (isItemInSelectionBox(doc.x, doc.y, 320, 160, selectionBox))
+            if (check(doc.x, doc.y, 320, 160))
                 newSelected.add(doc.id);
         }
-        // ── O(n) equality check: size first (fast path), then membership ──
         setSelectedIds((prev) => {
             if (prev.size !== newSelected.size)
                 return newSelected;
-            for (const id of newSelected) {
+            for (const id of newSelected)
                 if (!prev.has(id))
-                    return newSelected; // found a difference, swap
-            }
-            return prev; // identical — return same reference, no re-render
+                    return newSelected;
+            return prev;
         });
     }, [selectionBox, localTasks, localDocuments, canvasZoom, canvasViewport]);
-    // ── Drag start (HTML Node side) ──────────────────────────────────────────────
-    // Helper to extract coordinates regardless of event type
-    const getPointerEvent = (e) => {
-        if ('touches' in e && e.touches.length > 0)
-            return e.touches[0];
+    // ── Drag start ────────────────────────────────────────────────────────────────
+    const getPointerCoords = (e) => {
+        if ("touches" in e && e.touches.length > 0)
+            return { clientX: e.touches[0].clientX, clientY: e.touches[0].clientY };
         return e;
     };
-    const handleDragStart = (itemId, e) => {
+    const handleDragStart = useCallback((itemId, e) => {
         const canvas = fabricCanvas?.current;
         if (!canvas)
             return;
         if (e.cancelable)
             e.preventDefault();
-        const pointer = getPointerEvent(e);
-        let itemsToDrag;
-        if (selectedIds.has(itemId)) {
-            itemsToDrag = Array.from(selectedIds);
-        }
-        else {
-            itemsToDrag = [itemId];
-            setSelectedIds(new Set([itemId]));
-        }
+        const pointer = getPointerCoords(e);
+        // ✅ Use selectedIdsRef — never the closure's selectedIds
+        const currentSelected = selectedIdsRef.current;
+        const itemsToDrag = currentSelected.has(itemId)
+            ? Array.from(currentSelected)
+            : [itemId];
+        // ✅ Read VPT directly from canvas — zero-frame-lag, not from props
         const vpt = canvas.viewportTransform || [1, 0, 0, 1, 0, 0];
-        const liveZoom = vpt[0];
-        const liveVpX = vpt[4];
-        const liveVpY = vpt[5];
-        const clickWorldX = (pointer.clientX - liveVpX) / liveZoom;
-        const clickWorldY = (pointer.clientY - liveVpY) / liveZoom;
+        const zoom = vpt[0];
+        const vpX = vpt[4];
+        const vpY = vpt[5];
+        // Click position in world space
+        const clickWorldX = (pointer.clientX - vpX) / zoom;
+        const clickWorldY = (pointer.clientY - vpY) / zoom;
+        // ✅ Use getItemPosition which reads from refs
         const clickedPos = getItemPosition(itemId);
         if (!clickedPos)
             return;
         const worldOffsetX = clickWorldX - clickedPos.x;
         const worldOffsetY = clickWorldY - clickedPos.y;
+        // Snapshot all dragged items' start positions from refs
         const startPositions = new Map();
-        itemsToDrag.forEach((id) => {
+        for (const id of itemsToDrag) {
             const pos = getItemPosition(id);
             if (pos)
-                startPositions.set(id, pos);
-        });
+                startPositions.set(id, { ...pos });
+        }
+        // Snapshot Fabric objects
         const canvasObjectsStartPos = new Map();
-        selectedCanvasObjects.forEach((obj) => {
-            canvasObjectsStartPos.set(obj, { left: obj.left || 0, top: obj.top || 0 });
-        });
+        for (const obj of selectedCanvasObjects) {
+            canvasObjectsStartPos.set(obj, { left: obj.left ?? 0, top: obj.top ?? 0 });
+        }
         dragStateRef.current = {
             isDragging: true,
             itemIds: itemsToDrag,
@@ -263,23 +260,25 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             offsetX: worldOffsetX,
             offsetY: worldOffsetY,
         };
+        // Select solo item if it wasn't already selected
+        if (!currentSelected.has(itemId)) {
+            setSelectedIds(new Set([itemId]));
+        }
         setDragging({ itemIds: itemsToDrag });
-        // ── ATTACH LISTENERS DIRECTLY ──
         document.body.style.cursor = "grabbing";
         document.body.style.userSelect = "none";
-    };
-    // ── Drag move (HTML Node side) ───────────────────────────────────────────────
+        document.body.style.touchAction = "none";
+    }, [fabricCanvas, selectedCanvasObjects, getItemPosition]);
+    // ── Drag move ─────────────────────────────────────────────────────────────────
     useEffect(() => {
         if (!dragging)
             return;
-        // Inside the useEffect that watches [dragging, localTasks, localDocuments, fabricCanvas]
         const handleMove = (e) => {
             if (!dragStateRef.current.isDragging)
                 return;
             if (e.cancelable)
                 e.preventDefault();
-            const pointer = getPointerEvent(e);
-            // 1. Throttle updates using requestAnimationFrame for 120Hz/144Hz screen support
+            const pointer = getPointerCoords(e);
             if (rafIdRef.current !== null)
                 cancelAnimationFrame(rafIdRef.current);
             rafIdRef.current = requestAnimationFrame(() => {
@@ -287,64 +286,69 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
                 const canvas = fabricCanvas?.current;
                 if (!canvas)
                     return;
-                // 2. Read the "Source of Truth" transform from the canvas
+                // ✅ ALWAYS read VPT from canvas — this is the fix for the jump.
+                // Props (canvasZoom, canvasViewport) are one React render behind.
+                // canvas.viewportTransform is synchronous and always current.
                 const vpt = canvas.viewportTransform;
-                const liveZoom = vpt[0]; // Scale
-                const liveVpX = vpt[4]; // Pan X
-                const liveVpY = vpt[5]; // Pan Y
-                // 3. Convert current Mouse Screen Position → World Position
-                const currentWorldX = (pointer.clientX - liveVpX) / liveZoom;
-                const currentWorldY = (pointer.clientY - liveVpY) / liveZoom;
-                // 4. Calculate where the "Anchor" node should be in World Units
-                // (Current Mouse World - Initial World Offset from Start)
+                const zoom = vpt[0];
+                const vpX = vpt[4];
+                const vpY = vpt[5];
+                // Mouse in world space
+                const currentWorldX = (pointer.clientX - vpX) / zoom;
+                const currentWorldY = (pointer.clientY - vpY) / zoom;
+                // Where the anchor node's top-left should be
                 const newWorldX = currentWorldX - offsetX;
                 const newWorldY = currentWorldY - offsetY;
-                // 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);
+                // Delta from each item's snapshot position
+                const firstStart = startPositions.get(itemIds[0]);
                 if (!firstStart)
                     return;
                 const deltaX = newWorldX - firstStart.x;
                 const deltaY = newWorldY - firstStart.y;
-                // 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));
-                // 7. Sync Fabric Objects (Imperative update for performance)
+                // Update HTML nodes — write-through to ref for handleEnd
+                setLocalTasks((prev) => {
+                    const next = 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);
+                    localTasksRef.current = next;
+                    return next;
+                });
+                setLocalDocuments((prev) => {
+                    const next = 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);
+                    localDocumentsRef.current = next;
+                    return next;
+                });
+                // Sync Fabric objects
                 canvasObjectsStartPos.forEach((startPos, obj) => {
-                    obj.set({
-                        left: startPos.left + deltaX,
-                        top: startPos.top + deltaY,
-                    });
-                    obj.setCoords(); // Required for selection/intersection accuracy
+                    obj.set({ left: startPos.left + deltaX, top: startPos.top + deltaY });
+                    obj.setCoords();
                 });
-                // 8. Single render call for all Fabric changes
                 canvas.requestRenderAll();
             });
         };
         const handleEnd = () => {
-            if (rafIdRef.current !== null)
+            if (rafIdRef.current !== null) {
                 cancelAnimationFrame(rafIdRef.current);
-            // 1. Kill the flag first
+                rafIdRef.current = null;
+            }
             dragStateRef.current.isDragging = false;
             setDragging(null);
-            // 2. Remove the listeners immediately
-            window.removeEventListener("mousemove", handleMove);
-            window.removeEventListener("mouseup", handleEnd);
-            window.removeEventListener("touchmove", handleMove);
-            window.removeEventListener("touchend", handleEnd);
             document.body.style.cursor = "";
             document.body.style.userSelect = "";
-            onTasksUpdate?.(localTasks);
-            onDocumentsUpdate?.(localDocuments);
+            document.body.style.touchAction = "";
+            // ✅ Always read from refs — never stale closure values
+            onTasksUpdate?.(localTasksRef.current);
+            onDocumentsUpdate?.(localDocumentsRef.current);
         };
         window.addEventListener("mousemove", handleMove, { passive: false });
         window.addEventListener("mouseup", handleEnd);
@@ -358,46 +362,33 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             window.removeEventListener("touchend", handleEnd);
             window.removeEventListener("touchcancel", handleEnd);
         };
-    }, [dragging, localTasks, localDocuments, fabricCanvas]);
-    // ── Selection, Status, Keyboard Logic ────────────────────────────────────────
-    const handleSelect = (id, e) => {
-        if (e?.shiftKey || e?.ctrlKey || e?.metaKey) {
-            setSelectedIds((prev) => {
-                const next = new Set(prev);
-                next.has(id) ? next.delete(id) : next.add(id);
-                return next;
-            });
-        }
-        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);
-    };
+        // ✅ localTasks/localDocuments removed from deps — read via refs in handleEnd.
+        // Only 'dragging' and 'fabricCanvas' needed here.
+    }, [dragging, fabricCanvas]);
+    // ── Keyboard shortcuts ────────────────────────────────────────────────────────
     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)]));
+                // Read from refs — avoids stale closure on localTasks/localDocuments
+                setSelectedIds(new Set([
+                    ...localTasksRef.current.map((t) => t.id),
+                    ...localDocumentsRef.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 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);
+                localTasksRef.current = updatedTasks;
+                localDocumentsRef.current = updatedDocs;
                 setSelectedIds(new Set());
                 onTasksUpdate?.(updatedTasks);
                 onDocumentsUpdate?.(updatedDocs);
@@ -405,34 +396,63 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         };
         window.addEventListener("keydown", handleKeyDown);
         return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [localTasks, localDocuments, selectedIds, onTasksUpdate, onDocumentsUpdate]);
-    // ── 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);
+        // ✅ No localTasks/localDocuments/selectedIds in deps — all read via refs
+    }, [onTasksUpdate, onDocumentsUpdate]);
+    // ── handleSelect / handleStatusChange ─────────────────────────────────────────
+    const handleSelect = useCallback((id, e) => {
+        if (e?.shiftKey || e?.ctrlKey || e?.metaKey) {
+            setSelectedIds((prev) => {
+                const next = new Set(prev);
+                next.has(id) ? next.delete(id) : next.add(id);
+                return next;
+            });
+        }
+        else {
+            setSelectedIds(new Set([id]));
+        }
+    }, []);
+    const handleStatusChange = useCallback((taskId, newStatus) => {
+        setLocalTasks((prev) => {
+            const next = prev.map((t) => (t.id === taskId ? { ...t, status: newStatus } : t));
+            localTasksRef.current = next;
+            onTasksUpdate?.(next);
+            return next;
+        });
+    }, [onTasksUpdate]);
+    // ── Render each node ──────────────────────────────────────────────────────────
+    // ✅ THE CORE FIX: Single collapsed transform.
+    // Old approach had TWO transforms:
+    //   parent: translate(vpX, vpY)
+    //   child:  translate(x*zoom, y*zoom) scale(zoom)
+    // These two transforms use props that update at different React render cycles,
+    // causing a 1-frame mismatch = visible jump on multi-select drag.
+    //
+    // New approach: ONE transform on each node using the live VPT matrix directly.
+    // Formula: screenPos = worldPos * zoom + vpOffset  (identical to Fabric's math)
+    const renderItem = (id, worldX, worldY, children) => {
+        const vpt = liveVptRef.current;
+        const zoom = vpt[0];
+        const vpX = vpt[4];
+        const vpY = vpt[5];
+        // Exact same calculation Fabric uses for its own objects
+        const screenX = worldX * zoom + vpX;
+        const screenY = worldY * zoom + vpY;
+        const isDraggingThis = dragging?.itemIds.includes(id) ?? false;
         return (_jsx("div", { className: "pointer-events-auto absolute", style: {
                 left: 0,
                 top: 0,
-                // 2. Use translate3d for GPU performance
-                transform: `translate3d(${screenX}px, ${screenY}px, 0) scale(${canvasZoom})`,
+                // Single transform — no double-transform mismatch possible
+                transform: `translate3d(${screenX}px, ${screenY}px, 0) scale(${zoom})`,
                 transformOrigin: "top left",
-                // 3. THE FIX: Remove transition entirely during any viewport change
-                // Any 'ease' during zoom causes the "shaking" behavior.
                 transition: "none",
-                // 4. Optimization
                 willChange: "transform",
-                zIndex: isDragging ? 1000 : 1,
+                zIndex: isDraggingThis ? 1000 : 1,
             }, children: children }, id));
     };
-    return (_jsx("div", { ref: overlayRef, className: "absolute inset-0 pointer-events-none", style: { zIndex: 50 }, onWheel: handleOverlayWheel, onClick: (e) => {
+    return (
+    // ✅ No wrapper div with viewport transform anymore — it's collapsed into each node
+    _jsxs("div", { ref: overlayRef, className: "absolute inset-0 pointer-events-none", style: { zIndex: 50 }, onClick: (e) => {
             if (e.target === e.currentTarget)
                 setSelectedIds(new Set());
-        }, 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(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 })))] }));
 }

package/package.json

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