@mhamz.01/easyflow-whiteboard 2.79.0 → 2.81.0

package/dist/components/node/custom-node-overlay-fix.d.ts

@@ -0,0 +1,3 @@
+import { CanvasOverlayLayerProps } from "./types/overlay-types";
+export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, onDocumentsUpdate, canvasZoom, canvasViewport, selectionBox, selectedCanvasObjects, fabricCanvas, }: CanvasOverlayLayerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=custom-node-overlay-fix.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"custom-node-overlay-fix.d.ts","sourceRoot":"","sources":["../../../src/components/node/custom-node-overlay-fix.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAkB,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAQhF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,UAAc,EACd,cAA+B,EAC/B,YAAmB,EACnB,qBAA0B,EAC1B,YAAY,GACb,EAAE,uBAAuB,2CA0SzB"}

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

@@ -0,0 +1,198 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback } from "react";
+import TaskNode from "./custom-node";
+import DocumentNode from "./document-node";
+import { useWheelZoom } from "./hooks/useWheelZoom";
+import { useNodeDrag } from "./hooks/useNodeDrag";
+import { useSelectionBox } from "./hooks/useSelectionBox";
+import { useKeyboardShortcuts } from "./hooks/useKeyboardShortcuts";
+import { useCanvasReady } from "./hooks/useCanvasReady";
+import { useNodeSync } from "./hooks/useNodeSync";
+export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, onDocumentsUpdate, canvasZoom = 1, canvasViewport = { x: 0, y: 0 }, selectionBox = null, selectedCanvasObjects = [], fabricCanvas, }) {
+    // ─── State Management ──────────────────────────────────────────────────
+    const [liveViewport, setLiveViewport] = useState(canvasViewport);
+    const [liveZoom, setLiveZoom] = useState(canvasZoom);
+    const [localTasks, setLocalTasks] = useState(tasks);
+    const [localDocuments, setLocalDocuments] = useState(documents);
+    const [selectedIds, setSelectedIds] = useState(new Set());
+    const [dragging, setDragging] = useState(null);
+    const overlayRef = useRef(null);
+    const dragStateRef = useRef(null);
+    // ─── Hooks ────────────────────────────────────────────────────────────
+    const canvasReady = useCanvasReady({ fabricCanvas });
+    const { handleOverlayWheel } = useWheelZoom({
+        overlayRef,
+        fabricCanvas,
+        canvasZoom,
+        canvasReady,
+        onViewportChange: useCallback((viewport, zoom) => {
+            setLiveViewport(viewport);
+            setLiveZoom(zoom);
+        }, []),
+    });
+    const { dragStateRef: dragRef, rafIdRef, getPointerEvent, getViewportTransform, handleDragStart: handleDragStartHook, handleDragMove: handleDragMoveHook, handleDragEnd: handleDragEndHook, } = useNodeDrag({
+        selectedIds,
+        fabricCanvas,
+        selectedCanvasObjects,
+        onDragStateChange: setDragging,
+    });
+    dragStateRef.current = dragRef.current;
+    useSelectionBox({
+        selectionBox,
+        localTasks,
+        localDocuments,
+        canvasZoom,
+        canvasViewport,
+        onSelectionChange: setSelectedIds,
+    });
+    useNodeSync({
+        tasks: localTasks,
+        documents: localDocuments,
+        selectedIds,
+        fabricCanvas,
+        onTasksUpdate,
+        onDocumentsUpdate,
+    });
+    useKeyboardShortcuts({
+        selectedIds,
+        localTasks,
+        localDocuments,
+        onSelectAll: () => setSelectedIds(new Set([...localTasks.map((t) => t.id), ...localDocuments.map((d) => d.id)])),
+        onClearSelection: () => setSelectedIds(new Set()),
+        onDeleteSelected: (tasks, docs) => {
+            setLocalTasks(tasks);
+            setLocalDocuments(docs);
+            setSelectedIds(new Set());
+            onTasksUpdate?.(tasks);
+            onDocumentsUpdate?.(docs);
+        },
+    });
+    // ─── Effects ──────────────────────────────────────────────────────────
+    useEffect(() => {
+        setLocalTasks(tasks);
+    }, [tasks]);
+    useEffect(() => {
+        setLocalDocuments(documents);
+    }, [documents]);
+    // ─── Handlers ─────────────────────────────────────────────────────────
+    const getItemPosition = useCallback((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;
+    }, [localTasks, localDocuments]);
+    const handleDragStart = useCallback((itemId, e) => {
+        handleDragStartHook(itemId, getItemPosition, e);
+    }, [handleDragStartHook, getItemPosition]);
+    // ─── Drag Move Effect ─────────────────────────────────────────────────
+    useEffect(() => {
+        if (!dragging)
+            return;
+        const handleMove = (e) => {
+            if (!dragStateRef.current?.isDragging)
+                return;
+            if (e.cancelable)
+                e.preventDefault();
+            const pointer = getPointerEvent(e);
+            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;
+                const { zoom: liveZoom, vpX: liveVpX, vpY: liveVpY } = getViewportTransform(canvas);
+                const currentWorldX = (pointer.clientX - liveVpX) / liveZoom;
+                const currentWorldY = (pointer.clientY - liveVpY) / liveZoom;
+                const deltaX = currentWorldX - offsetX;
+                const deltaY = currentWorldY - offsetY;
+                // Update HTML Nodes
+                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));
+                // Update Fabric Objects
+                canvasObjectsStartPos.forEach((startPos, obj) => {
+                    obj.set({
+                        left: startPos.left + deltaX,
+                        top: startPos.top + deltaY,
+                    });
+                    obj.setCoords();
+                });
+                canvas.requestRenderAll();
+            });
+        };
+        const handleEnd = () => {
+            handleDragEndHook();
+            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, getViewportTransform, getPointerEvent, handleDragEndHook, onTasksUpdate, onDocumentsUpdate]);
+    // ─── Selection Handlers ────────────────────────────────────────────────
+    const handleSelect = useCallback((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 = useCallback((taskId, newStatus) => {
+        const updated = localTasks.map((t) => t.id === taskId ? { ...t, status: newStatus } : t);
+        setLocalTasks(updated);
+        onTasksUpdate?.(updated);
+    }, [localTasks, onTasksUpdate]);
+    // ─── Render Helper ────────────────────────────────────────────────────
+    const renderItem = useCallback((id, x, y, children) => {
+        const screenX = x * canvasZoom;
+        const screenY = y * canvasZoom;
+        const isDragging = dragging?.itemIds.includes(id);
+        return (_jsx("div", { className: "pointer-events-auto absolute", style: {
+                left: 0,
+                top: 0,
+                transform: `translate3d(${screenX}px, ${screenY}px, 0) scale(${canvasZoom})`,
+                transformOrigin: "top left",
+                transition: "none",
+                willChange: "transform",
+                zIndex: isDragging ? 1000 : 1,
+            }, children: children }, id));
+    }, [canvasZoom, dragging]);
+    // ─── Render ───────────────────────────────────────────────────────────
+    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 })))] }) }));
+}

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

@@ -1,45 +1 @@
-import { FabricObject, Canvas } from "fabric";
-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;
-}
-export default function CanvasOverlayLayer({ tasks, documents, onTasksUpdate, onDocumentsUpdate, canvasZoom, canvasViewport, selectionBox, selectedCanvasObjects, fabricCanvas, }: CanvasOverlayLayerProps): import("react/jsx-runtime").JSX.Element;
-export {};
 //# sourceMappingURL=custom-node-overlay-layer.d.ts.map

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

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