@mhamz.01/easyflow-whiteboard 2.170.0 → 2.171.0

package/dist/components/node/hooks/useFabricSync.d.ts

@@ -14,16 +14,27 @@ interface UseFabricSyncProps {
     setLocalDocuments: Dispatch<SetStateAction<Document[]>>;
 }
 /**
- * SRP: listens to Fabric canvas events and propagates changes to the HTML
- * overlay state. Handles four events:
+ * SRP: listens to Fabric canvas events and propagates changes to the HTML overlay.
  *
- *  object:moving      — mirrors Fabric object movement onto HTML node positions
- *                       (rAF-throttled, uses dragSelectedIdsRef snapshot)
- *  mouse:down         — clears HTML selection when clicking a Fabric object,
- *                       respects guard refs to avoid feedback loops
- *  selection:created  — clears HTML selection when Fabric creates a selection,
- *                       skipped when the HTML layer initiated the selection
- *  selection:updated  — same as above for selection updates
+ * object:moving  — mirrors Fabric drag onto HTML node positions (rAF-throttled).
+ *                  Uses an accumulated-delta ref so no frames are ever lost even
+ *                  when multiple mousemove events fire within one display frame.
+ * mouse:down     — snapshots drag selection; clears HTML selection for Fabric drags.
+ * selection:created / selection:updated — clear HTML selection when Fabric owns it.
+ *
+ * Three correctness invariants maintained here:
+ *
+ *  1. _prevLeft/Top is tracked on the ACTIVE OBJECT (which may be an activeSelection
+ *     group), not on `e.target` (which may be a member of the group). Both
+ *     `mouse:down` and `object:moving` must agree on which object they track.
+ *
+ *  2. Deltas are ACCUMULATED in a ref between RAF frames. When the RAF guard blocks
+ *     a frame, the delta is NOT discarded — it is added to the pending accumulator
+ *     and flushed in the next RAF callback. This prevents HTML nodes from drifting
+ *     behind Fabric objects during fast drags.
+ *
+ *  3. Guard refs (isHtmlSelecting, isSelectionBoxActive, htmlNodesSelectedByBox)
+ *     prevent feedback loops between the two selection systems.
  */
 export declare function useFabricSync({ fabricCanvas, canvasReady, dragSelectedIdsRef, selectedIdsRef, isHtmlSelectingRef, isSelectionBoxActiveRef, htmlNodesSelectedByBoxRef, setSelectedIds, setLocalTasks, setLocalDocuments, }: UseFabricSyncProps): void;
 export {};

package/dist/components/node/hooks/useFabricSync.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFabricSync.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useFabricSync.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACnF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AACrC,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAE7D,UAAU,kBAAkB;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACxC,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAClD,cAAc,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9C,kBAAkB,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC9C,uBAAuB,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACnD,yBAAyB,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrD,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACtD,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAChD,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;CACzD;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,YAAY,EACZ,WAAW,EACX,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,uBAAuB,EACvB,yBAAyB,EACzB,cAAc,EACd,aAAa,EACb,iBAAiB,GAClB,EAAE,kBAAkB,QAmFpB"}
+{"version":3,"file":"useFabricSync.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useFabricSync.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACnF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AACrC,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAE7D,UAAU,kBAAkB;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACxC,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAClD,cAAc,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9C,kBAAkB,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC9C,uBAAuB,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACnD,yBAAyB,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrD,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACtD,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAChD,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;CACzD;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,YAAY,EACZ,WAAW,EACX,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,uBAAuB,EACvB,yBAAyB,EACzB,cAAc,EACd,aAAa,EACb,iBAAiB,GAClB,EAAE,kBAAkB,QAoHpB"}

package/dist/components/node/hooks/useFabricSync.js

@@ -1,23 +1,38 @@
 import { useEffect, useRef } from "react";
 /**
- * SRP: listens to Fabric canvas events and propagates changes to the HTML
- * overlay state. Handles four events:
+ * SRP: listens to Fabric canvas events and propagates changes to the HTML overlay.
  *
- *  object:moving      — mirrors Fabric object movement onto HTML node positions
- *                       (rAF-throttled, uses dragSelectedIdsRef snapshot)
- *  mouse:down         — clears HTML selection when clicking a Fabric object,
- *                       respects guard refs to avoid feedback loops
- *  selection:created  — clears HTML selection when Fabric creates a selection,
- *                       skipped when the HTML layer initiated the selection
- *  selection:updated  — same as above for selection updates
+ * object:moving  — mirrors Fabric drag onto HTML node positions (rAF-throttled).
+ *                  Uses an accumulated-delta ref so no frames are ever lost even
+ *                  when multiple mousemove events fire within one display frame.
+ * mouse:down     — snapshots drag selection; clears HTML selection for Fabric drags.
+ * selection:created / selection:updated — clear HTML selection when Fabric owns it.
+ *
+ * Three correctness invariants maintained here:
+ *
+ *  1. _prevLeft/Top is tracked on the ACTIVE OBJECT (which may be an activeSelection
+ *     group), not on `e.target` (which may be a member of the group). Both
+ *     `mouse:down` and `object:moving` must agree on which object they track.
+ *
+ *  2. Deltas are ACCUMULATED in a ref between RAF frames. When the RAF guard blocks
+ *     a frame, the delta is NOT discarded — it is added to the pending accumulator
+ *     and flushed in the next RAF callback. This prevents HTML nodes from drifting
+ *     behind Fabric objects during fast drags.
+ *
+ *  3. Guard refs (isHtmlSelecting, isSelectionBoxActive, htmlNodesSelectedByBox)
+ *     prevent feedback loops between the two selection systems.
  */
 export function useFabricSync({ fabricCanvas, canvasReady, dragSelectedIdsRef, selectedIdsRef, isHtmlSelectingRef, isSelectionBoxActiveRef, htmlNodesSelectedByBoxRef, setSelectedIds, setLocalTasks, setLocalDocuments, }) {
     const fabricMoveRafRef = useRef(null);
+    // Accumulates ALL deltas between RAF frames so none are ever dropped.
+    const pendingDelta = useRef({ x: 0, y: 0 });
     useEffect(() => {
         const canvas = fabricCanvas?.current;
         if (!canvas)
             return;
         const handleObjectMoving = (e) => {
+            // e.transform.target is the object actually being dragged by Fabric's
+            // interaction system. For an activeSelection it is the GROUP, not a member.
             const target = e.transform?.target || e.target;
             if (!target)
                 return;
@@ -27,21 +42,46 @@ export function useFabricSync({ fabricCanvas, canvasReady, dragSelectedIdsRef, s
             target._prevTop = target.top;
             if (deltaX === 0 && deltaY === 0)
                 return;
-            const sel = dragSelectedIdsRef.current;
+            // Always accumulate — even when the RAF guard is active.
+            // This is the key fix for Bug 3: no delta is ever lost.
+            pendingDelta.current.x += deltaX;
+            pendingDelta.current.y += deltaY;
             if (fabricMoveRafRef.current !== null)
                 return;
             fabricMoveRafRef.current = requestAnimationFrame(() => {
                 fabricMoveRafRef.current = null;
-                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)));
+                // Drain the accumulator atomically.
+                const dx = pendingDelta.current.x;
+                const dy = pendingDelta.current.y;
+                pendingDelta.current.x = 0;
+                pendingDelta.current.y = 0;
+                const sel = dragSelectedIdsRef.current;
+                setLocalTasks((prev) => prev.map((t) => (sel.has(t.id) ? { ...t, x: t.x + dx, y: t.y + dy } : t)));
+                setLocalDocuments((prev) => prev.map((d) => (sel.has(d.id) ? { ...d, x: d.x + dx, y: d.y + dy } : d)));
             });
         };
         const handleMouseDown = (e) => {
-            const target = e.target;
-            if (target) {
-                target._prevLeft = target.left;
-                target._prevTop = target.top;
+            // Bug 2 fix: track _prevLeft on the ACTIVE OBJECT, not e.target.
+            //
+            // When multiple objects are selected (activeSelection), Fabric fires
+            // object:moving with target = the activeSelection GROUP.  But e.target in
+            // mouse:down can be an individual member object.  If we set _prevLeft on
+            // the member and then object:moving reads it from the group, _prevLeft is
+            // undefined → first-frame delta is always 0 → HTML nodes don't move on
+            // frame 1 → visible drift at the start of every Fabric drag.
+            //
+            // canvas.getActiveObject() returns the activeSelection when multiple
+            // objects are selected, which is exactly what object:moving will give us.
+            const activeObj = canvas.getActiveObject();
+            const trackTarget = activeObj ?? e.target;
+            if (trackTarget) {
+                trackTarget._prevLeft = trackTarget.left;
+                trackTarget._prevTop = trackTarget.top;
             }
+            // Reset the delta accumulator on every new drag.
+            pendingDelta.current.x = 0;
+            pendingDelta.current.y = 0;
+            const target = e.target;
             const activeObjects = canvas.getActiveObjects();
             const isClickingIntoActiveSelection = target && activeObjects.length > 1 && activeObjects.includes(target);
             if (isClickingIntoActiveSelection) {

package/dist/components/node/hooks/useNodeDrag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNodeDrag.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useNodeDrag.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,cAAc,EACd,UAAU,IAAI,eAAe,EAC7B,UAAU,IAAI,eAAe,EAC9B,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AACrC,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAA4B,MAAM,wBAAwB,CAAC;AAEvF,UAAU,gBAAgB;IACxB,cAAc,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9C,kBAAkB,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAClD,aAAa,EAAE,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAC;IACxC,iBAAiB,EAAE,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACxC,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAChD,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IACxD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;CACrD;AAcD;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,EAC1B,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,iBAAiB,GAClB,EAAE,gBAAgB;;iBACmC,MAAM,EAAE;;0BAcrD,MAAM,KAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS;8BAWzC,MAAM,KAAK,eAAe,GAAG,eAAe;EA2JxD"}
+{"version":3,"file":"useNodeDrag.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useNodeDrag.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,cAAc,EACd,UAAU,IAAI,eAAe,EAC7B,UAAU,IAAI,eAAe,EAC9B,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AACrC,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAA4B,MAAM,wBAAwB,CAAC;AAEvF,UAAU,gBAAgB;IACxB,cAAc,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9C,kBAAkB,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAClD,aAAa,EAAE,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAC;IACxC,iBAAiB,EAAE,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACxC,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAChD,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IACxD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;CACrD;AAcD;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,EAC1B,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,iBAAiB,GAClB,EAAE,gBAAgB;;iBACmC,MAAM,EAAE;;0BAcrD,MAAM,KAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS;8BAWzC,MAAM,KAAK,eAAe,GAAG,eAAe;EAkKxD"}

package/dist/components/node/hooks/useNodeDrag.js

@@ -47,8 +47,11 @@ export function useNodeDrag({ selectedIdsRef, dragSelectedIdsRef, localTasksRef,
         if (e.cancelable)
             e.preventDefault();
         const pointer = readPointer(e);
+        // The clicked item MUST be first so handleMove's anchor calculation is correct.
+        // offsetX/Y is relative to itemId's position, and handleMove reads firstStart
+        // from itemIds[0] — they must be the same node.
         const itemsToDrag = selectedIdsRef.current.has(itemId)
-            ? Array.from(selectedIdsRef.current)
+            ? [itemId, ...Array.from(selectedIdsRef.current).filter((id) => id !== itemId)]
             : [itemId];
         const vpt = canvas.viewportTransform || [1, 0, 0, 1, 0, 0];
         const liveZoom = vpt[0];
@@ -118,25 +121,33 @@ export function useNodeDrag({ selectedIdsRef, dragSelectedIdsRef, localTasksRef,
                 const vpt = canvas.viewportTransform;
                 const currentWorldX = (pointer.clientX - vpt[4]) / vpt[0];
                 const currentWorldY = (pointer.clientY - vpt[5]) / vpt[0];
+                // itemIds[0] is always the clicked node (guaranteed by handleDragStart).
+                // offsetX/Y is relative to that same node, so the anchor is consistent.
                 const firstStart = startPositions.get(itemIds[0]);
                 if (!firstStart)
                     return;
                 const deltaX = currentWorldX - offsetX - firstStart.x;
                 const deltaY = currentWorldY - offsetY - 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));
-                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));
+                // O(1) Set lookup — critical for 100+ node selections.
+                const itemIdSet = new Set(itemIds);
+                setLocalTasks((prev) => prev.map((t) => {
+                    const sp = startPositions.get(t.id);
+                    return sp && itemIdSet.has(t.id)
+                        ? { ...t, x: sp.x + deltaX, y: sp.y + deltaY }
+                        : t;
+                }));
+                setLocalDocuments((prev) => prev.map((d) => {
+                    const sp = startPositions.get(d.id);
+                    return sp && itemIdSet.has(d.id)
+                        ? { ...d, x: sp.x + deltaX, y: sp.y + deltaY }
+                        : d;
+                }));
+                // Move Fabric objects in sync. setCoords() updates hit-testing after
+                // the imperative position change.
                 canvasObjectsStartPos.forEach((startPos, obj) => {
                     obj.set({ left: startPos.left + deltaX, top: startPos.top + deltaY });
                     obj.setCoords();
                 });
-                const activeObj = canvas.getActiveObject();
-                if (activeObj?.type === "activeSelection") {
-                    activeObj.setCoords();
-                }
                 canvas.requestRenderAll();
             });
         };

package/package.json

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