@mhamz.01/easyflow-whiteboard 2.148.0 → 2.150.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":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAI9C,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,CAAC,EAAE,OAAO,CAAC;IACtB,qBAAqB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,IAAI,CAAC,CAAC;CAC5D;;AAaD,wBAkqBG"}
+{"version":3,"file":"custom-node-overlay-layer.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node-overlay-layer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAI9C,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,CAAC,EAAE,OAAO,CAAC;IACtB,qBAAqB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,IAAI,CAAC,CAAC;CAC5D;;AAaD,wBAqqBG"}

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

@@ -17,6 +17,7 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
     const localTasksRef = useRef(localTasks);
     const localDocumentsRef = useRef(localDocuments);
     const selectedIdsRef = useRef(selectedIds);
+    const isHtmlSelectingRef = useRef(false);
     localTasksRef.current = localTasks;
     localDocumentsRef.current = localDocuments;
     selectedIdsRef.current = selectedIds;
@@ -145,33 +146,39 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
                 target._prevLeft = target.left;
                 target._prevTop = target.top;
             }
+            // Only preserve HTML selection if we're clicking INTO an existing multi-selection
+            // Don't use activeObjects.length > 1 alone — it's true even when clicking a NEW object
             const activeObjects = canvas.getActiveObjects();
-            const isClickingActiveSelection = target && (activeObjects.includes(target) || activeObjects.length > 1);
-            if (isClickingActiveSelection)
-                return; // ← let the drag proceed with HTML nodes intact
+            const isClickingIntoActiveSelection = target &&
+                activeObjects.length > 1 &&
+                activeObjects.includes(target); // ← target must be IN the selection, not just any click
+            if (isClickingIntoActiveSelection)
+                return;
             setSelectedIds(new Set());
-            // At zoom=1 with identity VPT, getActiveObject() can return null before
-            // Fabric updates _activeObject. Use e.transform as the primary check —
-            // it is populated by Fabric's hit-test regardless of zoom level.
-            const transformTarget = e.transform?.target;
-            const activeObject = canvas.getActiveObject();
-            // const activeObjects = canvas.getActiveObjects();
-            const isPartOfActiveSelection = transformTarget === target || // most reliable — direct from event
-                activeObject === target || // selection box group
-                activeObjects.includes(target); // individual object in multi-select
-            if (!isPartOfActiveSelection) {
-                setSelectedIds(new Set());
-            }
         };
         // const handleSelectionCleared = () => {
         //   setSelectedIds(new Set());
         // };
+        const handleFabricSelectionCreated = () => {
+            if (isHtmlSelectingRef.current)
+                return; // ← skip if HTML node initiated this
+            setSelectedIds(new Set());
+        };
+        const handleFabricSelectionUpdated = () => {
+            if (isHtmlSelectingRef.current)
+                return; // ← skip if HTML node initiated this
+            setSelectedIds(new Set());
+        };
         canvas.on("object:moving", handleObjectMoving);
         canvas.on("mouse:down", handleMouseDown);
+        canvas.on("selection:created", handleFabricSelectionCreated); // ← add
+        canvas.on("selection:updated", handleFabricSelectionUpdated); // ← add
         // canvas.on("selection:cleared", handleSelectionCleared);
         return () => {
             canvas.off("object:moving", handleObjectMoving);
             canvas.off("mouse:down", handleMouseDown);
+            canvas.off("selection:created", handleFabricSelectionCreated); // ← add
+            canvas.off("selection:updated", handleFabricSelectionUpdated); // ← add
             // canvas.off("selection:cleared", handleSelectionCleared);
             if (fabricMoveRafRef.current !== null) {
                 cancelAnimationFrame(fabricMoveRafRef.current);
@@ -397,8 +404,10 @@ export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTask
     const handleSelect = (id, e) => {
         const canvas = fabricCanvas?.current;
         if (canvas) {
+            isHtmlSelectingRef.current = true; // ← guard: we're initiating this
             canvas.discardActiveObject();
             canvas.requestRenderAll();
+            isHtmlSelectingRef.current = false; // ← reset immediately
         }
         if (e?.shiftKey || e?.ctrlKey || e?.metaKey) {
             setSelectedIds((prev) => {

package/package.json

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