@mhamz.01/easyflow-whiteboard 2.9.0 → 2.10.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;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;CAC/C;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,2CAkezB"}
+{"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;CAC/C;AAeD,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,2CA2bzB"}

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

@@ -1,6 +1,6 @@
 "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";
 // ─── Component ────────────────────────────────────────────────────────────────
@@ -8,7 +8,9 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
     const [localTasks, setLocalTasks] = useState(tasks);
     const [localDocuments, setLocalDocuments] = useState(documents);
     const [selectedIds, setSelectedIds] = useState(new Set());
-    const [dragging, setDragging] = useState(null);
+    // ── Single drag state ref — no useState for dragging ──────────────────────
+    // This is the core fix: dragging state lives ONLY in a ref, never triggers
+    // re-renders, so the mousemove/mouseup listeners are NEVER torn down mid-drag.
     const dragStateRef = useRef({
         isDragging: false,
         itemIds: [],
@@ -17,92 +19,69 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         offsetX: 0,
         offsetY: 0,
     });
+    // Tracks whether an HTML node drag is active — blocks object:moving sync
+    const isHtmlDraggingRef = useRef(false);
     const rafIdRef = useRef(null);
     const overlayRef = useRef(null);
-    // ── Sync props → local state ────────────────────────────────────────────────
+    // ── Positions ref — synchronously updated every render, zero staleness ────
+    // Avoids stale closure problem in handleDragStart reading localTasks state
+    const nodePositionsRef = useRef(new Map());
+    nodePositionsRef.current = new Map([
+        ...localTasks.map((t) => [t.id, { x: t.x, y: t.y }]),
+        ...localDocuments.map((d) => [d.id, { x: d.x, y: d.y }]),
+    ]);
+    // ── selectedIds ref — so object:moving closure always has fresh selectedIds ─
+    const selectedIdsRef = useRef(selectedIds);
+    selectedIdsRef.current = selectedIds;
+    // ── Sync props → local state ───────────────────────────────────────────────
     useEffect(() => { setLocalTasks(tasks); }, [tasks]);
     useEffect(() => { setLocalDocuments(documents); }, [documents]);
-    // ── 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();
-        }
-    };
+    // ── Wheel forwarding to 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,
+                    e,
                     scenePoint,
-                    viewportPoint,
+                    viewportPoint: { x: e.clientX - rect.left, y: e.clientY - rect.top },
                 });
             }
         };
-        // CRITICAL: { passive: false } allows us to cancel the browser's zoom
         overlayEl.addEventListener("wheel", handleGlobalWheel, { passive: false });
-        return () => {
-            overlayEl.removeEventListener("wheel", handleGlobalWheel);
-        };
-    }, [fabricCanvas, canvasZoom]); // Re-bind when zoom changes to keep closure fresh
-    // ── Fabric → Overlay Sync (Fixes Dragging from Fabric area) ──────────────────
+        return () => overlayEl.removeEventListener("wheel", handleGlobalWheel);
+    }, [fabricCanvas]);
+    // ── Fabric → Overlay sync (drag Fabric obj, HTML nodes follow) ────────────
     useEffect(() => {
         const canvas = fabricCanvas?.current;
         if (!canvas)
             return;
         const handleObjectMoving = (e) => {
+            // CRITICAL: Skip entirely during HTML node drag — prevents position fighting
+            if (isHtmlDraggingRef.current)
+                return;
             const target = e.transform?.target || e.target;
             if (!target)
                 return;
-            // 1. Calculate delta in raw Scene Coordinates
-            // We do NOT divide by zoom here because target.left/top are world units.
             const deltaX = target.left - (target._prevLeft ?? target.left);
             const deltaY = target.top - (target._prevTop ?? target.top);
             target._prevLeft = target.left;
             target._prevTop = target.top;
             if (deltaX === 0 && deltaY === 0)
                 return;
-            // 2. Apply the raw delta to HTML items
-            setLocalTasks((prev) => prev.map((t) => (selectedIds.has(t.id) ? { ...t, x: t.x + deltaX, y: t.y + deltaY } : t)));
-            setLocalDocuments((prev) => prev.map((d) => (selectedIds.has(d.id) ? { ...d, x: d.x + deltaX, y: d.y + deltaY } : d)));
+            // Use selectedIdsRef — always fresh, no stale closure
+            const currentSelected = selectedIdsRef.current;
+            setLocalTasks((prev) => prev.map((t) => currentSelected.has(t.id) ? { ...t, x: t.x + deltaX, y: t.y + deltaY } : t));
+            setLocalDocuments((prev) => prev.map((d) => currentSelected.has(d.id) ? { ...d, x: d.x + deltaX, y: d.y + deltaY } : d));
         };
         const handleMouseDown = (e) => {
             const target = e.target;
@@ -117,17 +96,9 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             canvas.off("object:moving", handleObjectMoving);
             canvas.off("mouse:down", handleMouseDown);
         };
-    }, [canvasZoom, selectedIds, fabricCanvas]);
-    // ── Helpers ─────────────────────────────────────────────────────────────────
-    const getItemPosition = (id) => {
-        const task = localTasks.find((t) => t.id === id);
-        if (task)
-            return { x: task.x, y: task.y };
-        const doc = localDocuments.find((d) => d.id === id);
-        if (doc)
-            return { x: doc.x, y: doc.y };
-        return undefined;
-    };
+        // No selectedIds in deps — we use selectedIdsRef instead. Stable registration.
+    }, [fabricCanvas]);
+    // ── Selection box hit detection ────────────────────────────────────────────
     const isItemInSelectionBox = (x, y, width, height, box) => {
         const itemX1 = x * canvasZoom + canvasViewport.x;
         const itemY1 = y * canvasZoom + canvasViewport.y;
@@ -139,11 +110,9 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         const boxY2 = Math.max(box.y1, box.y2);
         return !(boxX2 < itemX1 || boxX1 > itemX2 || boxY2 < itemY1 || boxY1 > itemY2);
     };
-    // ── Selection box detection ──────────────────────────────────────────────────
     useEffect(() => {
         if (!selectionBox)
             return;
-        // ── O(n) single pass — no sort, no join, no extra allocations ──
         const newSelected = new Set();
         for (const task of localTasks) {
             if (isItemInSelectionBox(task.x, task.y, 300, 140, selectionBox))
@@ -153,116 +122,64 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             if (isItemInSelectionBox(doc.x, doc.y, 320, 160, selectionBox))
                 newSelected.add(doc.id);
         }
-        // ── O(n) equality check: size first (fast path), then membership ──
+        // O(n) equality — return same ref if unchanged, prevents re-render
         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]);
-    // ── 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];
-        return e;
-    };
-    const handleDragStart = (itemId, e) => {
-        const canvas = fabricCanvas?.current;
-        if (!canvas || !e)
-            return;
-        // Use the raw native event for the most accurate pointer position
-        const nativeEvent = 'nativeEvent' in e ? e.nativeEvent : e;
-        const pointer = getPointerEvent(nativeEvent);
-        // 1. Get the ABSOLUTE current transform from the canvas engine
-        const vpt = canvas.viewportTransform || [1, 0, 0, 1, 0, 0];
-        const zoom = vpt[0];
-        const vpX = vpt[4];
-        const vpY = vpt[5];
-        // 2. Calculate World Position of the mouse click immediately
-        const clickWorldX = (pointer.clientX - vpX) / zoom;
-        const clickWorldY = (pointer.clientY - vpY) / zoom;
-        // 3. Get the item's current world position
-        const clickedPos = getItemPosition(itemId);
-        if (!clickedPos)
-            return;
-        // 4. Calculate the WORLD OFFSET
-        // This is the distance from the mouse to the node's top-left in World Units.
-        const worldOffsetX = clickWorldX - clickedPos.x;
-        const worldOffsetY = clickWorldY - clickedPos.y;
-        // 5. Setup Drag State
-        let itemsToDrag = selectedIds.has(itemId) ? Array.from(selectedIds) : [itemId];
-        if (!selectedIds.has(itemId))
-            setSelectedIds(new Set([itemId]));
-        const startPositions = new Map();
-        itemsToDrag.forEach(id => {
-            const pos = getItemPosition(id);
-            if (pos)
-                startPositions.set(id, pos);
-        });
-        const canvasObjectsStartPos = new Map();
-        selectedCanvasObjects.forEach(obj => {
-            canvasObjectsStartPos.set(obj, { left: obj.left || 0, top: obj.top || 0 });
-        });
-        dragStateRef.current = {
-            isDragging: true,
-            itemIds: itemsToDrag,
-            startPositions,
-            canvasObjectsStartPos,
-            offsetX: worldOffsetX,
-            offsetY: worldOffsetY,
-        };
-        setDragging({ itemIds: itemsToDrag });
-    };
-    // ── Drag move (HTML Node side) ───────────────────────────────────────────────
+    // ── Global drag listeners — attached ONCE, never torn down mid-drag ────────
+    // This is the core architectural fix. Instead of putting listeners inside a
+    // useEffect that watches [dragging], we attach them ONCE on mount and read
+    // dragStateRef inside them. This means there is zero listener churn,
+    // zero double-fires, and zero stale closure issues.
     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 = "touches" in e && e.touches.length > 0
+                ? e.touches[0]
+                : e;
             if (rafIdRef.current !== null)
                 cancelAnimationFrame(rafIdRef.current);
-            // Inside handleMove rAF
             rafIdRef.current = requestAnimationFrame(() => {
                 const { itemIds, startPositions, canvasObjectsStartPos, offsetX, offsetY } = dragStateRef.current;
                 const canvas = fabricCanvas?.current;
                 if (!canvas)
                     return;
+                // Read live VPT — frame-perfect, no React state lag
                 const vpt = canvas.viewportTransform;
-                const zoom = vpt[0];
-                const vpX = vpt[4];
-                const vpY = vpt[5];
-                // Current World position of the mouse
-                const currentWorldX = (pointer.clientX - vpX) / zoom;
-                const currentWorldY = (pointer.clientY - vpY) / zoom;
-                // The new world position of the node we are holding
-                const newX = currentWorldX - offsetX;
-                const newY = currentWorldY - offsetY;
-                const firstId = itemIds[0];
-                const firstStart = startPositions.get(firstId);
+                const liveZoom = vpt[0];
+                const liveVpX = vpt[4];
+                const liveVpY = vpt[5];
+                // Screen → World
+                const currentWorldX = (pointer.clientX - liveVpX) / liveZoom;
+                const currentWorldY = (pointer.clientY - liveVpY) / liveZoom;
+                // Subtract world-space offset → exact world position of node top-left
+                const newWorldX = currentWorldX - offsetX;
+                const newWorldY = currentWorldY - offsetY;
+                // Delta from snapshotted start position of the anchor (first) item
+                const firstStart = startPositions.get(itemIds[0]);
                 if (!firstStart)
                     return;
-                const deltaX = newX - firstStart.x;
-                const deltaY = newY - firstStart.y;
-                // UPDATE: Only update if the delta has actually changed to prevent jitter
-                if (Math.abs(deltaX) < 0.01 && Math.abs(deltaY) < 0.01)
-                    return;
-                setLocalTasks(prev => prev.map(t => itemIds.includes(t.id) ? {
+                const deltaX = newWorldX - firstStart.x;
+                const deltaY = newWorldY - firstStart.y;
+                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));
-                // Sync Fabric objects directly
+                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));
                 canvasObjectsStartPos.forEach((startPos, obj) => {
                     obj.set({ left: startPos.left + deltaX, top: startPos.top + deltaY });
                     obj.setCoords();
@@ -270,16 +187,21 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
                 canvas.requestRenderAll();
             });
         };
-        const handleEnd = () => {
-            if (rafIdRef.current !== null)
+        const handleEnd = (e) => {
+            if (!dragStateRef.current.isDragging)
+                return;
+            if (rafIdRef.current !== null) {
                 cancelAnimationFrame(rafIdRef.current);
+                rafIdRef.current = null;
+            }
             dragStateRef.current.isDragging = false;
-            setDragging(null);
+            isHtmlDraggingRef.current = false;
             document.body.style.cursor = "";
             document.body.style.userSelect = "";
             document.body.style.touchAction = "";
-            onTasksUpdate?.(localTasks);
-            onDocumentsUpdate?.(localDocuments);
+            // Flush final positions to parent
+            setLocalTasks((prev) => { onTasksUpdate?.(prev); return prev; });
+            setLocalDocuments((prev) => { onDocumentsUpdate?.(prev); return prev; });
         };
         window.addEventListener("mousemove", handleMove, { passive: false });
         window.addEventListener("mouseup", handleEnd);
@@ -293,9 +215,72 @@ 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) => {
+        // Empty deps — attached once on mount, reads everything via refs
+    }, [fabricCanvas, onTasksUpdate, onDocumentsUpdate]);
+    // ── Drag start ─────────────────────────────────────────────────────────────
+    const handleDragStart = useCallback((itemId, e) => {
+        if (e.cancelable)
+            e.preventDefault();
+        const canvas = fabricCanvas?.current;
+        if (!canvas)
+            return;
+        const pointer = "touches" in e && e.touches.length > 0
+            ? e.touches[0]
+            : e;
+        // Determine drag group
+        const currentSelected = selectedIdsRef.current;
+        let itemsToDrag;
+        if (currentSelected.has(itemId)) {
+            itemsToDrag = Array.from(currentSelected);
+        }
+        else {
+            itemsToDrag = [itemId];
+            setSelectedIds(new Set([itemId]));
+        }
+        // Read VPT live — zero lag
+        const vpt = canvas.viewportTransform || [1, 0, 0, 1, 0, 0];
+        const liveZoom = vpt[0];
+        const liveVpX = vpt[4];
+        const liveVpY = vpt[5];
+        // Convert pointer → world
+        const pointerWorldX = (pointer.clientX - liveVpX) / liveZoom;
+        const pointerWorldY = (pointer.clientY - liveVpY) / liveZoom;
+        // Read positions from ref — synchronously updated every render, NEVER stale
+        const clickedPos = nodePositionsRef.current.get(itemId);
+        if (!clickedPos)
+            return;
+        // World-space offset: how far pointer is from node's top-left, in world units
+        const worldOffsetX = pointerWorldX - clickedPos.x;
+        const worldOffsetY = pointerWorldY - clickedPos.y;
+        // Snapshot all start positions from ref (not state — avoids async lag)
+        const startPositions = new Map();
+        for (const id of itemsToDrag) {
+            const pos = nodePositionsRef.current.get(id);
+            if (pos)
+                startPositions.set(id, { x: pos.x, y: pos.y });
+        }
+        // Snapshot Fabric object positions
+        const canvasObjectsStartPos = new Map();
+        selectedCanvasObjects.forEach((obj) => {
+            canvasObjectsStartPos.set(obj, { left: obj.left || 0, top: obj.top || 0 });
+        });
+        // Commit to ref — handleMove reads this, no state update needed
+        dragStateRef.current = {
+            isDragging: true,
+            itemIds: itemsToDrag,
+            startPositions,
+            canvasObjectsStartPos,
+            offsetX: worldOffsetX,
+            offsetY: worldOffsetY,
+        };
+        // Block object:moving from fighting our position updates
+        isHtmlDraggingRef.current = true;
+        document.body.style.cursor = "grabbing";
+        document.body.style.userSelect = "none";
+        document.body.style.touchAction = "none";
+    }, [fabricCanvas, selectedCanvasObjects]);
+    // ── Node select ────────────────────────────────────────────────────────────
+    const handleSelect = useCallback((id, e) => {
         if (e?.shiftKey || e?.ctrlKey || e?.metaKey) {
             setSelectedIds((prev) => {
                 const next = new Set(prev);
@@ -306,64 +291,54 @@ 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);
+            onTasksUpdate?.(updated);
+            return updated;
+        });
+    }, [onTasksUpdate]);
+    // ── 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)]));
+                setSelectedIds(new Set([
+                    ...localTasks.map((t) => t.id),
+                    ...localDocuments.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));
-                setLocalTasks(updatedTasks);
-                setLocalDocuments(updatedDocs);
+                const ids = selectedIdsRef.current;
+                setLocalTasks((prev) => { const u = prev.filter((t) => !ids.has(t.id)); onTasksUpdate?.(u); return u; });
+                setLocalDocuments((prev) => { const u = prev.filter((d) => !ids.has(d.id)); onDocumentsUpdate?.(u); return u; });
                 setSelectedIds(new Set());
-                onTasksUpdate?.(updatedTasks);
-                onDocumentsUpdate?.(updatedDocs);
             }
         };
         window.addEventListener("keydown", handleKeyDown);
         return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [localTasks, localDocuments, selectedIds, onTasksUpdate, onDocumentsUpdate]);
-    // ── Render helper ────────────────────────────────────────────────────────────
+    }, [localTasks, localDocuments, onTasksUpdate, onDocumentsUpdate]);
+    // ── Render ─────────────────────────────────────────────────────────────────
     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,
                 top: 0,
-                // 2. Use translate3d for GPU performance
                 transform: `translate3d(${screenX}px, ${screenY}px, 0) scale(${canvasZoom})`,
                 transformOrigin: "top left",
-                // 3. THE FIX: Remove transition entirely during any viewport change
-                // Any 'ease' during zoom causes the "shaking" behavior.
-                transition: isDragging ? 'none' : 'transform 0.1s ease-out',
-                // 4. Optimization
+                transition: "none",
                 willChange: "transform",
-                zIndex: isDragging ? 1000 : 1,
+                zIndex: dragStateRef.current.itemIds.includes(id) ? 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 (_jsx("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: {

package/package.json

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