@mhamz.01/easyflow-whiteboard 1.16.0 → 1.17.0

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,SAsKnB,CAAC"}
+{"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"}

package/dist/hooks/useSelection.js

@@ -17,7 +17,13 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
         let selRect = null;
         let rafId = null;
         const onDown = (e) => {
-            if (activeTool !== "select" || e.target)
+            // 1. Handle Selection Clearing
+            if (!e.target) {
+                setSelectedCanvasObjects([]);
+                setSelectedObjectType(null);
+            }
+            // 2. Marquee Selection Logic
+            if (activeTool !== "select" || e.target || isDrawingRef.current)
                 return;
             isSelecting = true;
             const p = canvas.getScenePoint(e.e);
@@ -27,12 +33,12 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
                 top: p.y,
                 width: 0,
                 height: 0,
-                fill: "transparent",
-                stroke: "transparent",
-                strokeWidth: 0,
+                fill: "rgba(0, 120, 255, 0.1)", // Slight tint helps debugging
+                stroke: "rgba(0, 120, 255, 0.5)",
+                strokeWidth: 1,
                 selectable: false,
                 evented: false,
-                visible: false,
+                visible: false, // Keep invisible, we use the React Overlay for UI
             });
             canvas.add(selRect);
             canvas.renderAll();
@@ -46,19 +52,21 @@ 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;
-                selRect.set({
-                    left: w < 0 ? p.x : selStart.x,
-                    top: h < 0 ? p.y : selStart.y,
-                    width: Math.abs(w),
-                    height: Math.abs(h),
-                });
+                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.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();
                 setSelectionBox({
-                    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,
+                    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,
                 });
             });
         };
@@ -73,35 +81,54 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
             canvas.renderAll();
             isSelecting = false;
             selRect = null;
-            setTimeout(() => setSelectionBox(null), 100);
+            // Delay clearing the box slightly to allow intersection logic to finish
+            setTimeout(() => setSelectionBox(null), 50);
         };
         const onSelected = () => {
             const sel = canvas.getActiveObject();
             if (!sel || isDrawingRef.current)
                 return;
-            setSelectedCanvasObjects(sel.type === "activeSelection" ? sel.getObjects() : [sel]);
+            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);
             const typeMap = {
                 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"
-                            : typeMap[sel.type] ?? null;
+            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";
             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);
@@ -110,17 +137,11 @@ export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewp
                 setActiveTool("select");
             }
         };
-        const handleCanvasClick = (e) => {
-            // 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);
+        // 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);
@@ -128,6 +149,7 @@ 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.16.0",
+    "version": "1.17.0",
     "description": "A feature-rich whiteboard component built with Fabric.js and React",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",