@flowuent-org/diagramming-core 1.0.8 → 1.1.0

package/dist/out-tsc/packages/diagrams/src/lib/templates/stateMachine/components/StateMachineDiagramFlow.js

@@ -0,0 +1,787 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState, useRef, useEffect, useMemo, } from 'react';
+import { ReactFlow, Background, useNodesState, useEdgesState, BackgroundVariant, applyNodeChanges, ReactFlowProvider, } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { Box, } from '@mui/material';
+import { stateMachineDefaultNodes, stateMachineDefaultEdges, } from '../data/template-data';
+import { stateMachineEdgeTypes, stateMachineNodeTypes as baseStateMachineNodeTypes, CompositeStateNode as CompositeStateNodeType, } from './StateMachineComponents';
+import DiagramControls from '../controls/StateDiagramControls';
+import { NodeSelectionContext } from '../controls/StateDiagramControls';
+import StateNodeSettings from './StateNodeSettings';
+import EdgeSettings from './EdgeSettings';
+import CompositeStateNodeSettings from './CompositeStateNodeSettings';
+import { useStateMachineLayout } from './StateMachineLayout';
+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 to recursively collect all child node ids of collapsed composite nodes
+function getHiddenNodeIds(allNodes) {
+    const hidden = new Set();
+    const collapsedComposites = allNodes.filter((n) => n.type === 'CompositeStateNode' && !n.data.expanded);
+    const collectChildren = (parentId) => {
+        allNodes.forEach((child) => {
+            if (child.parentId === parentId) {
+                hidden.add(child.id);
+                if (child.type === 'CompositeStateNode') {
+                    collectChildren(child.id);
+                }
+            }
+        });
+    };
+    collapsedComposites.forEach((comp) => collectChildren(comp.id));
+    return hidden;
+}
+// Helper: get center position in diagram
+const getCenterPosition = (width, height) => {
+    return { x: width / 2 - 75, y: height / 2 - 40 };
+};
+const StateMachineDiagramFlowContent = ({ nodes: initialNodes, setNodes: parentSetNodes, edges: initialEdges, setEdges: parentSetEdges, }) => {
+    var _a, _b, _c, _d, _e;
+    // State declarations
+    const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+    const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+    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 [stateNodeSettings, setStateNodeSettings] = useState({ id: null });
+    const [edgeSettings, setEdgeSettings] = useState({
+        id: null,
+    });
+    const [selectedCompositeStateNodeId, setSelectedCompositeStateNodeId] = useState(null);
+    const [isSettingsSidebarOpen, setIsSettingsSidebarOpen] = useState(false);
+    // Add layout integration
+    const { getLayoutedElements, layoutDirection, setLayoutDirection } = useStateMachineLayout(nodes, edges, setNodes);
+    // Function declarations in correct order
+    const handleToggleCompositeExpand = useCallback((id, expanded) => {
+        setNodes((nds) => nds.map((node) => node.id === id && node.type === 'CompositeStateNode'
+            ? Object.assign(Object.assign({}, node), { data: Object.assign(Object.assign({}, node.data), { expanded }) }) : node));
+    }, [setNodes]);
+    const nodeTypes = useMemo(() => {
+        return Object.assign(Object.assign({}, baseStateMachineNodeTypes), { CompositeStateNode: (props) => {
+                const compositeProps = Object.assign(Object.assign({}, props), { onToggleExpand: handleToggleCompositeExpand, onSettingsClick: undefined });
+                return _jsx(CompositeStateNodeType, Object.assign({}, compositeProps));
+            } });
+    }, [handleToggleCompositeExpand]);
+    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) => {
+        console.log(`Loading template: ${templateType}`);
+        // For now, just load the default state machine nodes/edges
+        setNodes(stateMachineDefaultNodes);
+        setEdges(stateMachineDefaultEdges);
+    }, [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 state machine nodes
+    const nodeTypeMap = {
+        StateNode: { type: 'StateNode', data: { label: 'State' } },
+        InitialStateNode: { type: 'InitialStateNode', data: {} },
+        FinalStateNode: { type: 'FinalStateNode', data: {} },
+        CompositeStateNode: {
+            type: 'CompositeStateNode',
+            data: { label: 'Composite State', expanded: false },
+        },
+        HistoryStateNode: { type: 'HistoryStateNode', data: {} },
+        JunctionPointNode: { type: 'JunctionPointNode', data: {} },
+        ChoicePointNode: { type: 'ChoicePointNode', data: {} },
+        EntryPointNode: { type: 'EntryPointNode', data: {} },
+        ExitPointNode: { type: 'ExitPointNode', data: {} },
+        ForkJoinNode: { type: 'ForkJoinNode', data: { orientation: 'horizontal' } },
+        BendpointNode: { type: 'bendpoint', data: {} },
+    };
+    // 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));
+            // Update all selfconnecting edges for this node with new size/position
+            setEdges((eds) => eds.map((edge) => {
+                var _a, _b, _c, _d;
+                if (edge.type === 'selfconnecting' &&
+                    edge.source === id &&
+                    edge.target === id) {
+                    // Find the node to get its position
+                    const node = nodes.find((n) => n.id === id);
+                    const nodeX = (_b = (_a = node === null || node === void 0 ? void 0 : node.position) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0;
+                    const nodeY = (_d = (_c = node === null || node === void 0 ? void 0 : node.position) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0;
+                    return Object.assign(Object.assign({}, edge), { data: Object.assign(Object.assign({}, edge.data), { nodeWidth: width, nodeHeight: height, nodeX,
+                            nodeY }) });
+                }
+                return edge;
+            }));
+        };
+        setNodes((nds) => [
+            ...nds,
+            {
+                id: newId,
+                type,
+                position: center,
+                data: Object.assign(Object.assign({}, data), { onResize }),
+                draggable: true,
+            },
+        ]);
+    }, [nodes, setNodes, setEdges]);
+    // Update onAddEntity to use internal addNodeAtCenter
+    const handleAddEntity = useCallback((nodeTypeId = 'StateNode') => {
+        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 = 'state-machine-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) {
+                console.error('Error importing diagram:', 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: 'customEdge',
+            sourceHandle: params.sourceHandle,
+            targetHandle: params.targetHandle,
+            data: {
+                label: `Transition ${edges.length + 1}`,
+            },
+            animated: false,
+        };
+        setEdges((eds) => [...eds, newEdge]);
+        setEdgeSettings({ id: newEdge.id });
+        setIsSettingsSidebarOpen(true);
+    }, [nodes, edges, setEdges]);
+    // Update onNodeClick function
+    const onNodeClick = useCallback((event, node) => {
+        if (node.type === 'bendpoint') {
+            setStateNodeSettings({ id: null });
+            setSelectedCompositeStateNodeId(null);
+            return;
+        }
+        if (node.type === 'CompositeStateNode') {
+            setSelectedCompositeStateNodeId(node.id);
+            setStateNodeSettings({ id: null });
+            setIsSettingsSidebarOpen(true);
+        }
+        else if ([
+            'StateNode',
+            'InitialStateNode',
+            'FinalStateNode',
+            'HistoryStateNode',
+            'JunctionPointNode',
+            'ChoicePointNode',
+            'EntryPointNode',
+            'ExitPointNode',
+            'ForkJoinNode',
+        ].includes(node.type || '')) {
+            setStateNodeSettings({ id: node.id });
+            setSelectedCompositeStateNodeId(null);
+            setIsSettingsSidebarOpen(true);
+        }
+        else {
+            setStateNodeSettings({ id: null });
+            setSelectedCompositeStateNodeId(null);
+        }
+    }, []);
+    // 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 === 'customEdge') {
+            setEdgeSettings({ id: edge.id });
+            setIsSettingsSidebarOpen(true);
+        }
+    }, []);
+    // Function to update selected state node
+    const updateSelectedStateNode = useCallback((updates) => {
+        if (!stateNodeSettings.id)
+            return;
+        setNodes((nds) => nds.map((node) => {
+            if (node.id === stateNodeSettings.id) {
+                return Object.assign(Object.assign({}, node), { data: Object.assign(Object.assign({}, node.data), updates) });
+            }
+            return node;
+        }));
+    }, [stateNodeSettings.id, setNodes]);
+    // Close state node settings
+    const closeStateNodeSettings = useCallback(() => {
+        setStateNodeSettings({ id: null });
+        setIsSettingsSidebarOpen(false);
+    }, []);
+    // Update edge from EdgeSettings
+    const updateSelectedEdge = useCallback((updates) => {
+        if (!edgeSettings.id)
+            return;
+        setEdges((eds) => eds.map((edge) => {
+            if (edge.id === edgeSettings.id) {
+                return Object.assign(Object.assign({}, edge), { source: typeof updates.source === 'string' ? updates.source : edge.source, target: typeof updates.target === 'string' ? updates.target : edge.target, data: Object.assign(Object.assign({}, edge.data), updates) });
+            }
+            return edge;
+        }));
+    }, [edgeSettings.id, setEdges]);
+    // Close EdgeSettings
+    const closeEdgeSettings = useCallback(() => {
+        setEdgeSettings({ id: null });
+        setIsSettingsSidebarOpen(false);
+    }, []);
+    // Close CompositeStateNodeSettings
+    const closeCompositeStateNodeSettings = useCallback(() => {
+        setSelectedCompositeStateNodeId(null);
+        setIsSettingsSidebarOpen(false);
+    }, []);
+    // Function to update selected composite state node
+    const updateSelectedCompositeStateNode = useCallback((updates) => {
+        if (!selectedCompositeStateNodeId)
+            return;
+        setNodes((nds) => nds.map((node) => {
+            if (node.id === selectedCompositeStateNodeId) {
+                return Object.assign(Object.assign({}, node), { data: Object.assign(Object.assign({}, node.data), updates) });
+            }
+            return node;
+        }));
+    }, [selectedCompositeStateNodeId, setNodes]);
+    // Collapse all composite nodes on pane click
+    const handlePaneClick = useCallback(() => {
+        setNodes((nds) => nds.map((node) => node.type === 'CompositeStateNode'
+            ? Object.assign(Object.assign({}, node), { data: Object.assign(Object.assign({}, node.data), { expanded: false }) }) : node));
+        setSelectedCompositeStateNodeId(null);
+        setStateNodeSettings({ id: null });
+    }, [setNodes]);
+    // Memoize hidden node ids
+    const hiddenNodeIds = useMemo(() => getHiddenNodeIds(nodes), [nodes]);
+    // Memoize filtered nodes
+    const filteredNodes = useMemo(() => nodes.filter((n) => !hiddenNodeIds.has(n.id)), [nodes, hiddenNodeIds]);
+    // Memoize collapsed composites
+    const collapsedComposites = useMemo(() => nodes.filter((n) => n.type === 'CompositeStateNode' && !n.data.expanded), [nodes]);
+    // Memoize proxy edge logic (optimized for performance)
+    const { filteredEdges } = useMemo(() => {
+        // Precompute collapsed composite node ids for O(1) lookup
+        const collapsedCompositeIds = new Set(nodes
+            .filter((n) => n.type === 'CompositeStateNode' && !n.data.expanded)
+            .map((n) => n.id));
+        // Precompute a map of nodeId -> node for O(1) lookup
+        const nodeIdMap = new Map(nodes.map((n) => [n.id, n]));
+        // Map childId to its collapsed composite parent
+        const childToCollapsedParent = {};
+        const collectChildren = (parentId) => {
+            nodes.forEach((child) => {
+                if (child.parentId === parentId) {
+                    childToCollapsedParent[child.id] = parentId;
+                    if (child.type === 'CompositeStateNode') {
+                        collectChildren(child.id);
+                    }
+                }
+            });
+        };
+        collapsedCompositeIds.forEach((compId) => collectChildren(compId));
+        // Generate proxy edges for edges crossing collapsed composite boundaries
+        const proxyEdges = [];
+        const realEdges = [];
+        edges.forEach((edge) => {
+            const sourceHidden = hiddenNodeIds.has(edge.source);
+            const targetHidden = hiddenNodeIds.has(edge.target);
+            // Self-loop on composite node: hide if collapsed
+            if (edge.source === edge.target &&
+                collapsedCompositeIds.has(edge.source)) {
+                return; // skip this edge
+            }
+            // If both ends are hidden, skip (don't show)
+            if (sourceHidden && targetHidden)
+                return;
+            // If neither end is hidden, show as normal
+            if (!sourceHidden && !targetHidden) {
+                realEdges.push(edge);
+                return;
+            }
+            // If one end is hidden and the other is visible, create a proxy edge
+            let proxySource = edge.source;
+            let proxyTarget = edge.target;
+            let proxyId = edge.id + '-proxy';
+            // If source is hidden, map to its collapsed composite parent
+            if (sourceHidden && childToCollapsedParent[edge.source]) {
+                proxySource = childToCollapsedParent[edge.source];
+            }
+            // If target is hidden, map to its collapsed composite parent
+            if (targetHidden && childToCollapsedParent[edge.target]) {
+                proxyTarget = childToCollapsedParent[edge.target];
+            }
+            // Avoid proxying to the same node (self-loop)
+            if (proxySource === proxyTarget)
+                return;
+            proxyEdges.push(Object.assign(Object.assign({}, edge), { id: proxyId, source: proxySource, target: proxyTarget, style: Object.assign(Object.assign({}, (edge.style || {})), { strokeDasharray: '6 4', opacity: 0.7 }), data: Object.assign(Object.assign({}, (edge.data || {})), { isProxy: true }) }));
+        });
+        return { filteredEdges: [...realEdges, ...proxyEdges] };
+    }, [edges, nodes, hiddenNodeIds]);
+    // Custom onNodesChange to snap PinPointNode to border of parent composite node
+    const customOnNodesChange = useCallback((changes) => {
+        setNodes((nds) => {
+            // Apply default node changes
+            let updated = applyNodeChanges(changes, nds);
+            // Snap PinPointNode nodes to border of parent composite node
+            updated = updated.map((node) => {
+                if (node.type === 'PinPointNode' && node.parentId) {
+                    const parent = nds.find((n) => n.id === node.parentId);
+                    if (!parent)
+                        return node;
+                    const width = parent.data.width || 400;
+                    const height = parent.data.height || 300;
+                    const size = 22;
+                    let { x, y } = node.position;
+                    // Calculate center
+                    const cx = x + size / 2;
+                    const cy = y + size / 2;
+                    // Find closest border (top, bottom, left, right)
+                    const dTop = Math.abs(cy - 0);
+                    const dBottom = Math.abs(cy - height);
+                    const dLeft = Math.abs(cx - 0);
+                    const dRight = Math.abs(cx - width);
+                    const minDist = Math.min(dTop, dBottom, dLeft, dRight);
+                    let newX = x, newY = y;
+                    if (minDist === dTop) {
+                        newX =
+                            Math.max(-size / 2, Math.min(width - size / 2, cx)) - size / 2;
+                        newY = -size / 2;
+                    }
+                    else if (minDist === dBottom) {
+                        newX =
+                            Math.max(-size / 2, Math.min(width - size / 2, cx)) - size / 2;
+                        newY = height - size / 2;
+                    }
+                    else if (minDist === dLeft) {
+                        newX = -size / 2;
+                        newY =
+                            Math.max(-size / 2, Math.min(height - size / 2, cy)) - size / 2;
+                    }
+                    else if (minDist === dRight) {
+                        newX = width - size / 2;
+                        newY =
+                            Math.max(-size / 2, Math.min(height - size / 2, cy)) - size / 2;
+                    }
+                    return Object.assign(Object.assign({}, node), { position: { x: newX, y: newY } });
+                }
+                return node;
+            });
+            return updated;
+        });
+    }, [setNodes]);
+    // Add layout direction change handler
+    const handleLayoutDirectionChange = useCallback((direction) => {
+        setLayoutDirection(direction);
+        getLayoutedElements();
+    }, [setLayoutDirection, getLayoutedElements]);
+    // Add layout effect
+    useEffect(() => {
+        // Only layout if we have nodes/edges
+        if (nodes.length > 0 || edges.length > 0) {
+            getLayoutedElements();
+        }
+    }, [handleToggleCompositeExpand]);
+    // Add edge edit handlers
+    const handleEditEdge = useCallback((edge) => {
+        setEdgeSettings({ id: edge.id });
+    }, []);
+    const handleUpdateEdgeLabel = useCallback((edgeId, newLabel) => {
+        setEdges((eds) => eds.map((edge) => edge.id === edgeId
+            ? Object.assign(Object.assign({}, edge), { data: Object.assign(Object.assign({}, edge.data), { label: newLabel }) }) : edge));
+    }, [setEdges]);
+    const handleToggleEdgeArrowHead = useCallback((edgeId, direction) => {
+        setEdges((eds) => eds.map((edge) => {
+            if (edge.id === edgeId) {
+                const data = Object.assign({}, edge.data);
+                if (direction === 'left') {
+                    data.arrowHeadLeft = !data.arrowHeadLeft;
+                }
+                else {
+                    data.arrowHeadRight = !data.arrowHeadRight;
+                }
+                return Object.assign(Object.assign({}, edge), { data });
+            }
+            return edge;
+        }));
+    }, [setEdges]);
+    // 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]);
+    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: handleEditEdge, onUpdateEdgeLabel: handleUpdateEdgeLabel, onToggleEdgeArrowHead: handleToggleEdgeArrowHead }) }) }), _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: 'white',
+                    }, children: _jsxs(ReactFlow, { nodes: filteredNodes, edges: filteredEdges, onNodesChange: customOnNodesChange, onEdgesChange: onEdgesChange, onConnect: onConnect, nodeTypes: nodeTypes, edgeTypes: stateMachineEdgeTypes, fitView: true, fitViewOptions: {
+                            padding: 0.2,
+                            minZoom: 0.5,
+                            maxZoom: 2,
+                        }, minZoom: 0.1, maxZoom: 2, defaultViewport: { x: 0, y: 0, zoom: 1 }, style: {
+                            background: '#f8f9fa',
+                        }, proOptions: { hideAttribution: true }, selectNodesOnDrag: false, connectOnClick: false, onNodeClick: onNodeClick, onNodeDoubleClick: onNodeDoubleClick, onEdgeDoubleClick: onEdgeDoubleClick, onPaneClick: handlePaneClick, children: [_jsx(Background, { color: "#f8f9fa", 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: () => handleLayoutDirectionChange('DOWN'), onTreeLayout: () => handleLayoutDirectionChange('RIGHT') }), _jsx(AiButton, {})] }) }) }), stateNodeSettings.id && (_jsx(StateNodeSettings, { nodeId: stateNodeSettings.id, data: ((_a = nodeMap.get(stateNodeSettings.id)) === null || _a === void 0 ? void 0 : _a.data) || {}, onUpdate: updateSelectedStateNode, onClose: closeStateNodeSettings, edges: edges, setEdges: (updater) => {
+                    if (typeof updater === 'function') {
+                        setEdges((prev) => updater(prev));
+                    }
+                    else {
+                        setEdges(updater);
+                    }
+                }, nodes: nodes })), edgeSettings.id && (_jsx(EdgeSettings, { data: Object.assign(Object.assign({}, (((_b = edgeMap.get(edgeSettings.id)) === null || _b === void 0 ? void 0 : _b.data) || {})), { source: (_c = edgeMap.get(edgeSettings.id)) === null || _c === void 0 ? void 0 : _c.source, target: (_d = edgeMap.get(edgeSettings.id)) === null || _d === void 0 ? void 0 : _d.target }), nodes: nodes, onUpdate: updateSelectedEdge, onClose: closeEdgeSettings, onDelete: () => {
+                    setEdges((eds) => eds.filter((edge) => edge.id !== edgeSettings.id));
+                    closeEdgeSettings();
+                } })), selectedCompositeStateNodeId && (_jsx(CompositeStateNodeSettings, { nodeId: selectedCompositeStateNodeId, data: ((_e = nodeMap.get(selectedCompositeStateNodeId)) === null || _e === void 0 ? void 0 : _e.data) || {}, nodes: nodes, setNodes: (updater) => {
+                    if (typeof updater === 'function') {
+                        setNodes((prev) => updater(prev));
+                    }
+                    else {
+                        setNodes(updater);
+                    }
+                }, onUpdate: updateSelectedCompositeStateNode, onClose: closeCompositeStateNodeSettings, edges: edges, setEdges: (updater) => {
+                    if (typeof updater === 'function') {
+                        setEdges((prev) => updater(prev));
+                    }
+                    else {
+                        setEdges(updater);
+                    }
+                } }))] }));
+};
+// Main wrapper component with ReactFlowProvider
+const StateMachineDiagramFlow = (props) => {
+    return (_jsx(ReactFlowProvider, { children: _jsx(StateMachineDiagramFlowContent, Object.assign({}, props)) }));
+};
+export default StateMachineDiagramFlow;
+//# sourceMappingURL=StateMachineDiagramFlow.js.map