@mhamz.01/easyflow-whiteboard 2.20.0 → 2.21.0

package/dist/lib/fabric-utils.d.ts

@@ -8,7 +8,7 @@ export declare const updateDrawingObject: (shape: FabricObject, toolType: string
     y: number;
 }) => void;
 export declare const deleteSelectedObjects: (canvas: Canvas) => void;
-export declare const exportCanvasToJSON: (canvas: Canvas) => void;
+export declare const exportCanvasToJSON: (_canvas: Canvas) => void;
 export declare const importCanvasFromJSON: (canvas: Canvas, json: string, callback?: () => void) => void;
 export declare const exportCanvasToImage: (canvas: Canvas, format?: "png" | "jpeg") => string;
 export declare const calculateDashArray: (strokeDashArray: number[] | null, strokeWidth: number) => number[] | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"fabric-utils.d.ts","sourceRoot":"","sources":["../../src/lib/fabric-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,YAAY,EAAwE,WAAW,EAAc,MAAM,QAAQ,CAAC;AAK7I,eAAO,MAAM,sBAAsB,GAAI,QAAQ,MAAM,WAkBpD,CAAC;AAQF,eAAO,MAAM,mBAAmB,GAC9B,OAAO,YAAY,EACnB,UAAU,MAAM,EAChB,YAAY;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACpC,cAAc;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,SAwEvC,CAAC;AAKF,eAAO,MAAM,qBAAqB,GAAI,QAAQ,MAAM,SASnD,CAAC;AAGF,eAAO,MAAM,kBAAkB,GAAI,QAAQ,MAAM,SAEhD,CAAC;AAGF,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,MAAM,EACd,MAAM,MAAM,EACZ,WAAW,MAAM,IAAI,SAMtB,CAAC;AAGF,eAAO,MAAM,mBAAmB,GAC9B,QAAQ,MAAM,EACd,SAAQ,KAAK,GAAG,MAAc,WAO/B,CAAC;AAUF,eAAO,MAAM,kBAAkB,GAC7B,iBAAiB,MAAM,EAAE,GAAG,IAAI,EAChC,aAAa,MAAM,KAClB,MAAM,EAAE,GAAG,SAKb,CAAC;AAKF,eAAO,MAAM,OAAO,GAClB,QAAQ,MAAM,EACd,SAAS;IACP,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,SAmBF,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAU,QAAQ,MAAM,EAAE,KAAK,MAAM,iJAuCjE,CAAC;AAGF,eAAO,MAAM,WAAW,GAAI,QAAQ,MAAM,SAIzC,CAAC;AAGF,eAAO,MAAM,UAAU,GAAI,QAAQ,MAAM,EAAE,WAAW,MAAM,SAG3D,CAAC;AAGF,eAAO,MAAM,kBAAkB,GAAI,QAAQ,MAAM,SAoBhD,CAAC;AAIF,eAAO,MAAM,iBAAiB,GAAU,QAAQ,MAAM,EAAE,SAAS,MAAM,kBAoFtE,CAAC"}
+{"version":3,"file":"fabric-utils.d.ts","sourceRoot":"","sources":["../../src/lib/fabric-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EAAE,YAAY,EACN,WAAW,EAC1B,MAAM,QAAQ,CAAC;AAMhB,eAAO,MAAM,sBAAsB,GAAI,QAAQ,MAAM,WAgBpD,CAAC;AAIF,eAAO,MAAM,mBAAmB,GAC9B,OAAc,YAAY,EAC1B,UAAc,MAAM,EACpB,YAAc;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACtC,cAAc;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,SAsDvC,CAAC;AAIF,eAAO,MAAM,qBAAqB,GAAI,QAAQ,MAAM,SAOnD,CAAC;AAIF,eAAO,MAAM,kBAAkB,GAAI,SAAS,MAAM,SAEjD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,QAAQ,MAAM,EAAE,MAAM,MAAM,EAAE,WAAW,MAAM,IAAI,SAKvF,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,QAAQ,MAAM,EAAE,SAAQ,KAAK,GAAG,MAAc,WAEjF,CAAC;AAIF,eAAO,MAAM,kBAAkB,GAC7B,iBAAiB,MAAM,EAAE,GAAG,IAAI,EAChC,aAAa,MAAM,KAClB,MAAM,EAAE,GAAG,SAIb,CAAC;AAIF,eAAO,MAAM,OAAO,GAClB,QAAQ,MAAM,EACd,SAAS;IACP,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,CAAC,EAAE,MAAM,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CACzD,SAgBF,CAAC;AAIF,eAAO,MAAM,gBAAgB,GAAU,QAAQ,MAAM,EAAE,KAAK,MAAM,iJAoBjE,CAAC;AAIF,eAAO,MAAM,WAAW,GAAI,QAAQ,MAAM,SAIzC,CAAC;AAIF,eAAO,MAAM,UAAU,GAAI,QAAQ,MAAM,EAAE,WAAW,MAAM,SAG3D,CAAC;AAIF,eAAO,MAAM,kBAAkB,GAAI,QAAQ,MAAM,SAqChD,CAAC;AAIF,eAAO,MAAM,iBAAiB,GAAU,QAAQ,MAAM,EAAE,SAAS,MAAM,kBAqCtE,CAAC"}

package/dist/lib/fabric-utils.js

@@ -1,7 +1,7 @@
-import { FabricObject, Text, Line, Group, IText, PencilBrush, FabricImage, util } from "fabric";
-// Initialize canvas with default settings
+import { FabricObject, Text, Line, Group, IText, FabricImage, util, } from "fabric";
+import { PencilBrush } from "fabric";
+// ── Canvas initialization ─────────────────────────────────────────────────────
 export const initializeFabricCanvas = (canvas) => {
-    // Set default object properties
     FabricObject.prototype.set({
         transparentCorners: false,
         borderColor: "#3b82f6",
@@ -10,49 +10,40 @@ export const initializeFabricCanvas = (canvas) => {
         cornerStyle: "circle",
         padding: 4,
     });
-    // Enable object caching for better performance
+    // Object caching — composites complex objects into a cached bitmap.
+    // Dramatically reduces repaint cost for objects with shadows, gradients, etc.
     FabricObject.prototype.objectCaching = true;
-    // Initialize drawing brush
     canvas.freeDrawingBrush = new PencilBrush(canvas);
     return canvas;
 };
-// Update shape dimensions during drag-to-draw
+// ── updateDrawingObject ───────────────────────────────────────────────────────
 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 rect = shape;
             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),
+                left: startPoint.x + dx / 2,
+                top: startPoint.y + dy / 2,
+                width: Math.max(0, Math.abs(dx) - strokeW),
+                height: Math.max(0, Math.abs(dy) - strokeW),
                 originX: "center",
                 originY: "center",
             });
+            // ── PERF FIX 1: Single setCoords() call ──────────────────────────────
+            // Old code called setCoords() inside each case AND again at the bottom
+            // of the function — double call on every mousemove during drawing.
             rect.setCoords();
-            break;
+            return; // early return skips the bottom setCoords()
         }
         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,
@@ -61,61 +52,53 @@ export const updateDrawingObject = (shape, toolType, startPoint, currentPoint) =
                 originY: "center",
             });
             circle.setCoords();
-            break;
+            return;
         }
         case "line":
-        case "arrow":
+        case "arrow": {
             if (shape instanceof Line) {
                 shape.set({
-                    x1: startPoint.x,
-                    y1: startPoint.y,
-                    x2: currentPoint.x,
-                    y2: currentPoint.y,
+                    x1: startPoint.x, y1: startPoint.y,
+                    x2: currentPoint.x, y2: currentPoint.y,
                 });
             }
-            break;
+            shape.setCoords();
+            return;
+        }
     }
-    shape.setCoords();
 };
-// Delete selected objects
+// ── deleteSelectedObjects ─────────────────────────────────────────────────────
 export const deleteSelectedObjects = (canvas) => {
     const activeObjects = canvas.getActiveObjects();
-    if (activeObjects.length) {
-        activeObjects.forEach((obj) => {
-            canvas.remove(obj);
-        });
-        canvas.discardActiveObject();
-        canvas.renderAll();
-    }
+    if (!activeObjects.length)
+        return;
+    activeObjects.forEach((obj) => canvas.remove(obj));
+    canvas.discardActiveObject();
+    // ── PERF FIX 2: requestRenderAll instead of renderAll ─────────────────────
+    canvas.requestRenderAll();
 };
-// Export canvas as JSON (save to database)
-export const exportCanvasToJSON = (canvas) => {
-    //   return JSON.stringify(canvas.toJSON(["data"]));
+// ── Export / Import ───────────────────────────────────────────────────────────
+export const exportCanvasToJSON = (_canvas) => {
+    // Intentionally left as a no-op stub — implement when needed
 };
-// Import canvas from JSON
 export const importCanvasFromJSON = (canvas, json, callback) => {
     canvas.loadFromJSON(json).then(() => {
-        canvas.renderAll();
+        canvas.requestRenderAll(); // PERF FIX 3
         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
-    });
+    return canvas.toDataURL({ format, quality: 1, multiplier: 2 });
 };
-// lib/fabric-utils.ts
+// ── calculateDashArray ────────────────────────────────────────────────────────
 export const calculateDashArray = (strokeDashArray, strokeWidth) => {
     if (!strokeDashArray)
         return undefined;
     const multiplier = Math.max(strokeWidth, 1);
-    return strokeDashArray.map(value => value * multiplier);
+    return strokeDashArray.map((v) => v * multiplier);
 };
-// Add text at specific position
+// ── addText ───────────────────────────────────────────────────────────────────
 export const addText = (canvas, options) => {
     const text = new IText(options.text || "Double click to edit", {
         left: options.x || 100,
@@ -124,147 +107,108 @@ export const addText = (canvas, options) => {
         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
+    canvas.requestRenderAll(); // PERF FIX 4
     text.enterEditing();
     text.selectAll();
 };
+// ── addImageToCanvas ──────────────────────────────────────────────────────────
 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
-        });
+        img.set({ left: centerX, top: centerY, originX: "center", originY: "center", padding: 10 });
         canvas.add(img);
         canvas.setActiveObject(img);
-        canvas.renderAll();
+        canvas.requestRenderAll(); // PERF FIX 5
         return img;
     }
     catch (error) {
         console.error("Image load failed", error);
     }
 };
-// Clear entire canvas
+// ── clearCanvas ───────────────────────────────────────────────────────────────
 export const clearCanvas = (canvas) => {
     canvas.clear();
     canvas.backgroundColor = "transparent";
-    canvas.renderAll();
+    canvas.requestRenderAll(); // PERF FIX 6
 };
-// Zoom canvas
+// ── zoomCanvas ────────────────────────────────────────────────────────────────
 export const zoomCanvas = (canvas, zoomLevel) => {
     canvas.setZoom(zoomLevel);
-    canvas.renderAll();
+    canvas.requestRenderAll(); // PERF FIX 7
 };
-// Reset view to fit all objects
+// ── fitCanvasToObjects ────────────────────────────────────────────────────────
 export const fitCanvasToObjects = (canvas) => {
     const objects = canvas.getObjects();
-    if (objects.length === 0)
+    if (!objects.length)
         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));
+    // ── PERF FIX 8: Use getBoundingRect instead of creating a Group ───────────
+    // Old code: new Group(objects) — instantiates a full Fabric Group object
+    // with layout recalculation for every object just to get bounds. O(n) object
+    // creation + layout for a measurement-only operation.
+    // getBoundingRect() computes bounds from existing coords — no allocation.
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const obj of objects) {
+        const bounds = obj.getBoundingRect();
+        if (bounds.left < minX)
+            minX = bounds.left;
+        if (bounds.top < minY)
+            minY = bounds.top;
+        if (bounds.left + bounds.width > maxX)
+            maxX = bounds.left + bounds.width;
+        if (bounds.top + bounds.height > maxY)
+            maxY = bounds.top + bounds.height;
+    }
+    const contentW = maxX - minX;
+    const contentH = maxY - minY;
+    const padding = 100;
+    const zoom = Math.min(canvas.getWidth() / (contentW + padding), canvas.getHeight() / (contentH + padding));
     canvas.setZoom(zoom);
-    canvas.viewportCenterObject(group);
-    //   group.destroy();
-    canvas.renderAll();
+    // Center the content
+    const vpt = canvas.viewportTransform;
+    if (vpt) {
+        vpt[4] = (canvas.getWidth() - contentW * zoom) / 2 - minX * zoom;
+        vpt[5] = (canvas.getHeight() - contentH * zoom) / 2 - minY * zoom;
+    }
+    canvas.requestRenderAll();
 };
+// ── addWelcomeContent ─────────────────────────────────────────────────────────
 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 logoImg = await FabricImage.fromURL(logoUrl, { crossOrigin: "anonymous" });
     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
+    logoImg.set({ scaleX: scale, scaleY: scale, originX: "center", originY: "center", top: -120 });
     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",
+        top: -20, fontSize: 84, fontFamily: "'cursive', 'Segoe UI', Roboto, sans-serif",
+        fontWeight: "700", fill: "#029AFF", charSpacing: -20, 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",
+        top: 55, fontSize: 38, fontFamily: "'Inter', 'Segoe UI', Roboto, sans-serif",
+        fontWeight: "300", 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",
+        top: 110, fontSize: 12, fontFamily: "monospace",
+        fontWeight: "600", fill: "#9ca3af", charSpacing: 200, 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,
+        left: centerX, top: centerY + 20,
+        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
-    }, {
+    heroGroup.animate({ opacity: 1, top: centerY }, {
         duration: 1200,
         easing: util.ease.easeOutQuart,
         onChange: () => canvas.requestRenderAll(),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mhamz.01/easyflow-whiteboard",
-    "version": "2.20.0",
+    "version": "2.21.0",
     "description": "A feature-rich whiteboard component built with Fabric.js and React",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",