@mhamz.01/easyflow-whiteboard 2.19.0 → 2.20.0

package/dist/hooks/useMouseHandlers.d.ts

@@ -20,6 +20,6 @@ interface UseMouseHandlersProps {
         handleEraserUp: () => boolean;
     };
 }
-export declare const useMouseHandlers: ({ fabricCanvas, activeTool, toolOptions, drawingHandlers, eraserHandlers, }: UseMouseHandlersProps) => void;
+export declare const useMouseHandlers: ({ fabricCanvas, activeTool, drawingHandlers, eraserHandlers, }: UseMouseHandlersProps) => void;
 export {};
 //# sourceMappingURL=useMouseHandlers.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useMouseHandlers.d.ts","sourceRoot":"","sources":["../../src/hooks/useMouseHandlers.ts"],"names":[],"mappings":"AACA,OAAc,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,UAAU,qBAAqB;IAC7B,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,GAAG,CAAC;IACjB,eAAe,EAAE;QACf,eAAe,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;QACpC,eAAe,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;QACpC,aAAa,EAAE,MAAM,IAAI,CAAC;KAC3B,CAAC;IACF,cAAc,EAAE;QACd,eAAe,EAAE,MAAM,IAAI,CAAC;QAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;QAC3B,gBAAgB,EAAE,MAAM,OAAO,CAAC;QAChC,gBAAgB,EAAE,CAAC,OAAO,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,KAAK,IAAI,CAAC;QAC9D,cAAc,EAAE,MAAM,OAAO,CAAC;KAC/B,CAAC;CACH;AAED,eAAO,MAAM,gBAAgB,GAAI,6EAM9B,qBAAqB,SA8CvB,CAAC"}
+{"version":3,"file":"useMouseHandlers.d.ts","sourceRoot":"","sources":["../../src/hooks/useMouseHandlers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,UAAU,qBAAqB;IAC7B,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,UAAU,EAAI,MAAM,CAAC;IACrB,WAAW,EAAG,GAAG,CAAC;IAClB,eAAe,EAAE;QACf,eAAe,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;QACpC,eAAe,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;QACpC,aAAa,EAAI,MAAM,IAAI,CAAC;KAC7B,CAAC;IACF,cAAc,EAAE;QACd,eAAe,EAAG,MAAM,IAAI,CAAC;QAC7B,cAAc,EAAI,MAAM,IAAI,CAAC;QAC7B,gBAAgB,EAAE,MAAM,OAAO,CAAC;QAChC,gBAAgB,EAAE,CAAC,OAAO,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,KAAK,IAAI,CAAC;QAC9D,cAAc,EAAI,MAAM,OAAO,CAAC;KACjC,CAAC;CACH;AAED,eAAO,MAAM,gBAAgB,GAAI,gEAK9B,qBAAqB,SAqFvB,CAAC"}

package/dist/hooks/useMouseHandlers.js

@@ -1,44 +1,81 @@
-import { useEffect } from "react";
-export const useMouseHandlers = ({ fabricCanvas, activeTool, toolOptions, drawingHandlers, eraserHandlers, }) => {
+import { useEffect, useRef } from "react";
+export const useMouseHandlers = ({ fabricCanvas, activeTool, drawingHandlers, eraserHandlers, }) => {
+    // ── PERF FIX 1: All props in refs — effect registers ONCE ────────────────
+    // Old deps: [activeTool, toolOptions, drawingHandlers, eraserHandlers]
+    // drawingHandlers and eraserHandlers are plain objects recreated every render
+    // → all 5 canvas listeners re-registered on every single render.
+    // With refs, the effect is stable for the full lifetime of the canvas.
+    const activeToolRef = useRef(activeTool);
+    const drawingRef = useRef(drawingHandlers);
+    const eraserRef = useRef(eraserHandlers);
+    // These update every render synchronously — handlers always see latest values
+    activeToolRef.current = activeTool;
+    drawingRef.current = drawingHandlers;
+    eraserRef.current = eraserHandlers;
     useEffect(() => {
         const canvas = fabricCanvas.current;
         if (!canvas)
             return;
+        // ── PERF FIX 2: rAF throttle on mouse:move ───────────────────────────
+        // mouse:move fires at raw pointer rate — up to 200-1000 events/sec on
+        // high-DPI displays. Without throttling, getScenePoint + handler logic
+        // runs far more often than the screen can paint (60-120fps).
+        let rafId = null;
+        let lastMoveOpt = null;
         const handleMouseDown = (opt) => {
-            // Eraser
-            if (eraserHandlers.handleEraserDown())
+            if (eraserRef.current.handleEraserDown())
                 return;
-            // Drawing
-            drawingHandlers.handleMouseDown(opt);
+            drawingRef.current.handleMouseDown(opt);
         };
         const handleMouseMove = (opt) => {
-            const pointer = canvas.getScenePoint(opt.e);
-            // Eraser
-            if (activeTool === "eraser") {
-                eraserHandlers.handleEraserMove(pointer);
-                return;
-            }
-            // Drawing
-            drawingHandlers.handleMouseMove(opt);
+            // Store latest event — rAF will consume it
+            lastMoveOpt = opt;
+            if (rafId !== null)
+                return; // frame already queued
+            rafId = requestAnimationFrame(() => {
+                rafId = null;
+                if (!lastMoveOpt)
+                    return;
+                const currentOpt = lastMoveOpt;
+                lastMoveOpt = null;
+                const tool = activeToolRef.current;
+                if (tool === "eraser") {
+                    // ── PERF FIX 3: Only call getScenePoint for tools that need it ────
+                    const canvas = fabricCanvas.current;
+                    if (!canvas)
+                        return;
+                    const pointer = canvas.getScenePoint(currentOpt.e);
+                    eraserRef.current.handleEraserMove(pointer);
+                    return;
+                }
+                drawingRef.current.handleMouseMove(currentOpt);
+            });
         };
         const handleMouseUp = () => {
-            // Eraser
-            if (eraserHandlers.handleEraserUp())
+            // Cancel any pending move frame on mouse up
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+                rafId = null;
+                lastMoveOpt = null;
+            }
+            if (eraserRef.current.handleEraserUp())
                 return;
-            // Drawing
-            drawingHandlers.handleMouseUp();
+            drawingRef.current.handleMouseUp();
         };
-        canvas.on("mouse:over", eraserHandlers.handleMouseOver);
-        canvas.on("mouse:out", eraserHandlers.handleMouseOut);
+        canvas.on("mouse:over", () => eraserRef.current.handleMouseOver());
+        canvas.on("mouse:out", () => eraserRef.current.handleMouseOut());
         canvas.on("mouse:down", handleMouseDown);
         canvas.on("mouse:move", handleMouseMove);
         canvas.on("mouse:up", handleMouseUp);
         return () => {
-            canvas.off("mouse:over", eraserHandlers.handleMouseOver);
-            canvas.off("mouse:out", eraserHandlers.handleMouseOut);
+            canvas.off("mouse:over", () => eraserRef.current.handleMouseOver());
+            canvas.off("mouse:out", () => eraserRef.current.handleMouseOut());
             canvas.off("mouse:down", handleMouseDown);
             canvas.off("mouse:move", handleMouseMove);
             canvas.off("mouse:up", handleMouseUp);
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
         };
-    }, [activeTool, toolOptions, fabricCanvas, drawingHandlers, eraserHandlers]);
+        // ── PERF FIX 4: Stable — everything read via refs ─────────────────────────
+    }, [fabricCanvas]);
 };

package/package.json

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