@mhamz.01/easyflow-whiteboard 1.0.0

package/dist/components/whiteboard/whiteboard.js

@@ -0,0 +1,911 @@
+"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 "@/app/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 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>
+//   );
+// }