@mhamz.01/easyflow-whiteboard 2.119.0 → 2.121.0

package/dist/components/node/custom-node-overlay-layer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-node-overlay-layer.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node-overlay-layer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAS9C,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,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,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,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;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,UAAU,uBAAuB;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,YAAY,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACzE,qBAAqB,CAAC,EAAE,YAAY,EAAE,CAAC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAaD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,UAAc,EACd,cAA+B,EAC/B,YAAmB,EACnB,qBAA0B,EAC1B,YAAY,GACb,EAAE,uBAAuB,2CAglBzB"}
+{"version":3,"file":"custom-node-overlay-layer.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node-overlay-layer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAU9C,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,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,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,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;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,UAAU,uBAAuB;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,YAAY,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACzE,qBAAqB,CAAC,EAAE,YAAY,EAAE,CAAC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAkBD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,UAAc,EACd,cAA+B,EAC/B,YAAmB,EACnB,qBAA0B,EAC1B,YAAY,GACb,EAAE,uBAAuB,2CAimBzB"}

package/dist/components/node/custom-node-overlay-layer.js

@@ -1,8 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import TaskNode from "./custom-node";
 import DocumentNode from "./document-node";
+import { memo } from "react";
+// Wrap TaskNode and DocumentNode
+const MemoTaskNode = memo(TaskNode);
+const MemoDocumentNode = memo(DocumentNode);
 // ─── Component ────────────────────────────────────────────────────────────────
 export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, onDocumentsUpdate, canvasZoom = 1, canvasViewport = { x: 0, y: 0 }, selectionBox = null, selectedCanvasObjects = [], fabricCanvas, }) {
     const [localTasks, setLocalTasks] = useState(tasks);
@@ -14,6 +18,13 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         tasks: [],
         documents: [],
     });
+    // In render, replace TaskNode/DocumentNode with memoized versions
+    {
+        localTasks.map((task) => renderItem(task.id, task.x, task.y, _jsx(MemoTaskNode, { ...task, isSelected: selectedIds.has(task.id), onSelect: handleSelect, onDragStart: handleDragStart, onStatusChange: handleStatusChange, zoom: 1 })));
+    }
+    {
+        localDocuments.map((doc) => renderItem(doc.id, doc.x, doc.y, _jsx(MemoDocumentNode, { ...doc, isSelected: selectedIds.has(doc.id), onSelect: handleSelect, onDragStart: handleDragStart })));
+    }
     const dragStateRef = useRef({
         isDragging: false,
         itemIds: [],
@@ -25,7 +36,16 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
     const rafIdRef = useRef(null);
     const overlayRef = useRef(null);
     const selectedIdsRef = useRef(selectedIds);
+    // Add these refs
+    const localTasksRef = useRef(localTasks);
+    const localDocsRef = useRef(localDocuments);
+    const onTasksUpdateRef = useRef(onTasksUpdate);
+    const onDocsUpdateRef = useRef(onDocumentsUpdate);
     selectedIdsRef.current = selectedIds;
+    localTasksRef.current = localTasks;
+    localDocsRef.current = localDocuments;
+    onTasksUpdateRef.current = onTasksUpdate;
+    onDocsUpdateRef.current = onDocumentsUpdate;
     // ── Sync props → local state ────────────────────────────────────────────────
     useEffect(() => { setLocalTasks(tasks); }, [tasks]);
     useEffect(() => { setLocalDocuments(documents); }, [documents]);
@@ -106,7 +126,7 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         return () => {
             overlayEl.removeEventListener("wheel", handleGlobalWheel);
         };
-    }, [fabricCanvas, canvasZoom, canvasReady]); // Re-bind when zoom changes to keep closure fresh
+    }, [fabricCanvas, canvasReady]); // Re-bind when zoom changes to keep closure fresh
     // ── Fabric → Overlay Sync (Fixes Dragging from Fabric area) ──────────────────
     useEffect(() => {
         const canvas = fabricCanvas?.current;
@@ -165,7 +185,7 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         // Having selectedIds here caused the effect to re-register on every selection
         // change, creating a new closure each time. The second drag captured a stale
         // or empty selectedIds from the closure at re-registration time.
-    }, [canvasZoom, fabricCanvas, canvasReady]);
+    }, [fabricCanvas, canvasReady]);
     // ── Helpers ─────────────────────────────────────────────────────────────────
     const getItemPosition = (id) => {
         const task = localTasks.find((t) => t.id === id);
@@ -219,72 +239,61 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             return e.touches[0];
         return e;
     };
-    const handleDragStart = (itemId, e) => {
-        // 1. Safety check for the Fabric instance
+    const handleDragStart = useCallback((itemId, e) => {
         const canvas = fabricCanvas?.current;
         if (!canvas)
             return;
-        // 2. Normalize the event (Touch vs Mouse)
         if (e.cancelable)
             e.preventDefault();
         const pointer = getPointerEvent(e);
-        // 3. Determine which items are being dragged
-        // selection update DOES NOT trigger before drag snapshot
-        let itemsToDrag;
-        if (selectedIds.has(itemId)) {
-            itemsToDrag = Array.from(selectedIds);
-        }
-        else {
-            itemsToDrag = [itemId];
-        }
-        // 4. Capture current World Transform (Zoom & Pan)
-        // We read directly from the canvas to ensure zero-frame lag
+        // read from ref — always fresh
+        const currentSelectedIds = selectedIdsRef.current;
+        let itemsToDrag = currentSelectedIds.has(itemId)
+            ? Array.from(currentSelectedIds)
+            : [itemId];
         const vpt = canvas.viewportTransform || [1, 0, 0, 1, 0, 0];
         const liveZoom = vpt[0];
         const liveVpX = vpt[4];
         const liveVpY = vpt[5];
-        // 5. Convert the Click Position from Screen Pixels to World Units
         const clickWorldX = (pointer.clientX - liveVpX) / liveZoom;
         const clickWorldY = (pointer.clientY - liveVpY) / liveZoom;
-        // 6. Get the clicked item's current World Position
-        const clickedPos = getItemPosition(itemId);
+        // read positions from refs
+        const getPos = (id) => {
+            const t = localTasksRef.current.find((t) => t.id === id);
+            if (t)
+                return { x: t.x, y: t.y };
+            const d = localDocsRef.current.find((d) => d.id === id);
+            if (d)
+                return { x: d.x, y: d.y };
+        };
+        const clickedPos = getPos(itemId);
         if (!clickedPos)
             return;
-        // 7. Calculate the Offset in WORLD UNITS
-        // This is the distance from the mouse to the node's top-left in the infinite grid.
-        // This value remains constant even if you zoom during the drag.
-        const worldOffsetX = clickWorldX - clickedPos.x;
-        const worldOffsetY = clickWorldY - clickedPos.y;
-        // 8. Snapshot starting positions for all selected HTML nodes
         const startPositions = new Map();
         itemsToDrag.forEach((id) => {
-            const pos = getItemPosition(id);
+            const pos = getPos(id);
             if (pos)
                 startPositions.set(id, pos);
         });
-        // 9. Snapshot starting positions for all selected Fabric objects
         const canvasObjectsStartPos = new Map();
         selectedCanvasObjects.forEach((obj) => {
             canvasObjectsStartPos.set(obj, { left: obj.left || 0, top: obj.top || 0 });
         });
-        // 10. Commit to the ref for the requestAnimationFrame loop
         dragStateRef.current = {
             isDragging: true,
             itemIds: itemsToDrag,
             startPositions,
             canvasObjectsStartPos,
-            offsetX: clickWorldX, // Now stored as World Units
-            offsetY: clickWorldY, // Now stored as World Units
+            offsetX: clickWorldX,
+            offsetY: clickWorldY,
         };
-        if (!selectedIds.has(itemId) && dragStateRef.current.itemIds.length === 0) {
+        if (!currentSelectedIds.has(itemId))
             setSelectedIds(new Set([itemId]));
-        }
-        // 11. Trigger UI states
         setDragging({ itemIds: itemsToDrag });
         document.body.style.cursor = "grabbing";
         document.body.style.userSelect = "none";
         document.body.style.touchAction = "none";
-    };
+    }, []); // now truly stable
     // ── Drag move (HTML Node side) ───────────────────────────────────────────────
     useEffect(() => {
         if (!dragging)
@@ -363,8 +372,8 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             document.body.style.cursor = "";
             document.body.style.userSelect = "";
             document.body.style.touchAction = "";
-            onTasksUpdate?.(localTasks);
-            onDocumentsUpdate?.(localDocuments);
+            onTasksUpdateRef.current?.(localTasksRef.current); // ref instead of closure
+            onDocsUpdateRef.current?.(localDocsRef.current);
         };
         window.addEventListener("mousemove", handleMove, { passive: false });
         window.addEventListener("mouseup", handleEnd);
@@ -378,9 +387,9 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             window.removeEventListener("touchend", handleEnd);
             window.removeEventListener("touchcancel", handleEnd);
         };
-    }, [dragging, localTasks, localDocuments, fabricCanvas]);
+    }, [dragging, fabricCanvas]);
     // ── Selection, Status, Keyboard Logic ────────────────────────────────────────
-    const handleSelect = (id, e) => {
+    const handleSelect = useCallback((id, e) => {
         if (e?.shiftKey || e?.ctrlKey || e?.metaKey) {
             setSelectedIds((prev) => {
                 const next = new Set(prev);
@@ -391,41 +400,38 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         else {
             setSelectedIds(new Set([id]));
         }
-    };
-    const handleStatusChange = (taskId, newStatus) => {
-        const updated = localTasks.map((t) => (t.id === taskId ? { ...t, status: newStatus } : t));
-        setLocalTasks(updated);
-        onTasksUpdate?.(updated);
-    };
+    }, []);
+    const handleStatusChange = useCallback((taskId, newStatus) => {
+        setLocalTasks((prev) => {
+            const updated = prev.map((t) => t.id === taskId ? { ...t, status: newStatus } : t);
+            onTasksUpdateRef.current?.(updated);
+            return updated;
+        });
+    }, []);
     useEffect(() => {
         const handleKeyDown = (e) => {
-            // Don't trigger if typing in input
             if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)
                 return;
-            // Select All
             if ((e.ctrlKey || e.metaKey) && e.key === "a") {
                 e.preventDefault();
-                setSelectedIds(new Set([...localTasks.map((t) => t.id), ...localDocuments.map((d) => d.id)]));
+                setSelectedIds(new Set([...localTasksRef.current.map((t) => t.id), ...localDocsRef.current.map((d) => d.id)]));
             }
-            // Clear selection
-            if (e.key === "Escape") {
+            if (e.key === "Escape")
                 setSelectedIds(new Set());
-            }
-            // ← ADD THIS: Delete selected nodes
-            if ((e.key === "Delete" || e.key === "Backspace") && selectedIds.size > 0) {
+            if ((e.key === "Delete" || e.key === "Backspace") && selectedIdsRef.current.size > 0) {
                 e.preventDefault();
-                const updatedTasks = localTasks.filter((t) => !selectedIds.has(t.id));
-                const updatedDocs = localDocuments.filter((d) => !selectedIds.has(d.id));
+                const updatedTasks = localTasksRef.current.filter((t) => !selectedIdsRef.current.has(t.id));
+                const updatedDocs = localDocsRef.current.filter((d) => !selectedIdsRef.current.has(d.id));
                 setLocalTasks(updatedTasks);
                 setLocalDocuments(updatedDocs);
                 setSelectedIds(new Set());
-                onTasksUpdate?.(updatedTasks);
-                onDocumentsUpdate?.(updatedDocs);
+                onTasksUpdateRef.current?.(updatedTasks);
+                onDocsUpdateRef.current?.(updatedDocs);
             }
         };
         window.addEventListener("keydown", handleKeyDown);
         return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [localTasks, localDocuments, selectedIds, onTasksUpdate, onDocumentsUpdate]);
+    }, []); // stable — everything via refs
     // ── Render helper ────────────────────────────────────────────────────────────
     const renderItem = (id, x, y, children) => {
         const screenX = x * canvasZoom;
@@ -454,5 +460,5 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         }, children: _jsxs("div", { className: "absolute top-0 left-0 pointer-events-none", style: {
                 transform: `translate(${canvasViewport.x}px, ${canvasViewport.y}px)`,
                 transformOrigin: "top left",
-            }, children: [localTasks.map((task) => renderItem(task.id, task.x, task.y, _jsx(TaskNode, { ...task, isSelected: selectedIds.has(task.id), onSelect: handleSelect, onDragStart: handleDragStart, onStatusChange: handleStatusChange, zoom: 1 }))), localDocuments.map((doc) => renderItem(doc.id, doc.x, doc.y, _jsx(DocumentNode, { ...doc, isSelected: selectedIds.has(doc.id), onSelect: handleSelect, onDragStart: handleDragStart })))] }) }));
+            }, children: [localTasks.map((task) => renderItem(task.id, task.x, task.y, _jsx(MemoTaskNode, { ...task, isSelected: selectedIds.has(task.id), onSelect: handleSelect, onDragStart: handleDragStart, onStatusChange: handleStatusChange, zoom: 1 }))), localDocuments.map((doc) => renderItem(doc.id, doc.x, doc.y, _jsx(MemoDocumentNode, { ...doc, isSelected: selectedIds.has(doc.id), onSelect: handleSelect, onDragStart: handleDragStart })))] }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"whiteboard-test.d.ts","sourceRoot":"","sources":["../../../src/components/whiteboard/whiteboard-test.tsx"],"names":[],"mappings":"AAQC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAkB3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AACvE,YAAY,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAIxE,UAAU,IAAI;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAID,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE;QACZ,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;QACf,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;KACxB,CAAC;IACF,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAClC,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE;QACjB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,GAAG,EAAE,CAAC;QACb,SAAS,EAAE,GAAG,EAAE,CAAC;KAClB,KAAK,IAAI,CAAC;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAID,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,WAAW,EACX,MAAM,EACN,cAAc,EACd,cAAmB,EACnB,kBAAuB,EACvB,aAAqB,GACtB,EAAE,qBAAqB,2CA6PvB"}
+{"version":3,"file":"whiteboard-test.d.ts","sourceRoot":"","sources":["../../../src/components/whiteboard/whiteboard-test.tsx"],"names":[],"mappings":"AAQC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAkB3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AACvE,YAAY,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAIxE,UAAU,IAAI;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;IACxC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAID,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE;QACZ,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;QACf,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;KACxB,CAAC;IACF,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAClC,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE;QACjB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,GAAG,EAAE,CAAC;QACb,SAAS,EAAE,GAAG,EAAE,CAAC;KAClB,KAAK,IAAI,CAAC;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAID,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,WAAW,EACX,MAAM,EACN,cAAc,EACd,cAAmB,EACnB,kBAAuB,EACvB,aAAqB,GACtB,EAAE,qBAAqB,2CA4PvB"}

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { classRegistry } from "fabric";
 import { useWhiteboardStore } from "../../store/whiteboard-store";
 import WhiteboardToolbar from "../toolbar/whiteboard-toolbar";
@@ -161,12 +161,8 @@ export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs,
         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) => {
+    // 1. Memoize static handlers
+    const handleAddTaskFromDropdown = useCallback((taskTemplate) => {
         const canvas = fabricCanvasRef.current;
         if (!canvas)
             return;
@@ -176,12 +172,9 @@ export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs,
         const liveZoom = vpt[0];
         const cx = (canvas.getWidth() / 2 - vpt[4]) / liveZoom;
         const cy = (canvas.getHeight() / 2 - vpt[5]) / liveZoom;
-        setTasks((prev) => [
-            ...prev,
-            { ...taskTemplate, id: `${taskTemplate.id}-${Date.now()}`, x: cx - 150, y: cy - 60 },
-        ]);
-    };
-    const handleAddDocumentFromDropdown = (docTemplate) => {
+        setTasks((prev) => [...prev, { ...taskTemplate, id: `${taskTemplate.id}-${Date.now()}`, x: cx - 150, y: cy - 60 }]);
+    }, []);
+    const handleAddDocumentFromDropdown = useCallback((docTemplate) => {
         const canvas = fabricCanvasRef.current;
         if (!canvas)
             return;
@@ -191,16 +184,18 @@ export default function FabricWhiteboard({ initialData, onSave, saveDebounceMs,
         const liveZoom = vpt[0];
         const cx = (canvas.getWidth() / 2 - vpt[4]) / liveZoom;
         const cy = (canvas.getHeight() / 2 - vpt[5]) / liveZoom;
-        setDocuments((prev) => [
-            ...prev,
-            { ...docTemplate, id: `${docTemplate.id}-${Date.now()}`, x: cx - 160, y: cy - 80 },
-        ]);
-    };
-    return (_jsx("div", { className: "easyflow-whiteboard w-screen h-screen", children: _jsxs("div", { ref: containerRef, className: "relative w-full h-full overflow-hidden bg-[#0b0b0b]", style: { touchAction: "none", overscrollBehavior: "none" }, children: [_jsx("div", { className: "absolute inset-0 pointer-events-none", style: {
+        setDocuments((prev) => [...prev, { ...docTemplate, id: `${docTemplate.id}-${Date.now()}`, x: cx - 160, y: cy - 80 }]);
+    }, []);
+    const handleZoomIn = useCallback(() => handleZoom(canvasZoom + ZOOM_STEP), [canvasZoom, handleZoom]);
+    const handleZoomOut = useCallback(() => handleZoom(canvasZoom - ZOOM_STEP), [canvasZoom, handleZoom]);
+    const handleResetZoom = useCallback(() => handleZoom(1), [handleZoom]);
+    const MemoOverlay = useMemo(() => (_jsx(CanvasOverlayLayer, { tasks: tasks, documents: documents, onTasksUpdate: setTasks, onDocumentsUpdate: setDocuments, canvasZoom: canvasZoom, canvasViewport: canvasViewport, selectionBox: selectionBox, selectedCanvasObjects: selectedCanvasObjects, fabricCanvas: fabricCanvasRef, canvasReady: canvasReady })), [tasks, documents, canvasZoom, canvasViewport, selectionBox, selectedCanvasObjects, canvasReady]);
+    const MemoToolbar = useMemo(() => (canvasReady
+        ? _jsx(WhiteboardToolbar, { fabricCanvas: fabricCanvasRef, isRestoringRef: isRestoringRef, onAddTask: handleAddTaskFromDropdown, onAddDocument: handleAddDocumentFromDropdown, availableDocuments: availableDocuments, availableTasks: availableTasks, isLoadingData: isLoadingData })
+        : _jsx(ToolbarSkeleton, {})), [canvasReady, availableDocuments, availableTasks, isLoadingData, handleAddTaskFromDropdown, handleAddDocumentFromDropdown]);
+    return (_jsx("div", { className: "easyflow-whiteboard w-full h-full", children: _jsxs("div", { ref: containerRef, className: "relative w-full h-full 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, canvasReady: canvasReady }), _jsxs("div", { className: "absolute inset-0 pointer-events-none", style: { zIndex: 100 }, children: [_jsx("div", { className: "pointer-events-auto", children: canvasReady ?
-                                _jsx(WhiteboardToolbar, { fabricCanvas: fabricCanvasRef, isRestoringRef: isRestoringRef, onAddTask: handleAddTaskFromDropdown, onAddDocument: handleAddDocumentFromDropdown, availableDocuments: availableDocuments, availableTasks: availableTasks, isLoadingData: isLoadingData })
-                                : _jsx(ToolbarSkeleton, {}) }), _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 }) })] })] }) }));
+                    } }), _jsx("canvas", { ref: canvasRef, className: "absolute inset-0", style: { zIndex: 1 } }), MemoOverlay, _jsxs("div", { className: "absolute inset-0 pointer-events-none", style: { zIndex: 100 }, children: [_jsx("div", { className: "pointer-events-auto", children: MemoToolbar }), _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/hooks/useEraser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEraser.d.ts","sourceRoot":"","sources":["../../src/hooks/useEraser.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACtD,OAAO,KAAK,MAAM,MAAM,QAAQ,CAAC;AAEjC,UAAU,cAAc;IACtB,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,GAAG,CAAC;IACjB,cAAc,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACzC,gBAAgB,EAAE,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC;IAC/C,eAAe,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACpC,aAAa,EAAE,SAAS,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAC7C,mBAAmB,EAAE,SAAS,CAAC,MAAM,EAAE,CAAC,CAAC;IACzC,kBAAkB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACvC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,SAAS,GAAI,oKAWvB,cAAc;;;;gCAsBoB;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;;CA0H5D,CAAC"}
+{"version":3,"file":"useEraser.d.ts","sourceRoot":"","sources":["../../src/hooks/useEraser.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACtD,OAAO,KAAK,MAAM,MAAM,QAAQ,CAAC;AAEjC,UAAU,cAAc;IACtB,YAAY,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,GAAG,CAAC;IACjB,cAAc,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACzC,gBAAgB,EAAE,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC;IAC/C,eAAe,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACpC,aAAa,EAAE,SAAS,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAC7C,mBAAmB,EAAE,SAAS,CAAC,MAAM,EAAE,CAAC,CAAC;IACzC,kBAAkB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACvC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,SAAS,GAAI,oKAWvB,cAAc;;;;gCAsBoB;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;;CA0I5D,CAAC"}

package/dist/hooks/useEraser.js

@@ -24,7 +24,7 @@ export const useEraser = ({ fabricCanvas, activeTool, toolOptions, eraserTraceRe
         const canvas = fabricCanvas.current;
         if (!canvas || activeTool !== "eraser")
             return;
-        // Update or create trace circle
+        // Create or update trace circle
         if (!eraserTraceRef.current) {
             eraserTraceRef.current = new Circle({
                 radius: toolOptions.eraser.size / 1.5,
@@ -45,54 +45,66 @@ export const useEraser = ({ fabricCanvas, activeTool, toolOptions, eraserTraceRe
         eraserTraceRef.current.set({ left: pointer.x, top: pointer.y });
         eraserTraceRef.current.setCoords();
         canvas.bringObjectToFront(eraserTraceRef.current);
+        // Smooth continuous trail
         if (eraserActiveRef.current) {
             suppressHistoryRef.current = true;
             if (eraserPathPointsRef.current.length === 0) {
                 eraserPathPointsRef.current = [`M ${pointer.x} ${pointer.y}`];
                 const path = new fabric.Path(eraserPathPointsRef.current.join(" "), {
-                    stroke: "rgba(53, 53, 53, 0.7)",
+                    stroke: "rgba(220, 220, 220, 0.7)",
                     strokeWidth: toolOptions.eraser.size,
                     fill: null,
                     selectable: false,
                     evented: false,
                     strokeLineCap: "round",
                     strokeLineJoin: "round",
+                    opacity: 1,
                     excludeFromExport: true,
                 });
                 canvas.add(path);
                 eraserPathRef.current = path;
             }
             else {
-                // ── FIX 1: Mutate path in place — no remove/add, no events fired ──
                 eraserPathPointsRef.current.push(`L ${pointer.x} ${pointer.y}`);
                 const pathString = eraserPathPointsRef.current.join(" ");
                 if (eraserPathRef.current) {
-                    const parsed = new fabric.Path(pathString);
-                    eraserPathRef.current.set({ path: parsed.path });
-                    eraserPathRef.current.setCoords();
+                    canvas.remove(eraserPathRef.current);
                 }
+                const path = new fabric.Path(pathString, {
+                    stroke: "rgba(53, 53, 53, 0.7)",
+                    strokeWidth: toolOptions.eraser.size,
+                    fill: null,
+                    selectable: false,
+                    evented: false,
+                    strokeLineCap: "round",
+                    strokeLineJoin: "round",
+                    opacity: 1,
+                    excludeFromExport: true,
+                });
+                canvas.add(path);
+                eraserPathRef.current = path;
             }
             canvas.bringObjectToFront(eraserTraceRef.current);
         }
-        // ── FIX 2: Intersection check only while actively erasing ──
-        if (eraserActiveRef.current) {
-            const previousTargets = new Set(eraserTargetsRef.current);
-            eraserTargetsRef.current.clear();
-            canvas.forEachObject((obj) => {
-                if (obj === eraserTraceRef.current || obj === eraserPathRef.current)
-                    return;
-                if (obj.intersectsWithObject(eraserTraceRef.current)) {
-                    eraserTargetsRef.current.add(obj);
-                    if (obj.opacity !== 0.3)
-                        obj.set({ opacity: 0.3 });
-                }
-                else if (previousTargets.has(obj)) {
-                    obj.set({ opacity: 1 });
+        // Find objects under eraser
+        const previousTargets = new Set(eraserTargetsRef.current);
+        eraserTargetsRef.current.clear();
+        canvas.forEachObject((obj) => {
+            if (obj === eraserTraceRef.current)
+                return;
+            if (obj === eraserPathRef.current)
+                return;
+            if (obj.intersectsWithObject(eraserTraceRef.current)) {
+                eraserTargetsRef.current.add(obj);
+                if (eraserActiveRef.current && obj.opacity !== 0.3) {
+                    obj.set({ opacity: 0.3 });
                 }
-            });
-        }
-        // ── FIX 3: requestRenderAll instead of renderAll ──
-        canvas.requestRenderAll();
+            }
+            else if (previousTargets.has(obj)) {
+                obj.set({ opacity: 1 });
+            }
+        });
+        canvas.renderAll();
     };
     const handleEraserUp = () => {
         const canvas = fabricCanvas.current;

package/dist/styles.css

@@ -570,9 +570,6 @@
   .w-px {
     width: 1px;
   }
-  .w-screen {
-    width: 100vw;
-  }
   .max-w-\[120px\] {
     max-width: 120px;
   }

package/package.json

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