@mhamz.01/easyflow-whiteboard 2.67.0 → 2.68.0

package/dist/components/node/custom-node-overlay-layer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-node-overlay-layer.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node-overlay-layer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAS9C,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,UAAU,uBAAuB;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,YAAY,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACzE,qBAAqB,CAAC,EAAE,YAAY,EAAE,CAAC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAaD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,UAAc,EACd,cAA+B,EAC/B,YAAmB,EACnB,qBAA0B,EAC1B,YAAY,GACb,EAAE,uBAAuB,2CAujBzB"}
+{"version":3,"file":"custom-node-overlay-layer.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node-overlay-layer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;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,2CAgmBzB"}

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

@@ -22,10 +22,15 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         offsetX: 0,
         offsetY: 0,
     });
+    const finalPositionsRef = useRef(null);
     const rafIdRef = useRef(null);
     const overlayRef = useRef(null);
+    const localTasksRef = useRef(localTasks);
+    const localDocumentsRef = useRef(localDocuments);
     const selectedIdsRef = useRef(selectedIds);
     selectedIdsRef.current = selectedIds;
+    localTasksRef.current = localTasks;
+    localDocumentsRef.current = localDocuments;
     // ── Sync props → local state ────────────────────────────────────────────────
     useEffect(() => { setLocalTasks(tasks); }, [tasks]);
     useEffect(() => { setLocalDocuments(documents); }, [documents]);
@@ -220,53 +225,70 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         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);
+        if (selectedIdsRef.current.has(itemId)) {
+            itemsToDrag = Array.from(selectedIdsRef.current);
         }
         else {
             itemsToDrag = [itemId];
-            setSelectedIds(new Set([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 });
         });
+        // 10. Commit to the ref for the requestAnimationFrame loop
         dragStateRef.current = {
             isDragging: true,
             itemIds: itemsToDrag,
             startPositions,
             canvasObjectsStartPos,
-            offsetX: worldOffsetX,
-            offsetY: worldOffsetY,
+            offsetX: worldOffsetX, // Now stored as World Units
+            offsetY: worldOffsetY, // Now stored as World Units
         };
+        if (!selectedIdsRef.current.has(itemId) && dragStateRef.current.itemIds.length === 0) {
+            setSelectedIds(new Set([itemId]));
+        }
+        // 11. Trigger UI states
         setDragging({ itemIds: itemsToDrag });
-        // ── ATTACH LISTENERS DIRECTLY ──
         document.body.style.cursor = "grabbing";
         document.body.style.userSelect = "none";
+        document.body.style.touchAction = "none";
     };
     // ── Drag move (HTML Node side) ───────────────────────────────────────────────
     useEffect(() => {
@@ -308,16 +330,22 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
                 const deltaX = newWorldX - firstStart.x;
                 const deltaY = newWorldY - firstStart.y;
                 // 6. Update HTML Nodes (Batching these into one state update)
-                setLocalTasks((prev) => prev.map((t) => itemIds.includes(t.id) ? {
-                    ...t,
-                    x: (startPositions.get(t.id)?.x ?? t.x) + deltaX,
-                    y: (startPositions.get(t.id)?.y ?? t.y) + deltaY,
-                } : t));
-                setLocalDocuments((prev) => prev.map((d) => itemIds.includes(d.id) ? {
-                    ...d,
-                    x: (startPositions.get(d.id)?.x ?? d.x) + deltaX,
-                    y: (startPositions.get(d.id)?.y ?? d.y) + deltaY,
-                } : d));
+                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;
+                });
                 // 7. Sync Fabric Objects (Imperative update for performance)
                 canvasObjectsStartPos.forEach((startPos, obj) => {
                     obj.set({
@@ -326,25 +354,29 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
                     });
                     obj.setCoords(); // Required for selection/intersection accuracy
                 });
+                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();
             });
         };
         const handleEnd = () => {
-            if (rafIdRef.current !== null)
+            if (rafIdRef.current !== null) {
                 cancelAnimationFrame(rafIdRef.current);
-            // 1. Kill the flag first
+                rafIdRef.current = null;
+            }
             dragStateRef.current.isDragging = false;
             setDragging(null);
-            // 2. Remove the listeners immediately
-            window.removeEventListener("mousemove", handleMove);
-            window.removeEventListener("mouseup", handleEnd);
-            window.removeEventListener("touchmove", handleMove);
-            window.removeEventListener("touchend", handleEnd);
             document.body.style.cursor = "";
             document.body.style.userSelect = "";
-            onTasksUpdate?.(localTasks);
-            onDocumentsUpdate?.(localDocuments);
+            document.body.style.touchAction = "";
+            // ✅ 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);
         };
         window.addEventListener("mousemove", handleMove, { passive: false });
         window.addEventListener("mouseup", handleEnd);

package/package.json

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