@mhamz.01/easyflow-whiteboard 2.70.0 → 2.71.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,2CAulBzB"}
+{"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,2CA6jBzB"}

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 ────────────────────────────────────────────────────────────────
@@ -22,15 +22,20 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         offsetX: 0,
         offsetY: 0,
     });
-    const finalPositionsRef = useRef(null);
+    // 2. High-Frequency Refs (Bypasses React Render Cycle)
+    const taskRefs = useRef(new Map());
+    const docRefs = useRef(new Map());
+    const localTasksRef = useRef(tasks);
+    const localDocsRef = useRef(documents);
+    const selectedIdsRef = useRef(new Set());
     const rafIdRef = useRef(null);
     const overlayRef = useRef(null);
-    const localTasksRef = useRef(localTasks);
-    const localDocumentsRef = useRef(localDocuments);
-    const selectedIdsRef = useRef(selectedIds);
+    // const selectedIdsRef = useRef<Set<string>>(selectedIds);
     selectedIdsRef.current = selectedIds;
+    // Sync Refs immediately
     localTasksRef.current = localTasks;
-    localDocumentsRef.current = localDocuments;
+    localDocsRef.current = localDocuments;
+    selectedIdsRef.current = selectedIds;
     // ── Sync props → local state ────────────────────────────────────────────────
     useEffect(() => { setLocalTasks(tasks); }, [tasks]);
     useEffect(() => { setLocalDocuments(documents); }, [documents]);
@@ -113,6 +118,17 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         };
     }, [fabricCanvas, canvasZoom, canvasReady]); // Re-bind when zoom changes to keep closure fresh
     // ── Fabric → Overlay Sync (Fixes Dragging from Fabric area) ──────────────────
+    const updateNodeStyles = useCallback((id, x, y, zoom, vp) => {
+        const el = taskRefs.current.get(id) || docRefs.current.get(id);
+        if (!el)
+            return;
+        // Calculate final screen position
+        const screenX = x * zoom + vp.x;
+        const screenY = y * zoom + vp.y;
+        // Update via CSS Variables or Direct Transform
+        // This is 10x faster than a React State update
+        el.style.transform = `translate3d(${screenX}px, ${screenY}px, 0) scale(${zoom})`;
+    }, []);
     useEffect(() => {
         const canvas = fabricCanvas?.current;
         if (!canvas)
@@ -236,8 +252,8 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         // 3. Determine which items are being dragged
         // selection update DOES NOT trigger before drag snapshot
         let itemsToDrag;
-        if (selectedIdsRef.current.has(itemId)) {
-            itemsToDrag = Array.from(selectedIdsRef.current);
+        if (selectedIds.has(itemId)) {
+            itemsToDrag = Array.from(selectedIds);
         }
         else {
             itemsToDrag = [itemId];
@@ -281,7 +297,7 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             offsetX: worldOffsetX, // Now stored as World Units
             offsetY: worldOffsetY, // Now stored as World Units
         };
-        if (!selectedIdsRef.current.has(itemId) && dragStateRef.current.itemIds.length === 0) {
+        if (!selectedIds.has(itemId) && dragStateRef.current.itemIds.length === 0) {
             setSelectedIds(new Set([itemId]));
         }
         // 11. Trigger UI states
@@ -295,88 +311,48 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         if (!dragging)
             return;
         // Inside the useEffect that watches [dragging, localTasks, localDocuments, fabricCanvas]
-        const handleMove = (e) => {
+        const handleMove = useCallback((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
-            if (rafIdRef.current !== null)
-                cancelAnimationFrame(rafIdRef.current);
-            rafIdRef.current = requestAnimationFrame(() => {
-                const { itemIds, startPositions, canvasObjectsStartPos, offsetX, offsetY } = dragStateRef.current;
+            requestAnimationFrame(() => {
+                const { itemIds, startPositions, offsetX, offsetY } = dragStateRef.current;
                 const canvas = fabricCanvas?.current;
                 if (!canvas)
                     return;
-                // 2. Read the "Source of Truth" transform from the canvas
                 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 liveZoom = vpt[0];
+                const liveVpX = vpt[4];
+                const liveVpY = vpt[5];
                 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;
-                // 6. Update HTML Nodes (Batching these into one state update)
-                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; // ← write-through: ref always has latest
-                    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; // ← write-through
-                    return next;
+                const deltaX = (currentWorldX - offsetX) - (startPositions.get(itemIds[0])?.x ?? 0);
+                const deltaY = (currentWorldY - offsetY) - (startPositions.get(itemIds[0])?.y ?? 0);
+                // DOM UPDATE (Instant)
+                itemIds.forEach(id => {
+                    const start = startPositions.get(id);
+                    if (start) {
+                        updateNodeStyles(id, start.x + deltaX, start.y + deltaY, liveZoom, { x: liveVpX, y: liveVpY });
+                    }
                 });
-                // 7. Sync Fabric Objects (Imperative update for performance)
-                canvasObjectsStartPos.forEach((startPos, obj) => {
-                    obj.set({
-                        left: startPos.left + deltaX,
-                        top: startPos.top + deltaY,
-                    });
-                    obj.setCoords(); // Required for selection/intersection accuracy
+                // FABRIC UPDATE (Batched)
+                dragStateRef.current.canvasObjectsStartPos.forEach((pos, obj) => {
+                    obj.set({ left: pos.left + deltaX, top: pos.top + deltaY });
+                    obj.setCoords();
                 });
-                finalPositionsRef.current = {
-                    tasks: localTasksRef.current, // will be updated by React after setState flushes
-                    documents: localDocumentsRef.current,
-                };
-                // 8. Single render call for all Fabric changes
                 canvas.requestRenderAll();
             });
-        };
+        }, [fabricCanvas, updateNodeStyles]);
         const handleEnd = () => {
-            if (rafIdRef.current !== null) {
+            if (rafIdRef.current !== null)
                 cancelAnimationFrame(rafIdRef.current);
-                rafIdRef.current = null;
-            }
             dragStateRef.current.isDragging = false;
             setDragging(null);
             document.body.style.cursor = "";
             document.body.style.userSelect = "";
             document.body.style.touchAction = "";
-            // ✅ FIX 1+3: Read from live refs — never from the stale closure.
-            // localTasksRef is kept in sync on every render, so this is always
-            // the position after the last committed setState, not the t=0 snapshot.
-            onTasksUpdate?.(localTasksRef.current);
-            onDocumentsUpdate?.(localDocumentsRef.current);
+            onTasksUpdate?.(localTasks);
+            onDocumentsUpdate?.(localDocuments);
         };
         window.addEventListener("mousemove", handleMove, { passive: false });
         window.addEventListener("mouseup", handleEnd);
@@ -438,27 +414,33 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         window.addEventListener("keydown", handleKeyDown);
         return () => window.removeEventListener("keydown", handleKeyDown);
     }, [localTasks, localDocuments, selectedIds, onTasksUpdate, onDocumentsUpdate]);
-    const getAbsoluteTransform = (x, y) => {
-        // We calculate the screen position in one go, matching Fabric's internal VPT logic
-        const screenX = x * canvasZoom + canvasViewport.x;
-        const screenY = y * canvasZoom + canvasViewport.y;
-        return `translate3d(${screenX}px, ${screenY}px, 0) scale(${canvasZoom})`;
-    };
     // ── 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,
-                // FIX: Combined Transform prevents the "Pan vs Zoom" lag
-                transform: getAbsoluteTransform(x, y),
+                // 2. Use translate3d for GPU performance
+                transform: `translate3d(${screenX}px, ${screenY}px, 0) scale(${canvasZoom})`,
                 transformOrigin: "top left",
-                transition: "none", // Critical: prevents animation-induced jitter
+                // 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 (_jsxs("div", { ref: overlayRef, className: "absolute inset-0 pointer-events-none overflow-hidden", style: { zIndex: 50 }, 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 })))] })
-    // </div>
-    );
+    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(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.70.0",
+    "version": "2.71.0",
     "description": "A feature-rich whiteboard component built with Fabric.js and React",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",