@mhamz.01/easyflow-whiteboard 2.17.0 → 2.18.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;AAoBD,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,2CAqZzB"}
+{"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;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,2CAsgBzB"}

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

@@ -1,93 +1,108 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef, useCallback, memo } from "react";
+import { useState, useEffect, useRef } from "react";
 import TaskNode from "./custom-node";
 import DocumentNode from "./document-node";
-// ── PERF: Memoized node wrappers ──────────────────────────────────────────────
-// Prevents sibling nodes from re-rendering when only one node's position changes.
-// Without memo, every setLocalTasks call during drag re-renders ALL nodes.
-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);
     const [localDocuments, setLocalDocuments] = useState(documents);
     const [selectedIds, setSelectedIds] = useState(new Set());
-    // ─── Core refs ────────────────────────────────────────────────────────────
+    const [dragging, setDragging] = useState(null);
     const dragStateRef = useRef({
-        isDragging: false, itemIds: [],
-        startPositions: new Map(), canvasObjectsStartPos: new Map(),
-        offsetX: 0, offsetY: 0,
+        isDragging: false,
+        itemIds: [],
+        startPositions: new Map(),
+        canvasObjectsStartPos: new Map(),
+        offsetX: 0,
+        offsetY: 0,
     });
     const rafIdRef = useRef(null);
     const overlayRef = useRef(null);
-    // ── PERF: Mutex prevents object:moving and handleMove writing simultaneously ─
-    const isHtmlDraggingRef = useRef(false);
-    // ── PERF: Always-fresh refs — rebuilt synchronously every render ──────────
-    // Eliminates ALL stale closure problems without any useCallback deps.
-    // nodePositionsRef: ground truth for positions at drag start
-    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 }]),
-    ]);
-    // selectedIdsRef: used in stable effect closures
-    const selectedIdsRef = useRef(selectedIds);
-    selectedIdsRef.current = selectedIds;
-    // selectedCanvasObjectsRef: avoids stale prop in handleDragStart
-    const selectedCanvasObjectsRef = useRef(selectedCanvasObjects);
-    selectedCanvasObjectsRef.current = selectedCanvasObjects;
-    // Parent callbacks in refs — handleEnd never captures stale callbacks
-    const onTasksUpdateRef = useRef(onTasksUpdate);
-    const onDocumentsUpdateRef = useRef(onDocumentsUpdate);
-    onTasksUpdateRef.current = onTasksUpdate;
-    onDocumentsUpdateRef.current = onDocumentsUpdate;
-    // ─── Sync props → local state ─────────────────────────────────────────────
+    // ── Sync props → local state ────────────────────────────────────────────────
     useEffect(() => { setLocalTasks(tasks); }, [tasks]);
     useEffect(() => { setLocalDocuments(documents); }, [documents]);
-    // ─── Wheel forwarding ─────────────────────────────────────────────────────
+    // ── 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();
+        }
+    };
     useEffect(() => {
         const overlayEl = overlayRef.current;
         const canvas = fabricCanvas?.current;
         if (!overlayEl || !canvas)
             return;
         const handleGlobalWheel = (e) => {
-            const isOverNode = e.target !== overlayEl;
+            // 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, scenePoint,
-                    viewportPoint: { x: e.clientX - rect.left, y: e.clientY - rect.top },
+                    e: 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]);
-    // ─── Fabric → Overlay sync ────────────────────────────────────────────────
+        return () => {
+            overlayEl.removeEventListener("wheel", handleGlobalWheel);
+        };
+    }, [fabricCanvas, canvasZoom]); // Re-bind when zoom changes to keep closure fresh
+    // ── Fabric → Overlay Sync (Fixes Dragging from Fabric area) ──────────────────
     useEffect(() => {
         const canvas = fabricCanvas?.current;
         if (!canvas)
             return;
         const handleObjectMoving = (e) => {
-            // MUTEX: HTML drag and Fabric drag must never write positions simultaneously
-            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;
-            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));
+            // 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)));
         };
         const handleMouseDown = (e) => {
             const target = e.target;
@@ -102,68 +117,138 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             canvas.off("object:moving", handleObjectMoving);
             canvas.off("mouse:down", handleMouseDown);
         };
-    }, [fabricCanvas]);
-    // ─── Selection box ────────────────────────────────────────────────────────
+    }, [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;
+    };
+    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 ──────────────────────────────────────────────────
     useEffect(() => {
         if (!selectionBox)
             return;
+        // ── O(n) single pass — no sort, no join, no extra allocations ──
         const newSelected = new Set();
         for (const task of localTasks) {
-            const x1 = task.x * canvasZoom + canvasViewport.x;
-            const y1 = task.y * canvasZoom + canvasViewport.y;
-            const x2 = x1 + 300 * canvasZoom;
-            const y2 = y1 + 140 * canvasZoom;
-            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);
-            if (!(bX2 < x1 || bX1 > x2 || bY2 < y1 || bY1 > y2))
+            if (isItemInSelectionBox(task.x, task.y, 300, 140, selectionBox))
                 newSelected.add(task.id);
         }
         for (const doc of localDocuments) {
-            const x1 = doc.x * canvasZoom + canvasViewport.x;
-            const y1 = doc.y * canvasZoom + canvasViewport.y;
-            const x2 = x1 + 320 * canvasZoom;
-            const y2 = y1 + 160 * canvasZoom;
-            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);
-            if (!(bX2 < x1 || bX1 > x2 || bY2 < y1 || bY1 > y2))
+            if (isItemInSelectionBox(doc.x, doc.y, 320, 160, selectionBox))
                 newSelected.add(doc.id);
         }
-        // O(n) equality — same Set ref if unchanged, blocks unnecessary re-render
+        // ── 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;
-            return prev;
+                    return newSelected; // found a difference, swap
+            }
+            return prev; // identical — return same reference, no re-render
+        });
+    }, [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) => {
+        // 1. Safety check for the Fabric instance
+        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
+        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);
+        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);
+            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 });
         });
-    }, [selectionBox, localTasks, localDocuments, canvasZoom, canvasViewport]);
-    // ─── Global drag listeners — attached ONCE on mount ───────────────────────
-    //
-    // ROOT CAUSE OF THE POSITION JUMP — fixed here:
-    //
-    // Old pattern: useEffect(() => { mousemove }, [dragging, localTasks, localDocuments])
-    // Problem:
-    //   1. handleDragStart → setDragging() → React re-render
-    //   2. Re-render tears down mousemove listener, attaches new one
-    //   3. First real mousemove fires into old (dead) listener → ignored or wrong
-    //   4. New listener fires with potentially different startPositions → JUMP
-    //
-    // Fix: attach listeners ONCE. They read all mutable state via refs.
-    // Zero re-registration, zero double-fires, zero stale closure issues.
-    //
+        // 10. Commit to the ref for the requestAnimationFrame loop
+        dragStateRef.current = {
+            isDragging: true,
+            itemIds: itemsToDrag,
+            startPositions,
+            canvasObjectsStartPos,
+            offsetX: worldOffsetX, // Now stored as World Units
+            offsetY: worldOffsetY, // Now stored as World Units
+        };
+        if (!selectedIds.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";
+    };
+    // ── Drag move (HTML Node side) ───────────────────────────────────────────────
     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 = "touches" in e && e.touches.length > 0
-                ? e.touches[0] : e;
+            const pointer = getPointerEvent(e);
+            // 1. Throttle updates using requestAnimationFrame for 120Hz/144Hz screen support
             if (rafIdRef.current !== null)
                 cancelAnimationFrame(rafIdRef.current);
             rafIdRef.current = requestAnimationFrame(() => {
@@ -171,50 +256,59 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
                 const canvas = fabricCanvas?.current;
                 if (!canvas)
                     return;
-                // Live VPT — never from React state
+                // 2. Read the "Source of Truth" transform from the canvas
                 const vpt = canvas.viewportTransform;
-                const liveZoom = vpt[0];
-                const liveVpX = vpt[4];
-                const liveVpY = vpt[5];
-                // Screen → World, subtract world-space offset
-                const newWorldX = (pointer.clientX - liveVpX) / liveZoom - offsetX;
-                const newWorldY = (pointer.clientY - liveVpY) / liveZoom - offsetY;
-                const firstStart = startPositions.get(itemIds[0]);
+                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 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);
                 if (!firstStart)
                     return;
                 const deltaX = newWorldX - firstStart.x;
                 const deltaY = newWorldY - firstStart.y;
-                // ── PERF: Only map over items being dragged ────────────────────────
-                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));
-                // Sync Fabric objects imperatively
+                // 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)
                 canvasObjectsStartPos.forEach((startPos, obj) => {
-                    obj.set({ left: startPos.left + deltaX, top: startPos.top + deltaY });
-                    obj.setCoords();
+                    obj.set({
+                        left: startPos.left + deltaX,
+                        top: startPos.top + deltaY,
+                    });
+                    obj.setCoords(); // Required for selection/intersection accuracy
                 });
+                // 8. Single render call for all Fabric changes
                 canvas.requestRenderAll();
             });
         };
         const handleEnd = () => {
-            if (!dragStateRef.current.isDragging)
-                return;
-            if (rafIdRef.current !== null) {
+            if (rafIdRef.current !== null)
                 cancelAnimationFrame(rafIdRef.current);
-                rafIdRef.current = null;
-            }
             dragStateRef.current.isDragging = false;
-            isHtmlDraggingRef.current = false;
+            setDragging(null);
             document.body.style.cursor = "";
             document.body.style.userSelect = "";
             document.body.style.touchAction = "";
-            setLocalTasks((prev) => { onTasksUpdateRef.current?.(prev); return prev; });
-            setLocalDocuments((prev) => { onDocumentsUpdateRef.current?.(prev); return prev; });
+            onTasksUpdate?.(localTasks);
+            onDocumentsUpdate?.(localDocuments);
         };
         window.addEventListener("mousemove", handleMove, { passive: false });
         window.addEventListener("mouseup", handleEnd);
@@ -228,62 +322,9 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             window.removeEventListener("touchend", handleEnd);
             window.removeEventListener("touchcancel", handleEnd);
         };
-        // Empty deps — registered once, reads everything via refs
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-    // ─── Drag start ───────────────────────────────────────────────────────────
-    const handleDragStart = useCallback((itemId, e) => {
-        const canvas = fabricCanvas?.current;
-        if (!canvas)
-            return;
-        if (e.cancelable)
-            e.preventDefault();
-        const pointer = "touches" in e && e.touches.length > 0
-            ? e.touches[0] : e;
-        // Read from ref — not state (avoids async lag from setSelectedIds)
-        const currentSelected = selectedIdsRef.current;
-        const itemsToDrag = currentSelected.has(itemId)
-            ? Array.from(currentSelected) : [itemId];
-        if (!currentSelected.has(itemId))
-            setSelectedIds(new Set([itemId]));
-        // Live VPT
-        const vpt = canvas.viewportTransform || [1, 0, 0, 1, 0, 0];
-        const liveZoom = vpt[0];
-        const liveVpX = vpt[4];
-        const liveVpY = vpt[5];
-        // Pointer → world
-        const pointerWorldX = (pointer.clientX - liveVpX) / liveZoom;
-        const pointerWorldY = (pointer.clientY - liveVpY) / liveZoom;
-        // nodePositionsRef is rebuilt synchronously every render — never stale
-        const clickedPos = nodePositionsRef.current.get(itemId);
-        if (!clickedPos)
-            return;
-        // Snapshot ALL start positions from ref synchronously
-        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 });
-        }
-        const canvasObjectsStartPos = new Map();
-        for (const obj of selectedCanvasObjectsRef.current) {
-            canvasObjectsStartPos.set(obj, { left: obj.left || 0, top: obj.top || 0 });
-        }
-        dragStateRef.current = {
-            isDragging: true,
-            itemIds: itemsToDrag,
-            startPositions,
-            canvasObjectsStartPos,
-            // World-space offset: pointer distance from node top-left in world units
-            offsetX: pointerWorldX - clickedPos.x,
-            offsetY: pointerWorldY - clickedPos.y,
-        };
-        isHtmlDraggingRef.current = true;
-        document.body.style.cursor = "grabbing";
-        document.body.style.userSelect = "none";
-        document.body.style.touchAction = "none";
-    }, [fabricCanvas]);
-    // ─── Node interaction ─────────────────────────────────────────────────────
-    const handleSelect = useCallback((id, e) => {
+    }, [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);
@@ -294,48 +335,68 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         else {
             setSelectedIds(new Set([id]));
         }
-    }, []);
-    const handleStatusChange = useCallback((taskId, newStatus) => {
-        setLocalTasks((prev) => {
-            const updated = prev.map((t) => t.id === taskId ? { ...t, status: newStatus } : t);
-            onTasksUpdateRef.current?.(updated);
-            return updated;
-        });
-    }, []);
-    // ─── Keyboard shortcuts ───────────────────────────────────────────────────
+    };
+    const handleStatusChange = (taskId, newStatus) => {
+        const updated = localTasks.map((t) => (t.id === taskId ? { ...t, status: newStatus } : t));
+        setLocalTasks(updated);
+        onTasksUpdate?.(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)]));
             }
-            if (e.key === "Escape")
+            // Clear selection
+            if (e.key === "Escape") {
                 setSelectedIds(new Set());
-            if ((e.key === "Delete" || e.key === "Backspace") && selectedIdsRef.current.size > 0) {
+            }
+            // ← ADD THIS: Delete selected nodes
+            if ((e.key === "Delete" || e.key === "Backspace") && selectedIds.size > 0) {
                 e.preventDefault();
-                const ids = selectedIdsRef.current;
-                setLocalTasks((prev) => { const u = prev.filter((t) => !ids.has(t.id)); onTasksUpdateRef.current?.(u); return u; });
-                setLocalDocuments((prev) => { const u = prev.filter((d) => !ids.has(d.id)); onDocumentsUpdateRef.current?.(u); return u; });
+                const updatedTasks = localTasks.filter((t) => !selectedIds.has(t.id));
+                const updatedDocs = localDocuments.filter((d) => !selectedIds.has(d.id));
+                setLocalTasks(updatedTasks);
+                setLocalDocuments(updatedDocs);
                 setSelectedIds(new Set());
+                onTasksUpdate?.(updatedTasks);
+                onDocumentsUpdate?.(updatedDocs);
             }
         };
         window.addEventListener("keydown", handleKeyDown);
         return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [localTasks, localDocuments]);
-    // ─── Render ───────────────────────────────────────────────────────────────
-    const renderItem = (id, x, y, children) => (_jsx("div", { className: "pointer-events-auto absolute", style: {
-            left: 0, top: 0,
-            transform: `translate3d(${x * canvasZoom}px, ${y * canvasZoom}px, 0) scale(${canvasZoom})`,
-            transformOrigin: "top left",
-            transition: "none", // No CSS transitions — causes shaking during zoom
-            willChange: "transform", // GPU layer hint
-            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 }, onClick: (e) => { if (e.target === e.currentTarget)
-            setSelectedIds(new Set()); }, children: _jsxs("div", { className: "absolute top-0 left-0 pointer-events-none", style: {
+    }, [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);
+        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: "none",
+                // 4. Optimization
+                willChange: "transform",
+                zIndex: isDragging ? 1000 : 1,
+            }, children: children }, id));
+    };
+    return (_jsx("div", { ref: overlayRef, className: "absolute inset-0 pointer-events-none", style: { zIndex: 50 }, onWheel: handleOverlayWheel, 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(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 })))] }) }));
+            }, 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/dist/hooks/usePan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePan.d.ts","sourceRoot":"","sources":["../../src/hooks/usePan.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,UAAU,WAAW;IACnB,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrE,iBAAiB,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACjE;AAED,eAAO,MAAM,MAAM,GAAI,8DAKpB,WAAW,SAkGb,CAAC"}
+{"version":3,"file":"usePan.d.ts","sourceRoot":"","sources":["../../src/hooks/usePan.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,UAAU,WAAW;IACnB,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrE,iBAAiB,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACjE;AAED,eAAO,MAAM,MAAM,GAAI,8DAKpB,WAAW,SAoIb,CAAC"}

package/dist/hooks/usePan.js

@@ -1,5 +1,15 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 export const usePan = ({ fabricCanvas, activeTool, handleZoom, setCanvasViewport, }) => {
+    // ── PERF FIX 1: All mutable values in refs — effect registers ONCE ────────
+    // Old deps: [activeTool, handleZoom, setCanvasViewport, fabricCanvas]
+    // handleZoom and setCanvasViewport are new references every render →
+    // all 3 listeners re-registered on every render.
+    const activeToolRef = useRef(activeTool);
+    const handleZoomRef = useRef(handleZoom);
+    const setViewportRef = useRef(setCanvasViewport);
+    activeToolRef.current = activeTool;
+    handleZoomRef.current = handleZoom;
+    setViewportRef.current = setCanvasViewport;
     useEffect(() => {
         const canvas = fabricCanvas.current;
         if (!canvas)
@@ -10,17 +20,18 @@ export const usePan = ({ fabricCanvas, activeTool, handleZoom, setCanvasViewport
         let lastX = 0;
         let lastY = 0;
         let lastTouchDistance = 0;
+        let rafId = null;
         const onDown = (opt) => {
-            if (activeTool !== "pan")
+            if (activeToolRef.current !== "pan")
                 return;
             const e = opt.e;
-            // Pinch initialization
-            if (e.touches && e.touches.length === 2) {
+            // Pinch zoom init
+            if (e.touches?.length === 2) {
                 isPanning = false;
                 lastTouchDistance = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY);
                 return;
             }
-            // Pan initialization
+            // Pan init
             const pointer = e.touches ? e.touches[0] : e;
             isPanning = true;
             lastX = pointer.clientX;
@@ -28,45 +39,63 @@ export const usePan = ({ fabricCanvas, activeTool, handleZoom, setCanvasViewport
             canvas.setCursor("grabbing");
         };
         const onMove = (opt) => {
-            if (activeTool !== "pan")
+            if (activeToolRef.current !== "pan")
                 return;
             const e = opt.e;
-            // Handle pinch zoom (two fingers)
-            if (e.touches && e.touches.length === 2) {
+            // ── PERF FIX 2: rAF throttle — pan fires at raw mouse rate (200+/sec) ─
+            // Without throttling, every mousemove directly mutates VPT and calls
+            // requestRenderAll, saturating the main thread.
+            if (rafId !== null)
+                return; // skip if a frame is already queued
+            // Pinch zoom
+            if (e.touches?.length === 2) {
                 const currentDistance = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY);
                 if (lastTouchDistance > 0) {
-                    const zoom = canvas.getZoom();
                     const delta = (currentDistance - lastTouchDistance) * 0.01;
-                    const newZoom = zoom + delta;
                     const midX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
                     const midY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
                     const rect = canvasEl.getBoundingClientRect();
-                    handleZoom(newZoom, { x: midX - rect.left, y: midY - rect.top });
+                    handleZoomRef.current(canvas.getZoom() + delta, { x: midX - rect.left, y: midY - rect.top });
                 }
                 lastTouchDistance = currentDistance;
                 return;
             }
-            // Handle panning (one finger or mouse)
-            if (isPanning) {
-                const pointer = e.touches ? e.touches[0] : e;
+            if (!isPanning)
+                return;
+            const pointer = e.touches ? e.touches[0] : e;
+            const dx = pointer.clientX - lastX;
+            const dy = pointer.clientY - lastY;
+            lastX = pointer.clientX;
+            lastY = pointer.clientY;
+            // Schedule the actual VPT mutation on next animation frame
+            rafId = requestAnimationFrame(() => {
+                rafId = null;
                 const vpt = canvas.viewportTransform;
-                if (vpt) {
-                    vpt[4] += pointer.clientX - lastX;
-                    vpt[5] += pointer.clientY - lastY;
-                    canvas.requestRenderAll();
-                }
-                lastX = pointer.clientX;
-                lastY = pointer.clientY;
-            }
+                if (!vpt)
+                    return;
+                vpt[4] += dx;
+                vpt[5] += dy;
+                canvas.requestRenderAll();
+                // ── PERF FIX 3: Do NOT call setCanvasViewport here ────────────────
+                // Calling setCanvasViewport per frame triggers React re-renders at
+                // 60fps, cascading to CanvasOverlayLayer re-rendering all HTML nodes.
+                // Viewport state is only flushed ONCE on mouse:up (see onUp below).
+            });
         };
         const onUp = () => {
-            const vpt = canvas.viewportTransform;
-            if (vpt) {
-                setCanvasViewport({ x: vpt[4], y: vpt[5] });
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+                rafId = null;
             }
             isPanning = false;
             lastTouchDistance = 0;
-            canvas.setCursor(activeTool === "pan" ? "grab" : "default");
+            canvas.setCursor(activeToolRef.current === "pan" ? "grab" : "default");
+            // ── Flush React state ONCE per gesture end ────────────────────────────
+            // HTML overlay nodes only need to reposition when the pan is complete.
+            // One setCanvasViewport call here vs hundreds during the gesture.
+            const vpt = canvas.viewportTransform;
+            if (vpt)
+                setViewportRef.current({ x: vpt[4], y: vpt[5] });
         };
         canvas.on("mouse:down", onDown);
         canvas.on("mouse:move", onMove);
@@ -75,6 +104,9 @@ export const usePan = ({ fabricCanvas, activeTool, handleZoom, setCanvasViewport
             canvas.off("mouse:down", onDown);
             canvas.off("mouse:move", onMove);
             canvas.off("mouse:up", onUp);
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
         };
-    }, [activeTool, handleZoom, setCanvasViewport, fabricCanvas]);
+        // ── PERF FIX 4: Empty deps — registered once, reads everything via refs ───
+    }, [fabricCanvas]);
 };

package/dist/hooks/useZoom.d.ts

@@ -15,7 +15,7 @@ interface UseZoomProps {
         y: number;
     }) => void;
 }
-export declare const useZoom: ({ fabricCanvas, MIN_ZOOM, MAX_ZOOM, canvasZoom, canvasViewport, setCanvasZoom, setCanvasViewport, }: UseZoomProps) => {
+export declare const useZoom: ({ fabricCanvas, MIN_ZOOM, MAX_ZOOM, setCanvasZoom, setCanvasViewport, }: UseZoomProps) => {
     handleZoom: (newZoom: number, point?: {
         x: number;
         y: number;

package/dist/hooks/useZoom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useZoom.d.ts","sourceRoot":"","sources":["../../src/hooks/useZoom.ts"],"names":[],"mappings":"AACA,OAAa,EAA0B,SAAS,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,MAAM,EAAuB,MAAM,QAAQ,CAAC;AAErD,UAAU,YAAY;IACpB,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,iBAAiB,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACjE;AAED,eAAO,MAAM,OAAO,GAAI,qGAQrB,YAAY;0BAED,MAAM,UAAU;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;CAoJrD,CAAC"}
+{"version":3,"file":"useZoom.d.ts","sourceRoot":"","sources":["../../src/hooks/useZoom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkC,SAAS,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,MAAM,EAAuB,MAAM,QAAQ,CAAC;AAErD,UAAU,YAAY;IACpB,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,iBAAiB,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACjE;AAED,eAAO,MAAM,OAAO,GAAI,yEAMrB,YAAY;0BAiB4B,MAAM,UAAU;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;CA2IlF,CAAC"}

package/dist/hooks/useZoom.js

@@ -1,27 +1,57 @@
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { Point } from "fabric";
-export const useZoom = ({ fabricCanvas, MIN_ZOOM, MAX_ZOOM, canvasZoom, canvasViewport, setCanvasZoom, setCanvasViewport, }) => {
+export const useZoom = ({ fabricCanvas, MIN_ZOOM, MAX_ZOOM, setCanvasZoom, setCanvasViewport, }) => {
+    // ── PERF FIX 1: Stable refs for setters ──────────────────────────────────
+    // setCanvasZoom and setCanvasViewport are new references every render from
+    // FabricWhiteboard's useState. Putting them in deps caused handleZoom and
+    // all effects to re-register on every render. Refs break the cycle.
+    const setCanvasZoomRef = useRef(setCanvasZoom);
+    const setCanvasViewportRef = useRef(setCanvasViewport);
+    setCanvasZoomRef.current = setCanvasZoom;
+    setCanvasViewportRef.current = setCanvasViewport;
+    // ── PERF FIX 2: handleZoom reads limits from refs, stable reference ───────
+    const minZoomRef = useRef(MIN_ZOOM);
+    const maxZoomRef = useRef(MAX_ZOOM);
+    minZoomRef.current = MIN_ZOOM;
+    maxZoomRef.current = MAX_ZOOM;
     const handleZoom = useCallback((newZoom, point) => {
         const canvas = fabricCanvas.current;
         if (!canvas)
             return;
-        const clampedZoom = Math.min(Math.max(newZoom, MIN_ZOOM), MAX_ZOOM);
+        const clamped = Math.min(Math.max(newZoom, minZoomRef.current), maxZoomRef.current);
         const pivot = point
             ? new Point(point.x, point.y)
             : new Point(canvas.getWidth() / 2, canvas.getHeight() / 2);
-        canvas.zoomToPoint(pivot, clampedZoom);
+        canvas.zoomToPoint(pivot, clamped);
+        canvas.requestRenderAll();
+        // Flush React state once per zoom action — not per frame
         const vpt = canvas.viewportTransform;
         if (vpt) {
-            setCanvasZoom(clampedZoom);
-            setCanvasViewport({ x: vpt[4], y: vpt[5] });
+            setCanvasZoomRef.current(clamped);
+            setCanvasViewportRef.current({ x: vpt[4], y: vpt[5] });
         }
-        canvas.requestRenderAll();
-    }, [MIN_ZOOM, MAX_ZOOM, setCanvasZoom, setCanvasViewport, fabricCanvas]);
-    // Wheel handler
+        // fabricCanvas ref is stable — this function never needs to be recreated
+    }, [fabricCanvas]);
+    // ── Wheel zoom + pan ───────────────────────────────────────────────────────
     useEffect(() => {
         const canvas = fabricCanvas.current;
         if (!canvas)
             return;
+        // ── PERF FIX 3: rAF-throttled viewport flush ─────────────────────────
+        // setCanvasViewport on every wheel tick caused a React re-render per scroll
+        // event (60-200/sec). Batch with rAF — flush at most once per paint frame.
+        let rafId = null;
+        const flushViewport = () => {
+            rafId = null;
+            const vpt = canvas.viewportTransform;
+            if (vpt)
+                setCanvasViewportRef.current({ x: vpt[4], y: vpt[5] });
+        };
+        const scheduleFlush = () => {
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
+            rafId = requestAnimationFrame(flushViewport);
+        };
         const onWheel = (opt) => {
             const e = opt.e;
             e.preventDefault();
@@ -30,36 +60,41 @@ export const useZoom = ({ fabricCanvas, MIN_ZOOM, MAX_ZOOM, canvasZoom, canvasVi
             if (!vpt)
                 return;
             if (e.ctrlKey || e.metaKey) {
-                // Zoom logic
+                // Zoom to cursor
                 const rect = canvas.getElement().getBoundingClientRect();
-                handleZoom(e.deltaY < 0 ? canvasZoom * 1.1 : canvasZoom / 1.1, { x: e.clientX - rect.left, y: e.clientY - rect.top });
+                const currentZoom = canvas.getZoom();
+                handleZoom(e.deltaY < 0 ? currentZoom * 1.1 : currentZoom / 1.1, { x: e.clientX - rect.left, y: e.clientY - rect.top });
             }
             else {
-                // Pan via wheel
-                const delta = e.deltaY;
-                const shiftDelta = e.deltaX || e.deltaY;
-                vpt[5] -= delta;
+                // Pan via scroll — mutate VPT directly, no React state until rAF
+                vpt[5] -= e.deltaY;
                 if (e.shiftKey)
-                    vpt[4] -= shiftDelta;
-                setCanvasViewport({ x: vpt[4], y: vpt[5] });
-                // Sync selection coordinates
+                    vpt[4] -= (e.deltaX || e.deltaY);
+                // Keep active object coords in sync
                 const activeObj = canvas.getActiveObject();
                 if (activeObj) {
                     activeObj.setCoords();
                     if (activeObj.type === "activeSelection") {
-                        const objects = activeObj.getObjects();
-                        objects.forEach((obj) => obj.setCoords());
-                        activeObj.setCoords();
+                        activeObj.getObjects().forEach((o) => o.setCoords());
                     }
                 }
                 canvas.calcOffset();
                 canvas.requestRenderAll();
+                // Batch React state flush — at most once per animation frame
+                scheduleFlush();
             }
         };
         canvas.on("mouse:wheel", onWheel);
-        return () => canvas.off("mouse:wheel", onWheel);
-    }, [canvasZoom, canvasViewport, handleZoom, setCanvasViewport, fabricCanvas]);
-    // Prevent browser zoom
+        return () => {
+            canvas.off("mouse:wheel", onWheel);
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
+        };
+        // ── PERF FIX 4: Empty deps — reads everything via refs or canvas directly ──
+        // Old code had [canvasZoom, canvasViewport, handleZoom] here which caused
+        // the listener to re-register on every single zoom/pan action.
+    }, [fabricCanvas, handleZoom]);
+    // ── Prevent browser zoom ──────────────────────────────────────────────────
     useEffect(() => {
         const prevent = (e) => {
             if (e.ctrlKey || e.metaKey)
@@ -68,66 +103,50 @@ export const useZoom = ({ fabricCanvas, MIN_ZOOM, MAX_ZOOM, canvasZoom, canvasVi
         window.addEventListener("wheel", prevent, { passive: false });
         return () => window.removeEventListener("wheel", prevent);
     }, []);
-    // Keyboard shortcuts
+    // ── Keyboard shortcuts ────────────────────────────────────────────────────
     useEffect(() => {
         const onKey = (e) => {
-            if (e.target instanceof HTMLInputElement ||
-                e.target instanceof HTMLTextAreaElement)
+            if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)
                 return;
             if (!(e.ctrlKey || e.metaKey))
                 return;
+            const canvas = fabricCanvas.current;
+            if (!canvas)
+                return;
             if (e.key === "=" || e.key === "+") {
                 e.preventDefault();
-                handleZoom(canvasZoom + 0.1);
+                // ── PERF FIX 5: Read zoom from canvas directly, not from stale state ─
+                handleZoom(canvas.getZoom() + 0.1);
             }
             else if (e.key === "-" || e.key === "_") {
                 e.preventDefault();
-                handleZoom(canvasZoom - 0.1);
+                handleZoom(canvas.getZoom() - 0.1);
             }
             else if (e.key === "0") {
                 e.preventDefault();
-                const canvas = fabricCanvas.current;
-                if (!canvas)
-                    return;
                 canvas.setZoom(1);
                 const vpt = canvas.viewportTransform;
                 if (vpt) {
                     vpt[4] = 0;
                     vpt[5] = 0;
-                    setCanvasViewport({ x: 0, y: 0 });
                 }
-                setCanvasZoom(1);
-                canvas.renderAll();
+                canvas.requestRenderAll();
+                setCanvasZoomRef.current(1);
+                setCanvasViewportRef.current({ x: 0, y: 0 });
             }
         };
         window.addEventListener("keydown", onKey);
         return () => window.removeEventListener("keydown", onKey);
-    }, [canvasZoom, handleZoom, setCanvasZoom, setCanvasViewport, fabricCanvas]);
-    // Sync viewport state
-    useEffect(() => {
-        const canvas = fabricCanvas.current;
-        if (!canvas)
-            return;
-        const sync = () => {
-            const vpt = canvas.viewportTransform;
-            if (!vpt)
-                return;
-            const z = canvas.getZoom();
-            if (canvasViewport.x !== vpt[4] || canvasViewport.y !== vpt[5]) {
-                setCanvasViewport({ x: vpt[4], y: vpt[5] });
-            }
-            if (canvasZoom !== z) {
-                setCanvasZoom(z);
-            }
-        };
-        canvas.on("after:render", sync);
-        canvas.on("object:moving", sync);
-        canvas.on("mouse:up", sync);
-        return () => {
-            canvas.off("after:render", sync);
-            canvas.off("object:moving", sync);
-            canvas.off("mouse:up", sync);
-        };
-    }, [fabricCanvas, setCanvasViewport, setCanvasZoom]);
+        // ── Stable — reads zoom from canvas directly, not from canvasZoom state ───
+    }, [fabricCanvas, handleZoom]);
+    // ── PERF FIX 6: after:render sync REMOVED ────────────────────────────────
+    // The old code registered a "after:render" listener that called
+    // setCanvasViewport + setCanvasZoom. Since after:render fires after EVERY
+    // Fabric paint frame, this created an infinite loop:
+    //   Fabric renders → setCanvasZoom → React re-renders → Fabric re-renders → ...
+    // React state is now only updated at deliberate points:
+    //   - handleZoom (once per zoom gesture)
+    //   - scheduleFlush via rAF (once per animation frame during scroll pan)
+    //   - usePan's onUp (once per pan gesture end)
     return { handleZoom };
 };

package/package.json

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