@mhamz.01/easyflow-whiteboard 2.137.0 → 2.139.0

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

@@ -1,482 +1,615 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useEffect, useRef } from "react";
-import TaskNode from "./custom-node";
-import DocumentNode from "./document-node";
-// ─── Component ────────────────────────────────────────────────────────────────
-export default React.memo(function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, onDocumentsUpdate, canvasZoom = 1, canvasViewport = { x: 0, y: 0 }, selectionBox = null, selectedCanvasObjects = [], fabricCanvas, canvasReady: canvasReadyProp = false, }) {
-    const [localTasks, setLocalTasks] = useState(tasks);
-    const [localDocuments, setLocalDocuments] = useState(documents);
-    const [selectedIds, setSelectedIds] = useState(new Set());
-    const [dragging, setDragging] = useState(null);
-    const nodeClipboardRef = useRef({
-        tasks: [],
-        documents: [],
-    });
-    // ── Refs for always-current state (Issue 4) ────────────────────────────────
-    const localTasksRef = useRef(localTasks);
-    const localDocumentsRef = useRef(localDocuments);
-    const selectedIdsRef = useRef(selectedIds);
-    localTasksRef.current = localTasks;
-    localDocumentsRef.current = localDocuments;
-    selectedIdsRef.current = selectedIds;
-    const dragStateRef = useRef({
-        isDragging: false,
-        itemIds: [],
-        startPositions: new Map(),
-        canvasObjectsStartPos: new Map(),
-        offsetX: 0,
-        offsetY: 0,
-    });
-    const rafIdRef = useRef(null);
-    const fabricMoveRafRef = useRef(null); // Issue 7
-    const overlayRef = useRef(null);
-    // ── Sync props → local state ────────────────────────────────────────────────
-    useEffect(() => {
-        setLocalTasks(tasks);
-    }, [tasks]);
-    useEffect(() => {
-        setLocalDocuments(documents);
-    }, [documents]);
-    // Issue 2: Remove internal canvasReady state and polling — use prop directly
-    // No longer needed: const [canvasReady, setCanvasReady] = useState(false);
-    // No longer needed: polling useEffect with setInterval
-    // ── 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();
-        }
-    };
-    // Issue 6: Remove canvasZoom from deps — not used in handler
-    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, canvasReadyProp]); // Issue 6: removed canvasZoom
-    // ── Fabric → Overlay Sync (Fixes Dragging from Fabric area) ──────────────────
-    // Issue 5: Remove canvasZoom from deps — not used in handlers
-    useEffect(() => {
-        const canvas = fabricCanvas?.current;
-        if (!canvas)
-            return;
-        // Issue 7: Throttle handleObjectMoving with rAF gate
-        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;
-            const sel = selectedIdsRef.current;
-            // Skip if frame already queued
-            if (fabricMoveRafRef.current !== null)
-                return;
-            fabricMoveRafRef.current = requestAnimationFrame(() => {
-                fabricMoveRafRef.current = null;
-                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);
-            if (fabricMoveRafRef.current !== null) {
-                cancelAnimationFrame(fabricMoveRafRef.current);
-            }
-        };
-    }, [fabricCanvas, canvasReadyProp]); // Issue 5: removed canvasZoom
-    // ── Helpers ─────────────────────────────────────────────────────────────────
-    const getItemPosition = (id) => {
-        const task = localTasksRef.current.find((t) => t.id === id);
-        if (task)
-            return { x: task.x, y: task.y };
-        const doc = localDocumentsRef.current.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 localTasksRef.current) {
-            if (isItemInSelectionBox(task.x, task.y, 300, 140, selectionBox))
-                newSelected.add(task.id);
-        }
-        for (const doc of localDocumentsRef.current) {
-            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 (selectedIdsRef.current.has(itemId)) {
-            itemsToDrag = Array.from(selectedIdsRef.current);
-        }
-        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 (!selectedIdsRef.current.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) ───────────────────────────────────────────────
-    // Issue 3: Remove localTasks/localDocuments from deps — use refs instead
-    useEffect(() => {
-        if (!dragging)
-            return;
-        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;
-                // 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;
-                // 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();
-            });
-        };
-        // Issue 4: Use refs for always-current values
-        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?.(localTasksRef.current);
-            onDocumentsUpdate?.(localDocumentsRef.current);
-        };
-        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, fabricCanvas]); // Issue 3: removed localTasks/localDocuments
-    // ── 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 = localTasksRef.current.map((t) => t.id === taskId ? { ...t, status: newStatus } : t);
-        setLocalTasks(updated);
-        onTasksUpdate?.(updated);
-    };
-    // Issue 9: Use refs and only depend on stable callbacks
-    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),
-                    ...localDocumentsRef.current.map((d) => d.id),
-                ]));
-            }
-            // Clear selection
-            if (e.key === "Escape") {
-                setSelectedIds(new Set());
-            }
-            // Delete selected nodes
-            if ((e.key === "Delete" || e.key === "Backspace") &&
-                selectedIdsRef.current.size > 0) {
-                e.preventDefault();
-                const sel = selectedIdsRef.current;
-                const updatedTasks = localTasksRef.current.filter((t) => !sel.has(t.id));
-                const updatedDocs = localDocumentsRef.current.filter((d) => !sel.has(d.id));
-                setLocalTasks(updatedTasks);
-                setLocalDocuments(updatedDocs);
-                setSelectedIds(new Set());
-                onTasksUpdate?.(updatedTasks);
-                onDocumentsUpdate?.(updatedDocs);
-            }
-        };
-        window.addEventListener("keydown", handleKeyDown);
-        return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [onTasksUpdate, onDocumentsUpdate]); // Issue 9: only stable callbacks
-    // ── 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
-        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 })))] }) }));
-}, (prev, next) => {
-    // Custom comparator — skip re-render if props are equal
-    // Return true to skip re-render, false to re-render
-    return (prev.tasks === next.tasks &&
-        prev.documents === next.documents &&
-        prev.canvasZoom === next.canvasZoom &&
-        prev.canvasViewport?.x === next.canvasViewport?.x &&
-        prev.canvasViewport?.y === next.canvasViewport?.y &&
-        prev.selectionBox === next.selectionBox &&
-        prev.selectedCanvasObjects === next.selectedCanvasObjects &&
-        prev.onTasksUpdate === next.onTasksUpdate &&
-        prev.onDocumentsUpdate === next.onDocumentsUpdate &&
-        prev.canvasReady === next.canvasReady
-    // fabricCanvas ref intentionally omitted — it's stable and doesn't need comparison
-    );
-});
+"use strict";
+// "use client";
+// import React, { useState, useEffect, useRef } from "react";
+// import { FabricObject, Canvas } from "fabric";
+// import TaskNode from "./custom-node";
+// import DocumentNode from "./document-node";
+// 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 React.memo(function CanvasOverlayLayer({
+//   tasks,
+//   documents,
+//   onTasksUpdate,
+//   onDocumentsUpdate,
+//   canvasZoom = 1,
+//   canvasViewport = { x: 0, y: 0 },
+//   selectionBox = null,
+//   selectedCanvasObjects = [],
+//   fabricCanvas,
+//   canvasReady: canvasReadyProp = false,
+// }: 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 nodeClipboardRef = useRef<{ tasks: Task[]; documents: Document[] }>({
+//     tasks: [],
+//     documents: [],
+//   });
+//   // ── Refs for always-current state (Issue 4) ────────────────────────────────
+//   const localTasksRef = useRef(localTasks);
+//   const localDocumentsRef = useRef(localDocuments);
+//   const selectedIdsRef = useRef<Set<string>>(selectedIds);
+//   localTasksRef.current = localTasks;
+//   localDocumentsRef.current = localDocuments;
+//   selectedIdsRef.current = selectedIds;
+//   const dragStateRef = useRef<DragState>({
+//     isDragging: false,
+//     itemIds: [],
+//     startPositions: new Map(),
+//     canvasObjectsStartPos: new Map(),
+//     offsetX: 0,
+//     offsetY: 0,
+//   });
+//   const rafIdRef = useRef<number | null>(null);
+//   const fabricMoveRafRef = useRef<number | null>(null); // Issue 7
+//   const overlayRef = useRef<HTMLDivElement>(null);
+//   // ── Sync props → local state ────────────────────────────────────────────────
+//   useEffect(() => {
+//     setLocalTasks(tasks);
+//   }, [tasks]);
+//   useEffect(() => {
+//     setLocalDocuments(documents);
+//   }, [documents]);
+//   // Issue 2: Remove internal canvasReady state and polling — use prop directly
+//   // No longer needed: const [canvasReady, setCanvasReady] = useState(false);
+//   // No longer needed: polling useEffect with setInterval
+//   // ── 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();
+//     }
+//   };
+//   // Issue 6: Remove canvasZoom from deps — not used in handler
+//   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, canvasReadyProp]); // Issue 6: removed canvasZoom
+//   // ── Fabric → Overlay Sync (Fixes Dragging from Fabric area) ──────────────────
+//   // Issue 5: Remove canvasZoom from deps — not used in handlers
+//   useEffect(() => {
+//     const canvas = fabricCanvas?.current;
+//     if (!canvas) return;
+//     // Issue 7: Throttle handleObjectMoving with rAF gate
+//     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;
+//       const sel = selectedIdsRef.current;
+//       // Skip if frame already queued
+//       if (fabricMoveRafRef.current !== null) return;
+//       fabricMoveRafRef.current = requestAnimationFrame(() => {
+//         fabricMoveRafRef.current = null;
+//         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);
+//       if (fabricMoveRafRef.current !== null) {
+//         cancelAnimationFrame(fabricMoveRafRef.current);
+//       }
+//     };
+//   }, [fabricCanvas, canvasReadyProp]); // Issue 5: removed canvasZoom
+//   // ── Helpers ─────────────────────────────────────────────────────────────────
+//   const getItemPosition = (
+//     id: string
+//   ): { x: number; y: number } | undefined => {
+//     const task = localTasksRef.current.find((t) => t.id === id);
+//     if (task) return { x: task.x, y: task.y };
+//     const doc = localDocumentsRef.current.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 localTasksRef.current) {
+//       if (isItemInSelectionBox(task.x, task.y, 300, 140, selectionBox))
+//         newSelected.add(task.id);
+//     }
+//     for (const doc of localDocumentsRef.current) {
+//       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 (selectedIdsRef.current.has(itemId)) {
+//       itemsToDrag = Array.from(selectedIdsRef.current);
+//     } 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 (!selectedIdsRef.current.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) ───────────────────────────────────────────────
+//   // Issue 3: Remove localTasks/localDocuments from deps — use refs instead
+//   useEffect(() => {
+//     if (!dragging) return;
+//     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;
+//         // 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;
+//         // 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();
+//       });
+//     };
+//     // Issue 4: Use refs for always-current values
+//     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?.(localTasksRef.current);
+//       onDocumentsUpdate?.(localDocumentsRef.current);
+//     };
+//     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, fabricCanvas]); // Issue 3: removed localTasks/localDocuments
+//   // ── 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 = localTasksRef.current.map((t) =>
+//       t.id === taskId ? { ...t, status: newStatus } : t
+//     );
+//     setLocalTasks(updated);
+//     onTasksUpdate?.(updated);
+//   };
+//   // Issue 9: Use refs and only depend on stable callbacks
+//   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([
+//             ...localTasksRef.current.map((t) => t.id),
+//             ...localDocumentsRef.current.map((d) => d.id),
+//           ])
+//         );
+//       }
+//       // Clear selection
+//       if (e.key === "Escape") {
+//         setSelectedIds(new Set());
+//       }
+//       // Delete selected nodes
+//       if (
+//         (e.key === "Delete" || e.key === "Backspace") &&
+//         selectedIdsRef.current.size > 0
+//       ) {
+//         e.preventDefault();
+//         const sel = selectedIdsRef.current;
+//         const updatedTasks = localTasksRef.current.filter((t) => !sel.has(t.id));
+//         const updatedDocs = localDocumentsRef.current.filter((d) => !sel.has(d.id));
+//         setLocalTasks(updatedTasks);
+//         setLocalDocuments(updatedDocs);
+//         setSelectedIds(new Set());
+//         onTasksUpdate?.(updatedTasks);
+//         onDocumentsUpdate?.(updatedDocs);
+//       }
+//     };
+//     window.addEventListener("keydown", handleKeyDown);
+//     return () => window.removeEventListener("keydown", handleKeyDown);
+//   }, [onTasksUpdate, onDocumentsUpdate]); // Issue 9: only stable callbacks
+//   // ── 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
+//     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(${x}px, ${y}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>
+//   );
+// }, (prev, next) => {
+//   // Custom comparator — skip re-render if props are equal
+//   // Return true to skip re-render, false to re-render
+//   return (
+//     prev.tasks === next.tasks &&
+//     prev.documents === next.documents &&
+//     prev.canvasZoom === next.canvasZoom &&
+//     prev.canvasViewport?.x === next.canvasViewport?.x &&
+//     prev.canvasViewport?.y === next.canvasViewport?.y &&
+//     prev.selectionBox === next.selectionBox &&
+//     prev.selectedCanvasObjects === next.selectedCanvasObjects &&
+//     prev.onTasksUpdate === next.onTasksUpdate &&
+//     prev.onDocumentsUpdate === next.onDocumentsUpdate &&
+//     prev.canvasReady === next.canvasReady
+//     // fabricCanvas ref intentionally omitted — it's stable and doesn't need comparison
+//   );
+// });