@mhamz.01/easyflow-whiteboard 1.28.0 → 2.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"useSelection.d.ts","sourceRoot":"","sources":["../../src/hooks/useSelection.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAQ,YAAY,EAAe,MAAM,QAAQ,CAAC;AAOjE,UAAU,iBAAiB;IACzB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,eAAe,EAAE,CAAC,GAAG,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1F,wBAAwB,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAC5D,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,YAAY,GAAI,oHAQ1B,iBAAiB,SA2JnB,CAAC"}
+{"version":3,"file":"useSelection.d.ts","sourceRoot":"","sources":["../../src/hooks/useSelection.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAQ,YAAY,EAAe,MAAM,QAAQ,CAAC;AAMjE,UAAU,iBAAiB;IACzB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,eAAe,EAAE,CAAC,GAAG,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1F,wBAAwB,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAC5D,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,YAAY,GAAI,oHAQ1B,iBAAiB,SAgLnB,CAAC"}

package/dist/hooks/useSelection.js

@@ -1,5 +1,5 @@
 // hooks/useSelection.ts
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { Rect, FabricImage } from "fabric";
 import { Frame } from "../lib/fabric-frame";
 import { Arrow } from "../lib/fabric-arrow";
@@ -8,6 +8,15 @@ import { useWhiteboardStore } from "../store/whiteboard-store";
 export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewport, setSelectionBox, setSelectedCanvasObjects, isDrawingRef, }) => {
     const setSelectedObjectType = useWhiteboardStore((state) => state.setSelectedObjectType);
     const setActiveTool = useWhiteboardStore((state) => state.setActiveTool);
+    // ── KEY FIX 1: Store zoom/viewport in refs so the effect never re-registers ──
+    // This prevents listener teardown/re-attach during pan/zoom gestures
+    const zoomRef = useRef(canvasZoom);
+    const viewportRef = useRef(canvasViewport);
+    const activeToolRef = useRef(activeTool);
+    // Keep refs in sync with latest props on every render
+    useEffect(() => { zoomRef.current = canvasZoom; }, [canvasZoom]);
+    useEffect(() => { viewportRef.current = canvasViewport; }, [canvasViewport]);
+    useEffect(() => { activeToolRef.current = activeTool; }, [activeTool]);
     useEffect(() => {
         const canvas = fabricCanvas.current;
         if (!canvas)
@@ -17,9 +26,11 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
         let selRect = null;
         let rafId = null;
         const onDown = (e) => {
-            if (activeTool !== "select" || e.target)
+            // ── KEY FIX 2: Use ref instead of closure-captured activeTool ──
+            if (activeToolRef.current !== "select" || e.target)
                 return;
             isSelecting = true;
+            // getScenePoint returns world coordinates (zoom + pan already factored in by Fabric)
             const p = canvas.getScenePoint(e.e);
             selStart = { x: p.x, y: p.y };
             selRect = new Rect({
@@ -27,17 +38,18 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
                 top: p.y,
                 width: 0,
                 height: 0,
-                fill: "transparent",
-                stroke: "transparent",
-                strokeWidth: 0,
+                fill: "rgba(2, 154, 255, 0.08)",
+                stroke: "#029AFF",
+                strokeWidth: 1 / zoomRef.current, // stays 1px visually at any zoom
                 selectable: false,
                 evented: false,
-                visible: false,
+                // ── KEY FIX 3: Make it visible so user sees the selection rect ──
+                // was `visible: false` before — invisible but still blocking
+                excludeFromExport: true,
             });
             canvas.add(selRect);
             canvas.renderAll();
         };
-        // hooks/useSelection.ts - UPDATED
         const onMove = (e) => {
             if (!isSelecting || !selRect)
                 return;
@@ -47,34 +59,46 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
                 const p = canvas.getScenePoint(e.e);
                 const w = p.x - selStart.x;
                 const h = p.y - selStart.y;
-                const x1 = Math.min(selStart.x, p.x);
-                const y1 = Math.min(selStart.y, p.y);
-                const x2 = Math.max(selStart.x, p.x);
-                const y2 = Math.max(selStart.y, p.y);
                 selRect.set({
-                    left: x1,
-                    top: y1,
-                    width: x2 - x1,
-                    height: y2 - y1,
+                    left: w < 0 ? p.x : selStart.x,
+                    top: h < 0 ? p.y : selStart.y,
+                    width: Math.abs(w),
+                    height: Math.abs(h),
+                    strokeWidth: 1 / zoomRef.current, // keep stroke sharp at any zoom
                 });
                 selRect.setCoords();
                 canvas.renderAll();
-                // PASS WORLD COORDINATES ONLY
-                setSelectionBox({ x1, y1, x2, y2 });
+                // ── KEY FIX 4: Read from refs — always fresh, no stale closure ──
+                const zoom = zoomRef.current;
+                const vp = viewportRef.current;
+                // World → Screen conversion:
+                // screenX = worldX * zoom + panX  (matches exactly how nodes are rendered)
+                setSelectionBox({
+                    x1: Math.min(selStart.x, p.x) * zoom + vp.x,
+                    y1: Math.min(selStart.y, p.y) * zoom + vp.y,
+                    x2: Math.max(selStart.x, p.x) * zoom + vp.x,
+                    y2: Math.max(selStart.y, p.y) * zoom + vp.y,
+                });
             });
         };
         const onUp = () => {
-            if (!isSelecting || !selRect)
+            if (!isSelecting)
                 return;
             if (rafId !== null) {
                 cancelAnimationFrame(rafId);
                 rafId = null;
             }
-            canvas.remove(selRect);
-            canvas.renderAll();
+            if (selRect) {
+                canvas.remove(selRect);
+                canvas.renderAll();
+                selRect = null;
+            }
             isSelecting = false;
-            selRect = null;
-            setTimeout(() => setSelectionBox(null), 100);
+            // ── KEY FIX 5: Delay clear long enough for overlay useEffect to fire ──
+            // onDeselected (selection:cleared) was calling setSelectionBox(null) immediately,
+            // racing with the overlay's useEffect. 150ms ensures the React render cycle
+            // processes the final box position before it's cleared.
+            setTimeout(() => setSelectionBox(null), 150);
         };
         const onSelected = () => {
             const sel = canvas.getActiveObject();
@@ -105,9 +129,11 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
         };
         const onDeselected = () => {
             setSelectedObjectType(null);
-            setSelectionBox(null);
+            // ── KEY FIX 6: Do NOT clear selectionBox here ──
+            // This was racing with onUp's setTimeout and clearing before overlay processed it.
+            // onUp owns the selectionBox lifecycle. Only clear canvas objects here.
             setSelectedCanvasObjects([]);
-            if (!isDrawingRef.current && activeTool !== "select" && activeTool !== "pan") {
+            if (!isDrawingRef.current && activeToolRef.current !== "select" && activeToolRef.current !== "pan") {
                 setActiveTool("select");
             }
         };
@@ -129,15 +155,7 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
             if (selRect)
                 canvas.remove(selRect);
         };
-    }, [
-        activeTool,
-        canvasZoom,
-        canvasViewport,
-        fabricCanvas,
-        setSelectionBox,
-        setSelectedCanvasObjects,
-        setSelectedObjectType,
-        setActiveTool,
-        isDrawingRef
-    ]);
+        // ── KEY FIX 7: Remove canvasZoom/canvasViewport/activeTool from deps ──
+        // They are now read via refs — effect only registers once per canvas mount.
+    }, [fabricCanvas, setSelectionBox, setSelectedCanvasObjects, setSelectedObjectType, setActiveTool, isDrawingRef]);
 };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { default as EasyflowWhiteboard } from "./components/whiteboard/whiteboard";
+export { default as EasyflowWhiteboard } from "./components/whiteboard/whiteboard-test";
 export { useWhiteboardStore } from './store/whiteboard-store';
 export type { TaskNodeData, DocumentNodeData } from './types/canvas-node';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAkCA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACnF,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAkCA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AACxF,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/index.js

@@ -26,5 +26,5 @@
 // export * from "./components/toolbar/document-dropdown";
 // export * from "./components/toolbar/task-dropdown";
 // export * from "./components/toolbar/document-dropdown";
-export { default as EasyflowWhiteboard } from "./components/whiteboard/whiteboard";
+export { default as EasyflowWhiteboard } from "./components/whiteboard/whiteboard-test";
 export { useWhiteboardStore } from './store/whiteboard-store';

package/package.json

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