@mhamz.01/easyflow-whiteboard 2.65.0 → 2.67.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;AAS9C,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;CACvB;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,2CA2kBzB"}
+{"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;AAS9C,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;CACvB;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,2CAujBzB"}

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

@@ -220,70 +220,53 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         return e;
     };
     const handleDragStart = (itemId, e) => {
-        // 1. Safety check for the Fabric instance
         const canvas = fabricCanvas?.current;
         if (!canvas)
             return;
-        // 2. Normalize the event (Touch vs Mouse)
         if (e.cancelable)
             e.preventDefault();
         const pointer = getPointerEvent(e);
-        // 3. Determine which items are being dragged
-        // selection update DOES NOT trigger before drag snapshot
         let itemsToDrag;
         if (selectedIds.has(itemId)) {
             itemsToDrag = Array.from(selectedIds);
         }
         else {
             itemsToDrag = [itemId];
+            setSelectedIds(new Set([itemId]));
         }
-        // 4. Capture current World Transform (Zoom & Pan)
-        // We read directly from the canvas to ensure zero-frame lag
         const vpt = canvas.viewportTransform || [1, 0, 0, 1, 0, 0];
         const liveZoom = vpt[0];
         const liveVpX = vpt[4];
         const liveVpY = vpt[5];
-        // 5. Convert the Click Position from Screen Pixels to World Units
         const clickWorldX = (pointer.clientX - liveVpX) / liveZoom;
         const clickWorldY = (pointer.clientY - liveVpY) / liveZoom;
-        // 6. Get the clicked item's current World Position
         const clickedPos = getItemPosition(itemId);
         if (!clickedPos)
             return;
-        // 7. Calculate the Offset in WORLD UNITS
-        // This is the distance from the mouse to the node's top-left in the infinite grid.
-        // This value remains constant even if you zoom during the drag.
         const worldOffsetX = clickWorldX - clickedPos.x;
         const worldOffsetY = clickWorldY - clickedPos.y;
-        // 8. Snapshot starting positions for all selected HTML nodes
         const startPositions = new Map();
         itemsToDrag.forEach((id) => {
             const pos = getItemPosition(id);
             if (pos)
                 startPositions.set(id, pos);
         });
-        // 9. Snapshot starting positions for all selected Fabric objects
         const canvasObjectsStartPos = new Map();
         selectedCanvasObjects.forEach((obj) => {
             canvasObjectsStartPos.set(obj, { left: obj.left || 0, top: obj.top || 0 });
         });
-        // 10. Commit to the ref for the requestAnimationFrame loop
         dragStateRef.current = {
             isDragging: true,
             itemIds: itemsToDrag,
             startPositions,
             canvasObjectsStartPos,
-            offsetX: worldOffsetX, // Now stored as World Units
-            offsetY: worldOffsetY, // Now stored as World Units
+            offsetX: worldOffsetX,
+            offsetY: worldOffsetY,
         };
-        if (!selectedIds.has(itemId) && dragStateRef.current.itemIds.length === 0) {
-            setSelectedIds(new Set([itemId]));
-        }
-        // 11. Trigger UI states
         setDragging({ itemIds: itemsToDrag });
+        // ── ATTACH LISTENERS DIRECTLY ──
         document.body.style.cursor = "grabbing";
         document.body.style.userSelect = "none";
-        document.body.style.touchAction = "none";
     };
     // ── Drag move (HTML Node side) ───────────────────────────────────────────────
     useEffect(() => {
@@ -348,24 +331,20 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             });
         };
         const handleEnd = () => {
-            if (rafIdRef.current !== null) {
+            if (rafIdRef.current !== null)
                 cancelAnimationFrame(rafIdRef.current);
-                rafIdRef.current = null;
-            }
+            // 1. Kill the flag first
             dragStateRef.current.isDragging = false;
             setDragging(null);
+            // 2. Remove the listeners immediately
+            window.removeEventListener("mousemove", handleMove);
+            window.removeEventListener("mouseup", handleEnd);
+            window.removeEventListener("touchmove", handleMove);
+            window.removeEventListener("touchend", handleEnd);
             document.body.style.cursor = "";
             document.body.style.userSelect = "";
-            document.body.style.touchAction = "";
-            // Read latest state via functional updater — never stale
-            setLocalTasks((latest) => {
-                onTasksUpdate?.(latest);
-                return latest;
-            });
-            setLocalDocuments((latest) => {
-                onDocumentsUpdate?.(latest);
-                return latest;
-            });
+            onTasksUpdate?.(localTasks);
+            onDocumentsUpdate?.(localDocuments);
         };
         window.addEventListener("mousemove", handleMove, { passive: false });
         window.addEventListener("mouseup", handleEnd);

package/package.json

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