@mhamz.01/easyflow-whiteboard 2.0.1 → 2.2.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,2CAudzB"}
+{"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,2CA2dzB"}

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

@@ -142,21 +142,26 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
     // ── Selection box detection ──────────────────────────────────────────────────
     useEffect(() => {
         if (!selectionBox)
-            return; // Don't clear on null — let keyboard/click handlers do that
+            return;
+        // ── O(n) single pass — no sort, no join, no extra allocations ──
         const newSelected = new Set();
-        localTasks.forEach((task) => {
+        for (const task of localTasks) {
             if (isItemInSelectionBox(task.x, task.y, 300, 140, selectionBox))
                 newSelected.add(task.id);
-        });
-        localDocuments.forEach((doc) => {
-            if (isItemInSelectionBox(doc.x, doc.y, 300, 160, selectionBox))
+        }
+        for (const doc of localDocuments) {
+            if (isItemInSelectionBox(doc.x, doc.y, 320, 160, selectionBox))
                 newSelected.add(doc.id);
-        });
-        // Only update if something actually changed (avoids re-render churn)
+        }
+        // ── O(n) equality check: size first (fast path), then membership ──
         setSelectedIds((prev) => {
-            const prevArr = Array.from(prev).sort().join(",");
-            const nextArr = Array.from(newSelected).sort().join(",");
-            return prevArr === nextArr ? prev : newSelected;
+            if (prev.size !== newSelected.size)
+                return newSelected;
+            for (const id of newSelected) {
+                if (!prev.has(id))
+                    return newSelected; // found a difference, swap
+            }
+            return prev; // identical — return same reference, no re-render
         });
     }, [selectionBox, localTasks, localDocuments]);
     // ── Drag start (HTML Node side) ──────────────────────────────────────────────

package/dist/components/toolbar/document-dropdown.js

@@ -6,7 +6,7 @@ import { useWhiteboardStore } from "../../store/whiteboard-store";
 const AVAILABLE_DOCUMENTS = [
     {
         id: "doc-1",
-        title: "Product Requirements Document",
+        title: "Product Not Requirements Document",
         project: "Website Redesign",
         breadcrumb: ["Design", "Specs"],
         preview: "This document outlines the core requirements for the new landing page including user flows, component specs, and acceptance criteria.",

package/dist/hooks/useSelection.d.ts

@@ -16,6 +16,6 @@ interface UseSelectionProps {
     setSelectedCanvasObjects: (objects: FabricObject[]) => void;
     isDrawingRef: React.MutableRefObject<boolean>;
 }
-export declare const useSelection: ({ fabricCanvas, activeTool, canvasZoom, canvasViewport, setSelectionBox, setSelectedCanvasObjects, isDrawingRef, }: UseSelectionProps) => void;
+export declare const useSelection: ({ fabricCanvas, activeTool, setSelectionBox, setSelectedCanvasObjects, isDrawingRef, }: UseSelectionProps) => void;
 export {};
 //# sourceMappingURL=useSelection.d.ts.map

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;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"}
+{"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,wFAM1B,iBAAiB,SAwJnB,CAAC"}

package/dist/hooks/useSelection.js

@@ -5,17 +5,11 @@ import { Frame } from "../lib/fabric-frame";
 import { Arrow } from "../lib/fabric-arrow";
 import { BidirectionalArrow } from "../lib/fabric-bidirectional-arrow";
 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);
+export const useSelection = ({ fabricCanvas, activeTool, setSelectionBox, setSelectedCanvasObjects, isDrawingRef, }) => {
+    const setSelectedObjectType = useWhiteboardStore((s) => s.setSelectedObjectType);
+    const setActiveTool = useWhiteboardStore((s) => s.setActiveTool);
+    // activeTool ref — so effect never re-registers on tool change
     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;
@@ -26,11 +20,11 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
         let selRect = null;
         let rafId = null;
         const onDown = (e) => {
-            // ── 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)
+            // Hide Fabric's native rubber-band rect — we draw our own
+            canvas.selection = false;
             const p = canvas.getScenePoint(e.e);
             selStart = { x: p.x, y: p.y };
             selRect = new Rect({
@@ -40,11 +34,9 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
                 height: 0,
                 fill: "rgba(2, 154, 255, 0.08)",
                 stroke: "#029AFF",
-                strokeWidth: 1 / zoomRef.current, // stays 1px visually at any zoom
+                strokeWidth: 1 / canvas.getZoom(),
                 selectable: false,
                 evented: 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);
@@ -64,20 +56,20 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
                     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
+                    strokeWidth: 1 / canvas.getZoom(),
                 });
                 selRect.setCoords();
                 canvas.renderAll();
-                // ── 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)
+                // ── Read directly from Fabric VPT — always frame-perfect, zero React lag ──
+                const vpt = canvas.viewportTransform;
+                const zoom = vpt[0]; // scaleX
+                const vpX = vpt[4]; // panX
+                const vpY = vpt[5]; // panY
                 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,
+                    x1: Math.min(selStart.x, p.x) * zoom + vpX,
+                    y1: Math.min(selStart.y, p.y) * zoom + vpY,
+                    x2: Math.max(selStart.x, p.x) * zoom + vpX,
+                    y2: Math.max(selStart.y, p.y) * zoom + vpY,
                 });
             });
         };
@@ -93,11 +85,9 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
                 canvas.renderAll();
                 selRect = null;
             }
+            // Restore Fabric's native selection for object clicking
+            canvas.selection = true;
             isSelecting = false;
-            // ── 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 = () => {
@@ -106,34 +96,24 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
                 return;
             setSelectedCanvasObjects(sel.type === "activeSelection" ? sel.getObjects() : [sel]);
             const typeMap = {
-                rect: "rectangle",
-                circle: "circle",
-                line: "line",
-                arrow: "arrow",
-                "bidirectional-arrow": "arrow",
-                "i-text": "text",
-                text: "text",
-                path: "pen",
-                image: "image",
+                rect: "rectangle", circle: "circle", line: "line",
+                arrow: "arrow", "bidirectional-arrow": "arrow",
+                "i-text": "text", text: "text", path: "pen", image: "image",
             };
-            const t = sel instanceof Frame
-                ? "frame"
-                : sel instanceof FabricImage
-                    ? "image"
-                    : sel instanceof Arrow
-                        ? "arrow"
-                        : sel instanceof BidirectionalArrow
-                            ? "arrow"
+            const t = sel instanceof Frame ? "frame"
+                : sel instanceof FabricImage ? "image"
+                    : sel instanceof Arrow ? "arrow"
+                        : sel instanceof BidirectionalArrow ? "arrow"
                             : typeMap[sel.type] ?? null;
             setSelectedObjectType(t);
         };
         const onDeselected = () => {
             setSelectedObjectType(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.
+            // ── Do NOT touch selectionBox here — onUp owns its lifecycle ──
             setSelectedCanvasObjects([]);
-            if (!isDrawingRef.current && activeToolRef.current !== "select" && activeToolRef.current !== "pan") {
+            if (!isDrawingRef.current &&
+                activeToolRef.current !== "select" &&
+                activeToolRef.current !== "pan") {
                 setActiveTool("select");
             }
         };
@@ -152,10 +132,11 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
             canvas.off("mouse:up", onUp);
             if (rafId !== null)
                 cancelAnimationFrame(rafId);
-            if (selRect)
+            if (selRect) {
                 canvas.remove(selRect);
+            }
+            canvas.selection = true; // always restore on cleanup
         };
-        // ── KEY FIX 7: Remove canvasZoom/canvasViewport/activeTool from deps ──
-        // They are now read via refs — effect only registers once per canvas mount.
+        // ── Stable deps only — effect registers once per canvas mount ──
     }, [fabricCanvas, setSelectionBox, setSelectedCanvasObjects, setSelectedObjectType, setActiveTool, isDrawingRef]);
 };

package/package.json

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