@mhamz.01/easyflow-whiteboard 1.27.0 → 2.0.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,2CA4dzB"}
+{"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,2CAudzB"}

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

@@ -128,38 +128,37 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             return { x: doc.x, y: doc.y };
         return undefined;
     };
-    const isItemInSelectionBox = (nodeX, nodeY, width, height, box) => {
-        // EVERYTHING HERE IS NOW IN WORLD (SCENE) COORDINATES
-        // No canvasZoom or canvasViewport needed for the check!
-        const nodeX2 = nodeX + width;
-        const nodeY2 = nodeY + height;
-        return !(box.x2 < nodeX ||
-            box.x1 > nodeX2 ||
-            box.y2 < nodeY ||
-            box.y1 > nodeY2);
+    const isItemInSelectionBox = (x, y, width, height, box) => {
+        const itemX1 = x * canvasZoom + canvasViewport.x;
+        const itemY1 = y * canvasZoom + canvasViewport.y;
+        const itemX2 = itemX1 + width * canvasZoom;
+        const itemY2 = itemY1 + height * canvasZoom;
+        const boxX1 = Math.min(box.x1, box.x2);
+        const boxY1 = Math.min(box.y1, box.y2);
+        const boxX2 = Math.max(box.x1, box.x2);
+        const boxY2 = Math.max(box.y1, box.y2);
+        return !(boxX2 < itemX1 || boxX1 > itemX2 || boxY2 < itemY1 || boxY1 > itemY2);
     };
     // ── Selection box detection ──────────────────────────────────────────────────
     useEffect(() => {
         if (!selectionBox)
-            return;
+            return; // Don't clear on null — let keyboard/click handlers do that
         const newSelected = new Set();
-        // Use the actual dimensions of your components
-        // Better yet: Pass these as props if they are dynamic
-        const NODE_WIDTH = 300;
-        const TASK_HEIGHT = 140;
-        const DOC_HEIGHT = 160;
-        localTasks.forEach((t) => {
-            if (isItemInSelectionBox(t.x, t.y, NODE_WIDTH, TASK_HEIGHT, selectionBox)) {
-                newSelected.add(t.id);
-            }
+        localTasks.forEach((task) => {
+            if (isItemInSelectionBox(task.x, task.y, 300, 140, selectionBox))
+                newSelected.add(task.id);
         });
-        localDocuments.forEach((d) => {
-            if (isItemInSelectionBox(d.x, d.y, NODE_WIDTH, DOC_HEIGHT, selectionBox)) {
-                newSelected.add(d.id);
-            }
+        localDocuments.forEach((doc) => {
+            if (isItemInSelectionBox(doc.x, doc.y, 300, 160, selectionBox))
+                newSelected.add(doc.id);
+        });
+        // Only update if something actually changed (avoids re-render churn)
+        setSelectedIds((prev) => {
+            const prevArr = Array.from(prev).sort().join(",");
+            const nextArr = Array.from(newSelected).sort().join(",");
+            return prevArr === nextArr ? prev : newSelected;
         });
-        setSelectedIds(newSelected);
-    }, [selectionBox]);
+    }, [selectionBox, localTasks, localDocuments]);
     // ── Drag start (HTML Node side) ──────────────────────────────────────────────
     // Helper to extract coordinates regardless of event type
     const getPointerEvent = (e) => {
@@ -329,25 +328,24 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
     }, [localTasks, localDocuments, selectedIds, onTasksUpdate, onDocumentsUpdate]);
     // ── Render helper ────────────────────────────────────────────────────────────
     const renderItem = (id, x, y, children) => {
-        // We apply the viewport offset to the container, 
-        // so here we only care about the scaled local position.
         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,
-                // Using translate3d(x, y, 0) is non-negotiable for 2026 performance
+                // 2. Use translate3d for GPU performance
                 transform: `translate3d(${screenX}px, ${screenY}px, 0) scale(${canvasZoom})`,
                 transformOrigin: "top left",
-                // CRITICAL: Disable all transitions. 
-                // Even a 100ms transition will cause the node to "float" away during zoom.
+                // 3. THE FIX: Remove transition entirely during any viewport change
+                // Any 'ease' during zoom causes the "shaking" behavior.
                 transition: "none",
+                // 4. Optimization
                 willChange: "transform",
                 zIndex: isDragging ? 1000 : 1,
-                // Added: Prevent browser from trying to optimize text rendering during move 
-                // which causes the "shaking" text bug.
-                backfaceVisibility: "hidden",
             }, children: children }, id));
     };
     return (_jsx("div", { ref: overlayRef, className: "absolute inset-0 pointer-events-none", style: { zIndex: 50 }, onWheel: handleOverlayWheel, onClick: (e) => {

package/dist/components/whiteboard/whiteboard.js

@@ -11,16 +11,16 @@
 //   FabricImage,
 //   classRegistry
 // } from "fabric";
-// import { useWhiteboardStore } from "@/app/store/whiteboard-store";
+// import { useWhiteboardStore } from "../../store/whiteboard-store";
 // import WhiteboardToolbar from "../toolbar/whiteboard-toolbar";
 // import ToolOptionsPanel from "../toolbar/tooloptions-panel";
 // import CanvasOverlayLayer from "../node/custom-node-overlay-layer";
 // import type { Document } from "../node/custom-node-overlay-layer";
 // import ZoomControls from "../zoomcontrol/zoom-control";
-// import { initializeFabricCanvas, updateDrawingObject, addText, calculateDashArray,addWelcomeContent } from "@/lib/fabric-utils";
-// import { Frame } from "@/lib/fabric-frame";
-// import { Arrow } from "@/lib/fabric-arrow";
-// import { BidirectionalArrow } from "@/lib/fabric-bidirectional-arrow";
+// import { initializeFabricCanvas, updateDrawingObject, addText, calculateDashArray,addWelcomeContent } from "../..//lib/fabric-utils";
+// import { Frame } from "../../lib/fabric-frame";
+// import { Arrow } from "../../lib/fabric-arrow";
+// import { BidirectionalArrow } from "../../lib/fabric-bidirectional-arrow";
 // import * as fabric from "fabric";
 // interface Task {
 //   id: string;
@@ -896,6 +896,7 @@
 //   const handleAddTaskFromDropdown = (taskTemplate: { id: string; title: string; status: "todo" | "in-progress" | "done"; assignee?: string; project?: string; priority?: "low" | "medium" | "high"; dueDate?: string; }) => { const canvas = fabricCanvasRef.current; if (!canvas) return; const vpt = canvas.viewportTransform; if (!vpt) return; const cx = (canvas.getWidth() / 2 - vpt[4]) / canvasZoom; const cy = (canvas.getHeight() / 2 - vpt[5]) / canvasZoom; setTasks((prev) => [...prev, { ...taskTemplate, id: `${taskTemplate.id}-${Date.now()}`, x: cx - 150, y: cy - 60 }]); };
 //   const handleAddDocumentFromDropdown = (docTemplate: Omit<Document, "x" | "y">) => { const canvas = fabricCanvasRef.current; if (!canvas) return; const vpt = canvas.viewportTransform; if (!vpt) return; const cx = (canvas.getWidth() / 2 - vpt[4]) / canvasZoom; const cy = (canvas.getHeight() / 2 - vpt[5]) / canvasZoom; setDocuments((prev) => [...prev, { ...docTemplate, id: `${docTemplate.id}-${Date.now()}`, x: cx - 150, y: cy - 80 }]); };
 //   return (
+//     <div className="easyflow-whiteboard">
 //     <div ref={containerRef} className="relative w-full h-screen overflow-hidden bg-[#0b0b0b]">
 //       <div className="absolute inset-0 pointer-events-none" style={{ backgroundImage: `radial-gradient(circle, rgba(255,255,255,0.2) 1.2px, transparent 1.2px)`, backgroundSize: "40px 40px", zIndex: 0 }}  />
 //       <canvas ref={canvasRef} className="absolute inset-0" style={{ zIndex: 1 }} />
@@ -907,5 +908,6 @@
 //         <div className="pointer-events-auto"><ZoomControls zoom={canvasZoom} onZoomIn={handleZoomIn} onZoomOut={handleZoomOut} onResetZoom={handleResetZoom} /></div>
 //       </div>
 //     </div>
+//     </div>
 //   );
 // } 

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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mhamz.01/easyflow-whiteboard",
-    "version": "1.27.0",
+    "version": "2.0.0",
     "description": "A feature-rich whiteboard component built with Fabric.js and React",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -43,7 +43,7 @@
     "devDependencies": {
         "@tailwindcss/cli": "^4.2.1",
         "@types/fabric": "^5.3.11",
-        "@types/node": "^20.0.0",
+        "@types/node": "^20.19.37",
         "@types/react": "^19.0.0",
         "@types/react-dom": "^19.0.0",
         "typescript": "^5.0.0"