@mhamz.01/easyflow-whiteboard 1.17.0 → 1.18.0

package/dist/components/node/custom-node-overlay-layer.d.ts

@@ -38,6 +38,8 @@ interface CanvasOverlayLayerProps {
     } | null;
     selectedCanvasObjects?: FabricObject[];
     fabricCanvas?: React.RefObject<Canvas | null>;
+    selectedIds: Set<string>;
+    setSelectedIds: React.Dispatch<React.SetStateAction<Set<string>>>;
 }
 export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, onDocumentsUpdate, canvasZoom, canvasViewport, selectionBox, selectedCanvasObjects, fabricCanvas, }: CanvasOverlayLayerProps): import("react/jsx-runtime").JSX.Element;
 export {};

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,2CAkezB"}
+{"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;IAC9C,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzB,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;CACnE;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,2CAgfzB"}

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

@@ -128,42 +128,35 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             return { x: doc.x, y: doc.y };
         return undefined;
     };
-    const isItemInSelectionBox = (itemX, itemY, itemWidth, itemHeight, box) => {
-        const canvas = fabricCanvas?.current;
-        if (!canvas)
+    const isItemInSelectionBox = (x, y, width, height, box) => {
+        // Get overlay element offset (recalculate every time for sidebar changes)
+        const overlayRect = overlayRef.current?.getBoundingClientRect();
+        if (!overlayRect)
             return false;
-        // 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);
+        // Item position in screen space (relative to whiteboard)
+        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 from viewport
+        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 ──────────────────────────────────────────────────
     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]);
@@ -216,6 +209,28 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         // Prevents mobile pull-to-refresh
         document.body.style.touchAction = "none";
     };
+    // Add this useEffect in CanvasOverlayLayer
+    useEffect(() => {
+        const canvas = fabricCanvas?.current;
+        if (!canvas)
+            return;
+        const handleCanvasClick = (e) => {
+            // Clear custom node selection when clicking empty canvas
+            if (!e.target) {
+                setSelectedIds(new Set());
+            }
+        };
+        const handleSelectionCleared = () => {
+            // Clear custom nodes when Fabric selection is cleared
+            setSelectedIds(new Set());
+        };
+        canvas.on("mouse:down", handleCanvasClick);
+        canvas.on("selection:cleared", handleSelectionCleared);
+        return () => {
+            canvas.off("mouse:down", handleCanvasClick);
+            canvas.off("selection:cleared", handleSelectionCleared);
+        };
+    }, [fabricCanvas, setSelectedIds]);
     // ── Drag move (HTML Node side) ───────────────────────────────────────────────
     useEffect(() => {
         if (!dragging)
@@ -356,11 +371,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 overflow-hidden", style: { zIndex: 50 }, onWheel: handleOverlayWheel, onClick: (e) => {
+    return (_jsx("div", { ref: overlayRef, className: "absolute inset-0 pointer-events-none", 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: `translate3d(${canvasViewport.x}px, ${canvasViewport.y}px, 0)`,
-                willChange: "transform",
+                transform: `translate(${canvasViewport.x}px, ${canvasViewport.y}px)`,
+                transformOrigin: "top left",
             }, 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,4CAoQvC"}
+{"version":3,"file":"whiteboard-test.d.ts","sourceRoot":"","sources":["../../../src/components/whiteboard/whiteboard-test.tsx"],"names":[],"mappings":"AA4CA,MAAM,CAAC,OAAO,UAAU,gBAAgB,4CAuQvC"}

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

@@ -37,6 +37,7 @@ export default function FabricWhiteboard() {
     const eraserActiveRef = useRef(false);
     const eraserPathRef = useRef(null);
     const eraserPathPointsRef = useRef([]);
+    const [selectedIds, setSelectedIds] = useState(new Set());
     // Store
     const activeTool = useWhiteboardStore((state) => state.activeTool);
     const toolOptions = useWhiteboardStore((state) => state.toolOptions);
@@ -203,5 +204,5 @@ export default function FabricWhiteboard() {
                         backgroundImage: `radial-gradient(circle, rgba(255,255,255,0.2) 1.2px, transparent 1.2px)`,
                         backgroundSize: "40px 40px",
                         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 }) })] })] }) }));
+                    } }), _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, selectedIds: selectedIds, setSelectedIds: setSelectedIds }), _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 }) })] })] }) }));
 }

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,EAA8B,MAAM,QAAQ,CAAC;AAMhF,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,SAsLnB,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,SA6JnB,CAAC"}

package/dist/hooks/useSelection.js

@@ -17,13 +17,7 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
         let selRect = null;
         let rafId = null;
         const onDown = (e) => {
-            // 1. Handle Selection Clearing
-            if (!e.target) {
-                setSelectedCanvasObjects([]);
-                setSelectedObjectType(null);
-            }
-            // 2. Marquee Selection Logic
-            if (activeTool !== "select" || e.target || isDrawingRef.current)
+            if (activeTool !== "select" || e.target)
                 return;
             isSelecting = true;
             const p = canvas.getScenePoint(e.e);
@@ -33,12 +27,12 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
                 top: p.y,
                 width: 0,
                 height: 0,
-                fill: "rgba(0, 120, 255, 0.1)", // Slight tint helps debugging
-                stroke: "rgba(0, 120, 255, 0.5)",
-                strokeWidth: 1,
+                fill: "transparent",
+                stroke: "transparent",
+                strokeWidth: 0,
                 selectable: false,
                 evented: false,
-                visible: false, // Keep invisible, we use the React Overlay for UI
+                visible: false,
             });
             canvas.add(selRect);
             canvas.renderAll();
@@ -52,21 +46,22 @@ 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 = w < 0 ? p.x : selStart.x;
-                const y1 = h < 0 ? p.y : selStart.y;
-                const width = Math.abs(w);
-                const height = Math.abs(h);
-                selRect.set({ left: x1, top: y1, width, height });
+                selRect.set({
+                    left: w < 0 ? p.x : selStart.x,
+                    top: h < 0 ? p.y : selStart.y,
+                    width: Math.abs(w),
+                    height: Math.abs(h),
+                });
                 selRect.setCoords();
                 canvas.renderAll();
-                // CRITICAL: Get the physical position of the canvas on the screen
-                // This prevents the "abrupt jump" when the library is inside a layout with margins/sidebars.
-                const rect = canvas.getElement().getBoundingClientRect();
+                // ← FIX: Add canvas element offset
+                const canvasElement = canvas.getElement();
+                const rect = canvasElement.getBoundingClientRect();
                 setSelectionBox({
-                    x1: x1 * canvasZoom + canvasViewport.x + rect.left,
-                    y1: y1 * canvasZoom + canvasViewport.y + rect.top,
-                    x2: (x1 + width) * canvasZoom + canvasViewport.x + rect.left,
-                    y2: (y1 + height) * canvasZoom + canvasViewport.y + rect.top,
+                    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,
                 });
             });
         };
@@ -81,54 +76,35 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
             canvas.renderAll();
             isSelecting = false;
             selRect = null;
-            // Delay clearing the box slightly to allow intersection logic to finish
-            setTimeout(() => setSelectionBox(null), 50);
+            setTimeout(() => setSelectionBox(null), 100);
         };
         const onSelected = () => {
             const sel = canvas.getActiveObject();
             if (!sel || isDrawingRef.current)
                 return;
-            const objects = sel.type === "activeSelection"
-                ? sel.getObjects()
-                : [sel];
-            // Track previous positions to prevent jumping during drag
-            objects.forEach((obj) => {
-                obj._prevLeft = obj.left;
-                obj._prevTop = obj.top;
-            });
-            setSelectedCanvasObjects(objects);
+            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",
             };
-            let t = null;
-            if (sel instanceof Frame)
-                t = "frame";
-            else if (sel instanceof Arrow || sel instanceof BidirectionalArrow)
-                t = "arrow";
-            else if (sel instanceof FabricImage)
-                t = "image";
-            else
-                t = typeMap[sel.type] ?? "object";
+            const t = sel instanceof Frame
+                ? "frame"
+                : sel instanceof FabricImage
+                    ? "image"
+                    : sel instanceof Arrow
+                        ? "arrow"
+                        : sel instanceof BidirectionalArrow
+                            ? "arrow"
+                            : typeMap[sel.type] ?? null;
             setSelectedObjectType(t);
         };
-        // ── Sync Fabric movement to HTML Nodes ────────────────────────
-        const onObjectMoving = (e) => {
-            const target = e.transform?.target || e.target;
-            if (!target)
-                return;
-            // Ensure prev positions exist to avoid NaN or jumps
-            if (target._prevLeft === undefined)
-                target._prevLeft = target.left;
-            if (target._prevTop === undefined)
-                target._prevTop = target.top;
-            target.setCoords();
-        };
         const onDeselected = () => {
             setSelectedObjectType(null);
             setSelectionBox(null);
@@ -137,11 +113,9 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
                 setActiveTool("select");
             }
         };
-        // Event Binding
         canvas.on("selection:created", onSelected);
         canvas.on("selection:updated", onSelected);
         canvas.on("selection:cleared", onDeselected);
-        canvas.on("object:moving", onObjectMoving);
         canvas.on("mouse:down", onDown);
         canvas.on("mouse:move", onMove);
         canvas.on("mouse:up", onUp);
@@ -149,7 +123,6 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
             canvas.off("selection:created", onSelected);
             canvas.off("selection:updated", onSelected);
             canvas.off("selection:cleared", onDeselected);
-            canvas.off("object:moving", onObjectMoving);
             canvas.off("mouse:down", onDown);
             canvas.off("mouse:move", onMove);
             canvas.off("mouse:up", onUp);

package/package.json

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