@mhamz.01/easyflow-whiteboard 2.79.0 → 2.81.0

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,16 @@
+import { Canvas } from "fabric";
+interface UseWheelZoomProps {
+    overlayRef: React.RefObject<HTMLDivElement | null>;
+    fabricCanvas?: React.RefObject<Canvas | null>;
+    canvasZoom?: number;
+    canvasReady?: boolean;
+    onViewportChange: (viewport: {
+        x: number;
+        y: number;
+    }, zoom: number) => void;
+}
+export declare function useWheelZoom({ overlayRef, fabricCanvas, canvasZoom, canvasReady, onViewportChange, }: 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;IACtB,gBAAgB,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9E;AAED,wBAAgB,YAAY,CAAC,EAC3B,UAAU,EACV,YAAY,EACZ,UAAc,EACd,WAAmB,EACnB,gBAAgB,GACjB,EAAE,iBAAiB;4BAEa,KAAK,CAAC,UAAU;EAqFhD"}

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

@@ -0,0 +1,76 @@
+import { useEffect } from "react";
+export function useWheelZoom({ overlayRef, fabricCanvas, canvasZoom = 1, canvasReady = false, onViewportChange, }) {
+    // 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();
+        }
+    };
+    useEffect(() => {
+        const canvas = fabricCanvas?.current;
+        if (!canvas || !canvasReady)
+            return;
+        // THE FIX: Listen to Fabric's internal render loop
+        // This fires immediately after Fabric moves, reducing the lag time
+        const syncViewport = () => {
+            const vpt = canvas.viewportTransform;
+            if (vpt) {
+                onViewportChange({ x: vpt[4], y: vpt[5] }, // Pan position
+                canvas.getZoom() // Zoom level
+                );
+            }
+        };
+        // Use 'after:render' for the tightest possible sync
+        canvas.on("after:render", syncViewport);
+        return () => {
+            canvas.off("after:render", syncViewport);
+        };
+    }, [fabricCanvas, canvasReady, onViewportChange]);
+    // 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.79.0",
+    "version": "2.81.0",
     "description": "A feature-rich whiteboard component built with Fabric.js and React",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",