@mhamz.01/easyflow-whiteboard 2.47.0 → 2.50.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;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;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,2CA6hBzB"}
+{"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;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,2CAuiBzB"}

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

@@ -115,20 +115,29 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
                 setSelectedIds(new Set());
                 return;
             }
-            // ── Read from ref — not stale closure ──
-            const activeObject = canvas.getActiveObject(); // the group/selection box
-            const activeObjects = canvas.getActiveObjects(); // individual objects inside it
-            const isTargetAlreadySelected = activeObjects.includes(target) || // clicked an individual selected object
-                activeObject === target; // clicked the selection box itself
-            if (!isTargetAlreadySelected) {
+            // At zoom=1 with identity VPT, getActiveObject() can return null before
+            // Fabric updates _activeObject. Use e.transform as the primary check —
+            // it is populated by Fabric's hit-test regardless of zoom level.
+            const transformTarget = e.transform?.target;
+            const activeObject = canvas.getActiveObject();
+            const activeObjects = canvas.getActiveObjects();
+            const isPartOfActiveSelection = transformTarget === target || // most reliable — direct from event
+                activeObject === target || // selection box group
+                activeObjects.includes(target); // individual object in multi-select
+            if (!isPartOfActiveSelection) {
                 setSelectedIds(new Set());
             }
         };
+        const handleSelectionCleared = () => {
+            setSelectedIds(new Set());
+        };
         canvas.on("object:moving", handleObjectMoving);
         canvas.on("mouse:down", handleMouseDown);
+        canvas.on("selection:cleared", handleSelectionCleared);
         return () => {
             canvas.off("object:moving", handleObjectMoving);
             canvas.off("mouse:down", handleMouseDown);
+            canvas.off("selection:cleared", handleSelectionCleared);
         };
         // ── selectedIds REMOVED from deps — read via selectedIdsRef instead ──────
         // Having selectedIds here caused the effect to re-register on every selection

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

@@ -1 +1 @@
-{"version":3,"file":"useCanvasInit.d.ts","sourceRoot":"","sources":["../../src/hooks/useCanvasInit.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAKhC,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAK,MAAM,CAAC;IACnB,KAAK,CAAC,EAAM,GAAG,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC;CACnB;AAED,UAAU,kBAAkB;IAC1B,SAAS,EAAW,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACxD,eAAe,EAAK,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7C,UAAU,EAAU,MAAM,CAAC;IAC3B,kBAAkB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACvC,cAAc,EAAM,SAAS,CAAC,OAAO,CAAC,CAAC;IACvC,WAAW,EAAS,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAY,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAC3C,YAAY,EAAQ,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAG1C,WAAW,CAAC,EAAQ,qBAAqB,CAAC;CAC3C;AAID,eAAO,MAAM,aAAa,GAAI,mIAU3B,kBAAkB,SA+FpB,CAAC"}
+{"version":3,"file":"useCanvasInit.d.ts","sourceRoot":"","sources":["../../src/hooks/useCanvasInit.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAKhC,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAK,MAAM,CAAC;IACnB,KAAK,CAAC,EAAM,GAAG,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC;CACnB;AAED,UAAU,kBAAkB;IAC1B,SAAS,EAAW,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACxD,eAAe,EAAK,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7C,UAAU,EAAU,MAAM,CAAC;IAC3B,kBAAkB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACvC,cAAc,EAAM,SAAS,CAAC,OAAO,CAAC,CAAC;IACvC,WAAW,EAAS,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAY,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAC3C,YAAY,EAAQ,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAQ,qBAAqB,CAAC;CAC3C;AAID,eAAO,MAAM,aAAa,GAAI,mIAU3B,kBAAkB,SAuHpB,CAAC"}

package/dist/hooks/useCanvasInit.js

@@ -4,7 +4,6 @@ import { initializeFabricCanvas, addWelcomeContent } from "../lib/fabric-utils";
 // ─── Hook ─────────────────────────────────────────────────────────────────────
 export const useCanvasInit = ({ canvasRef, fabricCanvasRef, activeTool, suppressHistoryRef, isRestoringRef, pushHistory, setTasks, setDocuments, initialData, }) => {
     useEffect(() => {
-        // Guard: prevent re-initialization if canvas already exists
         if (!canvasRef.current || fabricCanvasRef.current)
             return;
         const canvas = new Canvas(canvasRef.current, {
@@ -20,31 +19,44 @@ export const useCanvasInit = ({ canvasRef, fabricCanvasRef, activeTool, suppress
         initializeFabricCanvas(canvas);
         const canvasElement = canvas.getElement();
         canvasElement.style.touchAction = "none";
-        // ── Hydrate from initialData (replaces localStorage.getItem) ─────────────
-        // Shape is identical to what usePersistence sends via onSave —
-        // consumer reads from DB and passes straight back in as initialData.
+        // Tracks whether cleanup has run — prevents hydrateCanvas from
+        // running after canvas.dispose() if rAFs fire post-unmount
+        let disposed = false;
+        let raf1;
+        let raf2;
         const hydrateCanvas = async () => {
+            // Guard 1: unmounted before rAF fired — canvas already disposed
+            if (disposed)
+                return;
+            // Guard 2: check Fabric's internal ctx directly.
+            // canvas.getContext() is NOT a valid Fabric v6 API — always undefined.
+            // contextContainer is the actual 2D ctx Fabric uses internally.
+            // If undefined, Fabric hasn't finished attaching to the DOM yet.
+            const fabricCtx = canvas.contextContainer;
+            if (!fabricCtx) {
+                console.warn("[useCanvasInit] Fabric ctx not ready, skipping hydration");
+                return;
+            }
             const hasCanvas = !!initialData?.canvas;
             const hasNodes = !!(initialData?.tasks || initialData?.documents);
             if (hasCanvas || hasNodes) {
                 isRestoringRef.current = true;
                 if (hasCanvas) {
                     try {
-                        // Guard: ensure the canvas context is available before loading
-                        if (!canvas.getContext()) {
-                            console.warn("[useCanvasInit] Canvas context not ready, skipping load");
-                            return;
-                        }
                         await canvas.loadFromJSON(JSON.parse(initialData.canvas));
+                        if (disposed)
+                            return; // re-check after async gap — dispose may have run during await
                         canvas.renderAll();
                         pushHistory(JSON.stringify(canvas.toJSON()));
                     }
                     catch (err) {
                         console.error("[useCanvasInit] Canvas load failed:", err);
-                        addWelcomeContent(canvas, "https://res.cloudinary.com/dqyjffc9q/image/upload/v1773420161/easyflow-logo_nbpfd7.png");
+                        if (!disposed) {
+                            addWelcomeContent(canvas, "https://res.cloudinary.com/dqyjffc9q/image/upload/v1773420161/easyflow-logo_nbpfd7.png");
+                        }
                     }
                 }
-                if (hasNodes) {
+                if (hasNodes && !disposed) {
                     try {
                         if (initialData?.tasks)
                             setTasks(initialData.tasks);
@@ -58,13 +70,17 @@ export const useCanvasInit = ({ canvasRef, fabricCanvasRef, activeTool, suppress
                 isRestoringRef.current = false;
             }
             else {
-                addWelcomeContent(canvas, "https://res.cloudinary.com/dqyjffc9q/image/upload/v1773420161/easyflow-logo_nbpfd7.png");
-                pushHistory(JSON.stringify(canvas.toJSON()));
+                if (!disposed) {
+                    addWelcomeContent(canvas, "https://res.cloudinary.com/dqyjffc9q/image/upload/v1773420161/easyflow-logo_nbpfd7.png");
+                    pushHistory(JSON.stringify(canvas.toJSON()));
+                }
             }
         };
-        // Defer by one tick so Fabric's internal canvas context is fully ready
-        requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
+        // Double rAF ensures Fabric's internal ctx is fully attached:
+        // - raf1: fires when browser is about to paint (Fabric constructor done)
+        // - raf2: fires after first paint (contextContainer guaranteed attached)
+        raf1 = requestAnimationFrame(() => {
+            raf2 = requestAnimationFrame(() => {
                 hydrateCanvas();
             });
         });
@@ -83,11 +99,17 @@ export const useCanvasInit = ({ canvasRef, fabricCanvasRef, activeTool, suppress
         canvasElement.addEventListener("touchmove", preventDefaults, { passive: false });
         // ── Cleanup ───────────────────────────────────────────────────────────────
         return () => {
+            // Set disposed FIRST and cancel rAFs BEFORE canvas.dispose().
+            // This ensures hydrateCanvas cannot run on an already-disposed canvas
+            // which is what causes the ctx/clearRect errors.
+            disposed = true;
+            cancelAnimationFrame(raf1);
+            cancelAnimationFrame(raf2);
             window.removeEventListener("resize", handleResize);
             canvasElement.removeEventListener("touchstart", preventDefaults);
             canvasElement.removeEventListener("touchmove", preventDefaults);
             canvas.dispose();
             fabricCanvasRef.current = null;
         };
-    }, []); // Empty — must never re-run, initialData read once on mount
+    }, []);
 };

package/package.json

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