@mhamz.01/easyflow-whiteboard 1.0.0

package/dist/components/zoomcontrol/zoom-control.d.ts

@@ -0,0 +1,9 @@
+interface ZoomControlsProps {
+    zoom: number;
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+    onResetZoom: () => void;
+}
+export default function ZoomControls({ zoom, onZoomIn, onZoomOut, onResetZoom, }: ZoomControlsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=zoom-control.d.ts.map

package/dist/components/zoomcontrol/zoom-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoom-control.d.ts","sourceRoot":"","sources":["../../../src/components/zoomcontrol/zoom-control.tsx"],"names":[],"mappings":"AAGA,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,GACZ,EAAE,iBAAiB,2CAmEnB"}

package/dist/components/zoomcontrol/zoom-control.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Minus, Plus } from "lucide-react";
+export default function ZoomControls({ zoom, onZoomIn, onZoomOut, onResetZoom, }) {
+    const zoomPercentage = Math.round(zoom * 100);
+    return (_jsx("div", { className: "fixed top-4 right-4 z-50", children: _jsxs("div", { className: "\r\n        flex items-center gap-0.5\r\n        bg-black/95 backdrop-blur-md\r\n        border border-white/10\r\n        rounded-full\r\n        px-1.5 py-1\r\n        shadow-lg shadow-black/20\r\n      ", children: [_jsx("button", { onClick: onZoomOut, className: "\r\n            w-7 h-7\r\n            flex items-center justify-center\r\n            hover:bg-white/10\r\n            active:bg-white/20\r\n            rounded-full\r\n            transition-all\r\n          ", "aria-label": "Zoom Out", children: _jsx(Minus, { className: "w-3.5 h-3.5 text-white", strokeWidth: 3 }) }), _jsxs("button", { onClick: onResetZoom, className: "\r\n            px-1\r\n            min-w-[48px]\r\n            text-xs font-bold text-white\r\n            hover:text-blue-400\r\n            transition-colors\r\n            tabular-nums\r\n            text-center\r\n          ", children: [zoomPercentage, "%"] }), _jsx("button", { onClick: onZoomIn, className: "\r\n            w-7 h-7\r\n            flex items-center justify-center\r\n            hover:bg-white/10\r\n            active:bg-white/20\r\n            rounded-full\r\n            transition-all\r\n          ", "aria-label": "Zoom In", children: _jsx(Plus, { className: "w-3.5 h-3.5 text-white", strokeWidth: 3 }) })] }) }));
+}

package/dist/hooks/useCanvasInit.d.ts

@@ -0,0 +1,15 @@
+import { RefObject } from "react";
+import { Canvas } from "fabric";
+interface UseCanvasInitProps {
+    canvasRef: RefObject<HTMLCanvasElement | null>;
+    fabricCanvasRef: RefObject<Canvas | null>;
+    activeTool: string;
+    suppressHistoryRef: RefObject<boolean>;
+    isRestoringRef: RefObject<boolean>;
+    pushHistory: (state: string) => void;
+    setTasks: (tasks: any[]) => void;
+    setDocuments: (docs: any[]) => void;
+}
+export declare const useCanvasInit: ({ canvasRef, fabricCanvasRef, activeTool, suppressHistoryRef, isRestoringRef, pushHistory, setTasks, setDocuments, }: UseCanvasInitProps) => void;
+export {};
+//# sourceMappingURL=useCanvasInit.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvasInit.d.ts","sourceRoot":"","sources":["../../src/hooks/useCanvasInit.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,UAAU,kBAAkB;IAC1B,SAAS,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC/C,eAAe,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC1C,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACvC,cAAc,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACnC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IACjC,YAAY,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;CACrC;AAKD,eAAO,MAAM,aAAa,GAAI,sHAS3B,kBAAkB,SAyFpB,CAAC"}

package/dist/hooks/useCanvasInit.js

@@ -0,0 +1,89 @@
+import { useEffect } from "react";
+import { Canvas } from "fabric";
+import { initializeFabricCanvas, addWelcomeContent } from "../lib/fabric-utils";
+const CANVAS_KEY = "easyflow_whiteboard_canvas";
+const NODES_KEY = "easyflow_whiteboard_nodes";
+export const useCanvasInit = ({ canvasRef, fabricCanvasRef, activeTool, suppressHistoryRef, isRestoringRef, pushHistory, setTasks, setDocuments, }) => {
+    useEffect(() => {
+        // 1. GUARD: Prevent re-initialization if canvas already exists
+        if (!canvasRef.current || fabricCanvasRef.current)
+            return;
+        const canvas = new Canvas(canvasRef.current, {
+            width: window.innerWidth,
+            height: window.innerHeight,
+            backgroundColor: "transparent",
+            selection: true,
+            allowTouchScrolling: false,
+            stopContextMenu: true,
+        });
+        fabricCanvasRef.current = canvas;
+        initializeFabricCanvas(canvas);
+        const canvasElement = canvas.getElement();
+        canvasElement.style.touchAction = "none";
+        // 2. LOAD SAVED DATA (Replicating your old logic exactly)
+        const savedCanvas = localStorage.getItem(CANVAS_KEY);
+        const savedNodes = localStorage.getItem(NODES_KEY);
+        const hydrateCanvas = async () => {
+            if (savedCanvas || savedNodes) {
+                isRestoringRef.current = true;
+                if (savedCanvas) {
+                    try {
+                        await canvas.loadFromJSON(JSON.parse(savedCanvas));
+                        canvas.renderAll();
+                        // Push initial loaded state to history
+                        pushHistory(JSON.stringify(canvas.toJSON()));
+                    }
+                    catch (err) {
+                        console.error("Canvas load failed:", err);
+                        addWelcomeContent(canvas, "/images/easyflow-logo.png");
+                    }
+                }
+                if (savedNodes) {
+                    try {
+                        const { tasks: savedTasks, documents: savedDocs } = JSON.parse(savedNodes);
+                        if (savedTasks)
+                            setTasks(savedTasks);
+                        if (savedDocs)
+                            setDocuments(savedDocs);
+                    }
+                    catch (err) {
+                        console.error("Nodes load failed:", err);
+                    }
+                }
+                isRestoringRef.current = false;
+            }
+            else {
+                // No saved data - show welcome
+                addWelcomeContent(canvas, "/images/easyflow-logo.png");
+                pushHistory(JSON.stringify(canvas.toJSON()));
+            }
+        };
+        hydrateCanvas();
+        // 3. EVENT HANDLERS
+        const preventDefaults = (e) => {
+            // Note: activeTool inside here might be stale due to closure
+            // but canvasElement listener is attached once. 
+            if (e.touches.length === 1)
+                return;
+            e.preventDefault();
+        };
+        const handleResize = () => {
+            canvas.setDimensions({
+                width: window.innerWidth,
+                height: window.innerHeight
+            });
+            canvas.renderAll();
+        };
+        window.addEventListener("resize", handleResize);
+        canvasElement.addEventListener("touchstart", preventDefaults, { passive: false });
+        canvasElement.addEventListener("touchmove", preventDefaults, { passive: false });
+        // 4. CLEANUP
+        return () => {
+            window.removeEventListener("resize", handleResize);
+            canvasElement.removeEventListener("touchstart", preventDefaults);
+            canvasElement.removeEventListener("touchmove", preventDefaults);
+            canvas.dispose();
+            fabricCanvasRef.current = null; // Reset ref on unmount
+        };
+    }, []); // Dependencies MUST be empty to prevent re-init on tool switch
+};

package/dist/hooks/useDrawing.d.ts

@@ -0,0 +1,23 @@
+import { RefObject } from "react";
+import { Canvas, FabricObject, TPointerEventInfo } from "fabric";
+interface UseDrawingProps {
+    fabricCanvas: RefObject<Canvas | null>;
+    activeTool: string;
+    toolOptions: any;
+    isDrawingRef: RefObject<boolean>;
+    startPointRef: RefObject<{
+        x: number;
+        y: number;
+    } | null>;
+    currentShapeRef: RefObject<FabricObject | null>;
+    suppressHistoryRef: RefObject<boolean>;
+    pushHistory: (state: string) => void;
+    addCanvasObject: (obj: FabricObject) => void;
+}
+export declare const useDrawing: ({ fabricCanvas, activeTool, toolOptions, isDrawingRef, startPointRef, currentShapeRef, suppressHistoryRef, pushHistory, addCanvasObject, }: UseDrawingProps) => {
+    handleMouseDown: (opt: TPointerEventInfo) => void;
+    handleMouseMove: (opt: TPointerEventInfo) => void;
+    handleMouseUp: () => void;
+};
+export {};
+//# sourceMappingURL=useDrawing.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDrawing.d.ts","sourceRoot":"","sources":["../../src/hooks/useDrawing.ts"],"names":[],"mappings":"AACA,OAAc,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,iBAAiB,EAAsB,MAAM,QAAQ,CAAC;AAKrF,UAAU,eAAe;IACvB,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,GAAG,CAAC;IACjB,YAAY,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACjC,aAAa,EAAE,SAAS,CAAC;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC,CAAC;IAC1D,eAAe,EAAE,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC;IAChD,kBAAkB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACvC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,UAAU,GAAI,4IAUxB,eAAe;2BACc,iBAAiB;2BAsHjB,iBAAiB;;CA8ChD,CAAC"}

package/dist/hooks/useDrawing.js

@@ -0,0 +1,142 @@
+import { Rect, Circle, Line } from "fabric";
+import { Frame } from "../lib/fabric-frame";
+import { Arrow } from "../lib/fabric-arrow";
+import { calculateDashArray, updateDrawingObject, addText } from "../lib/fabric-utils";
+import { useWhiteboardStore } from "../store/whiteboard-store";
+export const useDrawing = ({ fabricCanvas, activeTool, toolOptions, isDrawingRef, startPointRef, currentShapeRef, suppressHistoryRef, pushHistory, addCanvasObject, }) => {
+    const handleMouseDown = (opt) => {
+        const canvas = fabricCanvas.current;
+        if (!canvas)
+            return;
+        const pointer = canvas.getScenePoint(opt.e);
+        if (opt.target || canvas.getActiveObject())
+            return;
+        // Text tool
+        if (activeTool === "text") {
+            addText(canvas, {
+                x: pointer.x,
+                y: pointer.y,
+                fontSize: toolOptions.text.fontSize,
+                fontFamily: toolOptions.text.fontFamily,
+                fontWeight: toolOptions.text.fontWeight,
+                color: toolOptions.text.color,
+                textAlign: toolOptions.text.textAlign,
+            });
+            pushHistory(JSON.stringify(canvas.toJSON()));
+            useWhiteboardStore.getState().setActiveTool("select");
+            return;
+        }
+        if (!["rectangle", "circle", "frame", "line", "arrow"].includes(activeTool))
+            return;
+        suppressHistoryRef.current = true;
+        isDrawingRef.current = true;
+        startPointRef.current = { x: pointer.x, y: pointer.y };
+        let shape = null;
+        switch (activeTool) {
+            case "rectangle":
+                shape = new Rect({
+                    left: pointer.x,
+                    top: pointer.y,
+                    width: 1,
+                    height: 1,
+                    fill: toolOptions.rectangle.fillColor === "transparent"
+                        ? "transparent"
+                        : toolOptions.rectangle.fillColor,
+                    stroke: toolOptions.rectangle.strokeColor,
+                    strokeWidth: toolOptions.rectangle.strokeWidth,
+                    strokeDashArray: calculateDashArray(toolOptions.rectangle.strokeDashArray, toolOptions.rectangle.strokeWidth),
+                    rx: 5,
+                    ry: 5,
+                    strokeLineCap: "round",
+                    strokeLineJoin: "round",
+                    selectable: false,
+                });
+                break;
+            case "circle":
+                shape = new Circle({
+                    left: pointer.x,
+                    top: pointer.y,
+                    radius: 1,
+                    fill: toolOptions.circle.fillColor === "transparent"
+                        ? "transparent"
+                        : toolOptions.circle.fillColor,
+                    stroke: toolOptions.circle.strokeColor,
+                    strokeWidth: toolOptions.circle.strokeWidth,
+                    strokeDashArray: toolOptions.circle.strokeDashArray
+                        ? [...toolOptions.circle.strokeDashArray]
+                        : undefined,
+                    selectable: false,
+                });
+                break;
+            case "frame":
+                shape = new Frame({
+                    left: pointer.x,
+                    top: pointer.y,
+                    width: 1,
+                    height: 1,
+                    stroke: toolOptions.frame.strokeColor,
+                    strokeWidth: toolOptions.frame.strokeWidth,
+                    strokeDashArray: toolOptions.frame.strokeDashArray
+                        ? [...toolOptions.frame.strokeDashArray]
+                        : undefined,
+                    fill: toolOptions.frame.fillColor,
+                    selectable: false,
+                });
+                break;
+            case "line":
+                shape = new Line([pointer.x, pointer.y, pointer.x, pointer.y], {
+                    stroke: toolOptions.line.strokeColor,
+                    strokeWidth: toolOptions.line.strokeWidth,
+                    strokeDashArray: toolOptions.line.strokeDashArray || undefined,
+                    selectable: false,
+                });
+                break;
+            case "arrow":
+                shape = new Arrow([pointer.x, pointer.y, pointer.x, pointer.y], {
+                    stroke: toolOptions.arrow.strokeColor,
+                    strokeWidth: toolOptions.arrow.strokeWidth,
+                    strokeDashArray: toolOptions.arrow.strokeDashArray || undefined,
+                    selectable: false,
+                });
+                break;
+        }
+        if (shape) {
+            canvas.add(shape);
+            currentShapeRef.current = shape;
+            canvas.renderAll();
+        }
+    };
+    const handleMouseMove = (opt) => {
+        const canvas = fabricCanvas.current;
+        if (!canvas)
+            return;
+        if (!isDrawingRef.current ||
+            !currentShapeRef.current ||
+            !startPointRef.current)
+            return;
+        const pointer = canvas.getScenePoint(opt.e);
+        updateDrawingObject(currentShapeRef.current, activeTool, startPointRef.current, pointer);
+        canvas.renderAll();
+    };
+    const handleMouseUp = () => {
+        const canvas = fabricCanvas.current;
+        if (!canvas)
+            return;
+        if (!isDrawingRef.current || !currentShapeRef.current)
+            return;
+        const shape = currentShapeRef.current;
+        shape.set({ selectable: true, evented: true });
+        if (shape instanceof Frame && canvas)
+            canvas.sendObjectToBack(shape);
+        addCanvasObject(shape);
+        suppressHistoryRef.current = false;
+        pushHistory(JSON.stringify(canvas.toJSON()));
+        isDrawingRef.current = false;
+        startPointRef.current = null;
+        currentShapeRef.current = null;
+        useWhiteboardStore.getState().setActiveTool("select");
+        canvas.discardActiveObject();
+        canvas.renderAll();
+    };
+    return { handleMouseDown, handleMouseMove, handleMouseUp };
+};

package/dist/hooks/useEraser.d.ts

@@ -0,0 +1,27 @@
+import { RefObject } from "react";
+import { Canvas, Circle, FabricObject } from "fabric";
+import * as fabric from "fabric";
+interface UseEraserProps {
+    fabricCanvas: RefObject<Canvas | null>;
+    activeTool: string;
+    toolOptions: any;
+    eraserTraceRef: RefObject<Circle | null>;
+    eraserTargetsRef: RefObject<Set<FabricObject>>;
+    eraserActiveRef: RefObject<boolean>;
+    eraserPathRef: RefObject<fabric.Path | null>;
+    eraserPathPointsRef: RefObject<string[]>;
+    suppressHistoryRef: RefObject<boolean>;
+    pushHistory: (state: string) => void;
+}
+export declare const useEraser: ({ fabricCanvas, activeTool, toolOptions, eraserTraceRef, eraserTargetsRef, eraserActiveRef, eraserPathRef, eraserPathPointsRef, suppressHistoryRef, pushHistory, }: UseEraserProps) => {
+    handleMouseOver: () => void;
+    handleMouseOut: () => void;
+    handleEraserDown: () => boolean;
+    handleEraserMove: (pointer: {
+        x: number;
+        y: number;
+    }) => void;
+    handleEraserUp: () => boolean;
+};
+export {};
+//# sourceMappingURL=useEraser.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useEraser.d.ts","sourceRoot":"","sources":["../../src/hooks/useEraser.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACtD,OAAO,KAAK,MAAM,MAAM,QAAQ,CAAC;AAEjC,UAAU,cAAc;IACtB,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,gBAAgB,EAAE,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC;IAC/C,eAAe,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACpC,aAAa,EAAE,SAAS,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAC7C,mBAAmB,EAAE,SAAS,CAAC,MAAM,EAAE,CAAC,CAAC;IACzC,kBAAkB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACvC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,SAAS,GAAI,oKAWvB,cAAc;;;;gCAsBoB;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;;CA0I5D,CAAC"}

package/dist/hooks/useEraser.js

@@ -0,0 +1,143 @@
+import { Circle } from "fabric";
+import * as fabric from "fabric";
+export const useEraser = ({ fabricCanvas, activeTool, toolOptions, eraserTraceRef, eraserTargetsRef, eraserActiveRef, eraserPathRef, eraserPathPointsRef, suppressHistoryRef, pushHistory, }) => {
+    const handleMouseOver = () => {
+        if (activeTool === "eraser" && eraserTraceRef.current) {
+            eraserTraceRef.current.set({ visible: true });
+            fabricCanvas.current?.renderAll();
+        }
+    };
+    const handleMouseOut = () => {
+        if (activeTool === "eraser" && eraserTraceRef.current) {
+            eraserTraceRef.current.set({ visible: false });
+            fabricCanvas.current?.renderAll();
+        }
+    };
+    const handleEraserDown = () => {
+        if (activeTool !== "eraser")
+            return false;
+        eraserActiveRef.current = true;
+        suppressHistoryRef.current = true;
+        return true;
+    };
+    const handleEraserMove = (pointer) => {
+        const canvas = fabricCanvas.current;
+        if (!canvas || activeTool !== "eraser")
+            return;
+        // Create or update trace circle
+        if (!eraserTraceRef.current) {
+            eraserTraceRef.current = new Circle({
+                radius: toolOptions.eraser.size / 1.5,
+                fill: "rgba(195, 195, 195, 0.2)",
+                stroke: "#e2e2e0",
+                strokeWidth: 2,
+                selectable: false,
+                evented: false,
+                originX: "center",
+                originY: "center",
+                excludeFromExport: true,
+            });
+            canvas.add(eraserTraceRef.current);
+        }
+        if (!eraserTraceRef.current.visible) {
+            eraserTraceRef.current.set({ visible: true });
+        }
+        eraserTraceRef.current.set({ left: pointer.x, top: pointer.y });
+        eraserTraceRef.current.setCoords();
+        canvas.bringObjectToFront(eraserTraceRef.current);
+        // Smooth continuous trail
+        if (eraserActiveRef.current) {
+            suppressHistoryRef.current = true;
+            if (eraserPathPointsRef.current.length === 0) {
+                eraserPathPointsRef.current = [`M ${pointer.x} ${pointer.y}`];
+                const path = new fabric.Path(eraserPathPointsRef.current.join(" "), {
+                    stroke: "rgba(220, 220, 220, 0.7)",
+                    strokeWidth: toolOptions.eraser.size,
+                    fill: null,
+                    selectable: false,
+                    evented: false,
+                    strokeLineCap: "round",
+                    strokeLineJoin: "round",
+                    opacity: 1,
+                    excludeFromExport: true,
+                });
+                canvas.add(path);
+                eraserPathRef.current = path;
+            }
+            else {
+                eraserPathPointsRef.current.push(`L ${pointer.x} ${pointer.y}`);
+                const pathString = eraserPathPointsRef.current.join(" ");
+                if (eraserPathRef.current) {
+                    canvas.remove(eraserPathRef.current);
+                }
+                const path = new fabric.Path(pathString, {
+                    stroke: "rgba(53, 53, 53, 0.7)",
+                    strokeWidth: toolOptions.eraser.size,
+                    fill: null,
+                    selectable: false,
+                    evented: false,
+                    strokeLineCap: "round",
+                    strokeLineJoin: "round",
+                    opacity: 1,
+                    excludeFromExport: true,
+                });
+                canvas.add(path);
+                eraserPathRef.current = path;
+            }
+            canvas.bringObjectToFront(eraserTraceRef.current);
+        }
+        // Find objects under eraser
+        const previousTargets = new Set(eraserTargetsRef.current);
+        eraserTargetsRef.current.clear();
+        canvas.forEachObject((obj) => {
+            if (obj === eraserTraceRef.current)
+                return;
+            if (obj === eraserPathRef.current)
+                return;
+            if (obj.intersectsWithObject(eraserTraceRef.current)) {
+                eraserTargetsRef.current.add(obj);
+                if (eraserActiveRef.current && obj.opacity !== 0.3) {
+                    obj.set({ opacity: 0.3 });
+                }
+            }
+            else if (previousTargets.has(obj)) {
+                obj.set({ opacity: 1 });
+            }
+        });
+        canvas.renderAll();
+    };
+    const handleEraserUp = () => {
+        const canvas = fabricCanvas.current;
+        if (!canvas || activeTool !== "eraser" || !eraserActiveRef.current)
+            return false;
+        eraserActiveRef.current = false;
+        // Restore opacity
+        canvas.forEachObject((obj) => {
+            if (obj.opacity === 0.3)
+                obj.set({ opacity: 1 });
+        });
+        // Remove trail
+        if (eraserPathRef.current) {
+            canvas.remove(eraserPathRef.current);
+            eraserPathRef.current = null;
+            eraserPathPointsRef.current = [];
+        }
+        // Delete targeted objects
+        eraserTargetsRef.current.forEach((obj) => {
+            canvas.remove(obj);
+        });
+        eraserTargetsRef.current.clear();
+        canvas.renderAll();
+        // Save history
+        suppressHistoryRef.current = false;
+        pushHistory(JSON.stringify(canvas.toJSON()));
+        return true;
+    };
+    return {
+        handleMouseOver,
+        handleMouseOut,
+        handleEraserDown,
+        handleEraserMove,
+        handleEraserUp,
+    };
+};

package/dist/hooks/useLiveUpdate.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"useLiveUpdate.d.ts","sourceRoot":"","sources":["../../src/hooks/useLiveUpdate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,MAAM,EAA6B,MAAM,QAAQ,CAAC;AAI3D,UAAU,kBAAkB;IAC1B,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,WAAW,EAAE,GAAG,CAAC;CAClB;AAED,eAAO,MAAM,aAAa,GAAI,+BAA+B,kBAAkB,SA8D9E,CAAC"}

package/dist/hooks/useLiveUpdate.js

@@ -0,0 +1,63 @@
+import { useEffect } from "react";
+import { FabricImage } from "fabric";
+import { Frame } from "../lib/fabric-frame";
+import { calculateDashArray } from "../lib/fabric-utils";
+export const useLiveUpdate = ({ fabricCanvas, toolOptions }) => {
+    useEffect(() => {
+        const canvas = fabricCanvas.current;
+        if (!canvas)
+            return;
+        const activeObject = canvas.getActiveObject();
+        if (!activeObject)
+            return;
+        const updateObjectStyle = (obj) => {
+            let options = null;
+            if (obj.type === "rect")
+                options = toolOptions.rectangle;
+            else if (obj.type === "circle")
+                options = toolOptions.circle;
+            else if (obj instanceof Frame)
+                options = toolOptions.frame;
+            else if (obj.type === "line")
+                options = toolOptions.line;
+            else if (obj.type === "path")
+                options = toolOptions.pen;
+            else if (obj instanceof FabricImage || obj.type === "image")
+                options = toolOptions.image;
+            else if (obj.type === "arrow" || obj.type === "bidirectional-arrow")
+                options = toolOptions.arrow;
+            if (!options)
+                return;
+            const update = {};
+            if (typeof options.opacity === "number") {
+                update.opacity = options.opacity;
+            }
+            if (obj.type !== "image" && !(obj instanceof FabricImage)) {
+                if (obj.type === "path") {
+                    update.stroke = options.color || options.strokeColor;
+                }
+                else {
+                    update.fill =
+                        options.fillColor === "transparent"
+                            ? "transparent"
+                            : options.fillColor;
+                    update.stroke = options.strokeColor;
+                }
+                update.strokeWidth = options.strokeWidth;
+                update.strokeDashArray = calculateDashArray(options.strokeDashArray, options.strokeWidth);
+            }
+            obj.set(update);
+            obj.setCoords();
+            obj.dirty = true;
+        };
+        if (activeObject.type === "activeSelection") {
+            activeObject
+                .getObjects()
+                .forEach((obj) => updateObjectStyle(obj));
+        }
+        else {
+            updateObjectStyle(activeObject);
+        }
+        canvas.requestRenderAll();
+    }, [toolOptions, fabricCanvas]);
+};

package/dist/hooks/useMouseHandlers.d.ts

@@ -0,0 +1,25 @@
+import { RefObject } from "react";
+import { Canvas } from "fabric";
+interface UseMouseHandlersProps {
+    fabricCanvas: RefObject<Canvas | null>;
+    activeTool: string;
+    toolOptions: any;
+    drawingHandlers: {
+        handleMouseDown: (opt: any) => void;
+        handleMouseMove: (opt: any) => void;
+        handleMouseUp: () => void;
+    };
+    eraserHandlers: {
+        handleMouseOver: () => void;
+        handleMouseOut: () => void;
+        handleEraserDown: () => boolean;
+        handleEraserMove: (pointer: {
+            x: number;
+            y: number;
+        }) => void;
+        handleEraserUp: () => boolean;
+    };
+}
+export declare const useMouseHandlers: ({ fabricCanvas, activeTool, toolOptions, drawingHandlers, eraserHandlers, }: UseMouseHandlersProps) => void;
+export {};
+//# sourceMappingURL=useMouseHandlers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMouseHandlers.d.ts","sourceRoot":"","sources":["../../src/hooks/useMouseHandlers.ts"],"names":[],"mappings":"AACA,OAAc,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,UAAU,qBAAqB;IAC7B,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,GAAG,CAAC;IACjB,eAAe,EAAE;QACf,eAAe,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;QACpC,eAAe,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;QACpC,aAAa,EAAE,MAAM,IAAI,CAAC;KAC3B,CAAC;IACF,cAAc,EAAE;QACd,eAAe,EAAE,MAAM,IAAI,CAAC;QAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;QAC3B,gBAAgB,EAAE,MAAM,OAAO,CAAC;QAChC,gBAAgB,EAAE,CAAC,OAAO,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,KAAK,IAAI,CAAC;QAC9D,cAAc,EAAE,MAAM,OAAO,CAAC;KAC/B,CAAC;CACH;AAED,eAAO,MAAM,gBAAgB,GAAI,6EAM9B,qBAAqB,SA8CvB,CAAC"}

package/dist/hooks/useMouseHandlers.js

@@ -0,0 +1,44 @@
+import { useEffect } from "react";
+export const useMouseHandlers = ({ fabricCanvas, activeTool, toolOptions, drawingHandlers, eraserHandlers, }) => {
+    useEffect(() => {
+        const canvas = fabricCanvas.current;
+        if (!canvas)
+            return;
+        const handleMouseDown = (opt) => {
+            // Eraser
+            if (eraserHandlers.handleEraserDown())
+                return;
+            // Drawing
+            drawingHandlers.handleMouseDown(opt);
+        };
+        const handleMouseMove = (opt) => {
+            const pointer = canvas.getScenePoint(opt.e);
+            // Eraser
+            if (activeTool === "eraser") {
+                eraserHandlers.handleEraserMove(pointer);
+                return;
+            }
+            // Drawing
+            drawingHandlers.handleMouseMove(opt);
+        };
+        const handleMouseUp = () => {
+            // Eraser
+            if (eraserHandlers.handleEraserUp())
+                return;
+            // Drawing
+            drawingHandlers.handleMouseUp();
+        };
+        canvas.on("mouse:over", eraserHandlers.handleMouseOver);
+        canvas.on("mouse:out", eraserHandlers.handleMouseOut);
+        canvas.on("mouse:down", handleMouseDown);
+        canvas.on("mouse:move", handleMouseMove);
+        canvas.on("mouse:up", handleMouseUp);
+        return () => {
+            canvas.off("mouse:over", eraserHandlers.handleMouseOver);
+            canvas.off("mouse:out", eraserHandlers.handleMouseOut);
+            canvas.off("mouse:down", handleMouseDown);
+            canvas.off("mouse:move", handleMouseMove);
+            canvas.off("mouse:up", handleMouseUp);
+        };
+    }, [activeTool, toolOptions, fabricCanvas, drawingHandlers, eraserHandlers]);
+};

package/dist/hooks/usePan.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from "react";
+import { Canvas } from "fabric";
+interface UsePanProps {
+    fabricCanvas: RefObject<Canvas | null>;
+    activeTool: string;
+    handleZoom: (zoom: number, point?: {
+        x: number;
+        y: number;
+    }) => void;
+    setCanvasViewport: (viewport: {
+        x: number;
+        y: number;
+    }) => void;
+}
+export declare const usePan: ({ fabricCanvas, activeTool, handleZoom, setCanvasViewport, }: UsePanProps) => void;
+export {};
+//# sourceMappingURL=usePan.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePan.d.ts","sourceRoot":"","sources":["../../src/hooks/usePan.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,UAAU,WAAW;IACnB,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrE,iBAAiB,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACjE;AAED,eAAO,MAAM,MAAM,GAAI,8DAKpB,WAAW,SAkGb,CAAC"}