@mhamz.01/easyflow-whiteboard 2.18.0 → 2.19.0

package/dist/hooks/useDrawing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDrawing.d.ts","sourceRoot":"","sources":["../../src/hooks/useDrawing.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,iBAAiB,EAAsB,MAAM,QAAQ,CAAC;AAKrF,UAAU,eAAe;IACvB,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,GAAG,CAAC;IACjB,YAAY,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACjC,aAAa,EAAE,SAAS,CAAC;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC,CAAC;IAC1D,eAAe,EAAE,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC;IAChD,kBAAkB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACvC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,UAAU,GAAI,4IAUxB,eAAe;2BACc,iBAAiB;2BAsHjB,iBAAiB;;CA8ChD,CAAC"}
+{"version":3,"file":"useDrawing.d.ts","sourceRoot":"","sources":["../../src/hooks/useDrawing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,iBAAiB,EAAsB,MAAM,QAAQ,CAAC;AAMrF,UAAU,eAAe;IACvB,YAAY,EAAQ,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7C,UAAU,EAAU,MAAM,CAAC;IAC3B,WAAW,EAAS,GAAG,CAAC;IACxB,YAAY,EAAQ,SAAS,CAAC,OAAO,CAAC,CAAC;IACvC,aAAa,EAAO,SAAS,CAAC;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC,CAAC;IAC/D,eAAe,EAAK,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC;IACnD,kBAAkB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACvC,WAAW,EAAS,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,eAAe,EAAK,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,UAAU,GAAI,4IAUxB,eAAe;2BAmBS,iBAAiB;2BAmGjB,iBAAiB;;CA0C3C,CAAC"}

package/dist/hooks/useDrawing.js

@@ -1,142 +1,147 @@
+import { useRef } from "react";
 import { Rect, Circle, Line } from "fabric";
 import { Frame } from "../lib/fabric-frame";
 import { Arrow } from "../lib/fabric-arrow";
 import { calculateDashArray, updateDrawingObject, addText } from "../lib/fabric-utils";
 import { useWhiteboardStore } from "../store/whiteboard-store";
 export const useDrawing = ({ fabricCanvas, activeTool, toolOptions, isDrawingRef, startPointRef, currentShapeRef, suppressHistoryRef, pushHistory, addCanvasObject, }) => {
-    const handleMouseDown = (opt) => {
-        const canvas = fabricCanvas.current;
-        if (!canvas)
-            return;
-        const pointer = canvas.getScenePoint(opt.e);
-        if (opt.target || canvas.getActiveObject())
-            return;
-        // Text tool
-        if (activeTool === "text") {
-            addText(canvas, {
-                x: pointer.x,
-                y: pointer.y,
-                fontSize: toolOptions.text.fontSize,
-                fontFamily: toolOptions.text.fontFamily,
-                fontWeight: toolOptions.text.fontWeight,
-                color: toolOptions.text.color,
-                textAlign: toolOptions.text.textAlign,
-            });
-            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 = 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,
-                    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,
-                    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,
-                    stroke: toolOptions.frame.strokeColor,
-                    strokeWidth: toolOptions.frame.strokeWidth,
-                    strokeDashArray: toolOptions.frame.strokeDashArray
-                        ? [...toolOptions.frame.strokeDashArray]
-                        : undefined,
-                    fill: toolOptions.frame.fillColor,
-                    selectable: false,
+    // ── PERF FIX 1: Stable refs for all props ────────────────────────────────
+    // These plain handler functions are recreated every render. useMouseHandlers
+    // puts drawingHandlers in its deps array, causing all 5 canvas listeners to
+    // re-register on every render. Wrapping in refs makes the returned object
+    // referentially stable — useMouseHandlers can safely use [] deps.
+    const activeToolRef = useRef(activeTool);
+    const toolOptionsRef = useRef(toolOptions);
+    const pushHistoryRef = useRef(pushHistory);
+    const addCanvasObjectRef = useRef(addCanvasObject);
+    activeToolRef.current = activeTool;
+    toolOptionsRef.current = toolOptions;
+    pushHistoryRef.current = pushHistory;
+    addCanvasObjectRef.current = addCanvasObject;
+    // ── Stable handler refs — identity never changes ──────────────────────────
+    const handlersRef = useRef({
+        handleMouseDown: (opt) => {
+            const canvas = fabricCanvas.current;
+            if (!canvas)
+                return;
+            const tool = activeToolRef.current;
+            const options = toolOptionsRef.current;
+            const pointer = canvas.getScenePoint(opt.e);
+            if (opt.target || canvas.getActiveObject())
+                return;
+            // Text tool
+            if (tool === "text") {
+                addText(canvas, {
+                    x: pointer.x,
+                    y: pointer.y,
+                    fontSize: options.text.fontSize,
+                    fontFamily: options.text.fontFamily,
+                    fontWeight: options.text.fontWeight,
+                    color: options.text.color,
+                    textAlign: options.text.textAlign,
                 });
-                break;
-            case "line":
-                shape = new Line([pointer.x, pointer.y, pointer.x, pointer.y], {
-                    stroke: toolOptions.line.strokeColor,
-                    strokeWidth: toolOptions.line.strokeWidth,
-                    strokeDashArray: toolOptions.line.strokeDashArray || undefined,
-                    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();
-        }
-    };
-    const handleMouseMove = (opt) => {
-        const canvas = fabricCanvas.current;
-        if (!canvas)
-            return;
-        if (!isDrawingRef.current ||
-            !currentShapeRef.current ||
-            !startPointRef.current)
-            return;
-        const pointer = canvas.getScenePoint(opt.e);
-        updateDrawingObject(currentShapeRef.current, activeTool, startPointRef.current, pointer);
-        canvas.renderAll();
-    };
-    const handleMouseUp = () => {
-        const canvas = fabricCanvas.current;
-        if (!canvas)
-            return;
-        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();
-    };
-    return { handleMouseDown, handleMouseMove, handleMouseUp };
+                pushHistoryRef.current(JSON.stringify(canvas.toJSON()));
+                useWhiteboardStore.getState().setActiveTool("select");
+                return;
+            }
+            if (!["rectangle", "circle", "frame", "line", "arrow"].includes(tool))
+                return;
+            suppressHistoryRef.current = true;
+            isDrawingRef.current = true;
+            startPointRef.current = { x: pointer.x, y: pointer.y };
+            let shape = null;
+            switch (tool) {
+                case "rectangle":
+                    shape = new Rect({
+                        left: pointer.x, top: pointer.y, width: 1, height: 1,
+                        fill: options.rectangle.fillColor === "transparent" ? "transparent" : options.rectangle.fillColor,
+                        stroke: options.rectangle.strokeColor,
+                        strokeWidth: options.rectangle.strokeWidth,
+                        strokeDashArray: calculateDashArray(options.rectangle.strokeDashArray, options.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: options.circle.fillColor === "transparent" ? "transparent" : options.circle.fillColor,
+                        stroke: options.circle.strokeColor,
+                        strokeWidth: options.circle.strokeWidth,
+                        strokeDashArray: options.circle.strokeDashArray ? [...options.circle.strokeDashArray] : undefined,
+                        selectable: false,
+                    });
+                    break;
+                case "frame":
+                    shape = new Frame({
+                        left: pointer.x, top: pointer.y, width: 1, height: 1,
+                        stroke: options.frame.strokeColor,
+                        strokeWidth: options.frame.strokeWidth,
+                        strokeDashArray: options.frame.strokeDashArray ? [...options.frame.strokeDashArray] : undefined,
+                        fill: options.frame.fillColor,
+                        selectable: false,
+                    });
+                    break;
+                case "line":
+                    shape = new Line([pointer.x, pointer.y, pointer.x, pointer.y], {
+                        stroke: options.line.strokeColor,
+                        strokeWidth: options.line.strokeWidth,
+                        strokeDashArray: options.line.strokeDashArray || undefined,
+                        selectable: false,
+                    });
+                    break;
+                case "arrow":
+                    shape = new Arrow([pointer.x, pointer.y, pointer.x, pointer.y], {
+                        stroke: options.arrow.strokeColor,
+                        strokeWidth: options.arrow.strokeWidth,
+                        strokeDashArray: options.arrow.strokeDashArray || undefined,
+                        selectable: false,
+                    });
+                    break;
+            }
+            if (shape) {
+                canvas.add(shape);
+                currentShapeRef.current = shape;
+                // ── PERF FIX 2: requestRenderAll instead of renderAll ─────────────
+                // renderAll() is synchronous — blocks the main thread immediately.
+                // requestRenderAll() schedules the paint on Fabric's rAF loop.
+                canvas.requestRenderAll();
+            }
+        },
+        handleMouseMove: (opt) => {
+            const canvas = fabricCanvas.current;
+            if (!canvas || !isDrawingRef.current || !currentShapeRef.current || !startPointRef.current)
+                return;
+            const pointer = canvas.getScenePoint(opt.e);
+            updateDrawingObject(currentShapeRef.current, activeToolRef.current, startPointRef.current, pointer);
+            // ── PERF FIX 3: requestRenderAll instead of renderAll ─────────────────
+            // This fires on every mousemove during drawing — the single most frequent
+            // call site. Synchronous renderAll() here directly causes frame drops.
+            canvas.requestRenderAll();
+        },
+        handleMouseUp: () => {
+            const canvas = fabricCanvas.current;
+            if (!canvas || !isDrawingRef.current || !currentShapeRef.current)
+                return;
+            const shape = currentShapeRef.current;
+            shape.set({ selectable: true, evented: true });
+            if (shape instanceof Frame)
+                canvas.sendObjectToBack(shape);
+            addCanvasObjectRef.current(shape);
+            suppressHistoryRef.current = false;
+            pushHistoryRef.current(JSON.stringify(canvas.toJSON()));
+            isDrawingRef.current = false;
+            startPointRef.current = null;
+            currentShapeRef.current = null;
+            useWhiteboardStore.getState().setActiveTool("select");
+            canvas.discardActiveObject();
+            // ── PERF FIX 4: Single requestRenderAll instead of two renderAll() ────
+            // Old code called renderAll() twice (after discardActiveObject + at end).
+            // One requestRenderAll() covers both.
+            canvas.requestRenderAll();
+        },
+    });
+    // Return stable object reference — identity never changes across renders
+    return handlersRef.current;
 };

package/dist/hooks/usePan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePan.d.ts","sourceRoot":"","sources":["../../src/hooks/usePan.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,UAAU,WAAW;IACnB,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrE,iBAAiB,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACjE;AAED,eAAO,MAAM,MAAM,GAAI,8DAKpB,WAAW,SAoIb,CAAC"}
+{"version":3,"file":"usePan.d.ts","sourceRoot":"","sources":["../../src/hooks/usePan.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,UAAU,WAAW;IACnB,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrE,iBAAiB,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACjE;AAED,eAAO,MAAM,MAAM,GAAI,8DAKpB,WAAW,SAkGb,CAAC"}

package/dist/hooks/usePan.js

@@ -1,15 +1,5 @@
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
 export const usePan = ({ fabricCanvas, activeTool, handleZoom, setCanvasViewport, }) => {
-    // ── PERF FIX 1: All mutable values in refs — effect registers ONCE ────────
-    // Old deps: [activeTool, handleZoom, setCanvasViewport, fabricCanvas]
-    // handleZoom and setCanvasViewport are new references every render →
-    // all 3 listeners re-registered on every render.
-    const activeToolRef = useRef(activeTool);
-    const handleZoomRef = useRef(handleZoom);
-    const setViewportRef = useRef(setCanvasViewport);
-    activeToolRef.current = activeTool;
-    handleZoomRef.current = handleZoom;
-    setViewportRef.current = setCanvasViewport;
     useEffect(() => {
         const canvas = fabricCanvas.current;
         if (!canvas)
@@ -20,18 +10,17 @@ export const usePan = ({ fabricCanvas, activeTool, handleZoom, setCanvasViewport
         let lastX = 0;
         let lastY = 0;
         let lastTouchDistance = 0;
-        let rafId = null;
         const onDown = (opt) => {
-            if (activeToolRef.current !== "pan")
+            if (activeTool !== "pan")
                 return;
             const e = opt.e;
-            // Pinch zoom init
-            if (e.touches?.length === 2) {
+            // Pinch initialization
+            if (e.touches && e.touches.length === 2) {
                 isPanning = false;
                 lastTouchDistance = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY);
                 return;
             }
-            // Pan init
+            // Pan initialization
             const pointer = e.touches ? e.touches[0] : e;
             isPanning = true;
             lastX = pointer.clientX;
@@ -39,63 +28,45 @@ export const usePan = ({ fabricCanvas, activeTool, handleZoom, setCanvasViewport
             canvas.setCursor("grabbing");
         };
         const onMove = (opt) => {
-            if (activeToolRef.current !== "pan")
+            if (activeTool !== "pan")
                 return;
             const e = opt.e;
-            // ── PERF FIX 2: rAF throttle — pan fires at raw mouse rate (200+/sec) ─
-            // Without throttling, every mousemove directly mutates VPT and calls
-            // requestRenderAll, saturating the main thread.
-            if (rafId !== null)
-                return; // skip if a frame is already queued
-            // Pinch zoom
-            if (e.touches?.length === 2) {
+            // 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();
                     const delta = (currentDistance - lastTouchDistance) * 0.01;
+                    const newZoom = zoom + delta;
                     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();
-                    handleZoomRef.current(canvas.getZoom() + delta, { x: midX - rect.left, y: midY - rect.top });
+                    handleZoom(newZoom, { x: midX - rect.left, y: midY - rect.top });
                 }
                 lastTouchDistance = currentDistance;
                 return;
             }
-            if (!isPanning)
-                return;
-            const pointer = e.touches ? e.touches[0] : e;
-            const dx = pointer.clientX - lastX;
-            const dy = pointer.clientY - lastY;
-            lastX = pointer.clientX;
-            lastY = pointer.clientY;
-            // Schedule the actual VPT mutation on next animation frame
-            rafId = requestAnimationFrame(() => {
-                rafId = null;
+            // Handle panning (one finger or mouse)
+            if (isPanning) {
+                const pointer = e.touches ? e.touches[0] : e;
                 const vpt = canvas.viewportTransform;
-                if (!vpt)
-                    return;
-                vpt[4] += dx;
-                vpt[5] += dy;
-                canvas.requestRenderAll();
-                // ── PERF FIX 3: Do NOT call setCanvasViewport here ────────────────
-                // Calling setCanvasViewport per frame triggers React re-renders at
-                // 60fps, cascading to CanvasOverlayLayer re-rendering all HTML nodes.
-                // Viewport state is only flushed ONCE on mouse:up (see onUp below).
-            });
+                if (vpt) {
+                    vpt[4] += pointer.clientX - lastX;
+                    vpt[5] += pointer.clientY - lastY;
+                    canvas.requestRenderAll();
+                }
+                lastX = pointer.clientX;
+                lastY = pointer.clientY;
+            }
         };
         const onUp = () => {
-            if (rafId !== null) {
-                cancelAnimationFrame(rafId);
-                rafId = null;
+            const vpt = canvas.viewportTransform;
+            if (vpt) {
+                setCanvasViewport({ x: vpt[4], y: vpt[5] });
             }
             isPanning = false;
             lastTouchDistance = 0;
-            canvas.setCursor(activeToolRef.current === "pan" ? "grab" : "default");
-            // ── Flush React state ONCE per gesture end ────────────────────────────
-            // HTML overlay nodes only need to reposition when the pan is complete.
-            // One setCanvasViewport call here vs hundreds during the gesture.
-            const vpt = canvas.viewportTransform;
-            if (vpt)
-                setViewportRef.current({ x: vpt[4], y: vpt[5] });
+            canvas.setCursor(activeTool === "pan" ? "grab" : "default");
         };
         canvas.on("mouse:down", onDown);
         canvas.on("mouse:move", onMove);
@@ -104,9 +75,6 @@ export const usePan = ({ fabricCanvas, activeTool, handleZoom, setCanvasViewport
             canvas.off("mouse:down", onDown);
             canvas.off("mouse:move", onMove);
             canvas.off("mouse:up", onUp);
-            if (rafId !== null)
-                cancelAnimationFrame(rafId);
         };
-        // ── PERF FIX 4: Empty deps — registered once, reads everything via refs ───
-    }, [fabricCanvas]);
+    }, [activeTool, handleZoom, setCanvasViewport, fabricCanvas]);
 };

package/package.json

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