@mhamz.01/easyflow-whiteboard 2.88.0 → 2.89.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;AAO9C,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,2CAomBzB"}
+{"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,2CAglBzB"}

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

@@ -5,12 +5,15 @@ import TaskNode from "./custom-node";
 import DocumentNode from "./document-node";
 // ─── Component ────────────────────────────────────────────────────────────────
 export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, onDocumentsUpdate, canvasZoom = 1, canvasViewport = { x: 0, y: 0 }, selectionBox = null, selectedCanvasObjects = [], fabricCanvas, }) {
-    const [liveVpt, setLiveVpt] = useState({ x: canvasViewport.x, y: canvasViewport.y, zoom: canvasZoom });
     const [localTasks, setLocalTasks] = useState(tasks);
     const [localDocuments, setLocalDocuments] = useState(documents);
     const [selectedIds, setSelectedIds] = useState(new Set());
     const [dragging, setDragging] = useState(null);
     const [canvasReady, setCanvasReady] = useState(false);
+    const nodeClipboardRef = useRef({
+        tasks: [],
+        documents: [],
+    });
     const dragStateRef = useRef({
         isDragging: false,
         itemIds: [],
@@ -163,20 +166,6 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         // change, creating a new closure each time. The second drag captured a stale
         // or empty selectedIds from the closure at re-registration time.
     }, [canvasZoom, fabricCanvas, canvasReady]);
-    // 2. Sync directly with Fabric's render heartbeat
-    useEffect(() => {
-        const canvas = fabricCanvas?.current;
-        if (!canvas)
-            return;
-        const sync = () => {
-            const vpt = canvas.viewportTransform;
-            if (vpt) {
-                setLiveVpt({ x: vpt[4], y: vpt[5], zoom: vpt[0] });
-            }
-        };
-        canvas.on("after:render", sync);
-        return () => { canvas.off("after:render", sync); };
-    }, [fabricCanvas, canvasReady]);
     // ── Helpers ─────────────────────────────────────────────────────────────────
     const getItemPosition = (id) => {
         const task = localTasks.find((t) => t.id === id);
@@ -439,17 +428,17 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
     }, [localTasks, localDocuments, selectedIds, onTasksUpdate, onDocumentsUpdate]);
     // ── Render helper ────────────────────────────────────────────────────────────
     const renderItem = (id, x, y, children) => {
-        const screenX = x * liveVpt.zoom;
-        const screenY = y * liveVpt.zoom;
-        const isDragging = dragging?.itemIds.includes(id);
+        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: {
                 left: 0,
                 top: 0,
                 // 2. Use translate3d for GPU performance
-                transform: `translate3d(${screenX}px, ${screenY}px, 0) scale(${liveVpt.zoom})`,
+                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.
@@ -463,8 +452,7 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             if (e.target === e.currentTarget)
                 setSelectedIds(new Set());
         }, children: _jsxs("div", { className: "absolute top-0 left-0 pointer-events-none", style: {
-                transform: `translate3d(${liveVpt.x}px, ${liveVpt.y}px, 0)`,
+                transform: `translate(${canvasViewport.x}px, ${canvasViewport.y}px)`,
                 transformOrigin: "top left",
-                willChange: "transform",
             }, 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 })))] }) }));
 }

package/package.json

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