@mhamz.01/easyflow-whiteboard 1.28.0 → 2.0.1

package/dist/components/node/custom-node-overlay-layer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-node-overlay-layer.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node-overlay-layer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAM9C,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,UAAU,uBAAuB;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,YAAY,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACzE,qBAAqB,CAAC,EAAE,YAAY,EAAE,CAAC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAC/C;AAaD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,UAAc,EACd,cAA+B,EAC/B,YAAmB,EACnB,qBAA0B,EAC1B,YAAY,GACb,EAAE,uBAAuB,2CA4dzB"}
+{"version":3,"file":"custom-node-overlay-layer.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node-overlay-layer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAM9C,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,UAAU,uBAAuB;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,YAAY,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACzE,qBAAqB,CAAC,EAAE,YAAY,EAAE,CAAC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAC/C;AAaD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,UAAc,EACd,cAA+B,EAC/B,YAAmB,EACnB,qBAA0B,EAC1B,YAAY,GACb,EAAE,uBAAuB,2CAudzB"}

package/dist/components/node/custom-node-overlay-layer.js

@@ -128,38 +128,37 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             return { x: doc.x, y: doc.y };
         return undefined;
     };
-    const isItemInSelectionBox = (nodeX, nodeY, width, height, box) => {
-        // EVERYTHING HERE IS NOW IN WORLD (SCENE) COORDINATES
-        // No canvasZoom or canvasViewport needed for the check!
-        const nodeX2 = nodeX + width;
-        const nodeY2 = nodeY + height;
-        return !(box.x2 < nodeX ||
-            box.x1 > nodeX2 ||
-            box.y2 < nodeY ||
-            box.y1 > nodeY2);
+    const isItemInSelectionBox = (x, y, width, height, box) => {
+        const itemX1 = x * canvasZoom + canvasViewport.x;
+        const itemY1 = y * canvasZoom + canvasViewport.y;
+        const itemX2 = itemX1 + width * canvasZoom;
+        const itemY2 = itemY1 + height * canvasZoom;
+        const boxX1 = Math.min(box.x1, box.x2);
+        const boxY1 = Math.min(box.y1, box.y2);
+        const boxX2 = Math.max(box.x1, box.x2);
+        const boxY2 = Math.max(box.y1, box.y2);
+        return !(boxX2 < itemX1 || boxX1 > itemX2 || boxY2 < itemY1 || boxY1 > itemY2);
     };
     // ── Selection box detection ──────────────────────────────────────────────────
     useEffect(() => {
         if (!selectionBox)
-            return;
+            return; // Don't clear on null — let keyboard/click handlers do that
         const newSelected = new Set();
-        // Use the actual dimensions of your components
-        // Better yet: Pass these as props if they are dynamic
-        const NODE_WIDTH = 300;
-        const TASK_HEIGHT = 140;
-        const DOC_HEIGHT = 160;
-        localTasks.forEach((t) => {
-            if (isItemInSelectionBox(t.x, t.y, NODE_WIDTH, TASK_HEIGHT, selectionBox)) {
-                newSelected.add(t.id);
-            }
+        localTasks.forEach((task) => {
+            if (isItemInSelectionBox(task.x, task.y, 300, 140, selectionBox))
+                newSelected.add(task.id);
         });
-        localDocuments.forEach((d) => {
-            if (isItemInSelectionBox(d.x, d.y, NODE_WIDTH, DOC_HEIGHT, selectionBox)) {
-                newSelected.add(d.id);
-            }
+        localDocuments.forEach((doc) => {
+            if (isItemInSelectionBox(doc.x, doc.y, 300, 160, selectionBox))
+                newSelected.add(doc.id);
+        });
+        // Only update if something actually changed (avoids re-render churn)
+        setSelectedIds((prev) => {
+            const prevArr = Array.from(prev).sort().join(",");
+            const nextArr = Array.from(newSelected).sort().join(",");
+            return prevArr === nextArr ? prev : newSelected;
         });
-        setSelectedIds(newSelected);
-    }, [selectionBox]);
+    }, [selectionBox, localTasks, localDocuments]);
     // ── Drag start (HTML Node side) ──────────────────────────────────────────────
     // Helper to extract coordinates regardless of event type
     const getPointerEvent = (e) => {
@@ -329,25 +328,24 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
     }, [localTasks, localDocuments, selectedIds, onTasksUpdate, onDocumentsUpdate]);
     // ── Render helper ────────────────────────────────────────────────────────────
     const renderItem = (id, x, y, children) => {
-        // We apply the viewport offset to the container, 
-        // so here we only care about the scaled local position.
         const screenX = x * canvasZoom;
         const screenY = y * canvasZoom;
+        // 1. Detect if the user is interacting with the canvas at all
+        // 'dragging' is your existing state. 
+        // You might want to pass 'isZooming' or 'isPanning' from your main canvas component here.
         const isDragging = dragging?.itemIds.includes(id);
         return (_jsx("div", { className: "pointer-events-auto absolute", style: {
                 left: 0,
                 top: 0,
-                // Using translate3d(x, y, 0) is non-negotiable for 2026 performance
+                // 2. Use translate3d for GPU performance
                 transform: `translate3d(${screenX}px, ${screenY}px, 0) scale(${canvasZoom})`,
                 transformOrigin: "top left",
-                // CRITICAL: Disable all transitions. 
-                // Even a 100ms transition will cause the node to "float" away during zoom.
+                // 3. THE FIX: Remove transition entirely during any viewport change
+                // Any 'ease' during zoom causes the "shaking" behavior.
                 transition: "none",
+                // 4. Optimization
                 willChange: "transform",
                 zIndex: isDragging ? 1000 : 1,
-                // Added: Prevent browser from trying to optimize text rendering during move 
-                // which causes the "shaking" text bug.
-                backfaceVisibility: "hidden",
             }, children: children }, id));
     };
     return (_jsx("div", { ref: overlayRef, className: "absolute inset-0 pointer-events-none", style: { zIndex: 50 }, onWheel: handleOverlayWheel, onClick: (e) => {

package/dist/components/whiteboard/whiteboard-test.d.ts

@@ -1 +1,2 @@
+export default function FabricWhiteboard(): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=whiteboard-test.d.ts.map

package/dist/components/whiteboard/whiteboard-test.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"whiteboard-test.d.ts","sourceRoot":"","sources":["../../../src/components/whiteboard/whiteboard-test.tsx"],"names":[],"mappings":""}
+{"version":3,"file":"whiteboard-test.d.ts","sourceRoot":"","sources":["../../../src/components/whiteboard/whiteboard-test.tsx"],"names":[],"mappings":"AA4CA,MAAM,CAAC,OAAO,UAAU,gBAAgB,4CAoQvC"}

package/dist/components/whiteboard/whiteboard-test.js

@@ -1,274 +1,207 @@
-"use strict";
-// "use client";
-// import React, { useRef, useState } from "react";
-// import { Canvas, FabricObject, Circle, 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 { Frame } from "../../lib/fabric-frame";
-// import * as fabric from "fabric";
-// // Import all hooks
-// import { useCanvasInit } from "../../hooks/useCanvasInit";
-// import { useToolManager } from "../../hooks/useToolManager";
-// import { useDrawing } from "../../hooks/useDrawing";
-// import { useEraser } from "../../hooks/useEraser";
-// import { usePan } from "../../hooks/usePan";
-// import { useZoom } from "../../hooks/useZoom";
-// import { useSelection } from "../../hooks/useSelection";
-// import { useTextStyle } from "../../hooks/useTextStyle";
-// import { useLiveUpdate } from "../../hooks/useLiveUpdate";
-// import { useMouseHandlers } from "../../hooks/useMouseHandlers";
-// import { usePersistence } from "../../hooks/usePersistance";
-// 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() {
-//   // Refs
-//   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 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);
-//   const eraserPathPointsRef = useRef<string[]>([]);
-//   // Store
-//   const activeTool = useWhiteboardStore((state) => state.activeTool);
-//   const toolOptions = useWhiteboardStore((state) => state.toolOptions);
-//   const addCanvasObject = useWhiteboardStore((state) => state.addCanvasObject);
-//   const pushHistory = useWhiteboardStore((state) => state.pushHistory);
-//   // State
-//   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;
-//   // Initialize canvas
-//   useCanvasInit({
-//     canvasRef,
-//     fabricCanvasRef,
-//     activeTool,
-//     suppressHistoryRef,
-//     isRestoringRef,
-//     pushHistory,
-//     setTasks,      // Passed so hook can load saved tasks
-//     setDocuments,  // Passed so hook can load saved docs
-//   });
-//   // 2. High-Efficiency Persistence (Auto-saving)
-// // This replaces the inline "saveState" listeners you had before
-// usePersistence({
-//   fabricCanvas: fabricCanvasRef,
-//   tasks,
-//   documents,
-//   pushHistory,
-//   isRestoringRef,
-//   suppressHistoryRef,
-// });
-// // 3. Tool management (Existing)
-// useToolManager({
-//   fabricCanvas: fabricCanvasRef,
-//   activeTool,
-//   toolOptions,
-//   eraserTraceRef,
-//   eraserPathRef,
-//   eraserPathPointsRef,
-//   eraserTargetsRef,
-// });
-//   // Drawing handlers
-//   const drawingHandlers = useDrawing({
-//     fabricCanvas: fabricCanvasRef,
-//     activeTool,
-//     toolOptions,
-//     isDrawingRef,
-//     startPointRef,
-//     currentShapeRef,
-//     suppressHistoryRef,
-//     pushHistory,
-//     addCanvasObject,
-//   });
-//   // Eraser handlers
-//   const eraserHandlers = useEraser({
-//     fabricCanvas: fabricCanvasRef,
-//     activeTool,
-//     toolOptions,
-//     eraserTraceRef,
-//     eraserTargetsRef,
-//     eraserActiveRef,
-//     eraserPathRef,
-//     eraserPathPointsRef,
-//     suppressHistoryRef,
-//     pushHistory,
-//   });
-//   // Zoom
-//   const { handleZoom } = useZoom({
-//     fabricCanvas: fabricCanvasRef,
-//     MIN_ZOOM,
-//     MAX_ZOOM,
-//     canvasZoom,
-//     canvasViewport,
-//     setCanvasZoom,
-//     setCanvasViewport,
-//   });
-//   // Pan
-//   usePan({
-//     fabricCanvas: fabricCanvasRef,
-//     activeTool,
-//     handleZoom,
-//     setCanvasViewport,
-//   });
-//   // Selection
-//   useSelection({
-//     fabricCanvas: fabricCanvasRef,
-//     activeTool,
-//     canvasZoom,
-//     canvasViewport,
-//     setSelectionBox,
-//     setSelectedCanvasObjects,
-//     isDrawingRef,
-//   });
-//   // Text style updates
-//   useTextStyle({
-//     fabricCanvas: fabricCanvasRef,
-//     toolOptions,
-//   });
-//   // Live updates
-//   useLiveUpdate({
-//     fabricCanvas: fabricCanvasRef,
-//     toolOptions,
-//   });
-//   // Mouse handlers
-//   useMouseHandlers({
-//     fabricCanvas: fabricCanvasRef,
-//     activeTool,
-//     toolOptions,
-//     drawingHandlers,
-//     eraserHandlers,
-//   });
-//   // Zoom controls
-//   const handleZoomIn = () => handleZoom(canvasZoom + ZOOM_STEP);
-//   const handleZoomOut = () => handleZoom(canvasZoom - ZOOM_STEP);
-//   const handleResetZoom = () => handleZoom(1);
-//   // Dropdown handlers
-//   const handleAddTaskFromDropdown = (taskTemplate: any) => {
-//     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 w-screen h-screen">
-//     <div
-//       ref={containerRef}
-//       className="relative w-full h-full overflow-hidden bg-[#0b0b0b]"
-//       style={{
-//         touchAction: "none",
-//         overscrollBehavior: "none",
-//       }}
-//     >
-//       <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>
-//   );
-// }
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { classRegistry } from "fabric";
+import { useWhiteboardStore } from "../../store/whiteboard-store";
+import WhiteboardToolbar from "../toolbar/whiteboard-toolbar";
+import ToolOptionsPanel from "../toolbar/tooloptions-panel";
+import CanvasOverlayLayer from "../node/custom-node-overlay-layer";
+import ZoomControls from "../zoomcontrol/zoom-control";
+import { Frame } from "../../lib/fabric-frame";
+// Import all hooks
+import { useCanvasInit } from "../../hooks/useCanvasInit";
+import { useToolManager } from "../../hooks/useToolManager";
+import { useDrawing } from "../../hooks/useDrawing";
+import { useEraser } from "../../hooks/useEraser";
+import { usePan } from "../../hooks/usePan";
+import { useZoom } from "../../hooks/useZoom";
+import { useSelection } from "../../hooks/useSelection";
+import { useTextStyle } from "../../hooks/useTextStyle";
+import { useLiveUpdate } from "../../hooks/useLiveUpdate";
+import { useMouseHandlers } from "../../hooks/useMouseHandlers";
+import { usePersistence } from "../../hooks/usePersistance";
+classRegistry.setClass(Frame, "frame");
+export default function FabricWhiteboard() {
+    // Refs
+    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 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);
+    const eraserPathPointsRef = useRef([]);
+    // Store
+    const activeTool = useWhiteboardStore((state) => state.activeTool);
+    const toolOptions = useWhiteboardStore((state) => state.toolOptions);
+    const addCanvasObject = useWhiteboardStore((state) => state.addCanvasObject);
+    const pushHistory = useWhiteboardStore((state) => state.pushHistory);
+    // State
+    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;
+    // Initialize canvas
+    useCanvasInit({
+        canvasRef,
+        fabricCanvasRef,
+        activeTool,
+        suppressHistoryRef,
+        isRestoringRef,
+        pushHistory,
+        setTasks, // Passed so hook can load saved tasks
+        setDocuments, // Passed so hook can load saved docs
+    });
+    // 2. High-Efficiency Persistence (Auto-saving)
+    // This replaces the inline "saveState" listeners you had before
+    usePersistence({
+        fabricCanvas: fabricCanvasRef,
+        tasks,
+        documents,
+        pushHistory,
+        isRestoringRef,
+        suppressHistoryRef,
+    });
+    // 3. Tool management (Existing)
+    useToolManager({
+        fabricCanvas: fabricCanvasRef,
+        activeTool,
+        toolOptions,
+        eraserTraceRef,
+        eraserPathRef,
+        eraserPathPointsRef,
+        eraserTargetsRef,
+    });
+    // Drawing handlers
+    const drawingHandlers = useDrawing({
+        fabricCanvas: fabricCanvasRef,
+        activeTool,
+        toolOptions,
+        isDrawingRef,
+        startPointRef,
+        currentShapeRef,
+        suppressHistoryRef,
+        pushHistory,
+        addCanvasObject,
+    });
+    // Eraser handlers
+    const eraserHandlers = useEraser({
+        fabricCanvas: fabricCanvasRef,
+        activeTool,
+        toolOptions,
+        eraserTraceRef,
+        eraserTargetsRef,
+        eraserActiveRef,
+        eraserPathRef,
+        eraserPathPointsRef,
+        suppressHistoryRef,
+        pushHistory,
+    });
+    // Zoom
+    const { handleZoom } = useZoom({
+        fabricCanvas: fabricCanvasRef,
+        MIN_ZOOM,
+        MAX_ZOOM,
+        canvasZoom,
+        canvasViewport,
+        setCanvasZoom,
+        setCanvasViewport,
+    });
+    // Pan
+    usePan({
+        fabricCanvas: fabricCanvasRef,
+        activeTool,
+        handleZoom,
+        setCanvasViewport,
+    });
+    // Selection
+    useSelection({
+        fabricCanvas: fabricCanvasRef,
+        activeTool,
+        canvasZoom,
+        canvasViewport,
+        setSelectionBox,
+        setSelectedCanvasObjects,
+        isDrawingRef,
+    });
+    // Text style updates
+    useTextStyle({
+        fabricCanvas: fabricCanvasRef,
+        toolOptions,
+    });
+    // Live updates
+    useLiveUpdate({
+        fabricCanvas: fabricCanvasRef,
+        toolOptions,
+    });
+    // Mouse handlers
+    useMouseHandlers({
+        fabricCanvas: fabricCanvasRef,
+        activeTool,
+        toolOptions,
+        drawingHandlers,
+        eraserHandlers,
+    });
+    // Zoom controls
+    const handleZoomIn = () => handleZoom(canvasZoom + ZOOM_STEP);
+    const handleZoomOut = () => handleZoom(canvasZoom - ZOOM_STEP);
+    const handleResetZoom = () => handleZoom(1);
+    // 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 w-screen h-screen", children: _jsxs("div", { ref: containerRef, className: "relative w-full h-full overflow-hidden bg-[#0b0b0b]", style: {
+                touchAction: "none",
+                overscrollBehavior: "none",
+            }, 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 }) })] })] }) }));
+}

package/dist/components/whiteboard/whiteboard.d.ts

@@ -1,2 +1 @@
-export default function FabricWhiteboard(): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=whiteboard.d.ts.map

package/dist/components/whiteboard/whiteboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"whiteboard.d.ts","sourceRoot":"","sources":["../../../src/components/whiteboard/whiteboard.tsx"],"names":[],"mappings":"AAwCA,MAAM,CAAC,OAAO,UAAU,gBAAgB,4CA6iCvC"}
+{"version":3,"file":"whiteboard.d.ts","sourceRoot":"","sources":["../../../src/components/whiteboard/whiteboard.tsx"],"names":[],"mappings":""}