@mhamz.01/easyflow-whiteboard 1.0.0

package/dist/hooks/usePan.js

@@ -0,0 +1,80 @@
+import { useEffect } from "react";
+export const usePan = ({ fabricCanvas, activeTool, handleZoom, setCanvasViewport, }) => {
+    useEffect(() => {
+        const canvas = fabricCanvas.current;
+        if (!canvas)
+            return;
+        const canvasEl = canvas.getElement();
+        canvasEl.style.touchAction = "none";
+        let isPanning = false;
+        let lastX = 0;
+        let lastY = 0;
+        let lastTouchDistance = 0;
+        const onDown = (opt) => {
+            if (activeTool !== "pan")
+                return;
+            const e = opt.e;
+            // Pinch initialization
+            if (e.touches && e.touches.length === 2) {
+                isPanning = false;
+                lastTouchDistance = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY);
+                return;
+            }
+            // Pan initialization
+            const pointer = e.touches ? e.touches[0] : e;
+            isPanning = true;
+            lastX = pointer.clientX;
+            lastY = pointer.clientY;
+            canvas.setCursor("grabbing");
+        };
+        const onMove = (opt) => {
+            if (activeTool !== "pan")
+                return;
+            const e = opt.e;
+            // Handle pinch zoom (two fingers)
+            if (e.touches && e.touches.length === 2) {
+                const currentDistance = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY);
+                if (lastTouchDistance > 0) {
+                    const zoom = canvas.getZoom();
+                    const delta = (currentDistance - lastTouchDistance) * 0.01;
+                    const newZoom = zoom + delta;
+                    const midX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
+                    const midY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
+                    const rect = canvasEl.getBoundingClientRect();
+                    handleZoom(newZoom, { x: midX - rect.left, y: midY - rect.top });
+                }
+                lastTouchDistance = currentDistance;
+                return;
+            }
+            // Handle panning (one finger or mouse)
+            if (isPanning) {
+                const pointer = e.touches ? e.touches[0] : e;
+                const vpt = canvas.viewportTransform;
+                if (vpt) {
+                    vpt[4] += pointer.clientX - lastX;
+                    vpt[5] += pointer.clientY - lastY;
+                    canvas.requestRenderAll();
+                }
+                lastX = pointer.clientX;
+                lastY = pointer.clientY;
+            }
+        };
+        const onUp = () => {
+            const vpt = canvas.viewportTransform;
+            if (vpt) {
+                setCanvasViewport({ x: vpt[4], y: vpt[5] });
+            }
+            isPanning = false;
+            lastTouchDistance = 0;
+            canvas.setCursor(activeTool === "pan" ? "grab" : "default");
+        };
+        canvas.on("mouse:down", onDown);
+        canvas.on("mouse:move", onMove);
+        canvas.on("mouse:up", onUp);
+        return () => {
+            canvas.off("mouse:down", onDown);
+            canvas.off("mouse:move", onMove);
+            canvas.off("mouse:up", onUp);
+        };
+    }, [activeTool, handleZoom, setCanvasViewport, fabricCanvas]);
+};

package/dist/hooks/usePersistance.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { Canvas } from "fabric";
+interface UsePersistenceProps {
+    fabricCanvas: React.RefObject<Canvas | null>;
+    tasks: any[];
+    documents: any[];
+    pushHistory: (state: string) => void;
+    isRestoringRef: React.RefObject<boolean>;
+    suppressHistoryRef: React.RefObject<boolean>;
+}
+export declare const usePersistence: ({ fabricCanvas, tasks, documents, pushHistory, isRestoringRef, suppressHistoryRef, }: UsePersistenceProps) => void;
+export {};
+//# sourceMappingURL=usePersistance.d.ts.map

package/dist/hooks/usePersistance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePersistance.d.ts","sourceRoot":"","sources":["../../src/hooks/usePersistance.ts"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,UAAU,mBAAmB;IAC3B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7C,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,SAAS,EAAE,GAAG,EAAE,CAAC;IACjB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACzC,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;CAC9C;AAKD,eAAO,MAAM,cAAc,GAAI,sFAO5B,mBAAmB,SAgFrB,CAAC"}

package/dist/hooks/usePersistance.js

@@ -0,0 +1,79 @@
+import { useEffect, useCallback } from "react";
+const CANVAS_KEY = "easyflow_whiteboard_canvas";
+const NODES_KEY = "easyflow_whiteboard_nodes";
+export const usePersistence = ({ fabricCanvas, tasks, documents, pushHistory, isRestoringRef, suppressHistoryRef, }) => {
+    // ── SAVE CANVAS LOGIC ────────────────────────────────────────────────
+    const saveCanvas = useCallback(() => {
+        const canvas = fabricCanvas.current;
+        if (!canvas || isRestoringRef.current || suppressHistoryRef.current)
+            return;
+        const performSave = () => {
+            try {
+                const json = JSON.stringify(canvas.toJSON());
+                localStorage.setItem(CANVAS_KEY, json);
+                pushHistory(json);
+                console.log("💾 Canvas saved via requestIdleCallback");
+            }
+            catch (err) {
+                console.error("Canvas save failed:", err);
+            }
+        };
+        // Use requestIdleCallback for zero-lag background processing
+        if (typeof window.requestIdleCallback === "function") {
+            window.requestIdleCallback(performSave);
+        }
+        else {
+            performSave();
+        }
+    }, [pushHistory, fabricCanvas, isRestoringRef, suppressHistoryRef]);
+    // ── SAVE NODES LOGIC ─────────────────────────────────────────────────
+    const saveNodes = useCallback(() => {
+        if (isRestoringRef.current)
+            return;
+        const performSave = () => {
+            try {
+                const nodesData = { tasks, documents };
+                localStorage.setItem(NODES_KEY, JSON.stringify(nodesData));
+                console.log("💾 Custom nodes saved");
+            }
+            catch (err) {
+                console.error("Nodes save failed:", err);
+            }
+        };
+        if (typeof window.requestIdleCallback === "function") {
+            window.requestIdleCallback(performSave);
+        }
+        else {
+            performSave();
+        }
+    }, [tasks, documents, isRestoringRef]);
+    // ── EFFECT: CANVAS EVENT LISTENERS ──────────────────────────────────
+    useEffect(() => {
+        const canvas = fabricCanvas.current;
+        if (!canvas)
+            return;
+        let saveTimeout; // ← Changed
+        const debouncedSave = (opt) => {
+            if (opt?.target?.excludeFromExport)
+                return;
+            clearTimeout(saveTimeout);
+            saveTimeout = window.setTimeout(saveCanvas, 2000); // ← Use window.setTimeout
+        };
+        canvas.on("object:modified", debouncedSave);
+        canvas.on("object:added", debouncedSave);
+        canvas.on("object:removed", debouncedSave);
+        canvas.on("path:created", debouncedSave);
+        return () => {
+            clearTimeout(saveTimeout);
+            canvas.off("object:modified", debouncedSave);
+            canvas.off("object:added", debouncedSave);
+            canvas.off("object:removed", debouncedSave);
+            canvas.off("path:created", debouncedSave);
+        };
+    }, [saveCanvas, fabricCanvas]);
+    // ── EFFECT: REACT STATE (NODES) WATCHER ─────────────────────────────
+    useEffect(() => {
+        const timeout = setTimeout(saveNodes, 2000);
+        return () => clearTimeout(timeout);
+    }, [saveNodes]);
+};

package/dist/hooks/useSelection.d.ts

@@ -0,0 +1,21 @@
+import { Canvas, FabricObject } from "fabric";
+interface UseSelectionProps {
+    fabricCanvas: React.RefObject<Canvas | null>;
+    activeTool: string;
+    canvasZoom: number;
+    canvasViewport: {
+        x: number;
+        y: number;
+    };
+    setSelectionBox: (box: {
+        x1: number;
+        y1: number;
+        x2: number;
+        y2: number;
+    } | null) => void;
+    setSelectedCanvasObjects: (objects: FabricObject[]) => void;
+    isDrawingRef: React.MutableRefObject<boolean>;
+}
+export declare const useSelection: ({ fabricCanvas, activeTool, canvasZoom, canvasViewport, setSelectionBox, setSelectedCanvasObjects, isDrawingRef, }: UseSelectionProps) => void;
+export {};
+//# sourceMappingURL=useSelection.d.ts.map

package/dist/hooks/useSelection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelection.d.ts","sourceRoot":"","sources":["../../src/hooks/useSelection.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAQ,YAAY,EAAe,MAAM,QAAQ,CAAC;AAMjE,UAAU,iBAAiB;IACzB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,eAAe,EAAE,CAAC,GAAG,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1F,wBAAwB,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAC5D,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,YAAY,GAAI,oHAQ1B,iBAAiB,SA0JnB,CAAC"}

package/dist/hooks/useSelection.js

@@ -0,0 +1,142 @@
+// hooks/useSelection.ts
+import { useEffect } from "react";
+import { Rect, FabricImage } from "fabric";
+import { Frame } from "../lib/fabric-frame";
+import { Arrow } from "../lib/fabric-arrow";
+import { BidirectionalArrow } from "../lib/fabric-bidirectional-arrow";
+import { useWhiteboardStore } from "../store/whiteboard-store";
+export const useSelection = ({ fabricCanvas, activeTool, canvasZoom, canvasViewport, setSelectionBox, setSelectedCanvasObjects, isDrawingRef, }) => {
+    const setSelectedObjectType = useWhiteboardStore((state) => state.setSelectedObjectType);
+    const setActiveTool = useWhiteboardStore((state) => state.setActiveTool);
+    useEffect(() => {
+        const canvas = fabricCanvas.current;
+        if (!canvas)
+            return;
+        let isSelecting = false;
+        let selStart = { x: 0, y: 0 };
+        let selRect = null;
+        let rafId = null;
+        const onDown = (e) => {
+            if (activeTool !== "select" || e.target)
+                return;
+            isSelecting = true;
+            const p = canvas.getScenePoint(e.e);
+            selStart = { x: p.x, y: p.y };
+            selRect = new Rect({
+                left: p.x,
+                top: p.y,
+                width: 0,
+                height: 0,
+                fill: "transparent",
+                stroke: "transparent",
+                strokeWidth: 0,
+                selectable: false,
+                evented: false,
+                visible: false,
+            });
+            canvas.add(selRect);
+            canvas.renderAll();
+        };
+        const onMove = (e) => {
+            if (!isSelecting || !selRect)
+                return;
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
+            rafId = requestAnimationFrame(() => {
+                const p = canvas.getScenePoint(e.e);
+                const w = p.x - selStart.x;
+                const h = p.y - selStart.y;
+                selRect.set({
+                    left: w < 0 ? p.x : selStart.x,
+                    top: h < 0 ? p.y : selStart.y,
+                    width: Math.abs(w),
+                    height: Math.abs(h),
+                });
+                selRect.setCoords();
+                canvas.renderAll();
+                setSelectionBox({
+                    x1: Math.min(selStart.x, p.x) * canvasZoom + canvasViewport.x,
+                    y1: Math.min(selStart.y, p.y) * canvasZoom + canvasViewport.y,
+                    x2: Math.max(selStart.x, p.x) * canvasZoom + canvasViewport.x,
+                    y2: Math.max(selStart.y, p.y) * canvasZoom + canvasViewport.y,
+                });
+            });
+        };
+        const onUp = () => {
+            if (!isSelecting || !selRect)
+                return;
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+                rafId = null;
+            }
+            canvas.remove(selRect);
+            canvas.renderAll();
+            isSelecting = false;
+            selRect = null;
+            setTimeout(() => setSelectionBox(null), 100);
+        };
+        const onSelected = () => {
+            const sel = canvas.getActiveObject();
+            if (!sel || isDrawingRef.current)
+                return;
+            setSelectedCanvasObjects(sel.type === "activeSelection" ? sel.getObjects() : [sel]);
+            const typeMap = {
+                rect: "rectangle",
+                circle: "circle",
+                line: "line",
+                arrow: "arrow",
+                "bidirectional-arrow": "arrow",
+                "i-text": "text",
+                text: "text",
+                path: "pen",
+                image: "image",
+            };
+            const t = sel instanceof Frame
+                ? "frame"
+                : sel instanceof FabricImage
+                    ? "image"
+                    : sel instanceof Arrow
+                        ? "arrow"
+                        : sel instanceof BidirectionalArrow
+                            ? "arrow"
+                            : typeMap[sel.type] ?? null;
+            setSelectedObjectType(t);
+        };
+        const onDeselected = () => {
+            setSelectedObjectType(null);
+            setSelectionBox(null);
+            setSelectedCanvasObjects([]);
+            if (!isDrawingRef.current && activeTool !== "select" && activeTool !== "pan") {
+                setActiveTool("select");
+            }
+        };
+        canvas.on("selection:created", onSelected);
+        canvas.on("selection:updated", onSelected);
+        canvas.on("selection:cleared", onDeselected);
+        canvas.on("mouse:down", onDown);
+        canvas.on("mouse:move", onMove);
+        canvas.on("mouse:up", onUp);
+        return () => {
+            canvas.off("selection:created", onSelected);
+            canvas.off("selection:updated", onSelected);
+            canvas.off("selection:cleared", onDeselected);
+            canvas.off("mouse:down", onDown);
+            canvas.off("mouse:move", onMove);
+            canvas.off("mouse:up", onUp);
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
+            if (selRect)
+                canvas.remove(selRect);
+        };
+    }, [
+        activeTool,
+        canvasZoom,
+        canvasViewport,
+        fabricCanvas,
+        setSelectionBox,
+        setSelectedCanvasObjects,
+        setSelectedObjectType,
+        setActiveTool,
+        isDrawingRef
+    ]);
+};

package/dist/hooks/useTextStyle.d.ts

@@ -0,0 +1,9 @@
+import { RefObject } from "react";
+import { Canvas } from "fabric";
+interface UseTextStyleProps {
+    fabricCanvas: RefObject<Canvas | null>;
+    toolOptions: any;
+}
+export declare const useTextStyle: ({ fabricCanvas, toolOptions }: UseTextStyleProps) => void;
+export {};
+//# sourceMappingURL=useTextStyle.d.ts.map

package/dist/hooks/useTextStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTextStyle.d.ts","sourceRoot":"","sources":["../../src/hooks/useTextStyle.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAgB,MAAM,QAAQ,CAAC;AAE9C,UAAU,iBAAiB;IACzB,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,WAAW,EAAE,GAAG,CAAC;CAClB;AAED,eAAO,MAAM,YAAY,GAAI,+BAA+B,iBAAiB,SAiC5E,CAAC"}

package/dist/hooks/useTextStyle.js

@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+export const useTextStyle = ({ fabricCanvas, toolOptions }) => {
+    useEffect(() => {
+        const canvas = fabricCanvas.current;
+        if (!canvas)
+            return;
+        const activeObject = canvas.getActiveObject();
+        if (!activeObject)
+            return;
+        const updateTextStyle = (obj) => {
+            if (obj.type !== "i-text" && obj.type !== "text")
+                return;
+            const options = toolOptions.text;
+            obj.set({
+                fontSize: options.fontSize,
+                fontFamily: options.fontFamily,
+                fontWeight: options.fontWeight,
+                fill: options.color,
+                textAlign: options.textAlign,
+            });
+            obj.dirty = true;
+        };
+        if (activeObject.type === "activeSelection") {
+            const objects = activeObject.getObjects();
+            objects.forEach((obj) => updateTextStyle(obj));
+        }
+        else {
+            updateTextStyle(activeObject);
+        }
+        canvas.requestRenderAll();
+    }, [toolOptions.text, fabricCanvas]);
+};

package/dist/hooks/useToolManager.d.ts

@@ -0,0 +1,15 @@
+import { RefObject } from "react";
+import { Canvas, Circle } from "fabric";
+import * as fabric from "fabric";
+interface UseToolManagerProps {
+    fabricCanvas: RefObject<Canvas | null>;
+    activeTool: string;
+    toolOptions: any;
+    eraserTraceRef: RefObject<Circle | null>;
+    eraserPathRef: RefObject<fabric.Path | null>;
+    eraserPathPointsRef: RefObject<string[]>;
+    eraserTargetsRef: RefObject<Set<any>>;
+}
+export declare const useToolManager: ({ fabricCanvas, activeTool, toolOptions, eraserTraceRef, eraserPathRef, eraserPathPointsRef, eraserTargetsRef, }: UseToolManagerProps) => void;
+export {};
+//# sourceMappingURL=useToolManager.d.ts.map

package/dist/hooks/useToolManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToolManager.d.ts","sourceRoot":"","sources":["../../src/hooks/useToolManager.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAExC,OAAO,KAAK,MAAM,MAAM,QAAQ,CAAC;AAEjC,UAAU,mBAAmB;IAC3B,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,GAAG,CAAC;IACjB,cAAc,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACzC,aAAa,EAAE,SAAS,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAC7C,mBAAmB,EAAE,SAAS,CAAC,MAAM,EAAE,CAAC,CAAC;IACzC,gBAAgB,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;CACvC;AAED,eAAO,MAAM,cAAc,GAAI,kHAQ5B,mBAAmB,SA8HrB,CAAC"}

package/dist/hooks/useToolManager.js

@@ -0,0 +1,115 @@
+import { useEffect } from "react";
+import { calculateDashArray } from "../lib/fabric-utils";
+export const useToolManager = ({ fabricCanvas, activeTool, toolOptions, eraserTraceRef, eraserPathRef, eraserPathPointsRef, eraserTargetsRef, }) => {
+    useEffect(() => {
+        const canvas = fabricCanvas.current;
+        if (!canvas)
+            return;
+        // Clean up eraser trace when switching tools
+        if (activeTool !== "eraser" && eraserTraceRef.current) {
+            canvas.remove(eraserTraceRef.current);
+            eraserTraceRef.current = null;
+            eraserTargetsRef.current.clear();
+            if (eraserPathRef.current) {
+                canvas.remove(eraserPathRef.current);
+                eraserPathRef.current = null;
+                eraserPathPointsRef.current = [];
+            }
+        }
+        switch (activeTool) {
+            case "select":
+                canvas.isDrawingMode = false;
+                canvas.selection = true;
+                canvas.defaultCursor = "default";
+                canvas.hoverCursor = "move";
+                canvas.forEachObject((obj) => {
+                    obj.selectable = true;
+                    obj.evented = true;
+                    obj.hoverCursor = "move";
+                });
+                break;
+            case "pan":
+                canvas.isDrawingMode = false;
+                canvas.selection = false;
+                canvas.defaultCursor = "grab";
+                canvas.hoverCursor = "grab";
+                canvas.forEachObject((obj) => {
+                    obj.selectable = false;
+                    obj.evented = false;
+                });
+                break;
+            case "pen":
+                canvas.isDrawingMode = true;
+                canvas.selection = false;
+                canvas.defaultCursor = "crosshair";
+                canvas.hoverCursor = "crosshair";
+                if (canvas.freeDrawingBrush) {
+                    canvas.freeDrawingBrush.color = toolOptions.pen.color;
+                    canvas.freeDrawingBrush.width = toolOptions.pen.strokeWidth;
+                    if (toolOptions.pen.strokeDashArray) {
+                        const dynamicDashArray = calculateDashArray(toolOptions.pen.strokeDashArray, toolOptions.pen.strokeWidth);
+                        canvas.freeDrawingBrush.strokeDashArray = dynamicDashArray || null;
+                    }
+                    else {
+                        canvas.freeDrawingBrush.strokeDashArray = null;
+                    }
+                }
+                canvas.forEachObject((obj) => {
+                    obj.selectable = false;
+                    obj.evented = false;
+                });
+                break;
+            case "eraser":
+                canvas.isDrawingMode = false;
+                canvas.selection = false;
+                canvas.defaultCursor = "none";
+                canvas.hoverCursor = "none";
+                if (eraserTraceRef.current) {
+                    eraserTraceRef.current.set({ visible: false });
+                }
+                canvas.forEachObject((obj) => {
+                    obj.selectable = false;
+                    obj.evented = true;
+                });
+                break;
+            case "text":
+                canvas.isDrawingMode = false;
+                canvas.selection = false;
+                canvas.defaultCursor = "text";
+                canvas.hoverCursor = "text";
+                canvas.forEachObject((obj) => {
+                    obj.selectable = false;
+                    obj.evented = false;
+                });
+                break;
+            case "rectangle":
+            case "circle":
+            case "line":
+            case "frame":
+            case "arrow":
+                canvas.isDrawingMode = false;
+                canvas.selection = false;
+                canvas.defaultCursor = "crosshair";
+                canvas.hoverCursor = "crosshair";
+                canvas.forEachObject((obj) => {
+                    obj.selectable = false;
+                    obj.evented = false;
+                });
+                break;
+            default:
+                canvas.isDrawingMode = false;
+                canvas.selection = true;
+                canvas.defaultCursor = "default";
+                canvas.hoverCursor = "move";
+        }
+        canvas.renderAll();
+    }, [
+        activeTool,
+        toolOptions,
+        fabricCanvas,
+        eraserTraceRef,
+        eraserPathRef,
+        eraserPathPointsRef,
+        eraserTargetsRef,
+    ]);
+};

package/dist/hooks/useZoom.d.ts

@@ -0,0 +1,25 @@
+import { RefObject } from "react";
+import { Canvas } from "fabric";
+interface UseZoomProps {
+    fabricCanvas: RefObject<Canvas | null>;
+    MIN_ZOOM: number;
+    MAX_ZOOM: number;
+    canvasZoom: number;
+    canvasViewport: {
+        x: number;
+        y: number;
+    };
+    setCanvasZoom: (zoom: number) => void;
+    setCanvasViewport: (viewport: {
+        x: number;
+        y: number;
+    }) => void;
+}
+export declare const useZoom: ({ fabricCanvas, MIN_ZOOM, MAX_ZOOM, canvasZoom, canvasViewport, setCanvasZoom, setCanvasViewport, }: UseZoomProps) => {
+    handleZoom: (newZoom: number, point?: {
+        x: number;
+        y: number;
+    }) => void;
+};
+export {};
+//# sourceMappingURL=useZoom.d.ts.map

package/dist/hooks/useZoom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useZoom.d.ts","sourceRoot":"","sources":["../../src/hooks/useZoom.ts"],"names":[],"mappings":"AACA,OAAa,EAA0B,SAAS,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,MAAM,EAAuB,MAAM,QAAQ,CAAC;AAErD,UAAU,YAAY;IACpB,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,iBAAiB,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACjE;AAED,eAAO,MAAM,OAAO,GAAI,qGAQrB,YAAY;0BAED,MAAM,UAAU;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;CAoJrD,CAAC"}