@mhamz.01/easyflow-whiteboard 2.138.0 → 2.140.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":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAI9C,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,wBA6pBG"}
+{"version":3,"file":"custom-node-overlay-layer.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node-overlay-layer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAI9C,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,wBAkpBG"}

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

@@ -282,8 +282,8 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
             itemIds: itemsToDrag,
             startPositions,
             canvasObjectsStartPos,
-            offsetX: clickWorldX, // Now stored as World Units
-            offsetY: clickWorldY, // Now stored as World Units
+            offsetX: worldOffsetX, // ← was clickWorldX, should be the offset
+            offsetY: worldOffsetY, // ← was clickWorldY
         };
         if (!selectedIdsRef.current.has(itemId) && dragStateRef.current.itemIds.length === 0) {
             setSelectedIds(new Set([itemId]));
@@ -323,14 +323,18 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
                 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 deltaX = currentWorldX - offsetX;
-                const deltaY = currentWorldY - offsetY;
+                // const deltaX = currentWorldX - offsetX;
+                // const deltaY = 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 anchorTargetX = currentWorldX - offsetX;
+                const anchorTargetY = currentWorldY - offsetY;
+                const deltaX = anchorTargetX - firstStart.x;
+                const deltaY = anchorTargetY - firstStart.y;
                 // 6. Update HTML Nodes (Batching these into one state update)
                 setLocalTasks((prev) => prev.map((t) => itemIds.includes(t.id)
                     ? {
@@ -439,20 +443,13 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
     }, [onTasksUpdate, onDocumentsUpdate]); // Issue 9: only stable callbacks
     // ── 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
         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(${x}px, ${y}px, 0) scale(${canvasZoom})`,
+                transform: `translate3d(${x}px, ${y}px, 0)`, // world units only
                 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,
             }, children: children }, id));
@@ -461,7 +458,7 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
             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)`,
+                transform: `translate(${canvasViewport.x}px, ${canvasViewport.y}px) scale(${canvasZoom})`,
                 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 })))] }) }));
 }, (prev, next) => {

package/dist/components/whiteboard/whiteboard-test.js

@@ -58,7 +58,7 @@ const MemoizedOverlayWrapper = React.memo(function OverlayWrapper({ tasks, docum
         canvas.on("after:render", updateViewport);
         updateViewport(); // Initial sync
         return () => {
-            canvas.off("viewport:changed", updateViewport);
+            canvas.off("after:render", updateViewport); // ← was "viewport:changed", must match registration
         };
     }, [fabricCanvasRef, canvasReady]);
     return (_jsx(CanvasOverlayLayer, { tasks: tasks, documents: documents, onTasksUpdate: onTasksUpdate, onDocumentsUpdate: onDocumentsUpdate, canvasZoom: canvasZoom, canvasViewport: canvasViewport, selectionBox: selectionBox, selectedCanvasObjects: selectedCanvasObjects, fabricCanvas: fabricCanvasRef, canvasReady: canvasReady }));

package/package.json

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