@mhamz.01/easyflow-whiteboard 2.121.0 → 2.122.0

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

@@ -281,3 +281,548 @@
 //   );
 // }
 // // export { Task, Document, CanvasOverlayLayerProps } from "./types/overlay-types";
+// Before change 26 april sunday
+// "use client";
+// import { useState, useEffect, useRef } from "react";
+// import { FabricObject, Canvas } from "fabric";
+// import TaskNode from "./custom-node";
+// import DocumentNode from "./document-node";
+// // ─── Interfaces ───────────────────────────────────────────────────────────────
+// // THIS LAYER HAS ISSUE RELATED TO JUMP OF HTML NODES DURING DRAG/ZOOM
+// // THIS NEED TO BE FIXED BEFORE ANY OTHER FEATURES ARE ADDED TO THIS COMPONENT
+// export interface Task {
+//   id: string;
+//   title: string;
+//   status: "todo" | "in-progress" | "done";
+//   x: number;
+//   y: number;
+//   assignee?: string;
+//   project?: string;
+//   priority?: "low" | "medium" | "high";
+//   dueDate?: string;
+// }
+// export interface Document {
+//   id: string;
+//   title: string;
+//   project: string;
+//   breadcrumb?: string[];
+//   preview: string;
+//   updatedAt?: string;
+//   x: number;
+//   y: number;
+// }
+// interface CanvasOverlayLayerProps {
+//   tasks: Task[];
+//   documents: Document[];
+//   onTasksUpdate?: (tasks: Task[]) => void;
+//   onDocumentsUpdate?: (documents: Document[]) => void;
+//   canvasZoom?: number;
+//   canvasViewport?: { x: number; y: number };
+//   selectionBox?: { x1: number; y1: number; x2: number; y2: number } | null;
+//   selectedCanvasObjects?: FabricObject[];
+//   fabricCanvas?: React.RefObject<Canvas | null>;
+//   canvasReady?: boolean;
+// }
+// interface DragState {
+//   isDragging: boolean;
+//   itemIds: string[];
+//   startPositions: Map<string, { x: number; y: number }>;
+//   canvasObjectsStartPos: Map<FabricObject, { left: number; top: number }>;
+//   offsetX: number;
+//   offsetY: number;
+// }
+// // ─── Component ────────────────────────────────────────────────────────────────
+// export default function CanvasOverlayLayer({
+//   tasks,
+//   documents,
+//   onTasksUpdate,
+//   onDocumentsUpdate,
+//   canvasZoom = 1,
+//   canvasViewport = { x: 0, y: 0 },
+//   selectionBox = null,
+//   selectedCanvasObjects = [],
+//   fabricCanvas,
+// }: CanvasOverlayLayerProps) {
+//   const [localTasks, setLocalTasks] = useState<Task[]>(tasks);
+//   const [localDocuments, setLocalDocuments] = useState<Document[]>(documents);
+//   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+//   const [dragging, setDragging] = useState<{ itemIds: string[] } | null>(null);
+//   const [canvasReady, setCanvasReady] = useState(false);
+//   const nodeClipboardRef = useRef<{ tasks: Task[]; documents: Document[] }>({
+//     tasks: [],
+//     documents: [],
+//   });
+//   const dragStateRef = useRef<DragState>({
+//     isDragging: false,
+//     itemIds: [],
+//     startPositions: new Map(),
+//     canvasObjectsStartPos: new Map(),
+//     offsetX: 0,
+//     offsetY: 0,
+//   });
+//   const rafIdRef = useRef<number | null>(null);
+//   const overlayRef = useRef<HTMLDivElement>(null);
+//   const selectedIdsRef = useRef<Set<string>>(selectedIds);
+// selectedIdsRef.current = selectedIds; 
+//   // ── Sync props → local state ────────────────────────────────────────────────
+//   useEffect(() => { setLocalTasks(tasks); }, [tasks]);
+//   useEffect(() => { setLocalDocuments(documents); }, [documents]);
+//   // effect — polls until fabricCanvas.current is available:
+// useEffect(() => {
+//   if (canvasReady) return;
+//   if (fabricCanvas?.current) {
+//     setCanvasReady(true);
+//     return;
+//   }
+//   // Poll every 50ms until canvas is ready (only needed on first load)
+//   const interval = setInterval(() => {
+//     if (fabricCanvas?.current) {
+//       setCanvasReady(true);
+//       clearInterval(interval);
+//     }
+//   }, 50);
+//   return () => clearInterval(interval);
+// }, [fabricCanvas, canvasReady]);
+//   // ── Event Forwarding (Fixes Zooming on Nodes) ───────────────────────────────
+//   const handleOverlayWheel = (e: React.WheelEvent) => {
+//     if (e.ctrlKey || e.metaKey || e.shiftKey) {
+//       const canvas = fabricCanvas?.current;
+//       if (!canvas) return;
+//       const nativeEvent = e.nativeEvent;
+//       // getScenePoint handles the transformation from screen to canvas space
+//       const scenePoint = canvas.getScenePoint(nativeEvent);
+//       // Viewport point is simply the mouse position relative to the canvas element
+//       const rect = canvas.getElement().getBoundingClientRect();
+//       const viewportPoint = {
+//         x: nativeEvent.clientX - rect.left,
+//         y: nativeEvent.clientY - rect.top,
+//       };
+//       // We cast to 'any' here because we are manually triggering an internal 
+//       // event bus, and Fabric's internal types for .fire() can be overly strict.
+//       canvas.fire("mouse:wheel", {
+//         e: nativeEvent,
+//         scenePoint,
+//         viewportPoint,
+//       } as any);
+//       e.preventDefault();
+//       e.stopPropagation();
+//     }
+//   };
+//   useEffect(() => {
+//     const overlayEl = overlayRef.current;
+//     const canvas = fabricCanvas?.current;
+//     if (!overlayEl || !canvas) return;
+//     const handleGlobalWheel = (e: WheelEvent) => {
+//       // Check if the user is hovering over an element that has pointer-events: auto
+//       // (meaning they are hovering over a Task or Document)
+//       const target = e.target as HTMLElement;
+//       const isOverNode = target !== overlayEl;
+//       if ((e.ctrlKey || e.metaKey) && isOverNode) {
+//         // 1. Prevent Browser Zoom immediately
+//         e.preventDefault();
+//         e.stopPropagation();
+//         // 2. Calculate coordinates for Fabric
+//         const scenePoint = canvas.getScenePoint(e);
+//         const rect = canvas.getElement().getBoundingClientRect();
+//         const viewportPoint = {
+//           x: e.clientX - rect.left,
+//           y: e.clientY - rect.top,
+//         };
+//         // 3. Manually fire the event into Fabric
+//         canvas.fire("mouse:wheel", {
+//           e: e,
+//           scenePoint,
+//           viewportPoint,
+//         } as any);
+//       }
+//     };
+//     // CRITICAL: { passive: false } allows us to cancel the browser's zoom
+//     overlayEl.addEventListener("wheel", handleGlobalWheel, { passive: false });
+//     return () => {
+//       overlayEl.removeEventListener("wheel", handleGlobalWheel);
+//     };
+//   }, [fabricCanvas, canvasZoom  ,canvasReady]); // Re-bind when zoom changes to keep closure fresh
+//   // ── Fabric → Overlay Sync (Fixes Dragging from Fabric area) ──────────────────
+//   useEffect(() => {
+//     const canvas = fabricCanvas?.current;
+//     if (!canvas) return;
+//     const handleObjectMoving = (e: any) => {
+//       const target = e.transform?.target || e.target;
+//       if (!target) return;
+//       const deltaX = target.left - (target._prevLeft ?? target.left);
+//       const deltaY = target.top  - (target._prevTop  ?? target.top);
+//       target._prevLeft = target.left;
+//       target._prevTop  = target.top;
+//       if (deltaX === 0 && deltaY === 0) return;
+//       // ── Read from ref — always fresh, never stale ──
+//       const sel = selectedIdsRef.current;
+//       setLocalTasks((prev) =>
+//         prev.map((t) => sel.has(t.id) ? { ...t, x: t.x + deltaX, y: t.y + deltaY } : t)
+//       );
+//       setLocalDocuments((prev) =>
+//         prev.map((d) => sel.has(d.id) ? { ...d, x: d.x + deltaX, y: d.y + deltaY } : d)
+//       );
+//     };
+//     const handleMouseDown = (e: any) => {
+//       const target = e.target;
+//       if (target) {
+//         target._prevLeft = target.left;
+//         target._prevTop  = target.top;
+//       }
+//       if (!target) {
+//         setSelectedIds(new Set());
+//         return;
+//       }
+//       // At zoom=1 with identity VPT, getActiveObject() can return null before
+//       // Fabric updates _activeObject. Use e.transform as the primary check —
+//       // it is populated by Fabric's hit-test regardless of zoom level.
+//       const transformTarget = e.transform?.target;
+//       const activeObject    = canvas.getActiveObject();
+//       const activeObjects   = canvas.getActiveObjects();
+//       const isPartOfActiveSelection =
+//         transformTarget === target ||           // most reliable — direct from event
+//         activeObject === target ||              // selection box group
+//         activeObjects.includes(target);        // individual object in multi-select
+//       if (!isPartOfActiveSelection) {
+//         setSelectedIds(new Set());
+//       }
+//     };
+//     const handleSelectionCleared = () => {
+//       setSelectedIds(new Set());
+//     };
+//     canvas.on("object:moving",     handleObjectMoving);
+//     canvas.on("mouse:down",        handleMouseDown);
+//     canvas.on("selection:cleared", handleSelectionCleared);
+//     return () => {
+//       canvas.off("object:moving",     handleObjectMoving);
+//       canvas.off("mouse:down",        handleMouseDown);
+//       canvas.off("selection:cleared", handleSelectionCleared);
+//     };
+//   // ── selectedIds REMOVED from deps — read via selectedIdsRef instead ──────
+//   // 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]);
+//   // ── Helpers ─────────────────────────────────────────────────────────────────
+//   const getItemPosition = (id: string): { x: number; y: number } | undefined => {
+//     const task = localTasks.find((t) => t.id === id);
+//     if (task) return { x: task.x, y: task.y };
+//     const doc = localDocuments.find((d) => d.id === id);
+//     if (doc) return { x: doc.x, y: doc.y };
+//     return undefined;
+//   };
+//   const isItemInSelectionBox = (
+//     x: number,
+//     y: number,
+//     width: number,
+//     height: number,
+//     box: { x1: number; y1: number; x2: number; y2: number }
+//   ) => {
+//     const itemX1 = x * canvasZoom + canvasViewport.x;
+//     const itemY1 = y * canvasZoom + canvasViewport.y;
+//     const itemX2 = itemX1 + width * canvasZoom;
+//     const itemY2 = itemY1 + height * canvasZoom;
+//     const boxX1 = Math.min(box.x1, box.x2);
+//     const boxY1 = Math.min(box.y1, box.y2);
+//     const boxX2 = Math.max(box.x1, box.x2);
+//     const boxY2 = Math.max(box.y1, box.y2);
+//     return !(boxX2 < itemX1 || boxX1 > itemX2 || boxY2 < itemY1 || boxY1 > itemY2);
+//   };
+//   // ── Selection box detection ──────────────────────────────────────────────────
+//   useEffect(() => {
+//     if (!selectionBox) return;
+//     // ── O(n) single pass — no sort, no join, no extra allocations ──
+//     const newSelected = new Set<string>();
+//     for (const task of localTasks) {
+//       if (isItemInSelectionBox(task.x, task.y, 300, 140, selectionBox))
+//         newSelected.add(task.id);
+//     }
+//     for (const doc of localDocuments) {
+//       if (isItemInSelectionBox(doc.x, doc.y, 320, 160, selectionBox))
+//         newSelected.add(doc.id);
+//     }
+//     // ── O(n) equality check: size first (fast path), then membership ──
+//     setSelectedIds((prev) => {
+//       if (prev.size !== newSelected.size) return newSelected;
+//       for (const id of newSelected) {
+//         if (!prev.has(id)) return newSelected; // found a difference, swap
+//       }
+//       return prev; // identical — return same reference, no re-render
+//     });
+//   }, [selectionBox, localTasks, localDocuments, canvasZoom, canvasViewport]);
+//   // ── Drag start (HTML Node side) ──────────────────────────────────────────────
+// // Helper to extract coordinates regardless of event type
+// const getPointerEvent = (e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent) => {
+//   if ('touches' in e && e.touches.length > 0) return e.touches[0];
+//   return e as { clientX: number; clientY: number };
+// };
+// const handleDragStart = (itemId: string, e: React.MouseEvent | React.TouchEvent) => {
+//   // 1. Safety check for the Fabric instance
+//   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: string[];
+//   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
+//   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);
+//   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<string, { x: number; y: number }>();
+//   itemsToDrag.forEach((id) => {
+//     const pos = getItemPosition(id);
+//     if (pos) startPositions.set(id, pos);
+//   });
+//   // 9. Snapshot starting positions for all selected Fabric objects
+//   const canvasObjectsStartPos = new Map<FabricObject, { left: number; top: number }>();
+//   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
+//   };
+//  if (!selectedIds.has(itemId) && dragStateRef.current.itemIds.length === 0) {
+//     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";
+// };
+//   // ── Drag move (HTML Node side) ───────────────────────────────────────────────
+//   useEffect(() => {
+//     if (!dragging) return;
+//     // Inside the useEffect that watches [dragging, localTasks, localDocuments, fabricCanvas]
+// const handleMove = (e: MouseEvent | TouchEvent) => {
+//   if (!dragStateRef.current.isDragging) return;
+//   if (e.cancelable) e.preventDefault();
+//   const pointer = getPointerEvent(e);
+//   // 1. Throttle updates using requestAnimationFrame for 120Hz/144Hz screen support
+//   if (rafIdRef.current !== null) cancelAnimationFrame(rafIdRef.current);
+//   rafIdRef.current = requestAnimationFrame(() => {
+//     const { itemIds, startPositions, canvasObjectsStartPos, offsetX, offsetY } = dragStateRef.current;
+//     const canvas = fabricCanvas?.current;
+//     if (!canvas) return;
+//     // 2. Read the "Source of Truth" transform from the canvas
+//     const vpt = canvas.viewportTransform!;
+//     const liveZoom = vpt[0]; // Scale
+//     const liveVpX  = vpt[4]; // Pan X
+//     const liveVpY  = vpt[5]; // Pan Y
+//     // 3. Convert current Mouse Screen Position → World Position
+//     const currentWorldX = (pointer.clientX - liveVpX) / liveZoom;
+//     const currentWorldY = (pointer.clientY - liveVpY) / liveZoom;
+//     // 4. Calculate where the "Anchor" node should be in World Units
+//     // (Current Mouse World - Initial World Offset from Start)
+//     const deltaX = currentWorldX - offsetX;
+//     const deltaY = currentWorldY - offsetY;
+//     // if (itemIds.length > 0) {
+//     //   console.groupCollapsed(`Dragging Node: ${itemIds[0]}`);
+//     //   console.log("Screen Mouse:", { x: pointer.clientX, y: pointer.clientY });
+//     //   console.log("World Mouse:", { x: currentWorldX.toFixed(2), y: currentWorldY.toFixed(2) });
+//     //   console.log("Canvas Zoom:", liveZoom.toFixed(2));
+//     //   console.log("New Node Pos:", { x: deltaX.toFixed(2), y: deltaY.toFixed(2) });
+//     //   console.groupEnd();
+//     // }
+//     // 5. Calculate the Movement Delta in World Units
+//     // We compare where the first item started vs where it is now.
+//     const firstId = itemIds[0];
+//     const firstStart = startPositions.get(firstId);
+//     if (!firstStart) return;
+//     // The real problem of task jumps 
+//     // const deltaX = deltaX - firstStart.x;
+//     // 6. Update HTML Nodes (Batching these into one state update)
+//     setLocalTasks((prev) =>
+//       prev.map((t) => itemIds.includes(t.id) ? {
+//         ...t,
+//         x: (startPositions.get(t.id)?.x ?? t.x) + deltaX,
+//         y: (startPositions.get(t.id)?.y ?? t.y) + deltaY,
+//       } : t)
+//     );
+//     setLocalDocuments((prev) =>
+//       prev.map((d) => itemIds.includes(d.id) ? {
+//         ...d,
+//         x: (startPositions.get(d.id)?.x ?? d.x) + deltaX,
+//         y: (startPositions.get(d.id)?.y ?? d.y) + deltaY,
+//       } : d)
+//     );
+//     // 7. Sync Fabric Objects (Imperative update for performance)
+//     canvasObjectsStartPos.forEach((startPos, obj) => {
+//       obj.set({
+//         left: startPos.left + deltaX,
+//         top:  startPos.top  + deltaY,
+//       });
+//       obj.setCoords(); // Required for selection/intersection accuracy
+//     });
+//     // 8. Single render call for all Fabric changes
+//     canvas.requestRenderAll();
+//   });
+// };
+//     const handleEnd = () => {
+//       if (rafIdRef.current !== null) cancelAnimationFrame(rafIdRef.current);
+//       dragStateRef.current.isDragging = false;
+//       setDragging(null);
+//       document.body.style.cursor = "";
+//       document.body.style.userSelect = "";
+//       document.body.style.touchAction = "";
+//       onTasksUpdate?.(localTasks);
+//       onDocumentsUpdate?.(localDocuments);
+//     };
+//     window.addEventListener("mousemove", handleMove, { passive: false });
+//     window.addEventListener("mouseup", handleEnd);
+//     window.addEventListener("touchmove", handleMove, { passive: false });
+//     window.addEventListener("touchend", handleEnd);
+//     window.addEventListener("touchcancel", handleEnd);
+//     return () => {
+//       window.removeEventListener("mousemove", handleMove);
+//       window.removeEventListener("mouseup", handleEnd);
+//       window.removeEventListener("touchmove", handleMove);
+//       window.removeEventListener("touchend", handleEnd);
+//       window.removeEventListener("touchcancel", handleEnd);
+//     };
+//   }, [dragging, localTasks, localDocuments, fabricCanvas]);
+//   // ── Selection, Status, Keyboard Logic ────────────────────────────────────────
+//   const handleSelect = (id: string, e?: React.MouseEvent) => {
+//     if (e?.shiftKey || e?.ctrlKey || e?.metaKey) {
+//       setSelectedIds((prev) => {
+//         const next = new Set(prev);
+//         next.has(id) ? next.delete(id) : next.add(id);
+//         return next;
+//       });
+//     } else {
+//       setSelectedIds(new Set([id]));
+//     }
+//   };
+//   const handleStatusChange = (taskId: string, newStatus: "todo" | "in-progress" | "done") => {
+//     const updated = localTasks.map((t) => (t.id === taskId ? { ...t, status: newStatus } : t));
+//     setLocalTasks(updated);
+//     onTasksUpdate?.(updated);
+//   };
+//   useEffect(() => {
+//     const handleKeyDown = (e: KeyboardEvent) => {
+//       // 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)]));
+//       }
+//       // Clear selection
+//       if (e.key === "Escape") {
+//         setSelectedIds(new Set());
+//       }
+//       // ← ADD THIS: Delete selected nodes
+//       if ((e.key === "Delete" || e.key === "Backspace") && selectedIds.size > 0) {
+//         e.preventDefault();
+//         const updatedTasks = localTasks.filter((t) => !selectedIds.has(t.id));
+//         const updatedDocs = localDocuments.filter((d) => !selectedIds.has(d.id));
+//         setLocalTasks(updatedTasks);
+//         setLocalDocuments(updatedDocs);
+//         setSelectedIds(new Set());
+//         onTasksUpdate?.(updatedTasks);
+//         onDocumentsUpdate?.(updatedDocs);
+//       }
+//     };
+//     window.addEventListener("keydown", handleKeyDown);
+//     return () => window.removeEventListener("keydown", handleKeyDown);
+//   }, [localTasks, localDocuments, selectedIds, onTasksUpdate, onDocumentsUpdate]);
+//   // ── Render helper ────────────────────────────────────────────────────────────
+//   const renderItem = (id: string, x: number, y: number, children: React.ReactNode) => {
+//     const screenX = x * canvasZoom;
+//     const screenY = y * canvasZoom;
+//     // 1. Detect if the user is interacting with the canvas at all
+//     // 'dragging' is your existing state. 
+//     // You might want to pass 'isZooming' or 'isPanning' from your main canvas component here.
+//     const isDragging = dragging?.itemIds.includes(id);
+//     return (
+//       <div
+//         key={id}
+//         className="pointer-events-auto absolute"
+//         style={{
+//           left: 0,
+//           top: 0,
+//           // 2. Use translate3d for GPU performance
+//           transform: `translate3d(${screenX}px, ${screenY}px, 0) scale(${canvasZoom})`,
+//           transformOrigin: "top left",
+//           // 3. THE FIX: Remove transition entirely during any viewport change
+//           // Any 'ease' during zoom causes the "shaking" behavior.
+//           transition: "none", 
+//           // 4. Optimization
+//           willChange: "transform", 
+//           zIndex: isDragging ? 1000 : 1,
+//         }}
+//       >
+//         {children}
+//       </div>
+//     );
+//   };
+//   return (
+//     <div
+//       ref={overlayRef}
+//       className="absolute inset-0 pointer-events-none"
+//       style={{ zIndex: 50 }}
+//       onWheel={handleOverlayWheel}
+//       onClick={(e) => { 
+//         if (e.target === e.currentTarget) setSelectedIds(new Set()); 
+//       }}
+//     >
+//       <div
+//         className="absolute top-0 left-0 pointer-events-none"
+//         style={{
+//           transform: `translate(${canvasViewport.x}px, ${canvasViewport.y}px)`,
+//           transformOrigin: "top left",
+//         }}
+//       >
+//         {localTasks.map((task) =>
+//           renderItem(task.id, task.x, task.y,
+//             <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,
+//             <DocumentNode
+//               {...doc}
+//               isSelected={selectedIds.has(doc.id)}
+//               onSelect={handleSelect}
+//               onDragStart={handleDragStart}
+//             />
+//           )
+//         )}
+//       </div>
+//     </div>
+//   );
+// }

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;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"}
+{"version":3,"file":"custom-node-overlay-layer.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node-overlay-layer.tsx"],"names":[],"mappings":"AAIA,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"}

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

@@ -1,12 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef, useCallback } from "react";
+import { useState, useEffect, useRef } 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);
@@ -18,13 +14,6 @@ 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: [],
@@ -36,16 +25,7 @@ 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]);
@@ -126,7 +106,7 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         return () => {
             overlayEl.removeEventListener("wheel", handleGlobalWheel);
         };
-    }, [fabricCanvas, canvasReady]); // Re-bind when zoom changes to keep closure fresh
+    }, [fabricCanvas, canvasZoom, canvasReady]); // Re-bind when zoom changes to keep closure fresh
     // ── Fabric → Overlay Sync (Fixes Dragging from Fabric area) ──────────────────
     useEffect(() => {
         const canvas = fabricCanvas?.current;
@@ -185,7 +165,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.
-    }, [fabricCanvas, canvasReady]);
+    }, [canvasZoom, fabricCanvas, canvasReady]);
     // ── Helpers ─────────────────────────────────────────────────────────────────
     const getItemPosition = (id) => {
         const task = localTasks.find((t) => t.id === id);
@@ -239,61 +219,72 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             return e.touches[0];
         return e;
     };
-    const handleDragStart = useCallback((itemId, e) => {
+    const handleDragStart = (itemId, e) => {
+        // 1. Safety check for the Fabric instance
         const canvas = fabricCanvas?.current;
         if (!canvas)
             return;
+        // 2. Normalize the event (Touch vs Mouse)
         if (e.cancelable)
             e.preventDefault();
         const pointer = getPointerEvent(e);
-        // read from ref — always fresh
-        const currentSelectedIds = selectedIdsRef.current;
-        let itemsToDrag = currentSelectedIds.has(itemId)
-            ? Array.from(currentSelectedIds)
-            : [itemId];
+        // 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
         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;
-        // 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);
+        // 6. Get the clicked item's current World Position
+        const clickedPos = getItemPosition(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 = getPos(id);
+            const pos = getItemPosition(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,
-            offsetY: clickWorldY,
+            offsetX: clickWorldX, // Now stored as World Units
+            offsetY: clickWorldY, // Now stored as World Units
         };
-        if (!currentSelectedIds.has(itemId))
+        if (!selectedIds.has(itemId) && dragStateRef.current.itemIds.length === 0) {
             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)
@@ -372,8 +363,8 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             document.body.style.cursor = "";
             document.body.style.userSelect = "";
             document.body.style.touchAction = "";
-            onTasksUpdateRef.current?.(localTasksRef.current); // ref instead of closure
-            onDocsUpdateRef.current?.(localDocsRef.current);
+            onTasksUpdate?.(localTasks);
+            onDocumentsUpdate?.(localDocuments);
         };
         window.addEventListener("mousemove", handleMove, { passive: false });
         window.addEventListener("mouseup", handleEnd);
@@ -387,9 +378,9 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
             window.removeEventListener("touchend", handleEnd);
             window.removeEventListener("touchcancel", handleEnd);
         };
-    }, [dragging, fabricCanvas]);
+    }, [dragging, localTasks, localDocuments, fabricCanvas]);
     // ── Selection, Status, Keyboard Logic ────────────────────────────────────────
-    const handleSelect = useCallback((id, e) => {
+    const handleSelect = (id, e) => {
         if (e?.shiftKey || e?.ctrlKey || e?.metaKey) {
             setSelectedIds((prev) => {
                 const next = new Set(prev);
@@ -400,38 +391,41 @@ export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, on
         else {
             setSelectedIds(new Set([id]));
         }
-    }, []);
-    const handleStatusChange = useCallback((taskId, newStatus) => {
-        setLocalTasks((prev) => {
-            const updated = prev.map((t) => t.id === taskId ? { ...t, status: newStatus } : t);
-            onTasksUpdateRef.current?.(updated);
-            return updated;
-        });
-    }, []);
+    };
+    const handleStatusChange = (taskId, newStatus) => {
+        const updated = localTasks.map((t) => (t.id === taskId ? { ...t, status: newStatus } : t));
+        setLocalTasks(updated);
+        onTasksUpdate?.(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([...localTasksRef.current.map((t) => t.id), ...localDocsRef.current.map((d) => d.id)]));
+                setSelectedIds(new Set([...localTasks.map((t) => t.id), ...localDocuments.map((d) => d.id)]));
             }
-            if (e.key === "Escape")
+            // Clear selection
+            if (e.key === "Escape") {
                 setSelectedIds(new Set());
-            if ((e.key === "Delete" || e.key === "Backspace") && selectedIdsRef.current.size > 0) {
+            }
+            // ← ADD THIS: Delete selected nodes
+            if ((e.key === "Delete" || e.key === "Backspace") && selectedIds.size > 0) {
                 e.preventDefault();
-                const updatedTasks = localTasksRef.current.filter((t) => !selectedIdsRef.current.has(t.id));
-                const updatedDocs = localDocsRef.current.filter((d) => !selectedIdsRef.current.has(d.id));
+                const updatedTasks = localTasks.filter((t) => !selectedIds.has(t.id));
+                const updatedDocs = localDocuments.filter((d) => !selectedIds.has(d.id));
                 setLocalTasks(updatedTasks);
                 setLocalDocuments(updatedDocs);
                 setSelectedIds(new Set());
-                onTasksUpdateRef.current?.(updatedTasks);
-                onDocsUpdateRef.current?.(updatedDocs);
+                onTasksUpdate?.(updatedTasks);
+                onDocumentsUpdate?.(updatedDocs);
             }
         };
         window.addEventListener("keydown", handleKeyDown);
         return () => window.removeEventListener("keydown", handleKeyDown);
-    }, []); // stable — everything via refs
+    }, [localTasks, localDocuments, selectedIds, onTasksUpdate, onDocumentsUpdate]);
     // ── Render helper ────────────────────────────────────────────────────────────
     const renderItem = (id, x, y, children) => {
         const screenX = x * canvasZoom;
@@ -460,5 +454,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(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 })))] }) }));
+            }, 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 })))] }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"usePersistance.d.ts","sourceRoot":"","sources":["../../src/hooks/usePersistance.ts"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAIhC,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,SAAS,EAAE,GAAG,EAAE,CAAC;CAClB;AAED,UAAU,mBAAmB;IAC3B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7C,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,SAAS,EAAE,GAAG,EAAE,CAAC;IACjB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACzC,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAG7C,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAElD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAID,eAAO,MAAM,cAAc,GAAI,8GAS5B,mBAAmB,SAgHrB,CAAC"}
+{"version":3,"file":"usePersistance.d.ts","sourceRoot":"","sources":["../../src/hooks/usePersistance.ts"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAIhC,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,SAAS,EAAE,GAAG,EAAE,CAAC;CAClB;AAED,UAAU,mBAAmB;IAC3B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7C,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,SAAS,EAAE,GAAG,EAAE,CAAC;IACjB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACzC,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAG7C,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAElD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAID,eAAO,MAAM,cAAc,GAAI,8GAS5B,mBAAmB,SA+GrB,CAAC"}

package/dist/hooks/usePersistance.js

@@ -31,8 +31,6 @@ export const usePersistence = ({ fabricCanvas, tasks, documents, pushHistory, is
                 tasks: tasksRef.current,
                 documents: documentsRef.current,
             };
-            // 🔍 ADD THIS LOG HERE:
-            console.log("🚀 FINAL WHITEBOARD STRUCTURE:", payload);
             // Push to undo/redo history
             pushHistoryRef.current(canvasJson);
             // Notify consumer

package/package.json

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