@mhamz.01/easyflow-whiteboard 1.14.0 → 1.16.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,2CAsdzB"}
+{"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,2CAkezB"}

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

@@ -128,36 +128,42 @@ 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)
+    const isItemInSelectionBox = (itemX, itemY, itemWidth, itemHeight, box) => {
+        const canvas = fabricCanvas?.current;
+        if (!canvas)
             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;
-        // 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);
+        // Get the offset of the actual canvas element within the consumer's page
+        const rect = canvas.getElement().getBoundingClientRect();
+        // Adjust screen coordinates to be relative to the canvas element
+        const boxSceneX1 = (box.x1 - rect.left - canvasViewport.x) / canvasZoom;
+        const boxSceneY1 = (box.y1 - rect.top - canvasViewport.y) / canvasZoom;
+        const boxSceneX2 = (box.x2 - rect.left - canvasViewport.x) / canvasZoom;
+        const boxSceneY2 = (box.y2 - rect.top - canvasViewport.y) / canvasZoom;
+        const bX1 = Math.min(boxSceneX1, boxSceneX2);
+        const bY1 = Math.min(boxSceneY1, boxSceneY2);
+        const bX2 = Math.max(boxSceneX1, boxSceneX2);
+        const bY2 = Math.max(boxSceneY1, boxSceneY2);
+        return !(itemX + itemWidth < bX1 ||
+            itemX > bX2 ||
+            itemY + itemHeight < bY1 ||
+            itemY > bY2);
     };
     // ── Selection box detection ──────────────────────────────────────────────────
     useEffect(() => {
         if (!selectionBox)
             return;
         const newSelected = new Set();
+        // Use standard widths for your nodes if they are fixed, 
+        // or pass their actual dimensions if dynamic.
         localTasks.forEach((task) => {
-            if (isItemInSelectionBox(task.x, task.y, 300, 140, selectionBox))
+            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))
+            if (isItemInSelectionBox(doc.x, doc.y, 300, 160, selectionBox)) {
                 newSelected.add(doc.id);
+            }
         });
         setSelectedIds(newSelected);
     }, [selectionBox, localTasks, localDocuments, canvasZoom, canvasViewport]);
@@ -350,11 +356,11 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
                 zIndex: isDragging ? 1000 : 1,
             }, children: children }, id));
     };
-    return (_jsx("div", { ref: overlayRef, className: "absolute inset-0 pointer-events-none", style: { zIndex: 50 }, onWheel: handleOverlayWheel, onClick: (e) => {
+    return (_jsx("div", { ref: overlayRef, className: "absolute inset-0 pointer-events-none overflow-hidden", style: { zIndex: 50 }, onWheel: handleOverlayWheel, onClick: (e) => {
             if (e.target === e.currentTarget)
                 setSelectedIds(new Set());
         }, children: _jsxs("div", { className: "absolute top-0 left-0 pointer-events-none", style: {
-                transform: `translate(${canvasViewport.x}px, ${canvasViewport.y}px)`,
-                transformOrigin: "top left",
+                transform: `translate3d(${canvasViewport.x}px, ${canvasViewport.y}px, 0)`,
+                willChange: "transform",
             }, children: [localTasks.map((task) => renderItem(task.id, task.x, task.y, _jsx(TaskNode, { ...task, isSelected: selectedIds.has(task.id), onSelect: handleSelect, onDragStart: handleDragStart, onStatusChange: handleStatusChange, zoom: 1 }))), localDocuments.map((doc) => renderItem(doc.id, doc.x, doc.y, _jsx(DocumentNode, { ...doc, isSelected: selectedIds.has(doc.id), onSelect: handleSelect, onDragStart: handleDragStart })))] }) }));
 }

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,4CAqQvC"}
+{"version":3,"file":"whiteboard-test.d.ts","sourceRoot":"","sources":["../../../src/components/whiteboard/whiteboard-test.tsx"],"names":[],"mappings":"AA4CA,MAAM,CAAC,OAAO,UAAU,gBAAgB,4CAoQvC"}

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

@@ -134,7 +134,6 @@ export default function FabricWhiteboard() {
         setSelectionBox,
         setSelectedCanvasObjects,
         isDrawingRef,
-        clearCustomNodeSelection: () => setSelectedIds(new Set()), // ← ADD THIS
     });
     // Text style updates
     useTextStyle({
@@ -206,6 +205,3 @@ 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,8 +15,7 @@ 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, clearCustomNodeSelection, }: UseSelectionProps) => void;
+export declare const useSelection: ({ fabricCanvas, activeTool, canvasZoom, canvasViewport, 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;IAC9C,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;CACvC;AAED,eAAO,MAAM,YAAY,GAAI,8IAS1B,iBAAiB,SA2KnB,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,SAsKnB,CAAC"}

package/dist/hooks/useSelection.js

@@ -5,8 +5,7 @@ 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, clearCustomNodeSelection, // ← Add this
- }) => {
+export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewport, setSelectionBox, setSelectedCanvasObjects, isDrawingRef, }) => {
     const setSelectedObjectType = useWhiteboardStore((state) => state.setSelectedObjectType);
     const setActiveTool = useWhiteboardStore((state) => state.setActiveTool);
     useEffect(() => {
@@ -55,14 +54,11 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
                 });
                 selRect.setCoords();
                 canvas.renderAll();
-                // Get FRESH canvas offset on every move (handles sidebar open/close)
-                const canvasElement = canvas.getElement();
-                const rect = canvasElement.getBoundingClientRect();
                 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,
+                    x1: Math.min(selStart.x, p.x) * canvasZoom + canvasViewport.x,
+                    y1: Math.min(selStart.y, p.y) * canvasZoom + canvasViewport.y,
+                    x2: Math.max(selStart.x, p.x) * canvasZoom + canvasViewport.x,
+                    y2: Math.max(selStart.y, p.y) * canvasZoom + canvasViewport.y,
                 });
             });
         };
@@ -110,25 +106,24 @@ 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?.();
+            // If user clicks the canvas background (not an object), clear overlay selection
+            if (!e.target) {
+                // You should pass a setter to clear selected IDs in your overlay
+                // setOverlaySelectedIds(new Set()); 
             }
         };
+        canvas.on("mouse:down", handleCanvasClick);
         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);
@@ -136,7 +131,6 @@ 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)
@@ -151,7 +145,6 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
         setSelectedCanvasObjects,
         setSelectedObjectType,
         setActiveTool,
-        isDrawingRef,
-        clearCustomNodeSelection // ← ADD
+        isDrawingRef
     ]);
 };

package/package.json

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