@mhamz.01/easyflow-whiteboard 2.39.0 → 2.40.0

package/dist/hooks/usePan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePan.d.ts","sourceRoot":"","sources":["../../src/hooks/usePan.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,UAAU,WAAW;IACnB,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrE,iBAAiB,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACjE;AAED,eAAO,MAAM,MAAM,GAAI,8DAKpB,WAAW,SAkGb,CAAC"}
+{"version":3,"file":"usePan.d.ts","sourceRoot":"","sources":["../../src/hooks/usePan.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,UAAU,WAAW;IACnB,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrE,iBAAiB,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACjE;AAED,eAAO,MAAM,MAAM,GAAI,8DAKpB,WAAW,SA8Gb,CAAC"}

package/dist/hooks/usePan.js

@@ -1,5 +1,14 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 export const usePan = ({ fabricCanvas, activeTool, handleZoom, setCanvasViewport, }) => {
+    // Refs so the effect registers ONCE but always reads latest values.
+    // Avoids tearing down/reattaching mouse:down/move/up on every tool change.
+    const activeToolRef = useRef(activeTool);
+    const handleZoomRef = useRef(handleZoom);
+    const setCanvasViewportRef = useRef(setCanvasViewport);
+    // Assigned synchronously in render — always fresh before any event fires
+    activeToolRef.current = activeTool;
+    handleZoomRef.current = handleZoom;
+    setCanvasViewportRef.current = setCanvasViewport;
     useEffect(() => {
         const canvas = fabricCanvas.current;
         if (!canvas)
@@ -11,16 +20,14 @@ export const usePan = ({ fabricCanvas, activeTool, handleZoom, setCanvasViewport
         let lastY = 0;
         let lastTouchDistance = 0;
         const onDown = (opt) => {
-            if (activeTool !== "pan")
+            if (activeToolRef.current !== "pan")
                 return;
             const e = opt.e;
-            // Pinch initialization
             if (e.touches && e.touches.length === 2) {
                 isPanning = false;
                 lastTouchDistance = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY);
                 return;
             }
-            // Pan initialization
             const pointer = e.touches ? e.touches[0] : e;
             isPanning = true;
             lastX = pointer.clientX;
@@ -28,45 +35,50 @@ export const usePan = ({ fabricCanvas, activeTool, handleZoom, setCanvasViewport
             canvas.setCursor("grabbing");
         };
         const onMove = (opt) => {
-            if (activeTool !== "pan")
+            if (activeToolRef.current !== "pan")
                 return;
             const e = opt.e;
-            // Handle pinch zoom (two fingers)
             if (e.touches && e.touches.length === 2) {
                 const currentDistance = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY);
                 if (lastTouchDistance > 0) {
                     const zoom = canvas.getZoom();
                     const delta = (currentDistance - lastTouchDistance) * 0.01;
-                    const newZoom = zoom + delta;
                     const midX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
                     const midY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
                     const rect = canvasEl.getBoundingClientRect();
-                    handleZoom(newZoom, { x: midX - rect.left, y: midY - rect.top });
+                    handleZoomRef.current(zoom + delta, {
+                        x: midX - rect.left,
+                        y: midY - rect.top,
+                    });
                 }
                 lastTouchDistance = currentDistance;
                 return;
             }
-            // Handle panning (one finger or mouse)
-            if (isPanning) {
-                const pointer = e.touches ? e.touches[0] : e;
-                const vpt = canvas.viewportTransform;
-                if (vpt) {
-                    vpt[4] += pointer.clientX - lastX;
-                    vpt[5] += pointer.clientY - lastY;
-                    canvas.requestRenderAll();
-                }
-                lastX = pointer.clientX;
-                lastY = pointer.clientY;
-            }
+            if (!isPanning)
+                return; // early exit — avoids any work on non-pan moves
+            const pointer = e.touches ? e.touches[0] : e;
+            const vpt = canvas.viewportTransform;
+            if (!vpt)
+                return;
+            // VPT mutation is synchronous — NO rAF here intentionally.
+            // rAF delays the mutation by one frame which makes pan feel like 20fps.
+            vpt[4] += pointer.clientX - lastX;
+            vpt[5] += pointer.clientY - lastY;
+            canvas.requestRenderAll();
+            lastX = pointer.clientX;
+            lastY = pointer.clientY;
         };
         const onUp = () => {
+            if (!isPanning && lastTouchDistance === 0)
+                return; // nothing to clean up
             const vpt = canvas.viewportTransform;
             if (vpt) {
-                setCanvasViewport({ x: vpt[4], y: vpt[5] });
+                // React state update only on mouse:up — not per-frame during pan
+                setCanvasViewportRef.current({ x: vpt[4], y: vpt[5] });
             }
             isPanning = false;
             lastTouchDistance = 0;
-            canvas.setCursor(activeTool === "pan" ? "grab" : "default");
+            canvas.setCursor(activeToolRef.current === "pan" ? "grab" : "default");
         };
         canvas.on("mouse:down", onDown);
         canvas.on("mouse:move", onMove);
@@ -76,5 +88,5 @@ export const usePan = ({ fabricCanvas, activeTool, handleZoom, setCanvasViewport
             canvas.off("mouse:move", onMove);
             canvas.off("mouse:up", onUp);
         };
-    }, [activeTool, handleZoom, setCanvasViewport, fabricCanvas]);
+    }, [fabricCanvas]); // registered once per canvas mount
 };

package/dist/hooks/usePersistance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePersistance.d.ts","sourceRoot":"","sources":["../../src/hooks/usePersistance.ts"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,UAAU,mBAAmB;IAC3B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7C,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,SAAS,EAAE,GAAG,EAAE,CAAC;IACjB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACzC,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;CAC9C;AAKD,eAAO,MAAM,cAAc,GAAI,sFAO5B,mBAAmB,SAgFrB,CAAC"}
+{"version":3,"file":"usePersistance.d.ts","sourceRoot":"","sources":["../../src/hooks/usePersistance.ts"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,UAAU,mBAAmB;IAC3B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7C,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,SAAS,EAAE,GAAG,EAAE,CAAC;IACjB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACzC,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;CAC9C;AAKD,eAAO,MAAM,cAAc,GAAI,sFAO5B,mBAAmB,SAkFrB,CAAC"}

package/dist/hooks/usePersistance.js

@@ -12,6 +12,7 @@ export const usePersistence = ({ fabricCanvas, tasks, documents, pushHistory, is
                 const json = JSON.stringify(canvas.toJSON());
                 localStorage.setItem(CANVAS_KEY, json);
                 pushHistory(json);
+                console.log("💾 Canvas content saving to storage is: " + json);
                 console.log("💾 Canvas saved via requestIdleCallback");
             }
             catch (err) {
@@ -34,6 +35,7 @@ export const usePersistence = ({ fabricCanvas, tasks, documents, pushHistory, is
             try {
                 const nodesData = { tasks, documents };
                 localStorage.setItem(NODES_KEY, JSON.stringify(nodesData));
+                console.log("💾 Nodes saving to storage is: " + JSON.stringify(nodesData));
                 console.log("💾 Custom nodes saved");
             }
             catch (err) {

package/package.json

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