@mhamz.01/easyflow-whiteboard 2.4.0 → 2.6.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,2CAofzB"}
+{"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,2CAwezB"}

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

@@ -183,60 +183,37 @@ 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 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 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 });
         });
-        // ── 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;
-        }
+        const clickedPos = getItemPosition(itemId);
+        if (!clickedPos)
+            return;
+        // ── FIX: Read VPT directly — never stale, always frame-perfect ──
+        const vpt = fabricCanvas?.current?.viewportTransform;
+        const liveZoom = vpt ? vpt[0] : 1;
+        const liveVpX = vpt ? vpt[4] : 0;
+        const liveVpY = vpt ? vpt[5] : 0;
+        const screenX = clickedPos.x * liveZoom + liveVpX;
+        const screenY = clickedPos.y * liveZoom + liveVpY;
+        console.log("pointer screen:", pointer.clientX, pointer.clientY);
+        console.log("clickedPos world:", clickedPos?.x, clickedPos?.y);
+        console.log("vpt zoom/vpX/vpY:", liveZoom, liveVpX, liveVpY);
+        console.log("node screen should be:", clickedPos ? clickedPos.x * liveZoom + liveVpX : "?", clickedPos ? clickedPos.y * liveZoom + liveVpY : "?");
         dragStateRef.current = {
             isDragging: true,
             itemIds: itemsToDrag,
             startPositions,
             canvasObjectsStartPos,
-            offsetX,
-            offsetY,
+            offsetX: pointer.clientX - screenX,
+            offsetY: pointer.clientY - screenY,
         };
         setDragging({ itemIds: itemsToDrag });
         document.body.style.cursor = "grabbing";
@@ -261,13 +238,12 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
                 const firstStart = startPositions.get(firstId);
                 if (!firstStart)
                     return;
-                // ── Live VPT — no React state, no staleness ──
+                // ── FIX: Read VPT live inside rAF — perfectly in sync with Fabric ──
                 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
+                // Convert screen → world using live VPT values
                 const newX = (pointer.clientX - offsetX - liveVpX) / liveZoom;
                 const newY = (pointer.clientY - offsetY - liveVpY) / liveZoom;
                 const deltaX = newX - firstStart.x;
@@ -317,7 +293,7 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             window.removeEventListener("touchend", handleEnd);
             window.removeEventListener("touchcancel", handleEnd);
         };
-    }, [dragging, canvasZoom, canvasViewport, localTasks, localDocuments, fabricCanvas]);
+    }, [dragging, localTasks, localDocuments, fabricCanvas]);
     // ── Selection, Status, Keyboard Logic ────────────────────────────────────────
     const handleSelect = (id, e) => {
         if (e?.shiftKey || e?.ctrlKey || e?.metaKey) {
@@ -369,15 +345,22 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
     const renderItem = (id, x, y, children) => {
         const screenX = x * canvasZoom;
         const screenY = y * canvasZoom;
-        const isDraggingItem = dragging?.itemIds.includes(id);
-        return (_jsx("div", { "data-node-id": id, className: "pointer-events-auto absolute", style: {
+        // 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: isDraggingItem ? 1000 : 1,
+                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) => {

package/package.json

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