@mhamz.01/easyflow-whiteboard 1.0.0

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

@@ -0,0 +1,207 @@
+"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 (_jsxs("div", { ref: containerRef, className: "relative w-full h-screen 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

@@ -0,0 +1 @@
+//# sourceMappingURL=whiteboard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"whiteboard.d.ts","sourceRoot":"","sources":["../../../src/components/whiteboard/whiteboard.tsx"],"names":[],"mappings":""}