@mhamz.01/easyflow-whiteboard 1.0.0

package/dist/lib/fabric-utils.js

@@ -0,0 +1,273 @@
+import { FabricObject, Line, Group, IText, PencilBrush, FabricImage, util } from "fabric";
+import { Text } from "fabric";
+// Initialize canvas with default settings
+export const initializeFabricCanvas = (canvas) => {
+    // Set default object properties
+    FabricObject.prototype.set({
+        transparentCorners: false,
+        borderColor: "#3b82f6",
+        cornerColor: "#3b82f6",
+        cornerSize: 8,
+        cornerStyle: "circle",
+        padding: 4,
+    });
+    // Enable object caching for better performance
+    FabricObject.prototype.objectCaching = true;
+    // Initialize drawing brush
+    canvas.freeDrawingBrush = new PencilBrush(canvas);
+    return canvas;
+};
+// Update shape dimensions during drag-to-draw
+export const updateDrawingObject = (shape, toolType, startPoint, currentPoint) => {
+    const width = currentPoint.x - startPoint.x;
+    const height = currentPoint.y - startPoint.y;
+    switch (toolType) {
+        case "rectangle":
+        case "frame": {
+            const rect = shape; // or Frame
+            const dx = currentPoint.x - startPoint.x;
+            const dy = currentPoint.y - startPoint.y;
+            // 1. Calculate the center point (Midpoint)
+            const midX = startPoint.x + dx / 2;
+            const midY = startPoint.y + dy / 2;
+            // 2. Calculate dimensions
+            // We subtract a tiny fraction of the strokeWidth if you want the 
+            // outer visual edge to be exactly under the pixel of the cursor.
+            const strokeW = rect.strokeWidth || 0;
+            const width = Math.abs(dx) - strokeW;
+            const height = Math.abs(dy) - strokeW;
+            rect.set({
+                left: midX,
+                top: midY,
+                width: Math.max(0, width),
+                height: Math.max(0, height),
+                originX: "center",
+                originY: "center",
+            });
+            rect.setCoords();
+            break;
+        }
+        case "circle": {
+            const circle = shape;
+            const dx = currentPoint.x - startPoint.x;
+            const dy = currentPoint.y - startPoint.y;
+            // Radius from diagonal distance
+            const radius = Math.sqrt(dx * dx + dy * dy) / 2;
+            // Center at midpoint
+            circle.set({
+                left: startPoint.x + dx / 2,
+                top: startPoint.y + dy / 2,
+                radius: Math.abs(radius),
+                originX: "center",
+                originY: "center",
+            });
+            circle.setCoords();
+            break;
+        }
+        case "line":
+        case "arrow":
+            if (shape instanceof Line) {
+                shape.set({
+                    x1: startPoint.x,
+                    y1: startPoint.y,
+                    x2: currentPoint.x,
+                    y2: currentPoint.y,
+                });
+            }
+            break;
+    }
+    shape.setCoords();
+};
+// Delete selected objects
+export const deleteSelectedObjects = (canvas) => {
+    const activeObjects = canvas.getActiveObjects();
+    if (activeObjects.length) {
+        activeObjects.forEach((obj) => {
+            canvas.remove(obj);
+        });
+        canvas.discardActiveObject();
+        canvas.renderAll();
+    }
+};
+// Export canvas as JSON (save to database)
+export const exportCanvasToJSON = (canvas) => {
+    //   return JSON.stringify(canvas.toJSON(["data"]));
+};
+// Import canvas from JSON
+export const importCanvasFromJSON = (canvas, json, callback) => {
+    canvas.loadFromJSON(json).then(() => {
+        canvas.renderAll();
+        if (callback)
+            callback();
+    });
+};
+// Export canvas as image
+export const exportCanvasToImage = (canvas, format = "png") => {
+    return canvas.toDataURL({
+        format,
+        quality: 1,
+        multiplier: 2, // 2x resolution for better quality
+    });
+};
+// lib/fabric-utils.ts
+export const calculateDashArray = (strokeDashArray, strokeWidth) => {
+    if (!strokeDashArray)
+        return undefined;
+    const multiplier = Math.max(strokeWidth, 1);
+    return strokeDashArray.map(value => value * multiplier);
+};
+// Add text at specific position
+export const addText = (canvas, options) => {
+    const text = new IText(options.text || "Double click to edit", {
+        left: options.x || 100,
+        top: options.y || 100,
+        fontSize: options.fontSize || 16,
+        fontFamily: options.fontFamily || "Arial",
+        fontWeight: options.fontWeight || "400",
+        fill: options.color || "#000000",
+        // textAlign: options.textAlign || "left",
+    });
+    canvas.add(text);
+    canvas.setActiveObject(text);
+    canvas.renderAll();
+    // Auto-enter edit mode
+    text.enterEditing();
+    text.selectAll();
+};
+export const addImageToCanvas = async (canvas, url) => {
+    if (!canvas)
+        return;
+    // 1. Get the current Viewport Transform (the Pan and Zoom matrix)
+    const vpt = canvas.viewportTransform;
+    const zoom = canvas.getZoom();
+    // 2. Calculate the exact Scene coordinates for the center
+    // Formula: (-PanOffset / Zoom) + (CanvasDimension / 2 / Zoom)
+    const centerX = (-vpt[4] + canvas.width / 2) / zoom;
+    const centerY = (-vpt[5] + canvas.height / 2) / zoom;
+    try {
+        const img = await FabricImage.fromURL(url);
+        // 3. Dynamic Scaling (Make it fit roughly 40% of the screen height)
+        const targetHeight = (canvas.height / zoom) * 0.4;
+        img.scaleToHeight(targetHeight);
+        img.set({
+            left: centerX,
+            top: centerY,
+            originX: "center",
+            originY: "center",
+            // cornerStyle: "circle",
+            // transparentCorners: false,
+            // cornerColor: "#3b82f6", // Nice modern blue
+            // cornerStrokeColor: "#ffffff",
+            padding: 10
+        });
+        canvas.add(img);
+        canvas.setActiveObject(img);
+        canvas.renderAll();
+        return img;
+    }
+    catch (error) {
+        console.error("Image load failed", error);
+    }
+};
+// Clear entire canvas
+export const clearCanvas = (canvas) => {
+    canvas.clear();
+    canvas.backgroundColor = "transparent";
+    canvas.renderAll();
+};
+// Zoom canvas
+export const zoomCanvas = (canvas, zoomLevel) => {
+    canvas.setZoom(zoomLevel);
+    canvas.renderAll();
+};
+// Reset view to fit all objects
+export const fitCanvasToObjects = (canvas) => {
+    const objects = canvas.getObjects();
+    if (objects.length === 0)
+        return;
+    const group = new Group(objects);
+    const groupWidth = group.width || 0;
+    const groupHeight = group.height || 0;
+    const canvasWidth = canvas.getWidth();
+    const canvasHeight = canvas.getHeight();
+    const zoom = Math.min(canvasWidth / (groupWidth + 100), canvasHeight / (groupHeight + 100));
+    canvas.setZoom(zoom);
+    canvas.viewportCenterObject(group);
+    //   group.destroy();
+    canvas.renderAll();
+};
+export const addWelcomeContent = async (canvas, logoUrl) => {
+    const centerX = canvas.getWidth() / 2;
+    const centerY = canvas.getHeight() / 2;
+    // 1. Load the Logo Image
+    const logoImg = await FabricImage.fromURL(logoUrl, {
+        crossOrigin: 'anonymous'
+    });
+    // Scale logo to fit (e.g., 80px width)
+    const scale = 60 / logoImg.width;
+    logoImg.set({
+        scaleX: scale,
+        scaleY: scale,
+        originX: "center",
+        originY: "center",
+        top: -120, // Relative to group center
+    });
+    // 2. Creative Background "Aura" (The Glow)
+    // const aura = new Circle({
+    //   radius: 100,
+    //   fill: "radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(255, 255, 255, 0) 70%)",
+    //   originX: "center",
+    //   originY: "center",
+    //   top: -120,
+    //   selectable: false,
+    //   evented: false,
+    // });
+    // 3. High-End Typography
+    const mainTitle = new Text("EasyFlow", {
+        top: -20,
+        fontSize: 84,
+        fontFamily: "'cursive', 'Segoe UI', Roboto, sans-serif",
+        fontWeight: "700",
+        fill: "#029AFF",
+        charSpacing: -20, // Tight kerning for a modern look
+        originX: "center",
+    });
+    const subTitle = new Text("Whiteboard", {
+        top: 55,
+        fontSize: 38,
+        fontFamily: "'Inter', 'Segoe UI', Roboto, sans-serif",
+        fontWeight: "300", // Thin contrast against the bold "EasyFlow"
+        fill: "#fff",
+        originX: "center",
+    });
+    const hint = new Text("SELECT A TOOL TO START CREATING", {
+        top: 110,
+        fontSize: 12,
+        fontFamily: "monospace", // Techy/Creative feel
+        fontWeight: "600",
+        fill: "#9ca3af",
+        charSpacing: 200, // Wide spacing for the hint
+        originX: "center",
+    });
+    // 4. Create Master Hero Group
+    const heroGroup = new Group([logoImg, mainTitle, subTitle, hint], {
+        left: centerX,
+        top: centerY + 20, // Start slightly lower for "float-up" animation
+        originX: "center",
+        originY: "center",
+        selectable: false,
+        evented: false,
+        opacity: 0,
+    });
+    heroGroup.id = "welcome-hero";
+    canvas.add(heroGroup);
+    // 5. "Float & Fade" Animation
+    heroGroup.animate({
+        opacity: 1,
+        top: centerY // Moves up 20px while fading in
+    }, {
+        duration: 1200,
+        easing: util.ease.easeOutQuart,
+        onChange: () => canvas.requestRenderAll(),
+    });
+};

package/dist/lib/utils.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAG5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/store/whiteboard-store.d.ts

@@ -0,0 +1,99 @@
+import { FabricObject } from "fabric";
+export type Tool = "select" | "pan" | "pen" | "rectangle" | "circle" | "line" | "arrow" | "frame" | "text" | "image" | "eraser" | "connector" | "undo" | "redo";
+export type ActiveDropdown = "task" | "document" | null;
+export interface ToolOptions {
+    pen: {
+        color: string;
+        strokeWidth: number;
+        opacity: number;
+        strokeDashArray: number[] | null;
+    };
+    rectangle: {
+        fillColor: string;
+        strokeColor: string;
+        strokeWidth: number;
+        strokeDashArray: number[] | null;
+    };
+    circle: {
+        fillColor: string;
+        strokeColor: string;
+        strokeWidth: number;
+        strokeDashArray: number[] | null;
+    };
+    frame: {
+        fillColor: string;
+        strokeColor: string;
+        strokeWidth: number;
+        strokeDashArray: number[] | null;
+    };
+    text: {
+        fontSize: number;
+        fontFamily: string;
+        fontWeight: string;
+        textAlign: string;
+        color: string;
+    };
+    image: {
+        opacity: number;
+        filters: string[];
+    };
+    eraser: {
+        size: number;
+    };
+    line: {
+        strokeColor: string;
+        strokeWidth: number;
+        strokeDashArray: number[] | null;
+    };
+    arrow: {
+        strokeColor: string;
+        strokeWidth: number;
+        strokeDashArray: number[] | null;
+    };
+}
+interface WhiteboardState {
+    activeTool: Tool;
+    setActiveTool: (tool: Tool) => void;
+    activeDropdown: ActiveDropdown;
+    setActiveDropdown: (id: ActiveDropdown) => void;
+    selectedObjectType: string | null;
+    setSelectedObjectType: (type: string | null) => void;
+    canvasObjects: FabricObject[];
+    addCanvasObject: (obj: FabricObject) => void;
+    removeCanvasObject: (obj: FabricObject) => void;
+    clearCanvasObjects: () => void;
+    toolOptions: ToolOptions;
+    setToolOption: <T extends keyof ToolOptions>(tool: T, option: keyof ToolOptions[T], value: any) => void;
+    history: string[];
+    historyIndex: number;
+    canUndo: boolean;
+    canRedo: boolean;
+    pushHistory: (state: string) => void;
+    undo: () => string | null;
+    redo: () => string | null;
+    setCanUndo: (canUndo: boolean) => void;
+    setCanRedo: (canRedo: boolean) => void;
+    zoom: number;
+    setZoom: (zoom: number) => void;
+    selectedObjects: FabricObject[];
+    setSelectedObjects: (objects: FabricObject[]) => void;
+}
+export declare const useWhiteboardStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<WhiteboardState>, "setState" | "devtools"> & {
+    setState(partial: WhiteboardState | Partial<WhiteboardState> | ((state: WhiteboardState) => WhiteboardState | Partial<WhiteboardState>), replace?: false | undefined, action?: (string | {
+        [x: string]: unknown;
+        [x: number]: unknown;
+        [x: symbol]: unknown;
+        type: string;
+    }) | undefined): void;
+    setState(state: WhiteboardState | ((state: WhiteboardState) => WhiteboardState), replace: true, action?: (string | {
+        [x: string]: unknown;
+        [x: number]: unknown;
+        [x: symbol]: unknown;
+        type: string;
+    }) | undefined): void;
+    devtools: {
+        cleanup: () => void;
+    };
+}>;
+export {};
+//# sourceMappingURL=whiteboard-store.d.ts.map

package/dist/store/whiteboard-store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"whiteboard-store.d.ts","sourceRoot":"","sources":["../../src/store/whiteboard-store.ts"],"names":[],"mappings":"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"}

package/dist/store/whiteboard-store.js

@@ -0,0 +1,137 @@
+import { create } from "zustand";
+import { devtools } from "zustand/middleware";
+const defaultToolOptions = {
+    pen: {
+        color: "#ffffff",
+        strokeWidth: 2,
+        opacity: 1,
+        strokeDashArray: null,
+    },
+    rectangle: {
+        fillColor: "transparent",
+        strokeColor: "#ffffff",
+        strokeWidth: 2,
+        strokeDashArray: null,
+    },
+    circle: {
+        fillColor: "transparent",
+        strokeColor: "#ffffff",
+        strokeWidth: 2,
+        strokeDashArray: null,
+    },
+    frame: {
+        fillColor: "#FFFFFF",
+        strokeColor: "#E5E7EB",
+        strokeWidth: 1,
+        strokeDashArray: null,
+    },
+    text: {
+        fontSize: 24,
+        fontFamily: "cursive",
+        color: "#ffffff",
+        fontWeight: "400",
+        textAlign: "left",
+    },
+    image: {
+        opacity: 1,
+        filters: [],
+    },
+    eraser: {
+        size: 20,
+    },
+    line: {
+        strokeColor: "#ffffff",
+        strokeWidth: 2,
+        strokeDashArray: null,
+    }, // ← ADD THIS
+    arrow: {
+        strokeColor: "#ffffff",
+        strokeWidth: 2,
+        strokeDashArray: null,
+    }, // ← ADD THIS
+};
+export const useWhiteboardStore = create()(devtools((set, get) => ({
+    // Tool state
+    activeTool: "select",
+    setActiveTool: (tool) => set({ activeTool: tool }),
+    // Selected object type (for editing)
+    selectedObjectType: null,
+    setSelectedObjectType: (type) => set({ selectedObjectType: type }),
+    // Canvas objects
+    canvasObjects: [],
+    addCanvasObject: (obj) => set((state) => ({
+        canvasObjects: [...state.canvasObjects, obj],
+    })),
+    removeCanvasObject: (obj) => set((state) => ({
+        canvasObjects: state.canvasObjects.filter((o) => o !== obj),
+    })),
+    clearCanvasObjects: () => set({ canvasObjects: [] }),
+    // Tool options
+    toolOptions: defaultToolOptions,
+    setToolOption: (tool, option, value) => set((state) => ({
+        toolOptions: {
+            ...state.toolOptions,
+            [tool]: {
+                ...state.toolOptions[tool],
+                [option]: value,
+            },
+        },
+    })),
+    // History
+    history: [],
+    historyIndex: -1,
+    canUndo: false,
+    canRedo: false,
+    pushHistory: (state) => {
+        const { history, historyIndex } = get();
+        // Slice off any redo states ahead of current index
+        const newHistory = history.slice(0, historyIndex + 1);
+        newHistory.push(state);
+        set({
+            history: newHistory,
+            historyIndex: newHistory.length - 1,
+            // Can undo if there is at least 1 previous state (index > 0)
+            canUndo: newHistory.length > 1,
+            canRedo: false,
+        });
+    },
+    // Sets the selected dropdown (task/document) - used to auto-switch back to select tool when closing
+    activeDropdown: null,
+    setActiveDropdown: (id) => set({
+        activeDropdown: id,
+    }),
+    undo: () => {
+        const { history, historyIndex } = get();
+        // Must have a previous state to go back to
+        if (historyIndex > 0) {
+            const newIndex = historyIndex - 1;
+            set({
+                historyIndex: newIndex,
+                canUndo: newIndex > 0,
+                canRedo: true,
+            });
+            return history[newIndex];
+        }
+        return null;
+    },
+    redo: () => {
+        const { history, historyIndex } = get();
+        if (historyIndex < history.length - 1) {
+            const newIndex = historyIndex + 1;
+            set({
+                historyIndex: newIndex,
+                canUndo: true,
+                canRedo: newIndex < history.length - 1,
+            });
+            return history[newIndex];
+        }
+        return null;
+    },
+    setCanUndo: (v) => set({ canUndo: v }),
+    setCanRedo: (v) => set({ canRedo: v }),
+    // Zoom
+    zoom: 1,
+    setZoom: (zoom) => set({ zoom }),
+    selectedObjects: [],
+    setSelectedObjects: (objects) => set({ selectedObjects: objects }),
+}), { name: "fabric-whiteboard-store" }));

package/dist/types/canvas-node.d.ts

@@ -0,0 +1,24 @@
+export interface BaseNode {
+    id: string;
+    x: number;
+    y: number;
+}
+export interface TaskNodeData extends BaseNode {
+    type: "task";
+    title: string;
+    status: "todo" | "in-progress" | "done";
+    assignee?: string;
+    project?: string;
+    priority?: "low" | "medium" | "high";
+    dueDate?: string;
+}
+export interface DocumentNodeData extends BaseNode {
+    type: "document";
+    title: string;
+    project: string;
+    breadcrumb?: string[];
+    preview: string;
+    updatedAt?: string;
+}
+export type CanvasNode = TaskNodeData | DocumentNodeData;
+//# sourceMappingURL=canvas-node.d.ts.map

package/dist/types/canvas-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-node.d.ts","sourceRoot":"","sources":["../../src/types/canvas-node.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,YAAa,SAAQ,QAAQ;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,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,gBAAiB,SAAQ,QAAQ;IAChD,IAAI,EAAE,UAAU,CAAC;IACjB,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;CACpB;AAED,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,gBAAgB,CAAC"}

package/dist/types/canvas-node.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,34 @@
+{
+    "name": "@mhamz.01/easyflow-whiteboard",
+    "version": "1.0.0",
+    "description": "A feature-rich whiteboard component built with Fabric.js and React",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "files": ["dist"],
+    "keywords": ["whiteboard", "canvas", "fabric", "react", "drawing"],
+    "author": "Your Name",
+    "license": "MIT",
+    "scripts": {
+      "build": "tsc",
+      "prepublishOnly": "npm run build"
+    },
+    "peerDependencies": {
+      "react": "^18.0.0 || ^19.0.0",
+      "react-dom": "^18.0.0 || ^19.0.0",
+      "fabric": "^7.0.0",
+      "zustand": "^5.0.0"
+    },
+    "dependencies": {
+      "lucide-react": "^0.563.0",
+      "clsx": "^2.1.1",
+      "tailwind-merge": "^3.4.0",
+      "class-variance-authority": "^0.7.1"
+    },
+    "devDependencies": {
+      "@types/react": "^19.0.0",
+      "@types/react-dom": "^19.0.0",
+      "@types/fabric": "^5.3.11",
+      "@types/node": "^20.0.0",
+      "typescript": "^5.0.0"
+    }
+  }