@flowuent-org/diagramming-core 1.3.10 → 1.4.1

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

@@ -1,1179 +1,1179 @@
-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;
+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;