@mhamz.01/easyflow-whiteboard 1.28.0 → 2.0.0

package/dist/components/whiteboard/whiteboard.js

@@ -1,951 +1,913 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { Canvas, Rect, Circle, Line, FabricImage, 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 ZoomControls from "../zoomcontrol/zoom-control";
-import { initializeFabricCanvas, updateDrawingObject, addText, calculateDashArray, addWelcomeContent } from "../..//lib/fabric-utils";
-import { Frame } from "../../lib/fabric-frame";
-import { Arrow } from "../../lib/fabric-arrow";
-import { BidirectionalArrow } from "../../lib/fabric-bidirectional-arrow";
-import * as fabric from "fabric";
-classRegistry.setClass(Frame, 'frame');
-export default function FabricWhiteboard() {
-    const canvasRef = useRef(null);
-    const fabricCanvasRef = useRef(null);
-    const containerRef = useRef(null);
-    const isDrawingRef = useRef(false);
-    const startPointRef = useRef(null);
-    const currentShapeRef = useRef(null);
-    const selectedObjectTypeRef = useRef(null);
-    const suppressHistoryRef = useRef(false);
-    const isRestoringRef = useRef(false);
-    // ── ERASER REFS ──────────────────────────────────────────────────────────────
-    const eraserTraceRef = useRef(null);
-    const eraserTargetsRef = useRef(new Set());
-    const eraserActiveRef = useRef(false);
-    const eraserPathRef = useRef(null); // ← NEW: Smooth path trail
-    const eraserPathPointsRef = useRef([]);
-    const activeTool = useWhiteboardStore((state) => state.activeTool);
-    const toolOptions = useWhiteboardStore((state) => state.toolOptions);
-    const addCanvasObject = useWhiteboardStore((state) => state.addCanvasObject);
-    const setSelectedObjectType = useWhiteboardStore((state) => state.setSelectedObjectType);
-    const pushHistory = useWhiteboardStore((state) => state.pushHistory);
-    const [tasks, setTasks] = useState([]);
-    const [documents, setDocuments] = useState([]);
-    const [canvasZoom, setCanvasZoom] = useState(1);
-    const [canvasViewport, setCanvasViewport] = useState({ x: 0, y: 0 });
-    const [selectionBox, setSelectionBox] = useState(null);
-    const [selectedCanvasObjects, setSelectedCanvasObjects] = useState([]);
-    const MIN_ZOOM = 0.1;
-    const MAX_ZOOM = 5;
-    const ZOOM_STEP = 0.1;
-    useEffect(() => {
-        if (!canvasRef.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";
-        // Storage keys
-        const CANVAS_KEY = "easyflow_whiteboard_canvas";
-        const NODES_KEY = "easyflow_whiteboard_nodes";
-        // ═══════════════════════════════════════════════════════════════════════
-        // LOAD SAVED DATA
-        // ═══════════════════════════════════════════════════════════════════════
-        const savedCanvas = localStorage.getItem(CANVAS_KEY);
-        const savedNodes = localStorage.getItem(NODES_KEY);
-        if (savedCanvas || savedNodes) {
-            isRestoringRef.current = true;
-            // Load Fabric canvas
-            if (savedCanvas) {
-                canvas
-                    .loadFromJSON(JSON.parse(savedCanvas))
-                    .then(() => {
-                    canvas.renderAll();
-                    pushHistory(JSON.stringify(canvas.toJSON()));
-                })
-                    .catch((err) => {
-                    console.error("Canvas load failed:", err);
-                    addWelcomeContent(canvas, "/images/easyflow-logo.png");
-                });
-            }
-            else {
-                addWelcomeContent(canvas, "/images/easyflow-logo.png");
-            }
-            // Load custom nodes (tasks & documents)
-            if (savedNodes) {
-                try {
-                    const { tasks: savedTasks, documents: savedDocs } = JSON.parse(savedNodes);
-                    if (savedTasks)
-                        setTasks(savedTasks);
-                    if (savedDocs)
-                        setDocuments(savedDocs);
-                    console.log("✅ Custom nodes loaded:", { tasks: savedTasks?.length, docs: savedDocs?.length });
-                }
-                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()));
-        }
-        // Touch prevention
-        const preventDefaults = (e) => {
-            if (e.touches.length === 1 && activeTool !== "pan")
-                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 });
-        return () => {
-            canvasElement.removeEventListener("touchstart", preventDefaults);
-            canvasElement.removeEventListener("touchmove", preventDefaults);
-            window.removeEventListener("resize", handleResize);
-            canvas.dispose();
-        };
-    }, []);
-    // ─────────────────────────────────────────────────────────────────────────
-    // STEP 2: Separate Saving Logic for Canvas and Nodes
-    // ─────────────────────────────────────────────────────────────────────────
-    // Save Fabric Canvas
-    useEffect(() => {
-        const canvas = fabricCanvasRef.current;
-        if (!canvas)
-            return;
-        let saveTimeout;
-        const saveCanvas = () => {
-            if (isRestoringRef.current || suppressHistoryRef.current)
-                return;
-            clearTimeout(saveTimeout);
-            saveTimeout = setTimeout(() => {
-                const performSave = () => {
-                    try {
-                        const json = JSON.stringify(canvas.toJSON());
-                        localStorage.setItem("easyflow_whiteboard_canvas", json);
-                        // Also update history
-                        pushHistory(json);
-                        console.log("💾 Canvas saved");
-                    }
-                    catch (err) {
-                        console.error("Canvas save failed:", err);
-                    }
-                };
-                if (typeof window.requestIdleCallback === "function") {
-                    window.requestIdleCallback(performSave);
-                }
-                else {
-                    performSave();
-                }
-            }, 2000);
-        };
-        const onObjectChanged = (opt) => {
-            if (opt?.target?.excludeFromExport)
-                return;
-            saveCanvas();
-        };
-        canvas.on("object:modified", onObjectChanged);
-        canvas.on("object:added", onObjectChanged);
-        canvas.on("object:removed", onObjectChanged);
-        canvas.on("path:created", onObjectChanged);
-        return () => {
-            clearTimeout(saveTimeout);
-            canvas.off("object:modified", onObjectChanged);
-            canvas.off("object:added", onObjectChanged);
-            canvas.off("object:removed", onObjectChanged);
-            canvas.off("path:created", onObjectChanged);
-        };
-    }, []);
-    // Save Custom Nodes (Tasks & Documents)
-    useEffect(() => {
-        if (isRestoringRef.current)
-            return;
-        let saveTimeout;
-        const saveNodes = () => {
-            clearTimeout(saveTimeout);
-            saveTimeout = setTimeout(() => {
-                const performSave = () => {
-                    try {
-                        const nodesData = {
-                            tasks,
-                            documents,
-                        };
-                        localStorage.setItem("easyflow_whiteboard_nodes", JSON.stringify(nodesData));
-                        console.log("💾 Custom nodes saved:", {
-                            tasks: tasks.length,
-                            documents: documents.length,
-                        });
-                    }
-                    catch (err) {
-                        console.error("Nodes save failed:", err);
-                    }
-                };
-                if (typeof window.requestIdleCallback === "function") {
-                    window.requestIdleCallback(performSave);
-                }
-                else {
-                    performSave();
-                }
-            }, 2000);
-        };
-        saveNodes();
-        return () => clearTimeout(saveTimeout);
-    }, [tasks, documents]);
-    // ── Tool cursor/mode management ─────────────────────────────────────────────
-    useEffect(() => {
-        const canvas = fabricCanvasRef.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();
-            // Clean up trail path
-            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;
-                    // ← ADD THIS: Apply dash pattern
-                    if (toolOptions.pen.strokeDashArray) {
-                        canvas.freeDrawingBrush.strokeDashArray = toolOptions.pen.strokeDashArray;
-                        const dynamicDashArray = calculateDashArray(toolOptions.pen.strokeDashArray, toolOptions.pen.strokeWidth);
-                        canvas.freeDrawingBrush.strokeDashArray = dynamicDashArray || null;
-                    }
-                    else {
-                        canvas.freeDrawingBrush.strokeDashArray = null; // Solid line
-                    }
-                }
-                canvas.forEachObject((obj) => {
-                    obj.selectable = false;
-                    obj.evented = false;
-                });
-                break;
-            case "eraser":
-                canvas.isDrawingMode = false;
-                canvas.selection = false;
-                canvas.defaultCursor = "none"; // Hide default cursor
-                canvas.hoverCursor = "none";
-                if (eraserTraceRef.current) {
-                    eraserTraceRef.current.set({ visible: false });
-                }
-                canvas.forEachObject((obj) => {
-                    obj.selectable = false;
-                    obj.evented = true; // Keep events for hover detection
-                });
-                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]);
-    const handleMouseOver = () => {
-        if (activeTool === "eraser" && eraserTraceRef.current) {
-            eraserTraceRef.current.set({ visible: true });
-            fabricCanvasRef.current?.renderAll();
-        }
-    };
-    const handleMouseOut = (opt) => {
-        // opt.e is the native event. If it's null or we are leaving the canvas boundaries:
-        if (activeTool === "eraser" && eraserTraceRef.current) {
-            eraserTraceRef.current.set({ visible: false });
-            fabricCanvasRef.current?.renderAll();
-        }
-    };
-    // ── Mouse down ───────────────────────────────────────────────────────────────
-    const handleMouseDown = (opt) => {
-        const canvas = fabricCanvasRef.current;
-        if (!canvas)
-            return;
-        const pointer = canvas.getScenePoint(opt.e);
-        // ── ERASER: Activate eraser mode ────────────────────────────────────────────
-        if (activeTool === "eraser") {
-            eraserActiveRef.current = true;
-            suppressHistoryRef.current = true;
-            return;
-        }
-        if (opt.target || canvas.getActiveObject())
-            return;
-        if (activeTool === "text") {
-            addText(canvas, {
-                x: pointer.x,
-                y: pointer.y,
-                fontSize: toolOptions.text.fontSize,
-                fontFamily: toolOptions.text.fontFamily,
-                fontWeight: toolOptions.text.fontWeight, // ← ADD THIS
-                color: toolOptions.text.color,
-                textAlign: toolOptions.text.textAlign, // ← ADD THIS
-            });
-            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,
-                    // ↓ THE FIX: Apply strokeDashArray
-                    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,
-                    // ↓ THE FIX: Apply strokeDashArray
-                    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,
-                    // ↓ IMPORTANT: Use frame options, not rectangle
-                    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, // ← Use line options
-                    strokeWidth: toolOptions.line.strokeWidth, // ← Use line options
-                    strokeDashArray: toolOptions.line.strokeDashArray || undefined, // ← ADD THIS
-                    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();
-        }
-    };
-    // ── Mouse move ───────────────────────────────────────────────────────────────
-    const handleMouseMove = (opt) => {
-        const canvas = fabricCanvasRef.current;
-        if (!canvas)
-            return;
-        const pointer = canvas.getScenePoint(opt.e);
-        // ── ERASER: Update trace circle and highlight objects ──────────────────────
-        if (activeTool === "eraser") {
-            // 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 });
-            }
-            // Move trace circle to mouse position
-            eraserTraceRef.current.set({ left: pointer.x, top: pointer.y });
-            eraserTraceRef.current.setCoords();
-            canvas.bringObjectToFront(eraserTraceRef.current);
-            // ── SMOOTH CONTINUOUS TRAIL (FIXED) ──────────────────────────────────────
-            if (eraserActiveRef.current) {
-                suppressHistoryRef.current = true; // Ensure history is locked during movement
-                if (eraserPathPointsRef.current.length === 0) {
-                    // Start new path - use SVG path string format
-                    eraserPathPointsRef.current = [`M ${pointer.x} ${pointer.y}`];
-                    const pathString = eraserPathPointsRef.current.join(' ');
-                    const path = new fabric.Path(pathString, {
-                        stroke: "rgba(220, 220, 220, 0.7)", // ← Bright white/gray for dark bg
-                        strokeWidth: toolOptions.eraser.size,
-                        fill: null, // ← Must be null, not empty string
-                        selectable: false,
-                        evented: false,
-                        strokeLineCap: "round",
-                        strokeLineJoin: "round",
-                        opacity: 1,
-                        excludeFromExport: true,
-                    });
-                    canvas.add(path);
-                    eraserPathRef.current = path;
-                }
-                else {
-                    // Continue path by adding line segments
-                    eraserPathPointsRef.current.push(`L ${pointer.x} ${pointer.y}`);
-                    const pathString = eraserPathPointsRef.current.join(' ');
-                    // Recreate path with updated points (more reliable than updating)
-                    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;
-                }
-                // Keep trace circle on top
-                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 });
-                        // obj.dirty = true;
-                    }
-                }
-                else if (previousTargets.has(obj)) {
-                    obj.set({ opacity: 1 });
-                    // obj.dirty = true;
-                }
-            });
-            canvas.renderAll();
-            return;
-        }
-        // Normal drawing logic
-        if (!isDrawingRef.current || !currentShapeRef.current || !startPointRef.current)
-            return;
-        updateDrawingObject(currentShapeRef.current, activeTool, startPointRef.current, pointer);
-        canvas.renderAll();
-    };
-    // ── Mouse up ─────────────────────────────────────────────────────────────────
-    const handleMouseUp = () => {
-        const canvas = fabricCanvasRef.current;
-        if (!canvas)
-            return;
-        // ── ERASER: Delete highlighted objects ─────────────────────────────────────
-        if (activeTool === "eraser" && eraserActiveRef.current) {
-            eraserActiveRef.current = false;
-            // 1. Clean up visuals (opacity and path)
-            canvas.forEachObject((obj) => {
-                if (obj.opacity === 0.3)
-                    obj.set({ opacity: 1 });
-            });
-            if (eraserPathRef.current) {
-                canvas.remove(eraserPathRef.current);
-                eraserPathRef.current = null;
-                eraserPathPointsRef.current = [];
-            }
-            // 2. Perform the actual deletion
-            eraserTargetsRef.current.forEach((obj) => {
-                canvas.remove(obj);
-            });
-            eraserTargetsRef.current.clear();
-            canvas.renderAll();
-            // 3. IMMEDIATE SAVE (don't wait for debounce)
-            try {
-                const canvasJson = JSON.stringify(canvas.toJSON());
-                localStorage.setItem("easyflow_whiteboard_canvas", canvasJson);
-                localStorage.setItem("easyflow_whiteboard_nodes", JSON.stringify({ tasks, documents }));
-                console.log("💾 Eraser: Saved immediately");
-            }
-            catch (err) {
-                console.error("Save failed:", err);
-            }
-            // 4. Also fire event for regular save flow
-            canvas.fire('object:removed');
-            // 5. Update history
-            suppressHistoryRef.current = false;
-            pushHistory(JSON.stringify(canvas.toJSON()));
-            return;
-        }
-        // Normal shape drawing
-        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();
-    };
-    useEffect(() => {
-        const canvas = fabricCanvasRef.current;
-        if (!canvas)
-            return;
-        canvas.on("mouse:over", handleMouseOver);
-        canvas.on("mouse:out", handleMouseOut);
-        canvas.on("mouse:down", handleMouseDown);
-        canvas.on("mouse:move", handleMouseMove);
-        canvas.on("mouse:up", handleMouseUp);
-        return () => {
-            canvas.off("mouse:over", handleMouseOver);
-            canvas.off("mouse:out", handleMouseOut);
-            canvas.off("mouse:down", handleMouseDown);
-            canvas.off("mouse:move", handleMouseMove);
-            canvas.off("mouse:up", handleMouseUp);
-        };
-    }, [activeTool, toolOptions]);
-    // ── Update text style on selection change ─────────────────────────────────────
-    useEffect(() => {
-        const canvas = fabricCanvasRef.current;
-        if (!canvas)
-            return;
-        const activeObject = canvas.getActiveObject();
-        if (!activeObject)
-            return;
-        // Only update text objects (IText or Text type)
-        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;
-        };
-        // Handle single or multiple selection
-        if (activeObject.type === "activeSelection") {
-            const objects = activeObject.getObjects();
-            objects.forEach((obj) => updateTextStyle(obj));
-        }
-        else {
-            updateTextStyle(activeObject);
-        }
-        canvas.requestRenderAll();
-    }, [toolOptions.text]);
-    // ── Zoom ─────────────────────────────────────────────────────────────────────
-    const handleZoom = useCallback((newZoom, point) => {
-        const canvas = fabricCanvasRef.current;
-        if (!canvas)
-            return;
-        // 1. Clamp the zoom level immediately
-        const clampedZoom = Math.min(Math.max(newZoom, MIN_ZOOM), MAX_ZOOM);
-        // 2. Determine the pivot point (default to center)
-        const pivot = point ? new fabric.Point(point.x, point.y) : new fabric.Point(canvas.getWidth() / 2, canvas.getHeight() / 2);
-        // 3. Use Fabric's optimized built-in method
-        // This handles the matrix math (vpt[4], vpt[5]) much faster than manual assignment
-        canvas.zoomToPoint(pivot, clampedZoom);
-        // 4. Update the Canvas state
-        const vpt = canvas.viewportTransform;
-        if (vpt) {
-            // We update the local state to keep the UI in sync
-            // Use requestAnimationFrame if you find this still lags, 
-            // but usually, Fabric's internal update is enough for the "feel"
-            setCanvasZoom(clampedZoom);
-            setCanvasViewport({ x: vpt[4], y: vpt[5] });
-        }
-        // 5. Use requestRenderAll for better performance than renderAll
-        canvas.requestRenderAll();
-    }, [MIN_ZOOM, MAX_ZOOM, setCanvasZoom, setCanvasViewport]);
-    const handleZoomIn = () => handleZoom(canvasZoom + ZOOM_STEP);
-    const handleZoomOut = () => handleZoom(canvasZoom - ZOOM_STEP);
-    const handleResetZoom = () => { const canvas = fabricCanvasRef.current; if (!canvas)
-        return; canvas.setZoom(1); const vpt = canvas.viewportTransform; if (vpt) {
-        vpt[4] = 0;
-        vpt[5] = 0;
-        setCanvasViewport({ x: 0, y: 0 });
-    } setCanvasZoom(1); canvas.renderAll(); };
-    useEffect(() => {
-        const canvas = fabricCanvasRef.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; // Kill panning immediately
-                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;
-            // 1. 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();
-                    // Constant 0.01 multiplier for controlled, buttery zoom
-                    const delta = (currentDistance - lastTouchDistance) * 0.01;
-                    const newZoom = zoom + delta;
-                    // Midpoint between fingers for the zoom anchor
-                    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; // Exit so we don't trigger panning math
-            }
-            // 2. 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 = () => {
-            // Only sync the store at the very end of the interaction
-            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]);
-    // ── Wheel Handler (Pan on scroll, Zoom on Ctrl+Scroll) ───────────────────────
-    useEffect(() => {
-        const canvas = fabricCanvasRef.current;
-        if (!canvas)
-            return;
-        const onWheel = (opt) => {
-            const e = opt.e;
-            e.preventDefault();
-            e.stopPropagation();
-            const vpt = canvas.viewportTransform;
-            if (!vpt)
-                return;
-            if (e.ctrlKey || e.metaKey) {
-                // Zoom logic
-                const rect = canvas.getElement().getBoundingClientRect();
-                handleZoom(e.deltaY < 0 ? canvasZoom * 1.1 : canvasZoom / 1.1, { x: e.clientX - rect.left, y: e.clientY - rect.top });
-            }
-            else {
-                // ── PAN VIA WHEEL (Your scroll logic) ─────────────────────────────────
-                const delta = e.deltaY;
-                const shiftDelta = e.deltaX || e.deltaY;
-                // Vertical scroll (normal wheel)
-                vpt[5] -= delta;
-                // Horizontal scroll (shift + wheel)
-                if (e.shiftKey)
-                    vpt[4] -= shiftDelta;
-                setCanvasViewport({ x: vpt[4], y: vpt[5] });
-                // ── CRITICAL FIX: Sync selection coordinates ──────────────────────────
-                const activeObj = canvas.getActiveObject();
-                if (activeObj) {
-                    activeObj.setCoords();
-                    // For multi-selection, update all objects
-                    if (activeObj.type === 'activeSelection') {
-                        const objects = activeObj.getObjects();
-                        objects.forEach((obj) => obj.setCoords());
-                        activeObj.setCoords();
-                    }
-                }
-                canvas.calcOffset();
-                canvas.requestRenderAll();
-            }
-        };
-        canvas.on("mouse:wheel", onWheel);
-        return () => canvas.off("mouse:wheel", onWheel);
-    }, [canvasZoom, canvasViewport]); // Keep deps
-    useEffect(() => { const prevent = (e) => { if (e.ctrlKey || e.metaKey)
-        e.preventDefault(); }; window.addEventListener("wheel", prevent, { passive: false }); return () => window.removeEventListener("wheel", prevent); }, []);
-    useEffect(() => { const canvas = fabricCanvasRef.current; if (!canvas)
-        return; const sync = () => { const vpt = canvas.viewportTransform; if (!vpt)
-        return; const z = canvas.getZoom(); setCanvasViewport((p) => (p.x !== vpt[4] || p.y !== vpt[5] ? { x: vpt[4], y: vpt[5] } : p)); setCanvasZoom((p) => (p !== z ? z : p)); }; canvas.on("after:render", sync); canvas.on("object:moving", sync); canvas.on("mouse:up", sync); return () => { canvas.off("after:render", sync); canvas.off("object:moving", sync); canvas.off("mouse:up", sync); }; }, []);
-    useEffect(() => { const onKey = (e) => { if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)
-        return; if (!(e.ctrlKey || e.metaKey))
-        return; if (e.key === "=" || e.key === "+") {
-        e.preventDefault();
-        handleZoomIn();
-    }
-    else if (e.key === "-" || e.key === "_") {
-        e.preventDefault();
-        handleZoomOut();
-    }
-    else if (e.key === "0") {
-        e.preventDefault();
-        handleResetZoom();
-    } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [canvasZoom]);
-    // ═══════════════════════════════════════════════════════════════════════════
-    // ADD THIS TO YOUR fabric-whiteboard.tsx
-    // Place it after all other useEffects, before the return statement
-    // ═══════════════════════════════════════════════════════════════════════════
-    // ── Live Update Selected Shapes When Tool Options Change ────────────────────
-    useEffect(() => {
-        const canvas = fabricCanvasRef.current;
-        if (!canvas)
-            return;
-        const activeObject = canvas.getActiveObject();
-        if (!activeObject)
-            return;
-        const updateObjectStyle = (obj) => {
-            let options = null;
-            // 1. Map all types to options, including "path" (Pen)
-            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; // ← ADDED: Pen mapping
-            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 = {};
-            // Opacity applies to EVERYTHING (Images, Paths, Shapes)
-            if (typeof options.opacity === 'number') {
-                update.opacity = options.opacity;
-            }
-            // Styles for Vector objects (Shapes + Pen Paths)
-            if (obj.type !== "image" && !(obj instanceof FabricImage)) {
-                // Paths (Pen) usually only care about stroke, not fill
-                if (obj.type === "path") {
-                    update.stroke = options.color || options.strokeColor; // Pen uses .color usually
-                }
-                else {
-                    update.fill = options.fillColor === "transparent" ? "transparent" : options.fillColor;
-                    update.stroke = options.strokeColor;
-                }
-                update.strokeWidth = options.strokeWidth;
-                // Dynamic dash calculation based on the current stroke width
-                update.strokeDashArray = calculateDashArray(options.strokeDashArray, options.strokeWidth);
-            }
-            // Single batch update for performance
-            obj.set(update);
-            obj.setCoords();
-            obj.dirty = true;
-        };
-        // 4. Performance: Use a single render call
-        if (activeObject.type === "activeSelection") {
-            activeObject.getObjects().forEach((obj) => updateObjectStyle(obj));
-        }
-        else {
-            updateObjectStyle(activeObject);
-        }
-        canvas.requestRenderAll();
-    }, [toolOptions]);
-    // ── Selection box ────────────────────────────────────────────────────────────
-    useEffect(() => {
-        const canvas = fabricCanvasRef.current;
-        if (!canvas)
-            return;
-        let isSelecting = false, selStart = { x: 0, y: 0 }, selRect = null, 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, 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", // ← ADD THIS - map to "arrow" to show arrow options
-                "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 // ← ADD THIS
-                            ? "arrow"
-                            : typeMap[sel.type] ?? null;
-            selectedObjectTypeRef.current = t;
-            setSelectedObjectType(t);
-        };
-        const onDeselected = () => { selectedObjectTypeRef.current = null; setSelectedObjectType(null); setSelectionBox(null); setSelectedCanvasObjects([]); if (!isDrawingRef.current && activeTool !== "select" && activeTool !== "pan")
-            useWhiteboardStore.getState().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]);
-    // ── Dropdown handlers ────────────────────────────────────────────────────────
-    const handleAddTaskFromDropdown = (taskTemplate) => { const canvas = fabricCanvasRef.current; if (!canvas)
-        return; const vpt = canvas.viewportTransform; if (!vpt)
-        return; const cx = (canvas.getWidth() / 2 - vpt[4]) / canvasZoom; const cy = (canvas.getHeight() / 2 - vpt[5]) / canvasZoom; setTasks((prev) => [...prev, { ...taskTemplate, id: `${taskTemplate.id}-${Date.now()}`, x: cx - 150, y: cy - 60 }]); };
-    const handleAddDocumentFromDropdown = (docTemplate) => { const canvas = fabricCanvasRef.current; if (!canvas)
-        return; const vpt = canvas.viewportTransform; if (!vpt)
-        return; const cx = (canvas.getWidth() / 2 - vpt[4]) / canvasZoom; const cy = (canvas.getHeight() / 2 - vpt[5]) / canvasZoom; setDocuments((prev) => [...prev, { ...docTemplate, id: `${docTemplate.id}-${Date.now()}`, x: cx - 150, y: cy - 80 }]); };
-    return (_jsx("div", { className: "easyflow-whiteboard", children: _jsxs("div", { ref: containerRef, className: "relative w-full h-screen overflow-hidden bg-[#0b0b0b]", children: [_jsx("div", { className: "absolute inset-0 pointer-events-none", style: { 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 }), _jsxs("div", { className: "absolute inset-0 pointer-events-none", style: { zIndex: 100 }, children: [_jsx("div", { className: "pointer-events-auto", children: _jsx(WhiteboardToolbar, { fabricCanvas: fabricCanvasRef, isRestoringRef: isRestoringRef, onAddTask: handleAddTaskFromDropdown, onAddDocument: handleAddDocumentFromDropdown }) }), _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 }) })] })] }) }));
-}
+"use strict";
+// "use client";
+// import { useCallback, useEffect, useRef, useState } from "react";
+// import {
+//   Canvas,
+//   FabricObject,
+//   Rect,
+//   Circle,
+//   Line,
+//   TPointerEventInfo,
+//   FabricImage,
+//   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 type { Document } from "../node/custom-node-overlay-layer";
+// import ZoomControls from "../zoomcontrol/zoom-control";
+// import { initializeFabricCanvas, updateDrawingObject, addText, calculateDashArray,addWelcomeContent } from "../..//lib/fabric-utils";
+// import { Frame } from "../../lib/fabric-frame";
+// import { Arrow } from "../../lib/fabric-arrow";
+// import { BidirectionalArrow } from "../../lib/fabric-bidirectional-arrow";
+// import * as fabric from "fabric";
+// interface Task {
+//   id: string;
+//   title: string;
+//   status: "todo" | "in-progress" | "done";
+//   x: number;
+//   y: number;
+//   project?: string;
+//   assignee?: string;
+//   priority?: "low" | "medium" | "high";
+//   dueDate?: string;
+// }
+// classRegistry.setClass(Frame, 'frame');
+// export default function FabricWhiteboard() {
+//   const canvasRef = useRef<HTMLCanvasElement>(null);
+//   const fabricCanvasRef = useRef<Canvas | null>(null);
+//   const containerRef = useRef<HTMLDivElement>(null);
+//   const isDrawingRef = useRef(false);
+//   const startPointRef = useRef<{ x: number; y: number } | null>(null);
+//   const currentShapeRef = useRef<FabricObject | null>(null);
+//   const selectedObjectTypeRef = useRef<string | null>(null);
+//   const suppressHistoryRef = useRef(false);
+//   const isRestoringRef = useRef(false);
+//   // ── ERASER REFS ──────────────────────────────────────────────────────────────
+// const eraserTraceRef = useRef<Circle | null>(null);
+// const eraserTargetsRef = useRef<Set<FabricObject>>(new Set());
+// const eraserActiveRef = useRef(false);
+// const eraserPathRef = useRef<fabric.Path | null>(null);  // ← NEW: Smooth path trail
+// const eraserPathPointsRef = useRef<any[]>([]);    
+//   const activeTool = useWhiteboardStore((state) => state.activeTool);
+//   const toolOptions = useWhiteboardStore((state) => state.toolOptions);
+//   const addCanvasObject = useWhiteboardStore((state) => state.addCanvasObject);
+//   const setSelectedObjectType = useWhiteboardStore((state) => state.setSelectedObjectType);
+//   const pushHistory = useWhiteboardStore((state) => state.pushHistory);
+//   const [tasks, setTasks] = useState<Task[]>([]);
+//   const [documents, setDocuments] = useState<Document[]>([]);
+//   const [canvasZoom, setCanvasZoom] = useState(1);
+//   const [canvasViewport, setCanvasViewport] = useState({ x: 0, y: 0 });
+//   const [selectionBox, setSelectionBox] = useState<{
+//     x1: number; y1: number; x2: number; y2: number;
+//   } | null>(null);
+//   const [selectedCanvasObjects, setSelectedCanvasObjects] = useState<FabricObject[]>([]);
+//   const MIN_ZOOM = 0.1;
+//   const MAX_ZOOM = 5;
+//   const ZOOM_STEP = 0.1;
+//   useEffect(() => {
+//     if (!canvasRef.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";
+//     // Storage keys
+//     const CANVAS_KEY = "easyflow_whiteboard_canvas";
+//     const NODES_KEY = "easyflow_whiteboard_nodes";
+//     // ═══════════════════════════════════════════════════════════════════════
+//     // LOAD SAVED DATA
+//     // ═══════════════════════════════════════════════════════════════════════
+//     const savedCanvas = localStorage.getItem(CANVAS_KEY);
+//     const savedNodes = localStorage.getItem(NODES_KEY);
+//     if (savedCanvas || savedNodes) {
+//       isRestoringRef.current = true;
+//       // Load Fabric canvas
+//       if (savedCanvas) {
+//         canvas
+//           .loadFromJSON(JSON.parse(savedCanvas))
+//           .then(() => {
+//             canvas.renderAll();
+//             pushHistory(JSON.stringify(canvas.toJSON()));
+//           })
+//           .catch((err) => {
+//             console.error("Canvas load failed:", err);
+//             addWelcomeContent(canvas, "/images/easyflow-logo.png");
+//           });
+//       } else {
+//         addWelcomeContent(canvas, "/images/easyflow-logo.png");
+//       }
+//       // Load custom nodes (tasks & documents)
+//       if (savedNodes) {
+//         try {
+//           const { tasks: savedTasks, documents: savedDocs } = JSON.parse(savedNodes);
+//           if (savedTasks) setTasks(savedTasks);
+//           if (savedDocs) setDocuments(savedDocs);
+//           console.log("✅ Custom nodes loaded:", { tasks: savedTasks?.length, docs: savedDocs?.length });
+//         } 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()));
+//     }
+//     // Touch prevention
+//     const preventDefaults = (e: TouchEvent) => {
+//       if (e.touches.length === 1 && activeTool !== "pan") 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 });
+//     return () => {
+//       canvasElement.removeEventListener("touchstart", preventDefaults);
+//       canvasElement.removeEventListener("touchmove", preventDefaults);
+//       window.removeEventListener("resize", handleResize);
+//       canvas.dispose();
+//     };
+//   }, []);
+//   // ─────────────────────────────────────────────────────────────────────────
+//   // STEP 2: Separate Saving Logic for Canvas and Nodes
+//   // ─────────────────────────────────────────────────────────────────────────
+//   // Save Fabric Canvas
+//   useEffect(() => {
+//     const canvas = fabricCanvasRef.current;
+//     if (!canvas) return;
+//     let saveTimeout: NodeJS.Timeout;
+//     const saveCanvas = () => {
+//       if (isRestoringRef.current || suppressHistoryRef.current) return;
+//       clearTimeout(saveTimeout);
+//       saveTimeout = setTimeout(() => {
+//         const performSave = () => {
+//           try {
+//             const json = JSON.stringify(canvas.toJSON());
+//             localStorage.setItem("easyflow_whiteboard_canvas", json);
+//             // Also update history
+//             pushHistory(json);
+//             console.log("💾 Canvas saved");
+//           } catch (err) {
+//             console.error("Canvas save failed:", err);
+//           }
+//         };
+//         if (typeof window.requestIdleCallback === "function") {
+//           window.requestIdleCallback(performSave);
+//         } else {
+//           performSave();
+//         }
+//       }, 2000);
+//     };
+//     const onObjectChanged = (opt?: any) => {
+//       if (opt?.target?.excludeFromExport) return;
+//       saveCanvas();
+//     };
+//     canvas.on("object:modified", onObjectChanged);
+//     canvas.on("object:added", onObjectChanged);
+//     canvas.on("object:removed", onObjectChanged);
+//     canvas.on("path:created", onObjectChanged);
+//     return () => {
+//       clearTimeout(saveTimeout);
+//       canvas.off("object:modified", onObjectChanged);
+//       canvas.off("object:added", onObjectChanged);
+//       canvas.off("object:removed", onObjectChanged);
+//       canvas.off("path:created", onObjectChanged);
+//     };
+//   }, []);
+//   // Save Custom Nodes (Tasks & Documents)
+//   useEffect(() => {
+//     if (isRestoringRef.current) return;
+//     let saveTimeout: NodeJS.Timeout;
+//     const saveNodes = () => {
+//       clearTimeout(saveTimeout);
+//       saveTimeout = setTimeout(() => {
+//         const performSave = () => {
+//           try {
+//             const nodesData = {
+//               tasks,
+//               documents,
+//             };
+//             localStorage.setItem(
+//               "easyflow_whiteboard_nodes",
+//               JSON.stringify(nodesData)
+//             );
+//             console.log("💾 Custom nodes saved:", {
+//               tasks: tasks.length,
+//               documents: documents.length,
+//             });
+//           } catch (err) {
+//             console.error("Nodes save failed:", err);
+//           }
+//         };
+//         if (typeof window.requestIdleCallback === "function") {
+//           window.requestIdleCallback(performSave);
+//         } else {
+//           performSave();
+//         }
+//       }, 2000);
+//     };
+//     saveNodes();
+//     return () => clearTimeout(saveTimeout);
+//   }, [tasks, documents]);
+//   // ── Tool cursor/mode management ─────────────────────────────────────────────
+//   useEffect(() => {
+//     const canvas = fabricCanvasRef.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();
+//       // Clean up trail path
+//       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;
+//           // ← ADD THIS: Apply dash pattern
+//           if (toolOptions.pen.strokeDashArray) {
+//             canvas.freeDrawingBrush.strokeDashArray = toolOptions.pen.strokeDashArray;
+//             const dynamicDashArray = calculateDashArray(
+//               toolOptions.pen.strokeDashArray,
+//               toolOptions.pen.strokeWidth
+//             );
+//             canvas.freeDrawingBrush.strokeDashArray = dynamicDashArray || null;
+//           } else {
+//             canvas.freeDrawingBrush.strokeDashArray = null; // Solid line
+//           }
+//         }
+//         canvas.forEachObject((obj) => { 
+//           obj.selectable = false; 
+//           obj.evented = false; 
+//         });
+//         break;
+//       case "eraser":
+//         canvas.isDrawingMode = false;
+//         canvas.selection = false;
+//         canvas.defaultCursor = "none"; // Hide default cursor
+//         canvas.hoverCursor = "none";
+//         if (eraserTraceRef.current) {
+//           eraserTraceRef.current.set({ visible: false });
+//         }
+//         canvas.forEachObject((obj) => { 
+//           obj.selectable = false;
+//           obj.evented = true; // Keep events for hover detection
+//         });
+//         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]);
+//   const handleMouseOver = () => {
+//     if (activeTool === "eraser" && eraserTraceRef.current) {
+//       eraserTraceRef.current.set({ visible: true });
+//       fabricCanvasRef.current?.renderAll();
+//     }
+//   };
+//   const handleMouseOut = (opt: TPointerEventInfo) => {
+//     // opt.e is the native event. If it's null or we are leaving the canvas boundaries:
+//     if (activeTool === "eraser" && eraserTraceRef.current) {
+//       eraserTraceRef.current.set({ visible: false });
+//       fabricCanvasRef.current?.renderAll();
+//     }
+//   };
+//   // ── Mouse down ───────────────────────────────────────────────────────────────
+//   const handleMouseDown = (opt: TPointerEventInfo) => {
+//     const canvas = fabricCanvasRef.current;
+//     if (!canvas) return;
+//     const pointer = canvas.getScenePoint(opt.e as MouseEvent);
+//     // ── ERASER: Activate eraser mode ────────────────────────────────────────────
+//     if (activeTool === "eraser") {
+//       eraserActiveRef.current = true;
+//       suppressHistoryRef.current = true;
+//       return;
+//     }
+//     if (opt.target || canvas.getActiveObject()) return;
+//     if (activeTool === "text") {
+//       addText(canvas, {
+//         x: pointer.x,
+//         y: pointer.y,
+//         fontSize: toolOptions.text.fontSize,
+//         fontFamily: toolOptions.text.fontFamily,
+//         fontWeight: toolOptions.text.fontWeight,     // ← ADD THIS
+//         color: toolOptions.text.color,
+//         textAlign: toolOptions.text.textAlign,       // ← ADD THIS
+//       });
+//       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: FabricObject | null = 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,
+//           // ↓ THE FIX: Apply strokeDashArray
+//           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,
+//           // ↓ THE FIX: Apply strokeDashArray
+//           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,
+//           // ↓ IMPORTANT: Use frame options, not rectangle
+//           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,           // ← Use line options
+//             strokeWidth: toolOptions.line.strokeWidth,       // ← Use line options
+//             strokeDashArray: toolOptions.line.strokeDashArray || undefined,  // ← ADD THIS
+//             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();
+//     }
+//   };
+//   // ── Mouse move ───────────────────────────────────────────────────────────────
+//   const handleMouseMove = (opt: TPointerEventInfo) => {
+//     const canvas = fabricCanvasRef.current;
+//     if (!canvas) return;
+//     const pointer = canvas.getScenePoint(opt.e as MouseEvent);
+//     // ── ERASER: Update trace circle and highlight objects ──────────────────────
+//     if (activeTool === "eraser") {
+//       // 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 });
+//       }
+//       // Move trace circle to mouse position
+//       eraserTraceRef.current.set({ left: pointer.x, top: pointer.y });
+//       eraserTraceRef.current.setCoords();
+//       canvas.bringObjectToFront(eraserTraceRef.current);
+//       // ── SMOOTH CONTINUOUS TRAIL (FIXED) ──────────────────────────────────────
+//       if (eraserActiveRef.current) {
+//         suppressHistoryRef.current = true; // Ensure history is locked during movement
+//         if (eraserPathPointsRef.current.length === 0) {
+//           // Start new path - use SVG path string format
+//           eraserPathPointsRef.current = [`M ${pointer.x} ${pointer.y}`];
+//           const pathString = eraserPathPointsRef.current.join(' ');
+//           const path = new fabric.Path(pathString, {
+//             stroke: "rgba(220, 220, 220, 0.7)",  // ← Bright white/gray for dark bg
+//             strokeWidth: toolOptions.eraser.size,
+//             fill: null,  // ← Must be null, not empty string
+//             selectable: false,
+//             evented: false,
+//             strokeLineCap: "round",
+//             strokeLineJoin: "round",
+//             opacity: 1,
+//             excludeFromExport: true,
+//           });
+//           canvas.add(path);
+//           eraserPathRef.current = path;
+//         } else {
+//           // Continue path by adding line segments
+//           eraserPathPointsRef.current.push(`L ${pointer.x} ${pointer.y}`);
+//           const pathString = eraserPathPointsRef.current.join(' ');
+//           // Recreate path with updated points (more reliable than updating)
+//           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;
+//         }
+//         // Keep trace circle on top
+//         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 });
+//             // obj.dirty = true;
+//           }
+//         } else if (previousTargets.has(obj)) {
+//           obj.set({ opacity: 1 });
+//           // obj.dirty = true;
+//         }
+//       });
+//       canvas.renderAll();
+//       return;
+//     }
+//     // Normal drawing logic
+//     if (!isDrawingRef.current || !currentShapeRef.current || !startPointRef.current) return;
+//     updateDrawingObject(currentShapeRef.current, activeTool, startPointRef.current, pointer);
+//     canvas.renderAll();
+//   };
+//   // ── Mouse up ─────────────────────────────────────────────────────────────────
+// const handleMouseUp = () => {
+//   const canvas = fabricCanvasRef.current;
+//   if (!canvas) return;
+//   // ── ERASER: Delete highlighted objects ─────────────────────────────────────
+//   if (activeTool === "eraser" && eraserActiveRef.current) {
+//     eraserActiveRef.current = false;
+//     // 1. Clean up visuals (opacity and path)
+//     canvas.forEachObject((obj) => {
+//       if (obj.opacity === 0.3) obj.set({ opacity: 1 });
+//     });
+//     if (eraserPathRef.current) {
+//       canvas.remove(eraserPathRef.current);
+//       eraserPathRef.current = null;
+//       eraserPathPointsRef.current = [];
+//     }
+//     // 2. Perform the actual deletion
+//     eraserTargetsRef.current.forEach((obj) => {
+//       canvas.remove(obj);
+//     });
+//     eraserTargetsRef.current.clear();
+//     canvas.renderAll();
+//     // 3. IMMEDIATE SAVE (don't wait for debounce)
+//     try {
+//       const canvasJson = JSON.stringify(canvas.toJSON());
+//       localStorage.setItem("easyflow_whiteboard_canvas", canvasJson);
+//       localStorage.setItem("easyflow_whiteboard_nodes", JSON.stringify({ tasks, documents }));
+//       console.log("💾 Eraser: Saved immediately");
+//     } catch (err) {
+//       console.error("Save failed:", err);
+//     }
+//     // 4. Also fire event for regular save flow
+//     canvas.fire('object:removed');
+//     // 5. Update history
+//     suppressHistoryRef.current = false; 
+//     pushHistory(JSON.stringify(canvas.toJSON())); 
+//     return;
+//   }
+//   // Normal shape drawing
+//   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();
+// };
+//   useEffect(() => {
+//     const canvas = fabricCanvasRef.current;
+//     if (!canvas) return;
+//     canvas.on("mouse:over", handleMouseOver);
+// canvas.on("mouse:out", handleMouseOut);
+//     canvas.on("mouse:down", handleMouseDown);
+//     canvas.on("mouse:move", handleMouseMove);
+//     canvas.on("mouse:up",   handleMouseUp);
+//     return () => {
+//       canvas.off("mouse:over", handleMouseOver);
+// canvas.off("mouse:out", handleMouseOut);
+//       canvas.off("mouse:down", handleMouseDown);
+//       canvas.off("mouse:move", handleMouseMove);
+//       canvas.off("mouse:up",   handleMouseUp);
+//     };
+//   }, [activeTool, toolOptions]);
+//   // ── Update text style on selection change ─────────────────────────────────────
+//   useEffect(() => {
+//     const canvas = fabricCanvasRef.current;
+//     if (!canvas) return;
+//     const activeObject = canvas.getActiveObject();
+//     if (!activeObject) return;
+//     // Only update text objects (IText or Text type)
+//     const updateTextStyle = (obj: FabricObject) => {
+//       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;
+//     };
+//     // Handle single or multiple selection
+//     if (activeObject.type === "activeSelection") {
+//       const objects = (activeObject as any).getObjects();
+//       objects.forEach((obj: FabricObject) => updateTextStyle(obj));
+//     } else {
+//       updateTextStyle(activeObject);
+//     }
+//     canvas.requestRenderAll();
+//   }, [toolOptions.text]);
+//   // ── Zoom ─────────────────────────────────────────────────────────────────────
+//   const handleZoom = useCallback((newZoom: number, point?: { x: number; y: number }) => {
+//     const canvas = fabricCanvasRef.current;
+//     if (!canvas) return;
+//     // 1. Clamp the zoom level immediately
+//     const clampedZoom = Math.min(Math.max(newZoom, MIN_ZOOM), MAX_ZOOM);
+//     // 2. Determine the pivot point (default to center)
+//     const pivot = point ? new fabric.Point(point.x, point.y) : new fabric.Point(canvas.getWidth() / 2, canvas.getHeight() / 2);
+//     // 3. Use Fabric's optimized built-in method
+//     // This handles the matrix math (vpt[4], vpt[5]) much faster than manual assignment
+//     canvas.zoomToPoint(pivot, clampedZoom);
+//     // 4. Update the Canvas state
+//     const vpt = canvas.viewportTransform;
+//     if (vpt) {
+//       // We update the local state to keep the UI in sync
+//       // Use requestAnimationFrame if you find this still lags, 
+//       // but usually, Fabric's internal update is enough for the "feel"
+//       setCanvasZoom(clampedZoom);
+//       setCanvasViewport({ x: vpt[4], y: vpt[5] });
+//     }
+//     // 5. Use requestRenderAll for better performance than renderAll
+//     canvas.requestRenderAll();
+//   }, [MIN_ZOOM, MAX_ZOOM, setCanvasZoom, setCanvasViewport]);
+//   const handleZoomIn    = () => handleZoom(canvasZoom + ZOOM_STEP);
+//   const handleZoomOut   = () => handleZoom(canvasZoom - ZOOM_STEP);
+//   const handleResetZoom = () => { const canvas = fabricCanvasRef.current; if (!canvas) return; canvas.setZoom(1); const vpt = canvas.viewportTransform; if (vpt) { vpt[4] = 0; vpt[5] = 0; setCanvasViewport({ x: 0, y: 0 }); } setCanvasZoom(1); canvas.renderAll(); };
+//   useEffect(() => {
+//     const canvas = fabricCanvasRef.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: any) => {
+//       if (activeTool !== "pan") return;
+//       const e = opt.e;
+//       // --- PINCH INITIALIZATION ---
+//       if (e.touches && e.touches.length === 2) {
+//         isPanning = false; // Kill panning immediately
+//         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: any) => {
+//       if (activeTool !== "pan") return;
+//       const e = opt.e;
+//       // 1. 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();
+//           // Constant 0.01 multiplier for controlled, buttery zoom
+//           const delta = (currentDistance - lastTouchDistance) * 0.01;
+//           const newZoom = zoom + delta;
+//           // Midpoint between fingers for the zoom anchor
+//           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; // Exit so we don't trigger panning math
+//       }
+//       // 2. 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 = () => {
+//       // Only sync the store at the very end of the interaction
+//       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]);
+// // ── Wheel Handler (Pan on scroll, Zoom on Ctrl+Scroll) ───────────────────────
+// useEffect(() => {
+//   const canvas = fabricCanvasRef.current;
+//   if (!canvas) return;
+//   const onWheel = (opt: any) => { 
+//     const e = opt.e as WheelEvent; 
+//     e.preventDefault(); 
+//     e.stopPropagation(); 
+//     const vpt = canvas.viewportTransform;
+//     if (!vpt) return;
+//     if (e.ctrlKey || e.metaKey) { 
+//       // Zoom logic
+//       const rect = canvas.getElement().getBoundingClientRect(); 
+//       handleZoom(
+//         e.deltaY < 0 ? canvasZoom * 1.1 : canvasZoom / 1.1, 
+//         { x: e.clientX - rect.left, y: e.clientY - rect.top }
+//       ); 
+//     } else { 
+//       // ── PAN VIA WHEEL (Your scroll logic) ─────────────────────────────────
+//       const delta = e.deltaY;
+//       const shiftDelta = e.deltaX || e.deltaY;
+//       // Vertical scroll (normal wheel)
+//       vpt[5] -= delta; 
+//       // Horizontal scroll (shift + wheel)
+//       if (e.shiftKey) vpt[4] -= shiftDelta; 
+//       setCanvasViewport({ x: vpt[4], y: vpt[5] }); 
+//       // ── CRITICAL FIX: Sync selection coordinates ──────────────────────────
+//       const activeObj = canvas.getActiveObject();
+//       if (activeObj) {
+//         activeObj.setCoords();
+//         // For multi-selection, update all objects
+//         if (activeObj.type === 'activeSelection') {
+//           const objects = (activeObj as any).getObjects();
+//           objects.forEach((obj: FabricObject) => obj.setCoords());
+//           (activeObj as any).setCoords();
+//         }
+//       }
+//       canvas.calcOffset();
+//       canvas.requestRenderAll(); 
+//     } 
+//   };
+//   canvas.on("mouse:wheel", onWheel);
+//   return () => canvas.off("mouse:wheel", onWheel);
+// }, [canvasZoom, canvasViewport]); // Keep deps
+//   useEffect(() => { const prevent = (e: WheelEvent) => { if (e.ctrlKey || e.metaKey) e.preventDefault(); }; window.addEventListener("wheel", prevent, { passive: false }); return () => window.removeEventListener("wheel", prevent); }, []);
+//   useEffect(() => { const canvas = fabricCanvasRef.current; if (!canvas) return; const sync = () => { const vpt = canvas.viewportTransform; if (!vpt) return; const z = canvas.getZoom(); setCanvasViewport((p) => (p.x !== vpt[4] || p.y !== vpt[5] ? { x: vpt[4], y: vpt[5] } : p)); setCanvasZoom((p) => (p !== z ? z : p)); }; canvas.on("after:render", sync); canvas.on("object:moving", sync); canvas.on("mouse:up", sync); return () => { canvas.off("after:render", sync); canvas.off("object:moving", sync); canvas.off("mouse:up", sync); }; }, []);
+//   useEffect(() => { const onKey = (e: KeyboardEvent) => { if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return; if (!(e.ctrlKey || e.metaKey)) return; if (e.key === "=" || e.key === "+") { e.preventDefault(); handleZoomIn(); } else if (e.key === "-" || e.key === "_") { e.preventDefault(); handleZoomOut(); } else if (e.key === "0") { e.preventDefault(); handleResetZoom(); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [canvasZoom]);
+//   // ═══════════════════════════════════════════════════════════════════════════
+//   // ADD THIS TO YOUR fabric-whiteboard.tsx
+//   // Place it after all other useEffects, before the return statement
+//   // ═══════════════════════════════════════════════════════════════════════════
+//   // ── Live Update Selected Shapes When Tool Options Change ────────────────────
+//   useEffect(() => {
+//     const canvas = fabricCanvasRef.current;
+//     if (!canvas) return;
+//     const activeObject = canvas.getActiveObject();
+//     if (!activeObject) return;
+//     const updateObjectStyle = (obj: FabricObject) => {
+//       let options: any = null;
+//       // 1. Map all types to options, including "path" (Pen)
+//       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; // ← ADDED: Pen mapping
+//       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: any = {};
+//       // Opacity applies to EVERYTHING (Images, Paths, Shapes)
+//       if (typeof options.opacity === 'number') {
+//         update.opacity = options.opacity;
+//       }
+//       // Styles for Vector objects (Shapes + Pen Paths)
+//       if (obj.type !== "image" && !(obj instanceof FabricImage)) {
+//         // Paths (Pen) usually only care about stroke, not fill
+//         if (obj.type === "path") {
+//            update.stroke = options.color || options.strokeColor; // Pen uses .color usually
+//         } else {
+//            update.fill = options.fillColor === "transparent" ? "transparent" : options.fillColor;
+//            update.stroke = options.strokeColor;
+//         }
+//         update.strokeWidth = options.strokeWidth;
+//         // Dynamic dash calculation based on the current stroke width
+//         update.strokeDashArray = calculateDashArray(
+//           options.strokeDashArray,
+//           options.strokeWidth
+//         );
+//       }
+//       // Single batch update for performance
+//       obj.set(update);
+//       obj.setCoords(); 
+//       obj.dirty = true;
+//     };
+//     // 4. Performance: Use a single render call
+//     if (activeObject.type === "activeSelection") {
+//       (activeObject as any).getObjects().forEach((obj: FabricObject) => updateObjectStyle(obj));
+//     } else {
+//       updateObjectStyle(activeObject);
+//     }
+//     canvas.requestRenderAll();
+//   }, [toolOptions]);
+//   // ── Selection box ────────────────────────────────────────────────────────────
+//   useEffect(() => {
+//     const canvas = fabricCanvasRef.current;
+//     if (!canvas) return;
+//     let isSelecting = false, selStart = { x: 0, y: 0 }, selRect: Rect | null = null, rafId: number | null = null;
+//     const onDown = (e: any) => { 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: any) => { if (!isSelecting || !selRect) return; if (rafId !== null) cancelAnimationFrame(rafId); rafId = requestAnimationFrame(() => { const p = canvas.getScenePoint(e.e); const w = p.x - selStart.x, 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 as any).getObjects() : [sel]
+//       );
+//       const typeMap: Record<string, string> = {
+//         rect: "rectangle",
+//         circle: "circle",
+//         line: "line",
+//         arrow: "arrow",
+//         "bidirectional-arrow": "arrow",  // ← ADD THIS - map to "arrow" to show arrow options
+//         "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  // ← ADD THIS
+//         ? "arrow"
+//         : typeMap[sel.type] ?? null;
+//       selectedObjectTypeRef.current = t;
+//       setSelectedObjectType(t);
+//     };
+//     const onDeselected = () => { selectedObjectTypeRef.current = null; setSelectedObjectType(null); setSelectionBox(null); setSelectedCanvasObjects([]); if (!isDrawingRef.current && activeTool !== "select" && activeTool !== "pan") useWhiteboardStore.getState().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]);
+//   // ── Dropdown handlers ────────────────────────────────────────────────────────
+//   const handleAddTaskFromDropdown = (taskTemplate: { id: string; title: string; status: "todo" | "in-progress" | "done"; assignee?: string; project?: string; priority?: "low" | "medium" | "high"; dueDate?: string; }) => { const canvas = fabricCanvasRef.current; if (!canvas) return; const vpt = canvas.viewportTransform; if (!vpt) return; const cx = (canvas.getWidth() / 2 - vpt[4]) / canvasZoom; const cy = (canvas.getHeight() / 2 - vpt[5]) / canvasZoom; setTasks((prev) => [...prev, { ...taskTemplate, id: `${taskTemplate.id}-${Date.now()}`, x: cx - 150, y: cy - 60 }]); };
+//   const handleAddDocumentFromDropdown = (docTemplate: Omit<Document, "x" | "y">) => { const canvas = fabricCanvasRef.current; if (!canvas) return; const vpt = canvas.viewportTransform; if (!vpt) return; const cx = (canvas.getWidth() / 2 - vpt[4]) / canvasZoom; const cy = (canvas.getHeight() / 2 - vpt[5]) / canvasZoom; setDocuments((prev) => [...prev, { ...docTemplate, id: `${docTemplate.id}-${Date.now()}`, x: cx - 150, y: cy - 80 }]); };
+//   return (
+//     <div className="easyflow-whiteboard">
+//     <div ref={containerRef} className="relative w-full h-screen overflow-hidden bg-[#0b0b0b]">
+//       <div className="absolute inset-0 pointer-events-none" style={{ backgroundImage: `radial-gradient(circle, rgba(255,255,255,0.2) 1.2px, transparent 1.2px)`, backgroundSize: "40px 40px", zIndex: 0 }}  />
+//       <canvas ref={canvasRef} className="absolute inset-0" style={{ zIndex: 1 }} />
+//       <CanvasOverlayLayer tasks={tasks} documents={documents} onTasksUpdate={setTasks} onDocumentsUpdate={setDocuments} canvasZoom={canvasZoom} canvasViewport={canvasViewport} selectionBox={selectionBox} selectedCanvasObjects={selectedCanvasObjects} fabricCanvas={fabricCanvasRef } 
+//        />
+//       <div className="absolute inset-0 pointer-events-none" style={{ zIndex: 100 }} >
+//         <div className="pointer-events-auto"><WhiteboardToolbar fabricCanvas={fabricCanvasRef} isRestoringRef={isRestoringRef} onAddTask={handleAddTaskFromDropdown} onAddDocument={handleAddDocumentFromDropdown} /></div>
+//         <div className="pointer-events-auto"><ToolOptionsPanel fabricCanvas={fabricCanvasRef} /></div>
+//         <div className="pointer-events-auto"><ZoomControls zoom={canvasZoom} onZoomIn={handleZoomIn} onZoomOut={handleZoomOut} onResetZoom={handleResetZoom} /></div>
+//       </div>
+//     </div>
+//     </div>
+//   );
+// }