npm - @mhamz.01/easyflow-whiteboard - Versions diffs - 2.79.0 → 2.80.0 - Mend

@mhamz.01/easyflow-whiteboard 2.79.0 → 2.80.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

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

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 ADDED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
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,2CAglBzB"}

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

@@ -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,24 +330,24 @@ 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,
-                    x: (startPositions.get(t.id)?.x ?? t.x) + newWorldX,
-                    y: (startPositions.get(t.id)?.y ?? t.y) + newWorldY,
+                    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) + newWorldX,
-                    y: (startPositions.get(d.id)?.y ?? d.y) + newWorldY,
+                    x: (startPositions.get(d.id)?.x ?? d.x) + deltaX,
+                    y: (startPositions.get(d.id)?.y ?? d.y) + deltaY,
                 } : d));
                 // 7. Sync Fabric Objects (Imperative update for performance)
                 canvasObjectsStartPos.forEach((startPos, obj) => {
                     obj.set({
-                        left: startPos.left + newWorldX,
-                        top: startPos.top + newWorldY,
+                        left: startPos.left + deltaX,
+                        top: startPos.top + deltaY,
                     });
                     obj.setCoords(); // Required for selection/intersection accuracy
                 });

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

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@mhamz.01/easyflow-whiteboard",
-    "version": "2.79.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",