@mhamz.01/easyflow-whiteboard 2.167.0 → 2.170.0

package/dist/components/node/hooks/useNodeDrag.js

@@ -1,5 +1,27 @@
-import { useRef, useCallback } from "react";
-export function useNodeDrag({ selectedIds, fabricCanvas, selectedCanvasObjects, onDragStateChange, }) {
+import { useState, useRef, useCallback, useEffect } from "react";
+function readPointer(e) {
+    if ("touches" in e && e.touches.length > 0) {
+        return { clientX: e.touches[0].clientX, clientY: e.touches[0].clientY };
+    }
+    return {
+        clientX: e.clientX,
+        clientY: e.clientY,
+    };
+}
+/**
+ * SRP: owns the full HTML-node drag lifecycle — start, move (rAF-throttled),
+ * and end — while keeping Fabric canvas objects in sync imperatively.
+ *
+ * Key design decisions:
+ *  - All world-space math reads live viewport transform from Fabric so zoom/pan
+ *    during a drag stays correct without extra state dependencies.
+ *  - startPositions + anchor-offset approach prevents the "jump on drag start"
+ *    bug that occurs when using raw mouse coords.
+ *  - activeSelection group positions are resolved via calcTransformMatrix so
+ *    multi-selected Fabric objects stay in sync when dragged from HTML nodes.
+ */
+export function useNodeDrag({ selectedIdsRef, dragSelectedIdsRef, localTasksRef, localDocumentsRef, fabricCanvas, setLocalTasks, setLocalDocuments, onTasksUpdate, onDocumentsUpdate, }) {
+    const [dragging, setDragging] = useState(null);
     const dragStateRef = useRef({
         isDragging: false,
         itemIds: [],
@@ -9,111 +31,139 @@ export function useNodeDrag({ selectedIds, fabricCanvas, selectedCanvasObjects,
         offsetY: 0,
     });
     const rafIdRef = useRef(null);
-    const getPointerEvent = (e) => {
-        if ("touches" in e && e.touches.length > 0) {
-            return {
-                clientX: e.touches[0].clientX,
-                clientY: e.touches[0].clientY,
-            };
-        }
-        return {
-            clientX: e.clientX,
-            clientY: e.clientY,
-        };
-    };
-    const getViewportTransform = (canvas) => {
-        const vpt = canvas.viewportTransform || [1, 0, 0, 1, 0, 0];
-        return {
-            zoom: vpt[0],
-            vpX: vpt[4],
-            vpY: vpt[5],
-        };
-    };
-    const handleDragStart = useCallback((itemId, getItemPosition, e) => {
+    const getItemPosition = useCallback((id) => {
+        const task = localTasksRef.current.find((t) => t.id === id);
+        if (task)
+            return { x: task.x, y: task.y };
+        const doc = localDocumentsRef.current.find((d) => d.id === id);
+        if (doc)
+            return { x: doc.x, y: doc.y };
+        return undefined;
+    }, [localTasksRef, localDocumentsRef]);
+    const handleDragStart = useCallback((itemId, e) => {
         const canvas = fabricCanvas?.current;
         if (!canvas)
             return;
         if (e.cancelable)
             e.preventDefault();
-        const pointer = getPointerEvent(e);
-        let itemsToDrag;
-        if (selectedIds.has(itemId)) {
-            itemsToDrag = Array.from(selectedIds);
-        }
-        else {
-            itemsToDrag = [itemId];
-        }
-        const { zoom: liveZoom, vpX: liveVpX, vpY: liveVpY } = getViewportTransform(canvas);
+        const pointer = readPointer(e);
+        const itemsToDrag = selectedIdsRef.current.has(itemId)
+            ? Array.from(selectedIdsRef.current)
+            : [itemId];
+        const vpt = canvas.viewportTransform || [1, 0, 0, 1, 0, 0];
+        const liveZoom = vpt[0];
+        const liveVpX = vpt[4];
+        const liveVpY = vpt[5];
         const clickWorldX = (pointer.clientX - liveVpX) / liveZoom;
         const clickWorldY = (pointer.clientY - liveVpY) / liveZoom;
         const clickedPos = getItemPosition(itemId);
         if (!clickedPos)
             return;
+        // Offset in world units: distance from mouse to node's top-left.
+        // Stays constant even when zooming during a drag.
+        const worldOffsetX = clickWorldX - clickedPos.x;
+        const worldOffsetY = clickWorldY - clickedPos.y;
         const startPositions = new Map();
         itemsToDrag.forEach((id) => {
             const pos = getItemPosition(id);
             if (pos)
                 startPositions.set(id, pos);
         });
+        // Resolve Fabric object start positions. For activeSelection groups,
+        // calcTransformMatrix gives the true world position regardless of the
+        // group's internal coordinate space.
+        const liveActiveObjects = canvas.getActiveObjects();
+        const activeSelection = canvas.getActiveObject();
         const canvasObjectsStartPos = new Map();
-        selectedCanvasObjects.forEach((obj) => {
-            canvasObjectsStartPos.set(obj, { left: obj.left || 0, top: obj.top || 0 });
+        liveActiveObjects.forEach((obj) => {
+            if (activeSelection?.type === "activeSelection") {
+                const matrix = obj.calcTransformMatrix();
+                canvasObjectsStartPos.set(obj, { left: matrix[4], top: matrix[5] });
+            }
+            else {
+                canvasObjectsStartPos.set(obj, { left: obj.left || 0, top: obj.top || 0 });
+            }
         });
         dragStateRef.current = {
             isDragging: true,
             itemIds: itemsToDrag,
             startPositions,
             canvasObjectsStartPos,
-            offsetX: clickWorldX,
-            offsetY: clickWorldY,
+            offsetX: worldOffsetX,
+            offsetY: worldOffsetY,
         };
-        onDragStateChange({ itemIds: itemsToDrag });
+        dragSelectedIdsRef.current = new Set(itemsToDrag);
+        setDragging({ itemIds: itemsToDrag });
         document.body.style.cursor = "grabbing";
         document.body.style.userSelect = "none";
         document.body.style.touchAction = "none";
-    }, [selectedIds, fabricCanvas, selectedCanvasObjects, onDragStateChange]);
-    const handleDragMove = useCallback((pointer, onTasksUpdate) => {
-        if (!dragStateRef.current.isDragging)
+    }, [fabricCanvas, selectedIdsRef, dragSelectedIdsRef, getItemPosition]);
+    // Attach move/end listeners only while a drag is active (SRP for side effects).
+    useEffect(() => {
+        if (!dragging)
             return;
-        if (rafIdRef.current !== null)
-            cancelAnimationFrame(rafIdRef.current);
-        rafIdRef.current = requestAnimationFrame(() => {
-            const { itemIds, startPositions, canvasObjectsStartPos, offsetX, offsetY } = dragStateRef.current;
-            const canvas = fabricCanvas?.current;
-            if (!canvas)
+        const handleMove = (e) => {
+            if (!dragStateRef.current.isDragging)
                 return;
-            const { zoom: liveZoom, vpX: liveVpX, vpY: liveVpY } = getViewportTransform(canvas);
-            const currentWorldX = (pointer.clientX - liveVpX) / liveZoom;
-            const currentWorldY = (pointer.clientY - liveVpY) / liveZoom;
-            const deltaX = currentWorldX - offsetX;
-            const deltaY = currentWorldY - offsetY;
-            // Update Fabric objects imperatively
-            canvasObjectsStartPos.forEach((startPos, obj) => {
-                obj.set({
-                    left: startPos.left + deltaX,
-                    top: startPos.top + deltaY,
+            if (e.cancelable)
+                e.preventDefault();
+            const pointer = readPointer(e);
+            if (rafIdRef.current !== null)
+                cancelAnimationFrame(rafIdRef.current);
+            rafIdRef.current = requestAnimationFrame(() => {
+                const { itemIds, startPositions, canvasObjectsStartPos, offsetX, offsetY } = dragStateRef.current;
+                const canvas = fabricCanvas?.current;
+                if (!canvas)
+                    return;
+                const vpt = canvas.viewportTransform;
+                const currentWorldX = (pointer.clientX - vpt[4]) / vpt[0];
+                const currentWorldY = (pointer.clientY - vpt[5]) / vpt[0];
+                const firstStart = startPositions.get(itemIds[0]);
+                if (!firstStart)
+                    return;
+                const deltaX = currentWorldX - offsetX - firstStart.x;
+                const deltaY = currentWorldY - offsetY - firstStart.y;
+                setLocalTasks((prev) => prev.map((t) => itemIds.includes(t.id)
+                    ? { ...t, x: (startPositions.get(t.id)?.x ?? t.x) + deltaX, y: (startPositions.get(t.id)?.y ?? t.y) + deltaY }
+                    : t));
+                setLocalDocuments((prev) => prev.map((d) => itemIds.includes(d.id)
+                    ? { ...d, x: (startPositions.get(d.id)?.x ?? d.x) + deltaX, y: (startPositions.get(d.id)?.y ?? d.y) + deltaY }
+                    : d));
+                canvasObjectsStartPos.forEach((startPos, obj) => {
+                    obj.set({ left: startPos.left + deltaX, top: startPos.top + deltaY });
+                    obj.setCoords();
                 });
-                obj.setCoords();
+                const activeObj = canvas.getActiveObject();
+                if (activeObj?.type === "activeSelection") {
+                    activeObj.setCoords();
+                }
+                canvas.requestRenderAll();
             });
-            canvas.requestRenderAll();
-        });
-    }, [fabricCanvas]);
-    const handleDragEnd = useCallback(() => {
-        if (rafIdRef.current !== null)
-            cancelAnimationFrame(rafIdRef.current);
-        dragStateRef.current.isDragging = false;
-        onDragStateChange(null);
-        document.body.style.cursor = "";
-        document.body.style.userSelect = "";
-        document.body.style.touchAction = "";
-    }, [onDragStateChange]);
-    return {
-        dragStateRef,
-        rafIdRef,
-        getPointerEvent,
-        getViewportTransform,
-        handleDragStart,
-        handleDragMove,
-        handleDragEnd,
-    };
+        };
+        const handleEnd = () => {
+            if (rafIdRef.current !== null)
+                cancelAnimationFrame(rafIdRef.current);
+            dragStateRef.current.isDragging = false;
+            dragSelectedIdsRef.current = new Set();
+            setDragging(null);
+            document.body.style.cursor = "";
+            document.body.style.userSelect = "";
+            document.body.style.touchAction = "";
+            onTasksUpdate?.(localTasksRef.current);
+            onDocumentsUpdate?.(localDocumentsRef.current);
+        };
+        window.addEventListener("mousemove", handleMove, { passive: false });
+        window.addEventListener("mouseup", handleEnd);
+        window.addEventListener("touchmove", handleMove, { passive: false });
+        window.addEventListener("touchend", handleEnd);
+        window.addEventListener("touchcancel", handleEnd);
+        return () => {
+            window.removeEventListener("mousemove", handleMove);
+            window.removeEventListener("mouseup", handleEnd);
+            window.removeEventListener("touchmove", handleMove);
+            window.removeEventListener("touchend", handleEnd);
+            window.removeEventListener("touchcancel", handleEnd);
+        };
+    }, [dragging, fabricCanvas]);
+    return { dragging, getItemPosition, handleDragStart };
 }

package/dist/components/node/hooks/useNodeSelection.d.ts

@@ -0,0 +1,28 @@
+import type { RefObject, MutableRefObject, MouseEvent as ReactMouseEvent } from "react";
+import type { Canvas } from "fabric";
+interface UseNodeSelectionProps {
+    fabricCanvas?: RefObject<Canvas | null>;
+    clearHtmlSelectionRef?: MutableRefObject<() => void>;
+}
+/**
+ * SRP: owns the selectedIds set and all coordination guard refs that
+ * prevent feedback loops between HTML-node selection and Fabric selection.
+ *
+ * Guard refs:
+ *  isHtmlSelectingRef        — HTML node is the initiator; Fabric listeners should skip
+ *  isSelectionBoxActiveRef   — rubber-band box is live; Fabric mouse:down should skip
+ *  htmlNodesSelectedByBoxRef — box just selected HTML nodes; Fabric selection:created should skip
+ *  dragSelectedIdsRef        — snapshot of selection at the moment a drag begins
+ */
+export declare function useNodeSelection({ fabricCanvas, clearHtmlSelectionRef, }: UseNodeSelectionProps): {
+    selectedIds: Set<string>;
+    setSelectedIds: import("react").Dispatch<import("react").SetStateAction<Set<string>>>;
+    selectedIdsRef: RefObject<Set<string>>;
+    isHtmlSelectingRef: RefObject<boolean>;
+    isSelectionBoxActiveRef: RefObject<boolean>;
+    htmlNodesSelectedByBoxRef: RefObject<boolean>;
+    dragSelectedIdsRef: RefObject<Set<string>>;
+    handleSelect: (id: string, e?: ReactMouseEvent) => void;
+};
+export {};
+//# sourceMappingURL=useNodeSelection.d.ts.map

package/dist/components/node/hooks/useNodeSelection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNodeSelection.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useNodeSelection.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EAChB,UAAU,IAAI,eAAe,EAC9B,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAErC,UAAU,qBAAqB;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACxC,qBAAqB,CAAC,EAAE,gBAAgB,CAAC,MAAM,IAAI,CAAC,CAAC;CACtD;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,qBAAqB,GACtB,EAAE,qBAAqB;;;;;;;;uBAiBf,MAAM,MAAM,eAAe;EAkCnC"}

package/dist/components/node/hooks/useNodeSelection.js

@@ -0,0 +1,55 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+/**
+ * SRP: owns the selectedIds set and all coordination guard refs that
+ * prevent feedback loops between HTML-node selection and Fabric selection.
+ *
+ * Guard refs:
+ *  isHtmlSelectingRef        — HTML node is the initiator; Fabric listeners should skip
+ *  isSelectionBoxActiveRef   — rubber-band box is live; Fabric mouse:down should skip
+ *  htmlNodesSelectedByBoxRef — box just selected HTML nodes; Fabric selection:created should skip
+ *  dragSelectedIdsRef        — snapshot of selection at the moment a drag begins
+ */
+export function useNodeSelection({ fabricCanvas, clearHtmlSelectionRef, }) {
+    const [selectedIds, setSelectedIds] = useState(new Set());
+    const selectedIdsRef = useRef(selectedIds);
+    const isHtmlSelectingRef = useRef(false);
+    const isSelectionBoxActiveRef = useRef(false);
+    const htmlNodesSelectedByBoxRef = useRef(false);
+    const dragSelectedIdsRef = useRef(new Set());
+    selectedIdsRef.current = selectedIds;
+    useEffect(() => {
+        if (!clearHtmlSelectionRef)
+            return;
+        clearHtmlSelectionRef.current = () => setSelectedIds(new Set());
+    }, [clearHtmlSelectionRef]);
+    const handleSelect = useCallback((id, e) => {
+        const canvas = fabricCanvas?.current;
+        if (canvas) {
+            isHtmlSelectingRef.current = true;
+            canvas.discardActiveObject();
+            canvas.requestRenderAll();
+            isHtmlSelectingRef.current = false;
+        }
+        htmlNodesSelectedByBoxRef.current = false;
+        if (e?.shiftKey || e?.ctrlKey || e?.metaKey) {
+            setSelectedIds((prev) => {
+                const next = new Set(prev);
+                next.has(id) ? next.delete(id) : next.add(id);
+                return next;
+            });
+        }
+        else {
+            setSelectedIds(new Set([id]));
+        }
+    }, [fabricCanvas]);
+    return {
+        selectedIds,
+        setSelectedIds,
+        selectedIdsRef,
+        isHtmlSelectingRef,
+        isSelectionBoxActiveRef,
+        htmlNodesSelectedByBoxRef,
+        dragSelectedIdsRef,
+        handleSelect,
+    };
+}

package/dist/components/node/hooks/useNodeState.d.ts

@@ -0,0 +1,15 @@
+import type { Task, Document } from "../types/overlay-types";
+/**
+ * SRP: owns local task/document state and keeps it in sync with parent props.
+ * Exposes stable refs so other hooks can read the latest values without
+ * subscribing to re-renders.
+ */
+export declare function useNodeState(tasks: Task[], documents: Document[]): {
+    localTasks: Task[];
+    setLocalTasks: import("react").Dispatch<import("react").SetStateAction<Task[]>>;
+    localDocuments: Document[];
+    setLocalDocuments: import("react").Dispatch<import("react").SetStateAction<Document[]>>;
+    localTasksRef: import("react").RefObject<Task[]>;
+    localDocumentsRef: import("react").RefObject<Document[]>;
+};
+//# sourceMappingURL=useNodeState.d.ts.map

package/dist/components/node/hooks/useNodeState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNodeState.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useNodeState.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAE7D;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE;;;;;;;EAoBhE"}

package/dist/components/node/hooks/useNodeState.js

@@ -0,0 +1,24 @@
+import { useState, useEffect, useRef } from "react";
+/**
+ * SRP: owns local task/document state and keeps it in sync with parent props.
+ * Exposes stable refs so other hooks can read the latest values without
+ * subscribing to re-renders.
+ */
+export function useNodeState(tasks, documents) {
+    const [localTasks, setLocalTasks] = useState(tasks);
+    const [localDocuments, setLocalDocuments] = useState(documents);
+    const localTasksRef = useRef(localTasks);
+    const localDocumentsRef = useRef(localDocuments);
+    localTasksRef.current = localTasks;
+    localDocumentsRef.current = localDocuments;
+    useEffect(() => { setLocalTasks(tasks); }, [tasks]);
+    useEffect(() => { setLocalDocuments(documents); }, [documents]);
+    return {
+        localTasks,
+        setLocalTasks,
+        localDocuments,
+        setLocalDocuments,
+        localTasksRef,
+        localDocumentsRef,
+    };
+}

package/dist/components/node/hooks/useSelectionBox.d.ts

@@ -1,4 +1,5 @@
-import { Task, Document } from "../types/overlay-types";
+import type { MutableRefObject, Dispatch, SetStateAction } from "react";
+import type { Task, Document } from "../types/overlay-types";
 interface UseSelectionBoxProps {
     selectionBox: {
         x1: number;
@@ -13,8 +14,18 @@ interface UseSelectionBoxProps {
         x: number;
         y: number;
     };
-    onSelectionChange: (selectedIds: Set<string>) => void;
+    isSelectionBoxActiveRef: MutableRefObject<boolean>;
+    htmlNodesSelectedByBoxRef: MutableRefObject<boolean>;
+    setSelectedIds: Dispatch<SetStateAction<Set<string>>>;
 }
-export declare function useSelectionBox({ selectionBox, localTasks, localDocuments, canvasZoom, canvasViewport, onSelectionChange, }: UseSelectionBoxProps): void;
+/**
+ * SRP: detects which HTML nodes fall inside the rubber-band selection box and
+ * updates selectedIds. Also maintains the guard refs so Fabric event handlers
+ * know not to clobber the box selection while it is active.
+ *
+ * O(n) single pass with an early-exit equality check avoids unnecessary
+ * re-renders when the selection set hasn't actually changed.
+ */
+export declare function useSelectionBox({ selectionBox, localTasks, localDocuments, canvasZoom, canvasViewport, isSelectionBoxActiveRef, htmlNodesSelectedByBoxRef, setSelectedIds, }: UseSelectionBoxProps): void;
 export {};
 //# sourceMappingURL=useSelectionBox.d.ts.map

package/dist/components/node/hooks/useSelectionBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelectionBox.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useSelectionBox.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,UAAU,oBAAoB;IAC5B,YAAY,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;IACxE,UAAU,EAAE,IAAI,EAAE,CAAC;IACnB,cAAc,EAAE,QAAQ,EAAE,CAAC;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,iBAAiB,EAAE,CAAC,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;CACvD;AAED,wBAAgB,eAAe,CAAC,EAC9B,YAAY,EACZ,UAAU,EACV,cAAc,EACd,UAAU,EACV,cAAc,EACd,iBAAiB,GAClB,EAAE,oBAAoB,QAwCtB"}
+{"version":3,"file":"useSelectionBox.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useSelectionBox.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAE7D,UAAU,oBAAoB;IAC5B,YAAY,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;IACxE,UAAU,EAAE,IAAI,EAAE,CAAC;IACnB,cAAc,EAAE,QAAQ,EAAE,CAAC;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,uBAAuB,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACnD,yBAAyB,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrD,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;CACvD;AAwBD;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC9B,YAAY,EACZ,UAAU,EACV,cAAc,EACd,UAAU,EACV,cAAc,EACd,uBAAuB,EACvB,yBAAyB,EACzB,cAAc,GACf,EAAE,oBAAoB,QAiCtB"}

package/dist/components/node/hooks/useSelectionBox.js

@@ -1,30 +1,51 @@
 import { useEffect } from "react";
-export function useSelectionBox({ selectionBox, localTasks, localDocuments, canvasZoom, canvasViewport, onSelectionChange, }) {
-    const isItemInSelectionBox = (x, y, width, height, box) => {
-        const itemX1 = x * canvasZoom + canvasViewport.x;
-        const itemY1 = y * canvasZoom + canvasViewport.y;
-        const itemX2 = itemX1 + width * canvasZoom;
-        const itemY2 = itemY1 + height * canvasZoom;
-        const boxX1 = Math.min(box.x1, box.x2);
-        const boxY1 = Math.min(box.y1, box.y2);
-        const boxX2 = Math.max(box.x1, box.x2);
-        const boxY2 = Math.max(box.y1, box.y2);
-        return !(boxX2 < itemX1 || boxX1 > itemX2 || boxY2 < itemY1 || boxY1 > itemY2);
-    };
+function hitTest(x, y, width, height, box, zoom, viewport) {
+    const itemX1 = x * zoom + viewport.x;
+    const itemY1 = y * zoom + viewport.y;
+    const itemX2 = itemX1 + width * zoom;
+    const itemY2 = itemY1 + height * zoom;
+    const bx1 = Math.min(box.x1, box.x2);
+    const by1 = Math.min(box.y1, box.y2);
+    const bx2 = Math.max(box.x1, box.x2);
+    const by2 = Math.max(box.y1, box.y2);
+    return !(bx2 < itemX1 || bx1 > itemX2 || by2 < itemY1 || by1 > itemY2);
+}
+/**
+ * SRP: detects which HTML nodes fall inside the rubber-band selection box and
+ * updates selectedIds. Also maintains the guard refs so Fabric event handlers
+ * know not to clobber the box selection while it is active.
+ *
+ * O(n) single pass with an early-exit equality check avoids unnecessary
+ * re-renders when the selection set hasn't actually changed.
+ */
+export function useSelectionBox({ selectionBox, localTasks, localDocuments, canvasZoom, canvasViewport, isSelectionBoxActiveRef, htmlNodesSelectedByBoxRef, setSelectedIds, }) {
     useEffect(() => {
-        if (!selectionBox)
+        if (!selectionBox) {
+            isSelectionBoxActiveRef.current = false;
             return;
+        }
+        isSelectionBoxActiveRef.current = true;
         const newSelected = new Set();
         for (const task of localTasks) {
-            if (isItemInSelectionBox(task.x, task.y, 300, 140, selectionBox)) {
+            if (hitTest(task.x, task.y, 300, 140, selectionBox, canvasZoom, canvasViewport))
                 newSelected.add(task.id);
-            }
         }
         for (const doc of localDocuments) {
-            if (isItemInSelectionBox(doc.x, doc.y, 320, 160, selectionBox)) {
+            if (hitTest(doc.x, doc.y, 320, 160, selectionBox, canvasZoom, canvasViewport))
                 newSelected.add(doc.id);
-            }
         }
-        onSelectionChange(newSelected);
+        setSelectedIds((prev) => {
+            if (prev.size !== newSelected.size) {
+                htmlNodesSelectedByBoxRef.current = newSelected.size > 0;
+                return newSelected;
+            }
+            for (const id of newSelected) {
+                if (!prev.has(id)) {
+                    htmlNodesSelectedByBoxRef.current = newSelected.size > 0;
+                    return newSelected;
+                }
+            }
+            return prev;
+        });
     }, [selectionBox, localTasks, localDocuments, canvasZoom, canvasViewport]);
 }

package/dist/components/node/hooks/useWheelZoom.d.ts

@@ -1,12 +1,22 @@
-import { Canvas } from "fabric";
+import type { RefObject, WheelEvent as ReactWheelEvent } from "react";
+import type { Canvas } from "fabric";
 interface UseWheelZoomProps {
-    overlayRef: React.RefObject<HTMLDivElement | null>;
-    fabricCanvas?: React.RefObject<Canvas | null>;
-    canvasZoom?: number;
+    overlayRef: RefObject<HTMLDivElement | null>;
+    fabricCanvas?: RefObject<Canvas | null>;
     canvasReady?: boolean;
 }
-export declare function useWheelZoom({ overlayRef, fabricCanvas, canvasZoom, canvasReady, }: UseWheelZoomProps): {
-    handleOverlayWheel: (e: React.WheelEvent) => void;
+/**
+ * SRP: forwards wheel events that land on HTML nodes into Fabric's event bus
+ * so the canvas zoom/pan handlers fire regardless of which layer the user
+ * is hovering over.
+ *
+ * Two mechanisms:
+ *  handleOverlayWheel — React synthetic handler attached to the overlay div
+ *  native listener    — passive:false DOM listener so e.preventDefault() works
+ *                       (React synthetic events cannot cancel passive listeners)
+ */
+export declare function useWheelZoom({ overlayRef, fabricCanvas, canvasReady, }: UseWheelZoomProps): {
+    handleOverlayWheel: (e: ReactWheelEvent<HTMLDivElement>) => void;
 };
 export {};
 //# sourceMappingURL=useWheelZoom.d.ts.map

package/dist/components/node/hooks/useWheelZoom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useWheelZoom.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useWheelZoom.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,UAAU,iBAAiB;IACvB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,YAAY,CAAC,EAC3B,UAAU,EACV,YAAY,EACZ,UAAc,EACd,WAAmB,GACpB,EAAE,iBAAiB;4BAEa,KAAK,CAAC,UAAU;EA6DhD"}
+{"version":3,"file":"useWheelZoom.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useWheelZoom.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAErC,UAAU,iBAAiB;IACzB,UAAU,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC7C,YAAY,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EAC3B,UAAU,EACV,YAAY,EACZ,WAAmB,GACpB,EAAE,iBAAiB;4BACa,eAAe,CAAC,cAAc,CAAC;EA6C/D"}

package/dist/components/node/hooks/useWheelZoom.js

@@ -1,56 +1,53 @@
 import { useEffect } from "react";
-export function useWheelZoom({ overlayRef, fabricCanvas, canvasZoom = 1, canvasReady = false, }) {
-    // React event handler for overlay wheel
+/**
+ * SRP: forwards wheel events that land on HTML nodes into Fabric's event bus
+ * so the canvas zoom/pan handlers fire regardless of which layer the user
+ * is hovering over.
+ *
+ * Two mechanisms:
+ *  handleOverlayWheel — React synthetic handler attached to the overlay div
+ *  native listener    — passive:false DOM listener so e.preventDefault() works
+ *                       (React synthetic events cannot cancel passive listeners)
+ */
+export function useWheelZoom({ overlayRef, fabricCanvas, canvasReady = false, }) {
     const handleOverlayWheel = (e) => {
-        if (e.ctrlKey || e.metaKey || e.shiftKey) {
-            const canvas = fabricCanvas?.current;
-            if (!canvas)
-                return;
-            const nativeEvent = e.nativeEvent;
-            const scenePoint = canvas.getScenePoint(nativeEvent);
-            const rect = canvas.getElement().getBoundingClientRect();
-            const viewportPoint = {
-                x: nativeEvent.clientX - rect.left,
-                y: nativeEvent.clientY - rect.top,
-            };
-            canvas.fire("mouse:wheel", {
-                e: nativeEvent,
-                scenePoint,
-                viewportPoint,
-            });
-            e.preventDefault();
-            e.stopPropagation();
-        }
+        if (!(e.ctrlKey || e.metaKey || e.shiftKey))
+            return;
+        const canvas = fabricCanvas?.current;
+        if (!canvas)
+            return;
+        const nativeEvent = e.nativeEvent;
+        const scenePoint = canvas.getScenePoint(nativeEvent);
+        const rect = canvas.getElement().getBoundingClientRect();
+        const viewportPoint = {
+            x: nativeEvent.clientX - rect.left,
+            y: nativeEvent.clientY - rect.top,
+        };
+        canvas.fire("mouse:wheel", { e: nativeEvent, scenePoint, viewportPoint });
+        e.preventDefault();
+        e.stopPropagation();
     };
-    // Global wheel event for hovering over nodes
     useEffect(() => {
         const overlayEl = overlayRef.current;
         const canvas = fabricCanvas?.current;
-        if (!overlayEl || !canvas || !canvasReady)
+        if (!overlayEl || !canvas)
             return;
         const handleGlobalWheel = (e) => {
-            const target = e.target;
-            const isOverNode = target !== overlayEl;
-            if ((e.ctrlKey || e.metaKey) && isOverNode) {
-                e.preventDefault();
-                e.stopPropagation();
-                const scenePoint = canvas.getScenePoint(e);
-                const rect = canvas.getElement().getBoundingClientRect();
-                const viewportPoint = {
-                    x: e.clientX - rect.left,
-                    y: e.clientY - rect.top,
-                };
-                canvas.fire("mouse:wheel", {
-                    e: e,
-                    scenePoint,
-                    viewportPoint,
-                });
-            }
+            const isOverNode = e.target !== overlayEl;
+            if (!(e.ctrlKey || e.metaKey) || !isOverNode)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            const scenePoint = canvas.getScenePoint(e);
+            const rect = canvas.getElement().getBoundingClientRect();
+            const viewportPoint = {
+                x: e.clientX - rect.left,
+                y: e.clientY - rect.top,
+            };
+            canvas.fire("mouse:wheel", { e, scenePoint, viewportPoint });
         };
         overlayEl.addEventListener("wheel", handleGlobalWheel, { passive: false });
-        return () => {
-            overlayEl.removeEventListener("wheel", handleGlobalWheel);
-        };
-    }, [fabricCanvas, canvasZoom, canvasReady, overlayRef]);
+        return () => overlayEl.removeEventListener("wheel", handleGlobalWheel);
+    }, [fabricCanvas, canvasReady, overlayRef]);
     return { handleOverlayWheel };
 }