@flowuent-org/diagramming-core 1.1.0 → 1.1.2

package/dist/out-tsc/packages/diagrams/src/lib/templates/systemFlow/components/SystemFlowDiagramFlow.js

@@ -1,767 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useState, useRef, useEffect, useMemo, } from 'react';
-import { ReactFlow, Background, useNodesState, useEdgesState, BackgroundVariant, ReactFlowProvider, } from '@xyflow/react';
-import '@xyflow/react/dist/style.css';
-import { Box, } from '@mui/material';
-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';
-// Utility: Deep compare node arrays by id, type, data, width, height
-const deepCompareNodes = (a, b) => {
-    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, b) => {
-    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, delay) => {
-    let timer = null;
-    return (...args) => {
-        if (timer)
-            clearTimeout(timer);
-        timer = setTimeout(() => fn(...args), delay);
-    };
-};
-// Helper: get center position in diagram
-const getCenterPosition = (width, height) => {
-    return { x: width / 2 - 75, y: height / 2 - 40 };
-};
-const SystemFlowDiagramFlowContent = React.memo(({ nodes: initialNodes, setNodes: parentSetNodes, edges: initialEdges, setEdges: parentSetEdges, }) => {
-    var _a;
-    // State declarations
-    const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-    const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-    // Custom onNodesChange handler for synchronized tree structure movement
-    const customOnNodesChange = useCallback((changes) => {
-        // First apply the default changes
-        onNodesChange(changes);
-        // Then handle synchronized movement for tree structure nodes
-        changes.forEach((change) => {
-            if (change.type === 'position' && 'position' in change && change.position) {
-                const position = change.position;
-                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 Object.assign(Object.assign({}, n), { position: {
-                                    x: n.position.x + deltaX,
-                                    y: n.position.y + deltaY
-                                } });
-                        }
-                        return n;
-                    });
-                    setNodes(updatedNodes);
-                }
-            }
-        });
-    }, [nodes, setNodes, onNodesChange]);
-    const [history, setHistory] = useState([]);
-    const [historyIndex, setHistoryIndex] = useState(-1);
-    const isUndoRedoAction = useRef(false);
-    const [isFullscreen, setIsFullscreen] = useState(false);
-    const diagramContainerRef = useRef(null);
-    const [editing, setEditing] = useState({});
-    const [systemFlowNodeSettings, setSystemFlowNodeSettings] = useState({ id: null });
-    const [edgeSettings, setEdgeSettings] = useState({
-        id: null,
-    });
-    const [isSettingsSidebarOpen, setIsSettingsSidebarOpen] = useState(false);
-    // Track if a child node has been edited and needs layout recalculation
-    const [pendingLayoutRecalculation, setPendingLayoutRecalculation] = useState(null);
-    // Function declarations in correct order
-    const saveLabel = useCallback(() => {
-        if (editing.nodeId && editing.type === 'node') {
-            setNodes((nds) => nds.map((node) => {
-                if (node.id === editing.nodeId) {
-                    return Object.assign(Object.assign({}, node), { data: Object.assign(Object.assign({}, 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) => eds.map((edge) => {
-                if (edge.id === editing.edgeId) {
-                    return Object.assign(Object.assign({}, edge), { data: Object.assign(Object.assign({}, edge.data), { label: editing.label }) });
-                }
-                return edge;
-            }));
-            setEditing({
-                nodeId: undefined,
-                edgeId: undefined,
-                label: undefined,
-                type: undefined,
-            });
-        }
-    }, [editing, setNodes, setEdges]);
-    const handleKeyDown = useCallback((e) => {
-        if (e.key === 'Enter') {
-            saveLabel();
-        }
-        else if (e.key === 'Escape') {
-            setEditing({
-                nodeId: undefined,
-                edgeId: undefined,
-                label: undefined,
-                type: undefined,
-            });
-        }
-    }, [saveLabel]);
-    const loadTemplateData = useCallback((templateType) => {
-        if (templateType === 'tree-structure') {
-            setNodes(treeStructureTemplate.nodes);
-            setEdges(treeStructureTemplate.edges);
-        }
-        else if (templateType === 'structure1') {
-            setNodes(treeStructureTemplate1.nodes);
-            setEdges(treeStructureTemplate1.edges);
-        }
-        else if (templateType === 'structure2') {
-            setNodes(treeStructureTemplate2.nodes);
-            setEdges(treeStructureTemplate2.edges);
-        }
-        else if (templateType === 'structure3') {
-            setNodes(treeStructureTemplate3.nodes);
-            setEdges(treeStructureTemplate3.edges);
-        }
-        else {
-            // Default system flow nodes/edges
-            setNodes(systemFlowDefaultNodes);
-            setEdges(systemFlowDefaultEdges);
-        }
-    }, [setNodes, setEdges]);
-    // Initialize nodes and edges with our data
-    useEffect(() => {
-        // Only initialize if history is empty
-        if (history.length === 0) {
-            const initialState = {
-                nodes: nodes,
-                edges: edges,
-            };
-            setHistory([initialState]);
-            setHistoryIndex(0);
-        }
-    }, []);
-    // Save current state to history when nodes or edges change (debounced)
-    const debouncedUpdateHistory = useRef(debounce((nodes, edges, history, historyIndex, setHistory, setHistoryIndex) => {
-        const newHistoryEntry = {
-            nodes: [...nodes],
-            edges: [...edges],
-        };
-        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) => {
-            // 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 = {
-        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) => {
-        var _a, _b;
-        const nodeInfo = nodeTypeMap[nodeTypeId];
-        if (!nodeInfo)
-            return;
-        const { type, data } = nodeInfo;
-        const width = ((_a = diagramContainerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 1200;
-        const height = ((_b = diagramContainerRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 800;
-        const center = getCenterPosition(width, height);
-        const newId = `${nodeTypeId}-${nodes.length + 1}`;
-        // Add onResize handler to node data
-        const onResize = (id, width, height) => {
-            setNodes((nds) => nds.map((node) => node.id === id
-                ? Object.assign(Object.assign({}, node), { measured: { width, height }, width: width, height: height }) : node));
-        };
-        setNodes((nds) => [
-            ...nds,
-            {
-                id: newId,
-                type,
-                position: center,
-                data: Object.assign(Object.assign({}, 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) => {
-        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(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        if (!diagramContainerRef.current)
-            return;
-        if (!isFullscreen) {
-            if (diagramContainerRef.current.requestFullscreen) {
-                diagramContainerRef.current.requestFullscreen();
-            }
-            else if (diagramContainerRef.current.webkitRequestFullscreen) {
-                (_b = (_a = diagramContainerRef.current).webkitRequestFullscreen) === null || _b === void 0 ? void 0 : _b.call(_a);
-            }
-            else if (diagramContainerRef.current.msRequestFullscreen) {
-                (_d = (_c = diagramContainerRef.current).msRequestFullscreen) === null || _d === void 0 ? void 0 : _d.call(_c);
-            }
-        }
-        else {
-            if (document.exitFullscreen) {
-                document.exitFullscreen();
-            }
-            else if (document.webkitExitFullscreen) {
-                (_f = (_e = document).webkitExitFullscreen) === null || _f === void 0 ? void 0 : _f.call(_e);
-            }
-            else if (document.msExitFullscreen) {
-                (_h = (_g = document).msExitFullscreen) === null || _h === void 0 ? void 0 : _h.call(_g);
-            }
-        }
-        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) => {
-        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) => [...eds, newEdge]);
-        setEdgeSettings({ id: newEdge.id });
-        setIsSettingsSidebarOpen(true);
-    }, [nodes, edges, setEdges]);
-    // Update onNodeClick function
-    const onNodeClick = useCallback((event, node) => {
-        setSystemFlowNodeSettings({ id: node.id });
-        setIsSettingsSidebarOpen(true);
-    }, []);
-    // Update onNodeDoubleClick function
-    const onNodeDoubleClick = useCallback((event, node) => {
-        var _a;
-        event.preventDefault();
-        event.stopPropagation();
-        setEditing({
-            nodeId: node.id,
-            edgeId: null,
-            label: ((_a = node.data) === null || _a === void 0 ? void 0 : _a.label) || '',
-            type: 'node',
-        });
-    }, [setEditing]);
-    // Open EdgeSettings on double click
-    const onEdgeDoubleClick = useCallback((event, 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) => {
-        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) => nds.map((node) => {
-            if (node.id === systemFlowNodeSettings.id) {
-                return Object.assign(Object.assign({}, node), { data: Object.assign(Object.assign({}, 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,
-                    rootNodeId: rootNode.id
-                });
-            }
-        }
-    }, [systemFlowNodeSettings.id, setNodes, nodes]);
-    // Close system flow node settings
-    const closeSystemFlowNodeSettings = useCallback(() => {
-        var _a, _b;
-        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 = (_a = currentNode.data) === null || _a === void 0 ? void 0 : _a.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 = (_b = rootNode.data) === null || _b === void 0 ? void 0 : _b.forceLayoutRecalculation;
-                        if (typeof forceLayoutRecalculation === 'function') {
-                            forceLayoutRecalculation();
-                        }
-                        else {
-                            // Fallback: Force a layout recalculation by updating the root node
-                            setNodes((nds) => nds.map((node) => {
-                                if (node.id === rootNode.id) {
-                                    return Object.assign(Object.assign({}, node), { data: Object.assign(Object.assign({}, 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) => {
-        if (!edgeSettings.id)
-            return;
-        setEdges((eds) => {
-            var _a, _b, _c;
-            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] = Object.assign(Object.assign({}, newEdges[edgeIndex]), { data: Object.assign(Object.assign({}, newEdges[edgeIndex].data), updates) });
-            }
-            // Handle two-way edge creation/removal
-            const isTwoWay = updates.isTwoWay;
-            const wasTwoWay = (_a = currentEdge.data) === null || _a === void 0 ? void 0 : _a.isTwoWay;
-            if (isTwoWay && !wasTwoWay) {
-                // Create reverse edge for two-way connection
-                const reverseEdgeId = `reverse-${edgeSettings.id}`;
-                const reverseEdge = {
-                    id: reverseEdgeId,
-                    source: currentEdge.target,
-                    target: currentEdge.source,
-                    type: 'floatingEdge',
-                    data: Object.assign(Object.assign(Object.assign({}, currentEdge.data), updates), { isTwoWay: true, reverseEdgeId: edgeSettings.id }),
-                };
-                // Update current edge to reference reverse edge
-                newEdges[edgeIndex] = Object.assign(Object.assign({}, newEdges[edgeIndex]), { data: Object.assign(Object.assign({}, newEdges[edgeIndex].data), { reverseEdgeId }) });
-                newEdges.push(reverseEdge);
-            }
-            else if (!isTwoWay && wasTwoWay) {
-                // Remove reverse edge
-                const reverseEdgeId = (_b = currentEdge.data) === null || _b === void 0 ? void 0 : _b.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] = Object.assign(Object.assign({}, newEdges[edgeIndex]), { data: Object.assign(Object.assign({}, newEdges[edgeIndex].data), { reverseEdgeId: undefined }) });
-                }
-            }
-            else if (isTwoWay && wasTwoWay) {
-                // Update both edges when two-way is already enabled
-                const reverseEdgeId = (_c = currentEdge.data) === null || _c === void 0 ? void 0 : _c.reverseEdgeId;
-                if (reverseEdgeId) {
-                    const reverseEdgeIndex = newEdges.findIndex(e => e.id === reverseEdgeId);
-                    if (reverseEdgeIndex !== -1) {
-                        newEdges[reverseEdgeIndex] = Object.assign(Object.assign({}, newEdges[reverseEdgeIndex]), { data: Object.assign(Object.assign({}, 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(() => {
-        var _a;
-        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 => {
-            var _a;
-            const autoCenterRootNode = (_a = rootNode.data) === null || _a === void 0 ? void 0 : _a.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 = (_a = rootNode.data) === null || _a === void 0 ? void 0 : _a.forceLayoutRecalculation;
-                if (typeof forceLayoutRecalculation === 'function') {
-                    forceLayoutRecalculation();
-                }
-                else {
-                    // Fallback: Force a layout recalculation by updating the root node
-                    setNodes((nds) => nds.map((node) => {
-                        if (node.id === rootNode.id) {
-                            return Object.assign(Object.assign({}, node), { data: Object.assign(Object.assign({}, 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();
-        nodes.forEach((node) => map.set(node.id, node));
-        return map;
-    }, [nodes]);
-    const edgeMap = useMemo(() => {
-        const map = new Map();
-        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 (_jsxs(Box, { sx: { display: 'flex', height: '100vh' }, children: [_jsx(Sidebar, { children: _jsx(NodeSelectionContext.Provider, { value: {
-                        selectedNodeType: null,
-                        setSelectedNodeType: () => { },
-                        addNodeAtCenter,
-                    }, children: _jsx(DiagramControls, { onAddEntity: handleAddEntity, onUndo: handleUndo, onRedo: handleRedo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1, onLoadTemplate: loadTemplateData, edges: edges, nodes: nodes, onEditEdge: (edge) => {
-                            setEdgeSettings({ id: edge.id });
-                            setIsSettingsSidebarOpen(true);
-                        } }) }) }), _jsx(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',
-                    },
-                }, children: _jsx(Box, { sx: {
-                        width: '100%',
-                        height: '100%',
-                        padding: '10px',
-                        bgcolor: '#1a1a1a',
-                    }, children: _jsxs(ReactFlow, { nodes: nodes, edges: edges, onNodesChange: customOnNodesChange, onEdgesChange: onEdgesChange, onConnect: onConnect, nodeTypes: baseSystemFlowNodeTypes, edgeTypes: systemFlowEdgeTypes, fitView: true, 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, children: [_jsx(Background, { color: "#1a1a1a", variant: BackgroundVariant.Dots, gap: 16 }), _jsx(MiniMapCommon, {}), _jsx(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: () => { } }), _jsx(AiButton, {})] }) }) }), systemFlowNodeSettings.id && (_jsx(SystemFlowNodeSettings, { nodeId: systemFlowNodeSettings.id, data: ((_a = nodeMap.get(systemFlowNodeSettings.id)) === null || _a === void 0 ? void 0 : _a.data) || {}, onUpdate: updateSelectedSystemFlowNode, onClose: closeSystemFlowNodeSettings, edges: edges, setEdges: (updater) => {
-                    if (typeof updater === 'function') {
-                        setEdges((prev) => updater(prev));
-                    }
-                    else {
-                        setEdges(updater);
-                    }
-                }, nodes: nodes })), edgeSettings.id && (_jsx(EdgeSettings, { edge: edgeMap.get(edgeSettings.id), nodes: nodes, onUpdate: updateSelectedEdge, onClose: closeEdgeSettings, onDelete: () => {
-                    setEdges((eds) => {
-                        var _a;
-                        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 = (_a = currentEdge.data) === null || _a === void 0 ? void 0 : _a.reverseEdgeId;
-                        if (reverseEdgeId) {
-                            return eds.filter((edge) => edge.id !== edgeSettings.id && edge.id !== reverseEdgeId);
-                        }
-                        // Regular edge deletion
-                        return eds.filter((edge) => edge.id !== edgeSettings.id);
-                    });
-                    closeEdgeSettings();
-                } }))] }));
-});
-SystemFlowDiagramFlowContent.displayName = 'SystemFlowDiagramFlowContent';
-// Main wrapper component with ReactFlowProvider
-const SystemFlowDiagramFlow = (props) => {
-    return (_jsx(ReactFlowProvider, { children: _jsx(SystemFlowDiagramFlowContent, Object.assign({}, props)) }));
-};
-export default SystemFlowDiagramFlow;
-//# sourceMappingURL=SystemFlowDiagramFlow.js.map