@flowuent-org/diagramming-core 1.1.0 → 1.1.2

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

@@ -1,787 +0,0 @@
-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