@flowuent-org/diagramming-core 1.3.10 → 1.4.0

package/packages/diagrams/src/lib/templates/systemFlow/components/SystemFlowDiagramFlow.tsx

@@ -1,1179 +0,0 @@
-import React, {
-    useCallback,
-    useState,
-    useRef,
-    useEffect,
-    useMemo,
-} from 'react';
-
-import {
-    ReactFlow,
-    Background,
-    useNodesState,
-    useEdgesState,
-    useReactFlow,
-    Panel,
-    BackgroundVariant,
-    Connection,
-    NodeChange,
-    applyNodeChanges,
-    ReactFlowProvider,
-    Node,
-    Edge,
-    NodeProps,
-} from '@xyflow/react';
-import '@xyflow/react/dist/style.css';
-import {
-    SystemFlowNode,
-    SystemFlowEdge,
-    HistoryState,
-    EditingState,
-    SystemFlowNodeSettingsState,
-    SystemFlowEdgeSettingsState,
-    NodeSelectionContextType,
-    LayoutDirection,
-    UpdateFunction,
-    CloseFunction,
-    DeleteFunction
-} from '../../../types/system-flow-types';
-
-import {
-    Box,
-    Button,
-    Paper,
-    ToggleButton,
-    ToggleButtonGroup,
-    Snackbar,
-    Alert,
-} from '@mui/material';
-import DownloadIcon from '@mui/icons-material/Download';
-import UploadIcon from '@mui/icons-material/Upload';
-import FullscreenIcon from '@mui/icons-material/Fullscreen';
-import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
-import CloseIcon from '@mui/icons-material/Close';
-import UndoIcon from '@mui/icons-material/Undo';
-import RedoIcon from '@mui/icons-material/Redo';
-import ViewWeekIcon from '@mui/icons-material/ViewWeek';
-import ViewStreamIcon from '@mui/icons-material/ViewStream';
-import {
-    systemFlowDefaultNodes,
-    systemFlowDefaultEdges,
-    treeStructureTemplate,
-    treeStructureTemplate1,
-    treeStructureTemplate2,
-    treeStructureTemplate3,
-} from '../data/template-data';
-import {
-    systemFlowEdgeTypes,
-    systemFlowNodeTypes as baseSystemFlowNodeTypes,
-} from './SystemFlowComponents';
-import DiagramControls from '../controls/SystemFlowControls';
-import { NodeSelectionContext } from '../controls/SystemFlowControls';
-import SystemFlowNodeSettings from './SystemFlowNodeSettings';
-import EdgeSettings from './EdgeSettings';
-import DiagramPanel from '../../../components/DiagramPanel';
-import Sidebar from '../../../components/SideBar';
-import AiButton from '../../../components/AiButton';
-import MiniMapCommon from '../../../components/MiniMapCommon';
-
-// Browser-specific fullscreen API types
-interface WebkitElement extends Element {
-    webkitRequestFullscreen(): Promise<void>;
-}
-
-interface WebkitDocument extends Document {
-    webkitExitFullscreen(): Promise<void>;
-}
-
-interface MSElement extends Element {
-    msRequestFullscreen(): Promise<void>;
-}
-
-interface MSDocument extends Document {
-    msExitFullscreen(): Promise<void>;
-}
-
-interface SystemFlowDiagramFlowProps {
-    nodes: SystemFlowNode[];
-    setNodes: (nodes: SystemFlowNode[] | ((prev: SystemFlowNode[]) => SystemFlowNode[])) => void;
-    edges: SystemFlowEdge[];
-    setEdges: (edges: SystemFlowEdge[] | ((prev: SystemFlowEdge[]) => SystemFlowEdge[])) => void;
-}
-
-// Utility: Deep compare node arrays by id, type, data, width, height
-const deepCompareNodes = (a: Node[], b: Node[]) => {
-    if (a.length !== b.length) return false;
-    for (let i = 0; i < a.length; i++) {
-        const nodeA = a[i];
-        const nodeB = b[i];
-        if (
-            nodeA.id !== nodeB.id ||
-            nodeA.type !== nodeB.type ||
-            JSON.stringify(nodeA.data) !== JSON.stringify(nodeB.data)
-        ) {
-            return false;
-        }
-    }
-    return true;
-};
-
-// Utility: Deep compare edge arrays by id, source, target, type, data
-const deepCompareEdges = (a: Edge[], b: Edge[]) => {
-    if (a.length !== b.length) return false;
-    for (let i = 0; i < a.length; i++) {
-        const edgeA = a[i];
-        const edgeB = b[i];
-        if (
-            edgeA.id !== edgeB.id ||
-            edgeA.source !== edgeB.source ||
-            edgeA.target !== edgeB.target ||
-            edgeA.type !== edgeB.type ||
-            JSON.stringify(edgeA.data) !== JSON.stringify(edgeB.data)
-        ) {
-            return false;
-        }
-    }
-    return true;
-};
-
-// Debounce utility
-const debounce = (fn: Function, delay: number) => {
-    let timer: NodeJS.Timeout | null = null;
-    return (...args: unknown[]) => {
-        if (timer) clearTimeout(timer);
-        timer = setTimeout(() => fn(...args), delay);
-    };
-};
-
-// Helper: get center position in diagram
-const getCenterPosition = (width: number, height: number) => {
-    return { x: width / 2 - 75, y: height / 2 - 40 };
-};
-
-const SystemFlowDiagramFlowContent: React.FC<
-    SystemFlowDiagramFlowProps
-> = React.memo(({
-    nodes: initialNodes,
-    setNodes: parentSetNodes,
-    edges: initialEdges,
-    setEdges: parentSetEdges,
-}) => {
-    // State declarations
-    const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes as Node[]);
-    const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges as Edge[]);
-
-    // Custom onNodesChange handler for synchronized tree structure movement
-    const customOnNodesChange = useCallback((changes: NodeChange[]) => {
-        // First apply the default changes
-        onNodesChange(changes);
-
-        // Then handle synchronized movement for tree structure nodes
-        changes.forEach((change: NodeChange) => {
-            if (change.type === 'position' && 'position' in change && change.position) {
-                const position = change.position as { x: number; y: number };
-                const node = nodes.find(n => n.id === change.id);
-
-                if (node && node.data.isTreeStructure && node.data.structureId) {
-                    // This is a tree structure node being moved, move all nodes in the same structure
-                    const currentNode = nodes.find(n => n.id === change.id);
-                    if (!currentNode) return;
-
-                    // Calculate the delta movement
-                    const deltaX = position.x - currentNode.position.x;
-                    const deltaY = position.y - currentNode.position.y;
-
-                    // Move all nodes in the same structure by the same delta
-                    const updatedNodes = nodes.map(n => {
-                        if (n.data.isTreeStructure && n.data.structureId === node.data.structureId) {
-                            return {
-                                ...n,
-                                position: {
-                                    x: n.position.x + deltaX,
-                                    y: n.position.y + deltaY
-                                }
-                            };
-                        }
-                        return n;
-                    });
-
-                    setNodes(updatedNodes);
-                }
-            }
-        });
-    }, [nodes, setNodes, onNodesChange]);
-    const [history, setHistory] = useState<HistoryState[]>([]);
-    const [historyIndex, setHistoryIndex] = useState<number>(-1);
-    const isUndoRedoAction = useRef(false);
-    const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
-    const diagramContainerRef = useRef<HTMLDivElement>(null);
-    const [editing, setEditing] = useState<{
-        nodeId?: string | null;
-        edgeId?: string | null;
-        label?: string;
-        type?: 'node' | 'edge';
-    }>({});
-    const [systemFlowNodeSettings, setSystemFlowNodeSettings] = useState<{
-        id: string | null;
-    }>({ id: null });
-    const [edgeSettings, setEdgeSettings] = useState<{ id: string | null }>({
-        id: null,
-    });
-    const [isSettingsSidebarOpen, setIsSettingsSidebarOpen] = useState(false);
-
-    // Track if a child node has been edited and needs layout recalculation
-    const [pendingLayoutRecalculation, setPendingLayoutRecalculation] = useState<{
-        structureId: string;
-        rootNodeId: string;
-    } | null>(null);
-
-    // Function declarations in correct order
-    const saveLabel = useCallback(() => {
-        if (editing.nodeId && editing.type === 'node') {
-            setNodes((nds: Node[]) =>
-                nds.map((node: Node) => {
-                    if (node.id === editing.nodeId) {
-                        return {
-                            ...node,
-                            data: {
-                                ...node.data,
-                                label: editing.label,
-                            },
-                        };
-                    }
-                    return node;
-                }),
-            );
-            setEditing({
-                nodeId: undefined,
-                edgeId: undefined,
-                label: undefined,
-                type: undefined,
-            });
-        } else if (editing.edgeId && editing.type === 'edge') {
-            setEdges((eds: Edge[]) =>
-                eds.map((edge: Edge) => {
-                    if (edge.id === editing.edgeId) {
-                        return {
-                            ...edge,
-                            data: {
-                                ...edge.data,
-                                label: editing.label,
-                            },
-                        };
-                    }
-                    return edge;
-                }),
-            );
-            setEditing({
-                nodeId: undefined,
-                edgeId: undefined,
-                label: undefined,
-                type: undefined,
-            });
-        }
-    }, [editing, setNodes, setEdges]);
-
-    const handleKeyDown = useCallback(
-        (e: React.KeyboardEvent) => {
-            if (e.key === 'Enter') {
-                saveLabel();
-            } else if (e.key === 'Escape') {
-                setEditing({
-                    nodeId: undefined,
-                    edgeId: undefined,
-                    label: undefined,
-                    type: undefined,
-                });
-            }
-        },
-        [saveLabel],
-    );
-
-    const loadTemplateData = useCallback(
-        (templateType: string) => {
-
-            if (templateType === 'tree-structure') {
-                setNodes(treeStructureTemplate.nodes as Node[]);
-                setEdges(treeStructureTemplate.edges as Edge[]);
-            } else if (templateType === 'structure1') {
-                setNodes(treeStructureTemplate1.nodes as Node[]);
-                setEdges(treeStructureTemplate1.edges as Edge[]);
-            } else if (templateType === 'structure2') {
-                setNodes(treeStructureTemplate2.nodes as Node[]);
-                setEdges(treeStructureTemplate2.edges as Edge[]);
-            } else if (templateType === 'structure3') {
-                setNodes(treeStructureTemplate3.nodes as Node[]);
-                setEdges(treeStructureTemplate3.edges as Edge[]);
-            } else {
-                // Default system flow nodes/edges
-                setNodes(systemFlowDefaultNodes as Node[]);
-                setEdges(systemFlowDefaultEdges as Edge[]);
-            }
-        },
-        [setNodes, setEdges],
-    );
-
-    // Initialize nodes and edges with our data
-    useEffect(() => {
-        // Only initialize if history is empty
-        if (history.length === 0) {
-            const initialState: HistoryState = {
-                nodes: nodes as SystemFlowNode[],
-                edges: edges as SystemFlowEdge[],
-            };
-            setHistory([initialState]);
-            setHistoryIndex(0);
-        }
-    }, []);
-
-    // Save current state to history when nodes or edges change (debounced)
-    const debouncedUpdateHistory = useRef(
-        debounce(
-            (
-                nodes: Node[],
-                edges: Edge[],
-                history: HistoryState[],
-                historyIndex: number,
-                setHistory: React.Dispatch<React.SetStateAction<HistoryState[]>>,
-                setHistoryIndex: React.Dispatch<React.SetStateAction<number>>,
-            ) => {
-                const newHistoryEntry: HistoryState = {
-                    nodes: [...nodes] as SystemFlowNode[],
-                    edges: [...edges] as SystemFlowEdge[],
-                };
-                const currentState = history[historyIndex];
-                if (
-                    currentState &&
-                    deepCompareNodes(currentState.nodes, newHistoryEntry.nodes) &&
-                    deepCompareEdges(currentState.edges, newHistoryEntry.edges)
-                ) {
-                    return; // No change, don't add to history
-                }
-                // Trim future history if we're in the middle of the history stack
-                let newHistory = history.slice(0, historyIndex + 1);
-                newHistory.push(newHistoryEntry);
-                // Limit to last 50 entries
-                if (newHistory.length > 50) {
-                    newHistory = newHistory.slice(newHistory.length - 50);
-                }
-                setHistory(newHistory);
-                setHistoryIndex(newHistory.length - 1);
-            },
-            300,
-        ),
-    ).current;
-
-    useEffect(() => {
-        if (isUndoRedoAction.current || history.length === 0) {
-            return;
-        }
-        debouncedUpdateHistory(
-            nodes,
-            edges,
-            history,
-            historyIndex,
-            setHistory,
-            setHistoryIndex,
-        );
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [nodes, edges]);
-
-    // Function to perform undo operation
-    const handleUndo = useCallback(() => {
-        if (historyIndex > 0) {
-            isUndoRedoAction.current = true;
-            const prevState = history[historyIndex - 1];
-            setNodes(prevState.nodes);
-            setEdges(prevState.edges);
-            setHistoryIndex(historyIndex - 1);
-            setTimeout(() => {
-                isUndoRedoAction.current = false;
-            }, 0);
-        }
-    }, [history, historyIndex, setNodes, setEdges]);
-
-    // Function to perform redo operation
-    const handleRedo = useCallback(() => {
-        if (historyIndex < history.length - 1) {
-            isUndoRedoAction.current = true;
-            const nextState = history[historyIndex + 1];
-            setNodes(nextState.nodes);
-            setEdges(nextState.edges);
-            setHistoryIndex(historyIndex + 1);
-            setTimeout(() => {
-                isUndoRedoAction.current = false;
-            }, 0);
-        }
-    }, [history, historyIndex, setNodes, setEdges]);
-
-    // Clear handler
-    const handleClear = useCallback(() => {
-        const cleared = { nodes: [], edges: [] };
-        const newHistory = history.slice(0, historyIndex + 1);
-        newHistory.push(cleared);
-        setNodes([]);
-        setEdges([]);
-        setHistory(newHistory);
-        setHistoryIndex(newHistory.length - 1);
-    }, [history, historyIndex, setNodes, setEdges]);
-
-    // Listen for keyboard shortcuts
-    useEffect(() => {
-        const handleKeyDown = (e: KeyboardEvent) => {
-            // Check for Ctrl+Z or Cmd+Z (undo)
-            if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
-                e.preventDefault();
-                handleUndo();
-            }
-            // Check for Ctrl+Y or Cmd+Shift+Z (redo)
-            if (
-                ((e.ctrlKey || e.metaKey) && e.key === 'y') ||
-                ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'z')
-            ) {
-                e.preventDefault();
-                handleRedo();
-            }
-        };
-
-        window.addEventListener('keydown', handleKeyDown);
-        return () => {
-            window.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [handleUndo, handleRedo]);
-
-    // Node type map for system flow nodes
-    const nodeTypeMap: Record<string, { type: string; data?: Record<string, unknown> }> = {
-        SystemNode: { type: 'SystemNode', data: { label: 'Node', color: '#2196F3' } },
-        bendpoint: { type: 'bendpoint', data: {} },
-        Structure1: {
-            type: 'TreeSystemNode',
-            data: {
-                label: 'Structure 1',
-                color: '#2196F3',
-                isTreeStructure: true,
-                structureId: `structure-1-${Date.now()}`,
-                nodeType: 'root',
-                structureType: 'structure1'
-            }
-        },
-        Structure2: {
-            type: 'TreeSystemNode',
-            data: {
-                label: 'Structure 2',
-                color: '#2196F3',
-                isTreeStructure: true,
-                structureId: `structure-2-${Date.now()}`,
-                nodeType: 'root',
-                structureType: 'structure2'
-            }
-        },
-        Structure3: {
-            type: 'TreeSystemNode',
-            data: {
-                label: 'Structure 3',
-                color: '#2196F3',
-                isTreeStructure: true,
-                structureId: `structure-3-${Date.now()}`,
-                nodeType: 'root',
-                structureType: 'structure3'
-            }
-        },
-    };
-
-    // Add node at center (internal)
-    const addNodeAtCenter = useCallback(
-        (nodeTypeId: string) => {
-            const nodeInfo = nodeTypeMap[nodeTypeId];
-            if (!nodeInfo) return;
-            const { type, data } = nodeInfo;
-            const width = diagramContainerRef.current?.offsetWidth || 1200;
-            const height = diagramContainerRef.current?.offsetHeight || 800;
-            const center = getCenterPosition(width, height);
-            const newId = `${nodeTypeId}-${nodes.length + 1}`;
-
-            // Add onResize handler to node data
-            const onResize = (id: string, width: number, height: number) => {
-                setNodes((nds) =>
-                    nds.map((node) =>
-                        node.id === id
-                            ? {
-                                ...node,
-                                measured: { width, height },
-                                width: width,
-                                height: height,
-                            }
-                            : node,
-                    ),
-                );
-            };
-
-            setNodes((nds: Node[]) => [
-                ...nds,
-                {
-                    id: newId,
-                    type,
-                    position: center,
-                    data: { ...data, onResize },
-                    draggable: true,
-                },
-            ]);
-        },
-        [nodes, setNodes],
-    );
-
-    // Update onAddEntity to use internal addNodeAtCenter
-    const handleAddEntity = useCallback(
-        (nodeTypeId = 'SystemNode') => {
-            addNodeAtCenter(nodeTypeId);
-        },
-        [addNodeAtCenter],
-    );
-
-    // Function to export diagram as JSON
-    const exportDiagram = useCallback(() => {
-        const diagramData = {
-            nodes: nodes,
-            edges: edges,
-        };
-
-        const dataStr = JSON.stringify(diagramData, null, 2);
-        const dataUri =
-            'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr);
-
-        const exportFileDefaultName = 'system-flow-diagram.json';
-
-        const linkElement = document.createElement('a');
-        linkElement.setAttribute('href', dataUri);
-        linkElement.setAttribute('download', exportFileDefaultName);
-        linkElement.click();
-    }, [nodes, edges]);
-
-    // Function to import diagram from JSON
-    const importDiagram = useCallback(
-        (event: React.ChangeEvent<HTMLInputElement>) => {
-            if (!event.target.files || event.target.files.length === 0) return;
-
-            const fileReader = new FileReader();
-            fileReader.readAsText(event.target.files[0], 'UTF-8');
-            fileReader.onload = (e) => {
-                try {
-                    if (!e.target || typeof e.target.result !== 'string') return;
-
-                    const imported = JSON.parse(e.target.result);
-                    if (imported.nodes && imported.edges) {
-                        setNodes(imported.nodes);
-                        setEdges(imported.edges);
-                    }
-                } catch (error) {
-                    alert('Failed to import diagram. Invalid file format.');
-                }
-            };
-        },
-        [setNodes, setEdges],
-    );
-
-    // Toggle fullscreen mode
-    const toggleFullscreen = useCallback(() => {
-        if (!diagramContainerRef.current) return;
-
-        if (!isFullscreen) {
-            if (diagramContainerRef.current.requestFullscreen) {
-                diagramContainerRef.current.requestFullscreen();
-            } else if ((diagramContainerRef.current as unknown as WebkitElement).webkitRequestFullscreen) {
-                (diagramContainerRef.current as unknown as WebkitElement).webkitRequestFullscreen?.();
-            } else if ((diagramContainerRef.current as unknown as MSElement).msRequestFullscreen) {
-                (diagramContainerRef.current as unknown as MSElement).msRequestFullscreen?.();
-            }
-        } else {
-            if (document.exitFullscreen) {
-                document.exitFullscreen();
-            } else if ((document as unknown as WebkitDocument).webkitExitFullscreen) {
-                (document as unknown as WebkitDocument).webkitExitFullscreen?.();
-            } else if ((document as unknown as MSDocument).msExitFullscreen) {
-                (document as unknown as MSDocument).msExitFullscreen?.();
-            }
-        }
-
-        setIsFullscreen(!isFullscreen);
-    }, [isFullscreen]);
-
-    // Listen for fullscreen change events from browser
-    useEffect(() => {
-        const handleFullscreenChange = () => {
-            setIsFullscreen(!!document.fullscreenElement);
-        };
-
-        document.addEventListener('fullscreenchange', handleFullscreenChange);
-        document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
-        document.addEventListener('mozfullscreenchange', handleFullscreenChange);
-        document.addEventListener('MSFullscreenChange', handleFullscreenChange);
-
-        return () => {
-            document.removeEventListener('fullscreenchange', handleFullscreenChange);
-            document.removeEventListener(
-                'webkitfullscreenchange',
-                handleFullscreenChange,
-            );
-            document.removeEventListener(
-                'mozfullscreenchange',
-                handleFullscreenChange,
-            );
-            document.removeEventListener(
-                'MSFullscreenChange',
-                handleFullscreenChange,
-            );
-        };
-    }, []);
-
-    // Modified onConnect to open EdgeSettings after edge is created
-    const onConnect = useCallback(
-        (params: Connection) => {
-            if (!params.source || !params.target) return;
-            const sourceNode = nodes.find((n) => n.id === params.source);
-            const targetNode = nodes.find((n) => n.id === params.target);
-            if (!sourceNode || !targetNode) return;
-
-            const newEdge = {
-                id: `edge-${edges.length + 1}`,
-                source: params.source,
-                target: params.target,
-                type: 'floatingEdge',
-                sourceHandle: params.sourceHandle,
-                targetHandle: params.targetHandle,
-                data: {
-                    label: `Flow ${edges.length + 1}`,
-                    type: 'controlFlow',
-                    color: '#666',
-                },
-                animated: false,
-            };
-            setEdges((eds: Edge[]) => [...eds, newEdge]);
-            setEdgeSettings({ id: newEdge.id });
-            setIsSettingsSidebarOpen(true);
-        },
-        [nodes, edges, setEdges],
-    );
-
-    // Update onNodeClick function
-    const onNodeClick = useCallback((event: React.MouseEvent, node: Node) => {
-        setSystemFlowNodeSettings({ id: node.id });
-        setIsSettingsSidebarOpen(true);
-    }, []);
-
-    // Update onNodeDoubleClick function
-    const onNodeDoubleClick = useCallback(
-        (event: React.MouseEvent, node: Node) => {
-            event.preventDefault();
-            event.stopPropagation();
-            setEditing({
-                nodeId: node.id,
-                edgeId: null,
-                label: (node.data?.label as string) || '',
-                type: 'node',
-            });
-        },
-        [setEditing],
-    );
-
-    // Open EdgeSettings on double click
-    const onEdgeDoubleClick = useCallback(
-        (event: React.MouseEvent, edge: Edge) => {
-            event.preventDefault();
-            event.stopPropagation();
-            if (edge.type === 'floatingEdge') {
-                setEdgeSettings({ id: edge.id });
-                setIsSettingsSidebarOpen(true);
-            }
-        },
-        [],
-    );
-
-    // Function to update selected system flow node
-    const updateSelectedSystemFlowNode = useCallback(
-        (updates: Record<string, unknown>) => {
-            if (!systemFlowNodeSettings.id) return;
-
-            const currentNode = nodes.find(n => n.id === systemFlowNodeSettings.id);
-            const isChildNode = currentNode &&
-                currentNode.data.isTreeStructure &&
-                currentNode.data.nodeType === 'child' &&
-                currentNode.data.structureId;
-
-            setNodes((nds: Node[]) =>
-                nds.map((node: Node) => {
-                    if (node.id === systemFlowNodeSettings.id) {
-                        return {
-                            ...node,
-                            data: {
-                                ...node.data,
-                                ...updates,
-                            },
-                        };
-                    }
-                    return node;
-                }),
-            );
-
-            // If editing a child node, mark for layout recalculation
-            if (isChildNode) {
-                const rootNode = nodes.find(n =>
-                    n.data.isTreeStructure &&
-                    n.data.structureId === currentNode.data.structureId &&
-                    n.data.nodeType === 'root'
-                );
-
-                if (rootNode) {
-                    setPendingLayoutRecalculation({
-                        structureId: currentNode.data.structureId as string,
-                        rootNodeId: rootNode.id
-                    });
-                }
-            }
-        },
-        [systemFlowNodeSettings.id, setNodes, nodes],
-    );
-
-    // Close system flow node settings
-    const closeSystemFlowNodeSettings = useCallback(() => {
-        const currentNodeId = systemFlowNodeSettings.id;
-        setSystemFlowNodeSettings({ id: null });
-        setIsSettingsSidebarOpen(false);
-
-        // If we're closing settings for a tree structure node, handle accordingly
-        if (currentNodeId) {
-            const currentNode = nodes.find(n => n.id === currentNodeId);
-            if (currentNode && currentNode.data.isTreeStructure) {
-
-                // If it's a root node being edited, auto-center it
-                if (currentNode.data.nodeType === 'root' && currentNode.data.isRootBeingEdited) {
-                    const autoCenterRootNode = currentNode.data?.autoCenterRootNode;
-                    if (typeof autoCenterRootNode === 'function') {
-                        autoCenterRootNode();
-                    }
-                }
-
-                // If it's a child node, trigger layout recalculation
-                else if (currentNode.data.nodeType === 'child' && currentNode.data.structureId) {
-
-                    // Find the root node and trigger its layout recalculation
-                    const rootNode = nodes.find(n =>
-                        n.data.isTreeStructure &&
-                        n.data.structureId === currentNode.data.structureId &&
-                        n.data.nodeType === 'root'
-                    );
-
-                    if (rootNode) {
-                        // Call the forceLayoutRecalculation function directly if available
-                        const forceLayoutRecalculation = rootNode.data?.forceLayoutRecalculation;
-                        if (typeof forceLayoutRecalculation === 'function') {
-                            forceLayoutRecalculation();
-                        } else {
-                            // Fallback: Force a layout recalculation by updating the root node
-                            setNodes((nds: Node[]) =>
-                                nds.map((node: Node) => {
-                                    if (node.id === rootNode.id) {
-                                        return {
-                                            ...node,
-                                            data: {
-                                                ...node.data,
-                                                // Add a timestamp to force re-render and layout recalculation
-                                                lastLayoutUpdate: Date.now()
-                                            }
-                                        };
-                                    }
-                                    return node;
-                                })
-                            );
-                        }
-                    }
-                }
-            }
-        }
-
-        // Clear pending layout recalculation when settings close
-        setPendingLayoutRecalculation(null);
-    }, [systemFlowNodeSettings.id, nodes, setNodes]);
-
-    // Update edge from EdgeSettings
-    const updateSelectedEdge = useCallback(
-        (updates: Record<string, unknown>) => {
-            if (!edgeSettings.id) return;
-
-            setEdges((eds: Edge[]) => {
-                const currentEdge = eds.find(e => e.id === edgeSettings.id);
-                if (!currentEdge) return eds;
-
-                const newEdges = [...eds];
-
-                // Update the current edge
-                const edgeIndex = newEdges.findIndex(e => e.id === edgeSettings.id);
-                if (edgeIndex !== -1) {
-                    newEdges[edgeIndex] = {
-                        ...newEdges[edgeIndex],
-                        data: {
-                            ...newEdges[edgeIndex].data,
-                            ...updates,
-                        },
-                    };
-                }
-
-                // Handle two-way edge creation/removal
-                const isTwoWay = updates.isTwoWay as boolean;
-                const wasTwoWay = currentEdge.data?.isTwoWay as boolean;
-
-                if (isTwoWay && !wasTwoWay) {
-                    // Create reverse edge for two-way connection
-                    const reverseEdgeId = `reverse-${edgeSettings.id}`;
-                    const reverseEdge: Edge = {
-                        id: reverseEdgeId,
-                        source: currentEdge.target,
-                        target: currentEdge.source,
-                        type: 'floatingEdge',
-                        data: {
-                            ...currentEdge.data,
-                            ...updates,
-                            isTwoWay: true,
-                            reverseEdgeId: edgeSettings.id,
-                        },
-                    };
-
-                    // Update current edge to reference reverse edge
-                    newEdges[edgeIndex] = {
-                        ...newEdges[edgeIndex],
-                        data: {
-                            ...newEdges[edgeIndex].data,
-                            reverseEdgeId,
-                        },
-                    };
-
-                    newEdges.push(reverseEdge);
-                } else if (!isTwoWay && wasTwoWay) {
-                    // Remove reverse edge
-                    const reverseEdgeId = currentEdge.data?.reverseEdgeId;
-                    if (reverseEdgeId) {
-                        // Remove reverse edge
-                        const reverseEdgeIndex = newEdges.findIndex(e => e.id === reverseEdgeId);
-                        if (reverseEdgeIndex !== -1) {
-                            newEdges.splice(reverseEdgeIndex, 1);
-                        }
-
-                        // Remove reverse edge reference from current edge
-                        newEdges[edgeIndex] = {
-                            ...newEdges[edgeIndex],
-                            data: {
-                                ...newEdges[edgeIndex].data,
-                                reverseEdgeId: undefined,
-                            },
-                        };
-                    }
-                } else if (isTwoWay && wasTwoWay) {
-                    // Update both edges when two-way is already enabled
-                    const reverseEdgeId = currentEdge.data?.reverseEdgeId;
-                    if (reverseEdgeId) {
-                        const reverseEdgeIndex = newEdges.findIndex(e => e.id === reverseEdgeId);
-                        if (reverseEdgeIndex !== -1) {
-                            newEdges[reverseEdgeIndex] = {
-                                ...newEdges[reverseEdgeIndex],
-                                data: {
-                                    ...newEdges[reverseEdgeIndex].data,
-                                    ...updates,
-                                },
-                            };
-                        }
-                    }
-                }
-
-                return newEdges;
-            });
-        },
-        [edgeSettings.id, setEdges],
-    );
-
-    // Close EdgeSettings
-    const closeEdgeSettings = useCallback(() => {
-        setEdgeSettings({ id: null });
-        setIsSettingsSidebarOpen(false);
-    }, []);
-
-    // Collapse all nodes on pane click
-    const handlePaneClick = useCallback(() => {
-        setSystemFlowNodeSettings({ id: null });
-
-        // Check if any root node is being edited and auto-center it
-        const rootNodesBeingEdited = nodes.filter(n =>
-            n.data.isTreeStructure &&
-            n.data.nodeType === 'root' &&
-            n.data.isRootBeingEdited
-        );
-
-        rootNodesBeingEdited.forEach(rootNode => {
-            const autoCenterRootNode = rootNode.data?.autoCenterRootNode;
-            if (typeof autoCenterRootNode === 'function') {
-                autoCenterRootNode();
-            }
-        });
-
-        // If there's a pending layout recalculation, trigger it now
-        if (pendingLayoutRecalculation) {
-
-            const rootNode = nodes.find(n => n.id === pendingLayoutRecalculation.rootNodeId);
-            if (rootNode) {
-                // Call the forceLayoutRecalculation function directly if available
-                const forceLayoutRecalculation = rootNode.data?.forceLayoutRecalculation;
-                if (typeof forceLayoutRecalculation === 'function') {
-                    forceLayoutRecalculation();
-                } else {
-                    // Fallback: Force a layout recalculation by updating the root node
-                    setNodes((nds: Node[]) =>
-                        nds.map((node: Node) => {
-                            if (node.id === rootNode.id) {
-                                return {
-                                    ...node,
-                                    data: {
-                                        ...node.data,
-                                        // Add a timestamp to force re-render and layout recalculation
-                                        lastLayoutUpdate: Date.now()
-                                    }
-                                };
-                            }
-                            return node;
-                        })
-                    );
-                }
-            }
-
-            // Clear the pending layout recalculation
-            setPendingLayoutRecalculation(null);
-        }
-    }, [pendingLayoutRecalculation, nodes, setNodes]);
-
-    // Memoize node and edge maps for O(1) lookup
-    const nodeMap = useMemo(() => {
-        const map = new Map<string, Node>();
-        nodes.forEach((node) => map.set(node.id, node));
-        return map;
-    }, [nodes]);
-    const edgeMap = useMemo(() => {
-        const map = new Map<string, Edge>();
-        edges.forEach((edge) => map.set(edge.id, edge));
-        return map;
-    }, [edges]);
-
-    // Memoize styles to prevent recreation on every render
-    const diagramStyles = useMemo(() => ({
-        background: '#1a1a1a',
-    }), []);
-
-    const fitViewOptions = useMemo(() => ({
-        padding: 0.2,
-        minZoom: 0.5,
-        maxZoom: 2,
-    }), []);
-
-    const defaultViewport = useMemo(() => ({
-        x: 0,
-        y: 0,
-        zoom: 1
-    }), []);
-
-    return (
-        <Box sx={{ display: 'flex', height: '100vh' }}>
-            <Sidebar>
-                <NodeSelectionContext.Provider
-                    value={{
-                        selectedNodeType: null,
-                        setSelectedNodeType: () => { },
-                        addNodeAtCenter,
-                    }}
-                >
-                    <DiagramControls
-                        onAddEntity={handleAddEntity}
-                        onUndo={handleUndo}
-                        onRedo={handleRedo}
-                        canUndo={historyIndex > 0}
-                        canRedo={historyIndex < history.length - 1}
-                        onLoadTemplate={loadTemplateData}
-                        edges={edges as SystemFlowEdge[]}
-                        nodes={nodes as SystemFlowNode[]}
-                        onEditEdge={(edge) => {
-                            setEdgeSettings({ id: edge.id });
-                            setIsSettingsSidebarOpen(true);
-                        }}
-                    />
-                </NodeSelectionContext.Provider>
-            </Sidebar>
-
-            <Box
-                sx={{
-                    flexGrow: 1,
-                    '& .react-flow__edge': {
-                        zIndex: '5000 !important',
-                    },
-                    '& .react-flow__edge-path': {
-                        pointerEvents: 'all !important',
-                    },
-                    '& .edge-path-selector': {
-                        strokeWidth: 20,
-                        fill: 'none',
-                        stroke: 'transparent',
-                        cursor: 'pointer',
-                    },
-                    '& .react-flow__edges': {
-                        zIndex: '5000 !important',
-                    },
-                    '& .react-flow__node': {
-                        pointerEvents: 'all !important',
-                        cursor: 'grab',
-                        '&:active': {
-                            cursor: 'grabbing',
-                        },
-                        '& .react-flow__edge': {
-                            zIndex: '5000 !important',
-                        },
-                    },
-                    '& .react-flow__node.dragging': {
-                        cursor: 'grabbing !important',
-                    },
-                    '& .react-flow.dragging': {
-                        cursor: 'grabbing',
-                    },
-                }}
-            >
-                <Box
-                    sx={{
-                        width: '100%',
-                        height: '100%',
-                        padding: '10px',
-                        bgcolor: '#1a1a1a',
-                    }}
-                >
-                    <ReactFlow
-                        nodes={nodes}
-                        edges={edges}
-                        onNodesChange={customOnNodesChange}
-                        onEdgesChange={onEdgesChange}
-                        onConnect={onConnect}
-                        nodeTypes={baseSystemFlowNodeTypes}
-                        edgeTypes={systemFlowEdgeTypes}
-                        fitView
-                        fitViewOptions={fitViewOptions}
-                        minZoom={0.1}
-                        maxZoom={2}
-                        defaultViewport={defaultViewport}
-                        style={diagramStyles}
-                        proOptions={{ hideAttribution: true }}
-                        selectNodesOnDrag={false}
-                        connectOnClick={false}
-                        onNodeClick={onNodeClick}
-                        onNodeDoubleClick={onNodeDoubleClick}
-                        onEdgeDoubleClick={onEdgeDoubleClick}
-                        onPaneClick={handlePaneClick}
-                    >
-                        <Background
-                            color="#1a1a1a"
-                            variant={BackgroundVariant.Dots}
-                            gap={16}
-                        />
-
-                        {/* MiniMap positioned at bottom-left */}
-                        <MiniMapCommon />
-
-                        {/* Diagram Panel with all controls */}
-                        <DiagramPanel
-                            historyIndex={historyIndex}
-                            historyLength={history.length}
-                            onUndo={handleUndo}
-                            onRedo={handleRedo}
-                            onClear={handleClear}
-                            onImport={(data) => {
-                                setNodes(data.nodes || []);
-                                setEdges(data.edges || []);
-                                // Add to history
-                                const newHistoryState = {
-                                    nodes: data.nodes || [],
-                                    edges: data.edges || [],
-                                };
-                                setHistory((prev) => [
-                                    ...prev.slice(0, historyIndex + 1),
-                                    newHistoryState,
-                                ]);
-                                setHistoryIndex((prev) => prev + 1);
-                            }}
-                            isSettingsOpen={isSettingsSidebarOpen}
-                            onToggleSettings={() => setIsSettingsSidebarOpen(true)}
-                            showCustomControls={true}
-                            onGridLayout={() => { }}
-                            onTreeLayout={() => { }}
-                        />
-
-                        {/* AI Button positioned at bottom-right */}
-                        <AiButton />
-
-                        {/* Fullscreen button positioned at top-left */}
-                    </ReactFlow>
-                </Box>
-            </Box>
-
-            {/* Settings panels */}
-            {systemFlowNodeSettings.id && (
-                <SystemFlowNodeSettings
-                    nodeId={systemFlowNodeSettings.id}
-                    data={nodeMap.get(systemFlowNodeSettings.id)?.data || {}}
-                    onUpdate={updateSelectedSystemFlowNode}
-                    onClose={closeSystemFlowNodeSettings}
-                    edges={edges as SystemFlowEdge[]}
-                    setEdges={(updater) => {
-                        if (typeof updater === 'function') {
-                            setEdges((prev) => updater(prev as SystemFlowEdge[]) as Edge[]);
-                        } else {
-                            setEdges(updater as Edge[]);
-                        }
-                    }}
-                    nodes={nodes as SystemFlowNode[]}
-                />
-            )}
-
-            {edgeSettings.id && (
-                <EdgeSettings
-                    edge={edgeMap.get(edgeSettings.id) as SystemFlowEdge}
-                    nodes={nodes as SystemFlowNode[]}
-                    onUpdate={updateSelectedEdge}
-                    onClose={closeEdgeSettings}
-                    onDelete={() => {
-                        setEdges((eds: Edge[]) => {
-                            const currentEdge = eds.find(e => e.id === edgeSettings.id);
-                            if (!currentEdge) return eds;
-
-                            // If it's a two-way edge, also remove the reverse edge
-                            const reverseEdgeId = currentEdge.data?.reverseEdgeId;
-                            if (reverseEdgeId) {
-                                return eds.filter((edge: Edge) =>
-                                    edge.id !== edgeSettings.id && edge.id !== reverseEdgeId
-                                );
-                            }
-
-                            // Regular edge deletion
-                            return eds.filter((edge: Edge) => edge.id !== edgeSettings.id);
-                        });
-                        closeEdgeSettings();
-                    }}
-                />
-            )}
-        </Box>
-    );
-});
-
-SystemFlowDiagramFlowContent.displayName = 'SystemFlowDiagramFlowContent';
-
-// Main wrapper component with ReactFlowProvider
-const SystemFlowDiagramFlow: React.FC<SystemFlowDiagramFlowProps> = (
-    props,
-) => {
-    return (
-        <ReactFlowProvider>
-            <SystemFlowDiagramFlowContent {...props} />
-        </ReactFlowProvider>
-    );
-};
-
-export default SystemFlowDiagramFlow;