@mhamz.01/easyflow-whiteboard 2.7.0 → 2.9.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,2CAmfzB"}
+{"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,2CAkezB"}

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

@@ -19,8 +19,6 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
     });
     const rafIdRef = useRef(null);
     const overlayRef = useRef(null);
-    // Add this ref at top of CanvasOverlayLayer:
-    const isHtmlDraggingRef = useRef(false);
     // ── Sync props → local state ────────────────────────────────────────────────
     useEffect(() => { setLocalTasks(tasks); }, [tasks]);
     useEffect(() => { setLocalDocuments(documents); }, [documents]);
@@ -91,20 +89,20 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         if (!canvas)
             return;
         const handleObjectMoving = (e) => {
-            // ── Skip if user is dragging via HTML node — avoid position conflict ──
-            if (isHtmlDraggingRef.current)
-                return;
             const target = e.transform?.target || e.target;
             if (!target)
                 return;
+            // 1. Calculate delta in raw Scene Coordinates
+            // We do NOT divide by zoom here because target.left/top are world units.
             const deltaX = target.left - (target._prevLeft ?? target.left);
             const deltaY = target.top - (target._prevTop ?? target.top);
             target._prevLeft = target.left;
             target._prevTop = target.top;
             if (deltaX === 0 && deltaY === 0)
                 return;
-            setLocalTasks((prev) => prev.map((t) => selectedIds.has(t.id) ? { ...t, x: t.x + deltaX, y: t.y + deltaY } : t));
-            setLocalDocuments((prev) => prev.map((d) => selectedIds.has(d.id) ? { ...d, x: d.x + deltaX, y: d.y + deltaY } : d));
+            // 2. Apply the raw delta to HTML items
+            setLocalTasks((prev) => prev.map((t) => (selectedIds.has(t.id) ? { ...t, x: t.x + deltaX, y: t.y + deltaY } : t)));
+            setLocalDocuments((prev) => prev.map((d) => (selectedIds.has(d.id) ? { ...d, x: d.x + deltaX, y: d.y + deltaY } : d)));
         };
         const handleMouseDown = (e) => {
             const target = e.target;
@@ -174,116 +172,108 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         return e;
     };
     const handleDragStart = (itemId, e) => {
-        if (e.cancelable)
-            e.preventDefault();
-        const pointer = getPointerEvent(e);
-        // ── Snapshot VPT immediately — before anything else ──
-        const vpt = fabricCanvas?.current?.viewportTransform;
-        const liveZoom = vpt ? vpt[0] : 1;
-        const liveVpX = vpt ? vpt[4] : 0;
-        const liveVpY = vpt ? vpt[5] : 0;
-        // ── Snapshot ALL positions immediately from ref — before any state update ──
-        const allItems = [
-            ...localTasks.map(t => ({ id: t.id, x: t.x, y: t.y })),
-            ...localDocuments.map(d => ({ id: d.id, x: d.x, y: d.y })),
-        ];
-        let itemsToDrag;
-        if (selectedIds.has(itemId)) {
-            itemsToDrag = Array.from(selectedIds);
-        }
-        else {
-            itemsToDrag = [itemId];
-            // setSelectedIds AFTER snapshot — doesn't affect already-captured positions
+        const canvas = fabricCanvas?.current;
+        if (!canvas || !e)
+            return;
+        // Use the raw native event for the most accurate pointer position
+        const nativeEvent = 'nativeEvent' in e ? e.nativeEvent : e;
+        const pointer = getPointerEvent(nativeEvent);
+        // 1. Get the ABSOLUTE current transform from the canvas engine
+        const vpt = canvas.viewportTransform || [1, 0, 0, 1, 0, 0];
+        const zoom = vpt[0];
+        const vpX = vpt[4];
+        const vpY = vpt[5];
+        // 2. Calculate World Position of the mouse click immediately
+        const clickWorldX = (pointer.clientX - vpX) / zoom;
+        const clickWorldY = (pointer.clientY - vpY) / zoom;
+        // 3. Get the item's current world position
+        const clickedPos = getItemPosition(itemId);
+        if (!clickedPos)
+            return;
+        // 4. Calculate the WORLD OFFSET
+        // This is the distance from the mouse to the node's top-left in World Units.
+        const worldOffsetX = clickWorldX - clickedPos.x;
+        const worldOffsetY = clickWorldY - clickedPos.y;
+        // 5. Setup Drag State
+        let itemsToDrag = selectedIds.has(itemId) ? Array.from(selectedIds) : [itemId];
+        if (!selectedIds.has(itemId))
             setSelectedIds(new Set([itemId]));
-        }
         const startPositions = new Map();
-        allItems.forEach(({ id, x, y }) => {
-            if (itemsToDrag.includes(id))
-                startPositions.set(id, { x, y });
+        itemsToDrag.forEach(id => {
+            const pos = getItemPosition(id);
+            if (pos)
+                startPositions.set(id, pos);
         });
         const canvasObjectsStartPos = new Map();
-        selectedCanvasObjects.forEach((obj) => {
+        selectedCanvasObjects.forEach(obj => {
             canvasObjectsStartPos.set(obj, { left: obj.left || 0, top: obj.top || 0 });
         });
-        const clickedPos = startPositions.get(itemId);
-        if (!clickedPos)
-            return;
-        // ── World-space offset ──
-        const pointerWorldX = (pointer.clientX - liveVpX) / liveZoom;
-        const pointerWorldY = (pointer.clientY - liveVpY) / liveZoom;
-        const offsetWorldX = pointerWorldX - clickedPos.x;
-        const offsetWorldY = pointerWorldY - clickedPos.y;
         dragStateRef.current = {
             isDragging: true,
             itemIds: itemsToDrag,
             startPositions,
             canvasObjectsStartPos,
-            offsetX: offsetWorldX,
-            offsetY: offsetWorldY,
+            offsetX: worldOffsetX,
+            offsetY: worldOffsetY,
         };
-        // ── Block object:moving sync for the duration of this HTML drag ──
-        isHtmlDraggingRef.current = true;
         setDragging({ itemIds: itemsToDrag });
-        document.body.style.cursor = "grabbing";
-        document.body.style.userSelect = "none";
-        document.body.style.touchAction = "none";
     };
     // ── Drag move (HTML Node side) ───────────────────────────────────────────────
     useEffect(() => {
         if (!dragging)
             return;
+        // Inside the useEffect that watches [dragging, localTasks, localDocuments, fabricCanvas]
         const handleMove = (e) => {
             if (!dragStateRef.current.isDragging)
                 return;
             if (e.cancelable)
                 e.preventDefault();
             const pointer = getPointerEvent(e);
+            // 1. Throttle updates using requestAnimationFrame for 120Hz/144Hz screen support
             if (rafIdRef.current !== null)
                 cancelAnimationFrame(rafIdRef.current);
+            // Inside handleMove rAF
             rafIdRef.current = requestAnimationFrame(() => {
                 const { itemIds, startPositions, canvasObjectsStartPos, offsetX, offsetY } = dragStateRef.current;
+                const canvas = fabricCanvas?.current;
+                if (!canvas)
+                    return;
+                const vpt = canvas.viewportTransform;
+                const zoom = vpt[0];
+                const vpX = vpt[4];
+                const vpY = vpt[5];
+                // Current World position of the mouse
+                const currentWorldX = (pointer.clientX - vpX) / zoom;
+                const currentWorldY = (pointer.clientY - vpY) / zoom;
+                // The new world position of the node we are holding
+                const newX = currentWorldX - offsetX;
+                const newY = currentWorldY - offsetY;
                 const firstId = itemIds[0];
                 const firstStart = startPositions.get(firstId);
                 if (!firstStart)
                     return;
-                // ── 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;
-                // 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;
                 const deltaY = newY - firstStart.y;
-                setLocalTasks((prev) => prev.map((t) => itemIds.includes(t.id) ? {
+                // UPDATE: Only update if the delta has actually changed to prevent jitter
+                if (Math.abs(deltaX) < 0.01 && Math.abs(deltaY) < 0.01)
+                    return;
+                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));
-                if (fabricCanvas?.current) {
-                    canvasObjectsStartPos.forEach((startPos, obj) => {
-                        obj.set({
-                            left: startPos.left + deltaX,
-                            top: startPos.top + deltaY,
-                        });
-                        obj.setCoords();
-                    });
-                    fabricCanvas.current.requestRenderAll();
-                }
+                // Sync Fabric objects directly
+                canvasObjectsStartPos.forEach((startPos, obj) => {
+                    obj.set({ left: startPos.left + deltaX, top: startPos.top + deltaY });
+                    obj.setCoords();
+                });
+                canvas.requestRenderAll();
             });
         };
         const handleEnd = () => {
             if (rafIdRef.current !== null)
                 cancelAnimationFrame(rafIdRef.current);
             dragStateRef.current.isDragging = false;
-            // ── Re-enable object:moving sync ──
-            isHtmlDraggingRef.current = false;
             setDragging(null);
             document.body.style.cursor = "";
             document.body.style.userSelect = "";
@@ -367,7 +357,7 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
                 transformOrigin: "top left",
                 // 3. THE FIX: Remove transition entirely during any viewport change
                 // Any 'ease' during zoom causes the "shaking" behavior.
-                transition: "none",
+                transition: isDragging ? 'none' : 'transform 0.1s ease-out',
                 // 4. Optimization
                 willChange: "transform",
                 zIndex: isDragging ? 1000 : 1,

package/package.json

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