@mhamz.01/easyflow-whiteboard 1.12.0 → 1.14.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,2CAshBzB"}
+{"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,2CAsdzB"}

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

@@ -22,57 +22,6 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
     // ── Sync props → local state ────────────────────────────────────────────────
     useEffect(() => { setLocalTasks(tasks); }, [tasks]);
     useEffect(() => { setLocalDocuments(documents); }, [documents]);
-    // ----Sync with Fabric canvas-------------------------------------------------
-    useEffect(() => {
-        const canvas = fabricCanvas?.current;
-        if (!canvas)
-            return;
-        const handleSelectionCleared = () => {
-            setSelectedIds(new Set());
-        };
-        const handleMouseDown = (e) => {
-            if (!e.target) {
-                setSelectedIds(new Set());
-            }
-        };
-        canvas.on("selection:cleared", handleSelectionCleared);
-        canvas.on("mouse:down", handleMouseDown);
-        return () => {
-            canvas.off("selection:cleared", handleSelectionCleared);
-            canvas.off("mouse:down", handleMouseDown);
-        };
-    }, [fabricCanvas]);
-    // 3. Update your existing keyboard handler to include clearing on click outside
-    useEffect(() => {
-        const handleKeyDown = (e) => {
-            if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)
-                return;
-            // Clear selection on Escape
-            if (e.key === "Escape") {
-                setSelectedIds(new Set());
-                fabricCanvas?.current?.discardActiveObject();
-                fabricCanvas?.current?.renderAll();
-            }
-            // Select All
-            if ((e.ctrlKey || e.metaKey) && e.key === "a") {
-                e.preventDefault();
-                setSelectedIds(new Set([...localTasks.map((t) => t.id), ...localDocuments.map((d) => d.id)]));
-            }
-            // Delete
-            if ((e.key === "Delete" || e.key === "Backspace") && selectedIds.size > 0) {
-                e.preventDefault();
-                const updatedTasks = localTasks.filter((t) => !selectedIds.has(t.id));
-                const updatedDocs = localDocuments.filter((d) => !selectedIds.has(d.id));
-                setLocalTasks(updatedTasks);
-                setLocalDocuments(updatedDocs);
-                setSelectedIds(new Set());
-                onTasksUpdate?.(updatedTasks);
-                onDocumentsUpdate?.(updatedDocs);
-            }
-        };
-        window.addEventListener("keydown", handleKeyDown);
-        return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [localTasks, localDocuments, selectedIds, fabricCanvas, onTasksUpdate, onDocumentsUpdate]);
     // ── Event Forwarding (Fixes Zooming on Nodes) ───────────────────────────────
     const handleOverlayWheel = (e) => {
         if (e.ctrlKey || e.metaKey || e.shiftKey) {
@@ -179,15 +128,22 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             return { x: doc.x, y: doc.y };
         return undefined;
     };
+    // In CanvasOverlayLayer, update isItemInSelectionBox to recalculate offset
     const isItemInSelectionBox = (x, y, width, height, box) => {
+        // Get FRESH overlay offset (handles sidebar open/close)
+        const overlayRect = overlayRef.current?.getBoundingClientRect();
+        if (!overlayRect)
+            return false;
+        // Item position in screen space (relative to whiteboard container)
         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);
+        // Selection box adjusted for overlay offset
+        const boxX1 = Math.min(box.x1, box.x2) - overlayRect.left;
+        const boxY1 = Math.min(box.y1, box.y2) - overlayRect.top;
+        const boxX2 = Math.max(box.x1, box.x2) - overlayRect.left;
+        const boxY2 = Math.max(box.y1, box.y2) - overlayRect.top;
         return !(boxX2 < itemX1 || boxX1 > itemX2 || boxY2 < itemY1 || boxY1 > itemY2);
     };
     // ── Selection box detection ──────────────────────────────────────────────────
@@ -395,13 +351,8 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             }, children: children }, id));
     };
     return (_jsx("div", { ref: overlayRef, className: "absolute inset-0 pointer-events-none", style: { zIndex: 50 }, onWheel: handleOverlayWheel, onClick: (e) => {
-            // Clear selection when clicking on overlay background
-            if (e.target === e.currentTarget) {
+            if (e.target === e.currentTarget)
                 setSelectedIds(new Set());
-                // Also clear Fabric selection
-                fabricCanvas?.current?.discardActiveObject();
-                fabricCanvas?.current?.renderAll();
-            }
         }, children: _jsxs("div", { className: "absolute top-0 left-0 pointer-events-none", style: {
                 transform: `translate(${canvasViewport.x}px, ${canvasViewport.y}px)`,
                 transformOrigin: "top left",

package/dist/components/whiteboard/whiteboard-test.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"whiteboard-test.d.ts","sourceRoot":"","sources":["../../../src/components/whiteboard/whiteboard-test.tsx"],"names":[],"mappings":"AA4CA,MAAM,CAAC,OAAO,UAAU,gBAAgB,4CAoQvC"}
+{"version":3,"file":"whiteboard-test.d.ts","sourceRoot":"","sources":["../../../src/components/whiteboard/whiteboard-test.tsx"],"names":[],"mappings":"AA4CA,MAAM,CAAC,OAAO,UAAU,gBAAgB,4CAqQvC"}

package/dist/components/whiteboard/whiteboard-test.js

@@ -134,6 +134,7 @@ export default function FabricWhiteboard() {
         setSelectionBox,
         setSelectedCanvasObjects,
         isDrawingRef,
+        clearCustomNodeSelection: () => setSelectedIds(new Set()), // ← ADD THIS
     });
     // Text style updates
     useTextStyle({
@@ -205,3 +206,6 @@ export default function FabricWhiteboard() {
                         zIndex: 0,
                     } }), _jsx("canvas", { ref: canvasRef, className: "absolute inset-0", style: { zIndex: 1 } }), _jsx(CanvasOverlayLayer, { tasks: tasks, documents: documents, onTasksUpdate: setTasks, onDocumentsUpdate: setDocuments, canvasZoom: canvasZoom, canvasViewport: canvasViewport, selectionBox: selectionBox, selectedCanvasObjects: selectedCanvasObjects, fabricCanvas: fabricCanvasRef }), _jsxs("div", { className: "absolute inset-0 pointer-events-none", style: { zIndex: 100 }, children: [_jsx("div", { className: "pointer-events-auto", children: _jsx(WhiteboardToolbar, { fabricCanvas: fabricCanvasRef, isRestoringRef: isRestoringRef, onAddTask: handleAddTaskFromDropdown, onAddDocument: handleAddDocumentFromDropdown }) }), _jsx("div", { className: "pointer-events-auto", children: _jsx(ToolOptionsPanel, { fabricCanvas: fabricCanvasRef }) }), _jsx("div", { className: "pointer-events-auto", children: _jsx(ZoomControls, { zoom: canvasZoom, onZoomIn: handleZoomIn, onZoomOut: handleZoomOut, onResetZoom: handleResetZoom }) })] })] }) }));
 }
+function setSelectedIds(arg0) {
+    throw new Error("Function not implemented.");
+}

package/dist/hooks/useSelection.d.ts

@@ -15,7 +15,8 @@ interface UseSelectionProps {
     } | null) => void;
     setSelectedCanvasObjects: (objects: FabricObject[]) => void;
     isDrawingRef: React.MutableRefObject<boolean>;
+    clearCustomNodeSelection?: () => void;
 }
-export declare const useSelection: ({ fabricCanvas, activeTool, canvasZoom, canvasViewport, setSelectionBox, setSelectedCanvasObjects, isDrawingRef, }: UseSelectionProps) => void;
+export declare const useSelection: ({ fabricCanvas, activeTool, canvasZoom, canvasViewport, setSelectionBox, setSelectedCanvasObjects, isDrawingRef, clearCustomNodeSelection, }: 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,SAkKnB,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;IAC9C,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;CACvC;AAED,eAAO,MAAM,YAAY,GAAI,8IAS1B,iBAAiB,SA2KnB,CAAC"}

package/dist/hooks/useSelection.js

@@ -5,7 +5,8 @@ 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, }) => {
+export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewport, setSelectionBox, setSelectedCanvasObjects, isDrawingRef, clearCustomNodeSelection, // ← Add this
+ }) => {
     const setSelectedObjectType = useWhiteboardStore((state) => state.setSelectedObjectType);
     const setActiveTool = useWhiteboardStore((state) => state.setActiveTool);
     useEffect(() => {
@@ -54,19 +55,15 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
                 });
                 selRect.setCoords();
                 canvas.renderAll();
-                // ═══════════════════════════════════════════════════════════════
-                // FIX: Get canvas element offset from viewport
-                // ═══════════════════════════════════════════════════════════════
+                // Get FRESH canvas offset on every move (handles sidebar open/close)
                 const canvasElement = canvas.getElement();
                 const rect = canvasElement.getBoundingClientRect();
-                // Calculate selection box in screen coordinates (including canvas offset)
                 setSelectionBox({
                     x1: Math.min(selStart.x, p.x) * canvasZoom + canvasViewport.x + rect.left,
                     y1: Math.min(selStart.y, p.y) * canvasZoom + canvasViewport.y + rect.top,
                     x2: Math.max(selStart.x, p.x) * canvasZoom + canvasViewport.x + rect.left,
                     y2: Math.max(selStart.y, p.y) * canvasZoom + canvasViewport.y + rect.top,
                 });
-                // ═══════════════════════════════════════════════════════════════
             });
         };
         const onUp = () => {
@@ -113,16 +110,25 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
             setSelectedObjectType(null);
             setSelectionBox(null);
             setSelectedCanvasObjects([]);
+            // ← ADD: Clear custom node selection too
+            clearCustomNodeSelection?.();
             if (!isDrawingRef.current && activeTool !== "select" && activeTool !== "pan") {
                 setActiveTool("select");
             }
         };
+        // ← ADD: Clear custom nodes when clicking empty canvas
+        const handleCanvasClick = (e) => {
+            if (!e.target && activeTool === "select") {
+                clearCustomNodeSelection?.();
+            }
+        };
         canvas.on("selection:created", onSelected);
         canvas.on("selection:updated", onSelected);
         canvas.on("selection:cleared", onDeselected);
         canvas.on("mouse:down", onDown);
         canvas.on("mouse:move", onMove);
         canvas.on("mouse:up", onUp);
+        canvas.on("mouse:down", handleCanvasClick); // ← ADD
         return () => {
             canvas.off("selection:created", onSelected);
             canvas.off("selection:updated", onSelected);
@@ -130,6 +136,7 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
             canvas.off("mouse:down", onDown);
             canvas.off("mouse:move", onMove);
             canvas.off("mouse:up", onUp);
+            canvas.off("mouse:down", handleCanvasClick); // ← ADD
             if (rafId !== null)
                 cancelAnimationFrame(rafId);
             if (selRect)
@@ -144,6 +151,7 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
         setSelectedCanvasObjects,
         setSelectedObjectType,
         setActiveTool,
-        isDrawingRef
+        isDrawingRef,
+        clearCustomNodeSelection // ← ADD
     ]);
 };

package/package.json

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