@mhamz.01/easyflow-whiteboard 2.85.0 → 2.86.0

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

@@ -1,545 +1,458 @@
-"use strict";
-// "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>
-//   );
-// }
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import TaskNode from "./custom-node";
+import DocumentNode from "./document-node";
+// ─── 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);
+    const [localDocuments, setLocalDocuments] = useState(documents);
+    const [selectedIds, setSelectedIds] = useState(new Set());
+    const [dragging, setDragging] = useState(null);
+    const [canvasReady, setCanvasReady] = useState(false);
+    const nodeClipboardRef = useRef({
+        tasks: [],
+        documents: [],
+    });
+    const dragStateRef = useRef({
+        isDragging: false,
+        itemIds: [],
+        startPositions: new Map(),
+        canvasObjectsStartPos: new Map(),
+        offsetX: 0,
+        offsetY: 0,
+    });
+    const rafIdRef = useRef(null);
+    const overlayRef = useRef(null);
+    const selectedIdsRef = useRef(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) => {
+        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,
+            });
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    };
+    useEffect(() => {
+        const overlayEl = overlayRef.current;
+        const canvas = fabricCanvas?.current;
+        if (!overlayEl || !canvas)
+            return;
+        const handleGlobalWheel = (e) => {
+            // 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;
+            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,
+                });
+            }
+        };
+        // 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) => {
+            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) => {
+            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) => {
+        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, y, width, height, box) => {
+        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();
+        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) => {
+        if ('touches' in e && e.touches.length > 0)
+            return e.touches[0];
+        return 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);
+        // 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;
+        // 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 = 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, // 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) => {
+            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, e) => {
+        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, 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([...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, x, y, children) => {
+        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 (_jsx("div", { 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: children }, id));
+    };
+    return (_jsx("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());
+        }, 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 })))] }) }));
+}