@mhamz.01/easyflow-whiteboard 2.78.0 → 2.80.0

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

@@ -0,0 +1,3 @@
+import { CanvasOverlayLayerProps } from "./types/overlay-types";
+export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, onDocumentsUpdate, canvasZoom, canvasViewport, selectionBox, selectedCanvasObjects, fabricCanvas, }: CanvasOverlayLayerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=custom-node-overlay-fix.d.ts.map

package/dist/components/node/custom-node-overlay-fix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-node-overlay-fix.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node-overlay-fix.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAkB,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAQhF,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,2CAmSzB"}

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

@@ -0,0 +1,192 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback } from "react";
+import TaskNode from "./custom-node";
+import DocumentNode from "./document-node";
+import { useWheelZoom } from "./hooks/useWheelZoom";
+import { useNodeDrag } from "./hooks/useNodeDrag";
+import { useSelectionBox } from "./hooks/useSelectionBox";
+import { useKeyboardShortcuts } from "./hooks/useKeyboardShortcuts";
+import { useCanvasReady } from "./hooks/useCanvasReady";
+import { useNodeSync } from "./hooks/useNodeSync";
+export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, onDocumentsUpdate, canvasZoom = 1, canvasViewport = { x: 0, y: 0 }, selectionBox = null, selectedCanvasObjects = [], fabricCanvas, }) {
+    // ─── State Management ──────────────────────────────────────────────────
+    const [localTasks, setLocalTasks] = useState(tasks);
+    const [localDocuments, setLocalDocuments] = useState(documents);
+    const [selectedIds, setSelectedIds] = useState(new Set());
+    const [dragging, setDragging] = useState(null);
+    const overlayRef = useRef(null);
+    const dragStateRef = useRef(null);
+    // ─── Hooks ────────────────────────────────────────────────────────────
+    const canvasReady = useCanvasReady({ fabricCanvas });
+    const { handleOverlayWheel } = useWheelZoom({
+        overlayRef,
+        fabricCanvas,
+        canvasZoom,
+        canvasReady,
+    });
+    const { dragStateRef: dragRef, rafIdRef, getPointerEvent, getViewportTransform, handleDragStart: handleDragStartHook, handleDragMove: handleDragMoveHook, handleDragEnd: handleDragEndHook, } = useNodeDrag({
+        selectedIds,
+        fabricCanvas,
+        selectedCanvasObjects,
+        onDragStateChange: setDragging,
+    });
+    dragStateRef.current = dragRef.current;
+    useSelectionBox({
+        selectionBox,
+        localTasks,
+        localDocuments,
+        canvasZoom,
+        canvasViewport,
+        onSelectionChange: setSelectedIds,
+    });
+    useNodeSync({
+        tasks: localTasks,
+        documents: localDocuments,
+        selectedIds,
+        fabricCanvas,
+        onTasksUpdate,
+        onDocumentsUpdate,
+    });
+    useKeyboardShortcuts({
+        selectedIds,
+        localTasks,
+        localDocuments,
+        onSelectAll: () => setSelectedIds(new Set([...localTasks.map((t) => t.id), ...localDocuments.map((d) => d.id)])),
+        onClearSelection: () => setSelectedIds(new Set()),
+        onDeleteSelected: (tasks, docs) => {
+            setLocalTasks(tasks);
+            setLocalDocuments(docs);
+            setSelectedIds(new Set());
+            onTasksUpdate?.(tasks);
+            onDocumentsUpdate?.(docs);
+        },
+    });
+    // ─── Effects ──────────────────────────────────────────────────────────
+    useEffect(() => {
+        setLocalTasks(tasks);
+    }, [tasks]);
+    useEffect(() => {
+        setLocalDocuments(documents);
+    }, [documents]);
+    // ─── Handlers ─────────────────────────────────────────────────────────
+    const getItemPosition = useCallback((id) => {
+        const task = localTasks.find((t) => t.id === id);
+        if (task)
+            return { x: task.x, y: task.y };
+        const doc = localDocuments.find((d) => d.id === id);
+        if (doc)
+            return { x: doc.x, y: doc.y };
+        return undefined;
+    }, [localTasks, localDocuments]);
+    const handleDragStart = useCallback((itemId, e) => {
+        handleDragStartHook(itemId, getItemPosition, e);
+    }, [handleDragStartHook, getItemPosition]);
+    // ─── Drag Move Effect ─────────────────────────────────────────────────
+    useEffect(() => {
+        if (!dragging)
+            return;
+        const handleMove = (e) => {
+            if (!dragStateRef.current?.isDragging)
+                return;
+            if (e.cancelable)
+                e.preventDefault();
+            const pointer = getPointerEvent(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 { 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 HTML Nodes
+                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));
+                // Update Fabric Objects
+                canvasObjectsStartPos.forEach((startPos, obj) => {
+                    obj.set({
+                        left: startPos.left + deltaX,
+                        top: startPos.top + deltaY,
+                    });
+                    obj.setCoords();
+                });
+                canvas.requestRenderAll();
+            });
+        };
+        const handleEnd = () => {
+            handleDragEndHook();
+            onTasksUpdate?.(localTasks);
+            onDocumentsUpdate?.(localDocuments);
+        };
+        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, localTasks, localDocuments, fabricCanvas, getViewportTransform, getPointerEvent, handleDragEndHook, onTasksUpdate, onDocumentsUpdate]);
+    // ─── Selection Handlers ────────────────────────────────────────────────
+    const handleSelect = useCallback((id, e) => {
+        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]));
+        }
+    }, []);
+    const handleStatusChange = useCallback((taskId, newStatus) => {
+        const updated = localTasks.map((t) => t.id === taskId ? { ...t, status: newStatus } : t);
+        setLocalTasks(updated);
+        onTasksUpdate?.(updated);
+    }, [localTasks, onTasksUpdate]);
+    // ─── Render Helper ────────────────────────────────────────────────────
+    const renderItem = useCallback((id, x, y, children) => {
+        const screenX = x * canvasZoom;
+        const screenY = y * canvasZoom;
+        const isDragging = dragging?.itemIds.includes(id);
+        return (_jsx("div", { className: "pointer-events-auto absolute", style: {
+                left: 0,
+                top: 0,
+                transform: `translate3d(${screenX}px, ${screenY}px, 0) scale(${canvasZoom})`,
+                transformOrigin: "top left",
+                transition: "none",
+                willChange: "transform",
+                zIndex: isDragging ? 1000 : 1,
+            }, children: children }, id));
+    }, [canvasZoom, dragging]);
+    // ─── Render ───────────────────────────────────────────────────────────
+    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: `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/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,2CA8kBzB"}
+{"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,2CAglBzB"}

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

@@ -273,8 +273,8 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             itemIds: itemsToDrag,
             startPositions,
             canvasObjectsStartPos,
-            offsetX: worldOffsetX, // Now stored as World Units
-            offsetY: worldOffsetY, // Now stored as World Units
+            offsetX: clickWorldX, // Now stored as World Units
+            offsetY: clickWorldY, // Now stored as World Units
         };
         if (!selectedIds.has(itemId) && dragStateRef.current.itemIds.length === 0) {
             setSelectedIds(new Set([itemId]));
@@ -314,14 +314,14 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
                 const currentWorldY = (pointer.clientY - liveVpY) / liveZoom;
                 // 4. Calculate where the "Anchor" node should be in World Units
                 // (Current Mouse World - Initial World Offset from Start)
-                const newWorldX = currentWorldX - offsetX;
-                const newWorldY = currentWorldY - offsetY;
+                const deltaX = currentWorldX - offsetX;
+                const deltaY = currentWorldY - offsetY;
                 if (itemIds.length > 0) {
                     console.groupCollapsed(`Dragging Node: ${itemIds[0]}`);
                     console.log("Screen Mouse:", { x: pointer.clientX, y: pointer.clientY });
                     console.log("World Mouse:", { x: currentWorldX.toFixed(2), y: currentWorldY.toFixed(2) });
                     console.log("Canvas Zoom:", liveZoom.toFixed(2));
-                    console.log("New Node Pos:", { x: newWorldX.toFixed(2), y: newWorldY.toFixed(2) });
+                    console.log("New Node Pos:", { x: deltaX.toFixed(2), y: deltaY.toFixed(2) });
                     console.groupEnd();
                 }
                 // 5. Calculate the Movement Delta in World Units
@@ -330,8 +330,8 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
                 const firstStart = startPositions.get(firstId);
                 if (!firstStart)
                     return;
-                const deltaX = newWorldX - firstStart.x;
-                const deltaY = newWorldY - firstStart.y;
+                // The real problem of task jumps 
+                // const deltaX = deltaX - firstStart.x;
                 // 6. Update HTML Nodes (Batching these into one state update)
                 setLocalTasks((prev) => prev.map((t) => itemIds.includes(t.id) ? {
                     ...t,

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

@@ -0,0 +1,7 @@
+import { Canvas } from "fabric";
+interface UseCanvasReadyProps {
+    fabricCanvas?: React.RefObject<Canvas | null>;
+}
+export declare function useCanvasReady({ fabricCanvas }: UseCanvasReadyProps): boolean;
+export {};
+//# sourceMappingURL=useCanvasReady.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvasReady.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useCanvasReady.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,UAAU,mBAAmB;IAC3B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAC/C;AAED,wBAAgB,cAAc,CAAC,EAAE,YAAY,EAAE,EAAE,mBAAmB,WAuBnE"}

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

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+export function useCanvasReady({ fabricCanvas }) {
+    const [canvasReady, setCanvasReady] = useState(false);
+    useEffect(() => {
+        if (canvasReady)
+            return;
+        if (fabricCanvas?.current) {
+            setCanvasReady(true);
+            return;
+        }
+        // Poll every 50ms until canvas is ready
+        const interval = setInterval(() => {
+            if (fabricCanvas?.current) {
+                setCanvasReady(true);
+                clearInterval(interval);
+            }
+        }, 50);
+        return () => clearInterval(interval);
+    }, [fabricCanvas, canvasReady]);
+    return canvasReady;
+}

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

@@ -0,0 +1,12 @@
+import { Task, Document } from "../types/overlay-types";
+interface UseKeyboardShortcutsProps {
+    selectedIds: Set<string>;
+    localTasks: Task[];
+    localDocuments: Document[];
+    onSelectAll: () => void;
+    onClearSelection: () => void;
+    onDeleteSelected: (tasks: Task[], docs: Document[]) => void;
+}
+export declare function useKeyboardShortcuts({ selectedIds, localTasks, localDocuments, onSelectAll, onClearSelection, onDeleteSelected, }: UseKeyboardShortcutsProps): void;
+export {};
+//# sourceMappingURL=useKeyboardShortcuts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardShortcuts.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useKeyboardShortcuts.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,UAAU,yBAAyB;IACjC,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzB,UAAU,EAAE,IAAI,EAAE,CAAC;IACnB,cAAc,EAAE,QAAQ,EAAE,CAAC;IAC3B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,gBAAgB,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;CAC7D;AAED,wBAAgB,oBAAoB,CAAC,EACnC,WAAW,EACX,UAAU,EACV,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,gBAAgB,GACjB,EAAE,yBAAyB,QA2C3B"}

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

@@ -0,0 +1,37 @@
+import { useEffect } from "react";
+export function useKeyboardShortcuts({ selectedIds, localTasks, localDocuments, onSelectAll, onClearSelection, onDeleteSelected, }) {
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            // Don't trigger if typing in input
+            if (e.target instanceof HTMLInputElement ||
+                e.target instanceof HTMLTextAreaElement) {
+                return;
+            }
+            // Select All (Ctrl+A / Cmd+A)
+            if ((e.ctrlKey || e.metaKey) && e.key === "a") {
+                e.preventDefault();
+                onSelectAll();
+            }
+            // Clear selection (Escape)
+            if (e.key === "Escape") {
+                onClearSelection();
+            }
+            // Delete selected nodes (Delete / Backspace)
+            if ((e.key === "Delete" || e.key === "Backspace") && selectedIds.size > 0) {
+                e.preventDefault();
+                const updatedTasks = localTasks.filter((t) => !selectedIds.has(t.id));
+                const updatedDocs = localDocuments.filter((d) => !selectedIds.has(d.id));
+                onDeleteSelected(updatedTasks, updatedDocs);
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [
+        selectedIds,
+        localTasks,
+        localDocuments,
+        onSelectAll,
+        onClearSelection,
+        onDeleteSelected,
+    ]);
+}

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

@@ -0,0 +1,25 @@
+import { FabricObject, Canvas } from "fabric";
+import { DragState, PointerCoords, ViewportTransform } from "../types/overlay-types";
+import { Task, Document } from "../types/overlay-types";
+interface UseNodeDragProps {
+    selectedIds: Set<string>;
+    fabricCanvas?: React.RefObject<Canvas | null>;
+    selectedCanvasObjects: FabricObject[];
+    onDragStateChange: (dragging: {
+        itemIds: string[];
+    } | null) => void;
+}
+export declare function useNodeDrag({ selectedIds, fabricCanvas, selectedCanvasObjects, onDragStateChange, }: UseNodeDragProps): {
+    dragStateRef: import("react").RefObject<DragState>;
+    rafIdRef: import("react").RefObject<number | null>;
+    getPointerEvent: (e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent) => PointerCoords;
+    getViewportTransform: (canvas: Canvas) => ViewportTransform;
+    handleDragStart: (itemId: string, getItemPosition: (id: string) => {
+        x: number;
+        y: number;
+    } | undefined, e: React.MouseEvent | React.TouchEvent) => void;
+    handleDragMove: (pointer: PointerCoords, onTasksUpdate: (tasks: Task[], docs: Document[]) => void) => void;
+    handleDragEnd: () => void;
+};
+export {};
+//# sourceMappingURL=useNodeDrag.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useNodeDrag.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useNodeDrag.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACrF,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,UAAU,gBAAgB;IACxB,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9C,qBAAqB,EAAE,YAAY,EAAE,CAAC;IACtC,iBAAiB,EAAE,CAAC,QAAQ,EAAE;QAAE,OAAO,EAAE,MAAM,EAAE,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAC;CACrE;AAED,wBAAgB,WAAW,CAAC,EAC1B,WAAW,EACX,YAAY,EACZ,qBAAqB,EACrB,iBAAiB,GAClB,EAAE,gBAAgB;;;yBAaZ,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,GAAG,UAAU,GAAG,UAAU,KAC/D,aAAa;mCAasB,MAAM,KAAG,iBAAiB;8BAWpD,MAAM,mBACG,CAAC,EAAE,EAAE,MAAM,KAAK;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,KAClE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU;8BAqD7B,aAAa,iBACP,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,IAAI;;EAsD7D"}

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

@@ -0,0 +1,119 @@
+import { useRef, useCallback } from "react";
+export function useNodeDrag({ selectedIds, fabricCanvas, selectedCanvasObjects, onDragStateChange, }) {
+    const dragStateRef = useRef({
+        isDragging: false,
+        itemIds: [],
+        startPositions: new Map(),
+        canvasObjectsStartPos: new Map(),
+        offsetX: 0,
+        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 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 clickWorldX = (pointer.clientX - liveVpX) / liveZoom;
+        const clickWorldY = (pointer.clientY - liveVpY) / liveZoom;
+        const clickedPos = getItemPosition(itemId);
+        if (!clickedPos)
+            return;
+        const startPositions = new Map();
+        itemsToDrag.forEach((id) => {
+            const pos = getItemPosition(id);
+            if (pos)
+                startPositions.set(id, pos);
+        });
+        const canvasObjectsStartPos = new Map();
+        selectedCanvasObjects.forEach((obj) => {
+            canvasObjectsStartPos.set(obj, { left: obj.left || 0, top: obj.top || 0 });
+        });
+        dragStateRef.current = {
+            isDragging: true,
+            itemIds: itemsToDrag,
+            startPositions,
+            canvasObjectsStartPos,
+            offsetX: clickWorldX,
+            offsetY: clickWorldY,
+        };
+        onDragStateChange({ 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)
+            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)
+                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,
+                });
+                obj.setCoords();
+            });
+            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,
+    };
+}

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

@@ -0,0 +1,13 @@
+import { Canvas } from "fabric";
+import { Task, Document } from "../types/overlay-types";
+interface UseNodeSyncProps {
+    tasks: Task[];
+    documents: Document[];
+    selectedIds: Set<string>;
+    fabricCanvas?: React.RefObject<Canvas | null>;
+    onTasksUpdate?: (tasks: Task[]) => void;
+    onDocumentsUpdate?: (documents: Document[]) => void;
+}
+export declare function useNodeSync({ tasks, documents, selectedIds, fabricCanvas, onTasksUpdate, onDocumentsUpdate, }: UseNodeSyncProps): import("react").RefObject<Set<string>>;
+export {};
+//# sourceMappingURL=useNodeSync.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useNodeSync.d.ts","sourceRoot":"","sources":["../../../../src/components/node/hooks/useNodeSync.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,UAAU,gBAAgB;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;CACrD;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,WAAW,EACX,YAAY,EACZ,aAAa,EACb,iBAAiB,GAClB,EAAE,gBAAgB,0CAuElB"}

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

@@ -0,0 +1,56 @@
+import { useEffect, useRef } from "react";
+export function useNodeSync({ tasks, documents, selectedIds, fabricCanvas, onTasksUpdate, onDocumentsUpdate, }) {
+    const selectedIdsRef = useRef(selectedIds);
+    selectedIdsRef.current = selectedIds;
+    useEffect(() => {
+        const canvas = fabricCanvas?.current;
+        if (!canvas)
+            return;
+        const handleObjectMoving = (e) => {
+            const target = e.transform?.target || e.target;
+            if (!target)
+                return;
+            const deltaX = target.left - (target._prevLeft ?? target.left);
+            const deltaY = target.top - (target._prevTop ?? target.top);
+            target._prevLeft = target.left;
+            target._prevTop = target.top;
+            if (deltaX === 0 && deltaY === 0)
+                return;
+            const sel = selectedIdsRef.current;
+            const updatedTasks = tasks.map((t) => sel.has(t.id) ? { ...t, x: t.x + deltaX, y: t.y + deltaY } : t);
+            const updatedDocs = documents.map((d) => sel.has(d.id) ? { ...d, x: d.x + deltaX, y: d.y + deltaY } : d);
+            onTasksUpdate?.(updatedTasks);
+            onDocumentsUpdate?.(updatedDocs);
+        };
+        const handleMouseDown = (e) => {
+            const target = e.target;
+            if (target) {
+                target._prevLeft = target.left;
+                target._prevTop = target.top;
+            }
+            if (!target)
+                return;
+            const transformTarget = e.transform?.target;
+            const activeObject = canvas.getActiveObject();
+            const activeObjects = canvas.getActiveObjects();
+            const isPartOfActiveSelection = transformTarget === target ||
+                activeObject === target ||
+                activeObjects.includes(target);
+            if (!isPartOfActiveSelection) {
+                // Clear selection if clicking unselected object
+            }
+        };
+        const handleSelectionCleared = () => {
+            // Selection cleared event
+        };
+        canvas.on("object:moving", handleObjectMoving);
+        canvas.on("mouse:down", handleMouseDown);
+        canvas.on("selection:cleared", handleSelectionCleared);
+        return () => {
+            canvas.off("object:moving", handleObjectMoving);
+            canvas.off("mouse:down", handleMouseDown);
+            canvas.off("selection:cleared", handleSelectionCleared);
+        };
+    }, [fabricCanvas, tasks, documents, onTasksUpdate, onDocumentsUpdate]);
+    return selectedIdsRef;
+}

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

@@ -0,0 +1,20 @@
+import { Task, Document } from "../types/overlay-types";
+interface UseSelectionBoxProps {
+    selectionBox: {
+        x1: number;
+        y1: number;
+        x2: number;
+        y2: number;
+    } | null;
+    localTasks: Task[];
+    localDocuments: Document[];
+    canvasZoom: number;
+    canvasViewport: {
+        x: number;
+        y: number;
+    };
+    onSelectionChange: (selectedIds: Set<string>) => void;
+}
+export declare function useSelectionBox({ selectionBox, localTasks, localDocuments, canvasZoom, canvasViewport, onSelectionChange, }: UseSelectionBoxProps): void;
+export {};
+//# sourceMappingURL=useSelectionBox.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,30 @@
+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);
+    };
+    useEffect(() => {
+        if (!selectionBox)
+            return;
+        const newSelected = new Set();
+        for (const task of localTasks) {
+            if (isItemInSelectionBox(task.x, task.y, 300, 140, selectionBox)) {
+                newSelected.add(task.id);
+            }
+        }
+        for (const doc of localDocuments) {
+            if (isItemInSelectionBox(doc.x, doc.y, 320, 160, selectionBox)) {
+                newSelected.add(doc.id);
+            }
+        }
+        onSelectionChange(newSelected);
+    }, [selectionBox, localTasks, localDocuments, canvasZoom, canvasViewport]);
+}

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

@@ -0,0 +1,12 @@
+import { Canvas } from "fabric";
+interface UseWheelZoomProps {
+    overlayRef: React.RefObject<HTMLDivElement | null>;
+    fabricCanvas?: React.RefObject<Canvas | null>;
+    canvasZoom?: number;
+    canvasReady?: boolean;
+}
+export declare function useWheelZoom({ overlayRef, fabricCanvas, canvasZoom, canvasReady, }: UseWheelZoomProps): {
+    handleOverlayWheel: (e: React.WheelEvent) => void;
+};
+export {};
+//# sourceMappingURL=useWheelZoom.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,56 @@
+import { useEffect } from "react";
+export function useWheelZoom({ overlayRef, fabricCanvas, canvasZoom = 1, canvasReady = false, }) {
+    // React event handler for overlay wheel
+    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();
+        }
+    };
+    // Global wheel event for hovering over nodes
+    useEffect(() => {
+        const overlayEl = overlayRef.current;
+        const canvas = fabricCanvas?.current;
+        if (!overlayEl || !canvas || !canvasReady)
+            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,
+                });
+            }
+        };
+        overlayEl.addEventListener("wheel", handleGlobalWheel, { passive: false });
+        return () => {
+            overlayEl.removeEventListener("wheel", handleGlobalWheel);
+        };
+    }, [fabricCanvas, canvasZoom, canvasReady, overlayRef]);
+    return { handleOverlayWheel };
+}

package/dist/components/node/types/overlay-types.d.ts

@@ -0,0 +1,67 @@
+import { FabricObject, Canvas } from "fabric";
+export interface Task {
+    id: string;
+    title: string;
+    status: "todo" | "in-progress" | "done";
+    x: number;
+    y: number;
+    assignee?: string;
+    project?: string;
+    priority?: "low" | "medium" | "high";
+    dueDate?: string;
+}
+export interface Document {
+    id: string;
+    title: string;
+    project: string;
+    breadcrumb?: string[];
+    preview: string;
+    updatedAt?: string;
+    x: number;
+    y: number;
+}
+export interface CanvasOverlayLayerProps {
+    tasks: Task[];
+    documents: Document[];
+    onTasksUpdate?: (tasks: Task[]) => void;
+    onDocumentsUpdate?: (documents: Document[]) => void;
+    canvasZoom?: number;
+    canvasViewport?: {
+        x: number;
+        y: number;
+    };
+    selectionBox?: {
+        x1: number;
+        y1: number;
+        x2: number;
+        y2: number;
+    } | null;
+    selectedCanvasObjects?: FabricObject[];
+    overlayRef: React.RefObject<HTMLDivElement | null>;
+    fabricCanvas?: React.RefObject<Canvas | null>;
+    canvasReady?: boolean;
+}
+export interface DragState {
+    isDragging: boolean;
+    itemIds: string[];
+    startPositions: Map<string, {
+        x: number;
+        y: number;
+    }>;
+    canvasObjectsStartPos: Map<FabricObject, {
+        left: number;
+        top: number;
+    }>;
+    offsetX: number;
+    offsetY: number;
+}
+export interface PointerCoords {
+    clientX: number;
+    clientY: number;
+}
+export interface ViewportTransform {
+    zoom: number;
+    vpX: number;
+    vpY: number;
+}
+//# sourceMappingURL=overlay-types.d.ts.map

package/dist/components/node/types/overlay-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-types.d.ts","sourceRoot":"","sources":["../../../../src/components/node/types/overlay-types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAE9C,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,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,IAAI,EAAE,CAAC;IAEd,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,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,SAAS;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACtD,qBAAqB,EAAE,GAAG,CAAC,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACxE,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb"}

package/dist/components/node/types/overlay-types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/whiteboard/whiteboard-test.d.ts

@@ -1,4 +1,4 @@
-import type { Document } from "../node/custom-node-overlay-layer";
+import type { Document } from "../node/types/overlay-types";
 import { DocumentTemplate } from "../toolbar/document-dropdown";
 import { TaskTemplate } from "../toolbar/task-dropdown";
 export type { WhiteboardInitialData } from "../../hooks/useCanvasInit";

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":"AAQE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAkBlE,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AACvE,YAAY,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAIxE,UAAU,IAAI;IACZ,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,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAID,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE;QACZ,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;QACf,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;KACxB,CAAC;IACF,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAClC,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE;QACjB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,GAAG,EAAE,CAAC;QACb,SAAS,EAAE,GAAG,EAAE,CAAC;KAClB,KAAK,IAAI,CAAC;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAID,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,WAAW,EACX,MAAM,EACN,cAAc,EACd,cAAmB,EACnB,kBAAuB,EACvB,aAAqB,GACtB,EAAE,qBAAqB,2CA8PvB"}
+{"version":3,"file":"whiteboard-test.d.ts","sourceRoot":"","sources":["../../../src/components/whiteboard/whiteboard-test.tsx"],"names":[],"mappings":"AAQC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAkB3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AACvE,YAAY,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAIxE,UAAU,IAAI;IACZ,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,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAID,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE;QACZ,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;QACf,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;KACxB,CAAC;IACF,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAClC,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE;QACjB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,GAAG,EAAE,CAAC;QACb,SAAS,EAAE,GAAG,EAAE,CAAC;KAClB,KAAK,IAAI,CAAC;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAID,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,WAAW,EACX,MAAM,EACN,cAAc,EACd,cAAmB,EACnB,kBAAuB,EACvB,aAAqB,GACtB,EAAE,qBAAqB,2CA8PvB"}

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

@@ -5,7 +5,7 @@ import { classRegistry } from "fabric";
 import { useWhiteboardStore } from "../../store/whiteboard-store";
 import WhiteboardToolbar from "../toolbar/whiteboard-toolbar";
 import ToolOptionsPanel from "../toolbar/tooloptions-panel";
-import CanvasOverlayLayer from "../node/custom-node-overlay-layer";
+import CanvasOverlayLayer from "../node/custom-node-overlay-fix";
 import ZoomControls from "../zoomcontrol/zoom-control";
 import { Frame } from "../../lib/fabric-frame";
 // Import all hooks
@@ -200,7 +200,7 @@ export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs,
                         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, canvasReady: canvasReady }), _jsxs("div", { className: "absolute inset-0 pointer-events-none", style: { zIndex: 100 }, children: [_jsx("div", { className: "pointer-events-auto", children: canvasReady ?
+                    } }), _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, canvasReady: canvasReady, overlayRef: useRef(null) }), _jsxs("div", { className: "absolute inset-0 pointer-events-none", style: { zIndex: 100 }, children: [_jsx("div", { className: "pointer-events-auto", children: canvasReady ?
                                 _jsx(WhiteboardToolbar, { fabricCanvas: fabricCanvasRef, isRestoringRef: isRestoringRef, onAddTask: handleAddTaskFromDropdown, onAddDocument: handleAddDocumentFromDropdown, availableDocuments: availableDocuments, availableTasks: availableTasks, isLoadingData: isLoadingData })
                                 : _jsx(ToolbarSkeleton, {}) }), _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/package.json

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