@mhamz.01/easyflow-whiteboard 2.3.0 → 2.4.0

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

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

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

@@ -172,7 +172,6 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         return e;
     };
     const handleDragStart = (itemId, e) => {
-        // Prevent browser scrolling while dragging
         if (e.cancelable)
             e.preventDefault();
         const pointer = getPointerEvent(e);
@@ -184,33 +183,64 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             itemsToDrag = [itemId];
             setSelectedIds(new Set([itemId]));
         }
+        // ── Read VPT first — single source of truth for coordinate space ──
+        const vpt = fabricCanvas?.current?.viewportTransform;
+        const liveZoom = vpt ? vpt[0] : 1;
+        const liveVpX = vpt ? vpt[4] : 0;
+        const liveVpY = vpt ? vpt[5] : 0;
+        // ── Snapshot world positions from DOM directly ──
+        // Avoids stale localTasks/localDocuments state by back-calculating
+        // world position from the actual rendered screen position of the element
         const startPositions = new Map();
         itemsToDrag.forEach((id) => {
-            const pos = getItemPosition(id);
-            if (pos)
-                startPositions.set(id, pos);
+            const el = document.querySelector(`[data-node-id="${id}"]`);
+            if (el) {
+                const rect = el.getBoundingClientRect();
+                // Back-calculate world coords from actual DOM position — always accurate
+                const worldX = (rect.left - liveVpX) / liveZoom;
+                const worldY = (rect.top - liveVpY) / liveZoom;
+                startPositions.set(id, { x: worldX, y: worldY });
+            }
+            else {
+                // Fallback to state if DOM element not found
+                const pos = getItemPosition(id);
+                if (pos)
+                    startPositions.set(id, pos);
+            }
         });
         const canvasObjectsStartPos = new Map();
         selectedCanvasObjects.forEach((obj) => {
             canvasObjectsStartPos.set(obj, { left: obj.left || 0, top: obj.top || 0 });
         });
-        const clickedPos = getItemPosition(itemId);
-        if (!clickedPos)
-            return;
-        const screenX = clickedPos.x * canvasZoom + canvasViewport.x;
-        const screenY = clickedPos.y * canvasZoom + canvasViewport.y;
+        // ── Offset from pointer to node's top-left in screen space ──
+        const clickedEl = document.querySelector(`[data-node-id="${itemId}"]`);
+        let offsetX = 0;
+        let offsetY = 0;
+        if (clickedEl) {
+            const rect = clickedEl.getBoundingClientRect();
+            offsetX = pointer.clientX - rect.left;
+            offsetY = pointer.clientY - rect.top;
+        }
+        else {
+            const clickedPos = getItemPosition(itemId);
+            if (!clickedPos)
+                return;
+            const screenX = clickedPos.x * liveZoom + liveVpX;
+            const screenY = clickedPos.y * liveZoom + liveVpY;
+            offsetX = pointer.clientX - screenX;
+            offsetY = pointer.clientY - screenY;
+        }
         dragStateRef.current = {
             isDragging: true,
             itemIds: itemsToDrag,
             startPositions,
             canvasObjectsStartPos,
-            offsetX: pointer.clientX - screenX,
-            offsetY: pointer.clientY - screenY,
+            offsetX,
+            offsetY,
         };
         setDragging({ itemIds: itemsToDrag });
         document.body.style.cursor = "grabbing";
         document.body.style.userSelect = "none";
-        // Prevents mobile pull-to-refresh
         document.body.style.touchAction = "none";
     };
     // ── Drag move (HTML Node side) ───────────────────────────────────────────────
@@ -220,7 +250,6 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         const handleMove = (e) => {
             if (!dragStateRef.current.isDragging)
                 return;
-            // Prevent mobile scrolling
             if (e.cancelable)
                 e.preventDefault();
             const pointer = getPointerEvent(e);
@@ -232,22 +261,27 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
                 const firstStart = startPositions.get(firstId);
                 if (!firstStart)
                     return;
-                // Calculate new world coordinates
-                const newX = (pointer.clientX - offsetX - canvasViewport.x) / canvasZoom;
-                const newY = (pointer.clientY - offsetY - canvasViewport.y) / canvasZoom;
+                // ── Live VPT — no React state, no staleness ──
+                const vpt = fabricCanvas?.current?.viewportTransform;
+                const liveZoom = vpt ? vpt[0] : 1;
+                const liveVpX = vpt ? vpt[4] : 0;
+                const liveVpY = vpt ? vpt[5] : 0;
+                // pointer - offset = top-left of node in screen space
+                // subtract vpX, divide by zoom = world position
+                const newX = (pointer.clientX - offsetX - liveVpX) / liveZoom;
+                const newY = (pointer.clientY - offsetY - liveVpY) / liveZoom;
                 const deltaX = newX - firstStart.x;
                 const deltaY = newY - firstStart.y;
-                // Batch state updates for React
-                setLocalTasks((prev) => prev.map((t) => (itemIds.includes(t.id) ? {
+                setLocalTasks((prev) => prev.map((t) => itemIds.includes(t.id) ? {
                     ...t,
-                    x: (startPositions.get(t.id)?.x || 0) + deltaX,
-                    y: (startPositions.get(t.id)?.y || 0) + deltaY
-                } : t)));
-                setLocalDocuments((prev) => prev.map((d) => (itemIds.includes(d.id) ? {
+                    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 || 0) + deltaX,
-                    y: (startPositions.get(d.id)?.y || 0) + deltaY
-                } : d)));
+                    x: (startPositions.get(d.id)?.x ?? d.x) + deltaX,
+                    y: (startPositions.get(d.id)?.y ?? d.y) + deltaY,
+                } : d));
                 if (fabricCanvas?.current) {
                     canvasObjectsStartPos.forEach((startPos, obj) => {
                         obj.set({
@@ -335,22 +369,15 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
     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: {
+        const isDraggingItem = dragging?.itemIds.includes(id);
+        return (_jsx("div", { "data-node-id": id, 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,
+                zIndex: isDraggingItem ? 1000 : 1,
             }, children: children }, id));
     };
     return (_jsx("div", { ref: overlayRef, className: "absolute inset-0 pointer-events-none", style: { zIndex: 50 }, onWheel: handleOverlayWheel, onClick: (e) => {

package/package.json

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