@flowuent-org/diagramming-core 1.0.7 → 1.1.0

package/dist/out-tsc/packages/diagrams/src/lib/templates/sequence/components/SequenceDiagramFlow.js

@@ -0,0 +1,830 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useState, useRef, useEffect } from 'react';
+import { ReactFlow, Background, useNodesState, useEdgesState, BackgroundVariant, } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { Box, Button, TextField, Typography, IconButton, } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { useTranslation } from 'react-i18next';
+import { getTemplateData } from '../data/template-data';
+import { sequenceEdgeTypes, sequenceNodeTypes } from './SequenceComponents';
+import DiagramControls from '../controls/DiagramControls';
+import FragmentSettings from './FragmentSettings';
+import EntitySettings from './EntitySettings';
+import AddMessageDialog from './AddMessageDialog';
+import Sidebar from '../../../components/SideBar';
+import AiButton from '../../../components/AiButton';
+import MiniMapCommon from '../../../components/MiniMapCommon';
+import DiagramPanel from '../../../components/DiagramPanel';
+// Main component that manages the diagram state
+const SequenceDiagramFlow = ({ sequenceNodes, sequenceEdges, }) => {
+    var _a;
+    const { t } = useTranslation();
+    // Initialize nodes and edges with our data - use xy/flow base types with proper generics
+    const [nodes, setNodes, onNodesChange] = useNodesState(sequenceNodes);
+    const [edges, setEdges, onEdgesChange] = useEdgesState(sequenceEdges);
+    // History state for undo/redo functionality
+    const [history, setHistory] = useState([]);
+    const [historyIndex, setHistoryIndex] = useState(-1);
+    const isUndoRedoAction = useRef(false);
+    // Initialize history with initial state
+    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
+    useEffect(() => {
+        // Don't record history when performing undo/redo actions or when we're still initializing
+        if (isUndoRedoAction.current || history.length === 0) {
+            return;
+        }
+        // Debounce: Only update history if nodes/edges actually changed (deep compare)
+        const newHistoryEntry = {
+            nodes: [...nodes],
+            edges: [...edges],
+        };
+        const currentState = history[historyIndex];
+        if (JSON.stringify(currentState.nodes) ===
+            JSON.stringify(newHistoryEntry.nodes) &&
+            JSON.stringify(currentState.edges) ===
+                JSON.stringify(newHistoryEntry.edges)) {
+            return; // No change, don't add to history
+        }
+        // Trim future history if we're in the middle of the history stack
+        const newHistory = history.slice(0, historyIndex + 1);
+        newHistory.push(newHistoryEntry);
+        setHistory(newHistory);
+        setHistoryIndex(newHistory.length - 1);
+    }, [nodes, edges, history, historyIndex]);
+    // 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]);
+    // 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]);
+    const [theme, setTheme] = useState({
+        primary: '#61dafb',
+        secondary: '#2a2a2a',
+    });
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [selectedFragmentId, setSelectedFragmentId] = useState(null);
+    const [fragmentSettings, setFragmentSettings] = useState({
+        width: 400,
+        height: 150,
+    });
+    const [showFragmentSettings, setShowFragmentSettings] = useState(false);
+    const diagramContainerRef = useRef(null);
+    const [editingNode, setEditingNode] = useState(null);
+    const [editingEdge, setEditingEdge] = useState(null);
+    const [editingLabel, setEditingLabel] = useState('');
+    const [editingConditions, setEditingConditions] = useState([]);
+    const [editingType, setEditingType] = useState('node');
+    const [selectedEntityId, setSelectedEntityId] = useState(null);
+    const [showEntitySettings, setShowEntitySettings] = useState(false);
+    const [showMessageDialog, setShowMessageDialog] = useState(false);
+    const ENTITY_FIXED_Y = 50; // Fixed y position for all entities
+    // Type-safe node access helpers
+    const getSequenceEntityNodes = useCallback(() => {
+        return nodes.filter((node) => node.type === 'sequenceEntity');
+    }, [nodes]);
+    const getCombinedFragmentNodes = useCallback(() => {
+        return nodes.filter((node) => node.type === 'combinedFragment');
+    }, [nodes]);
+    // Intercept node position changes to lock y for sequenceEntity nodes
+    const onNodesChangeLockedY = useCallback((changes) => {
+        let hasPositionChange = false;
+        const updatedNodes = nodes.map((node) => {
+            // Find if there's a position change for this node
+            const change = changes.find((c) => c.type === 'position' && c.id === node.id);
+            if (change &&
+                change.type === 'position' &&
+                node.type === 'sequenceEntity' &&
+                change.position) {
+                hasPositionChange = true;
+                // Lock y position
+                return Object.assign(Object.assign({}, node), { position: {
+                        x: change.position.x,
+                        y: ENTITY_FIXED_Y, // always fixed
+                    } });
+            }
+            return node;
+        });
+        if (hasPositionChange) {
+            setNodes(updatedNodes);
+        }
+        else {
+            onNodesChange(changes);
+        }
+    }, [nodes, setNodes, onNodesChange]);
+    // Handler to add a new entity
+    const handleAddEntity = useCallback((shape = 'rectangle') => {
+        console.log('Adding new entity with shape:', shape);
+        console.log('Current nodes:', nodes);
+        // Find all entity nodes
+        const entityNodes = getSequenceEntityNodes();
+        const entityCount = entityNodes.length;
+        const newEntityId = `entity-${entityCount + 1}`;
+        // Find the rightmost x position among entities
+        const rightmostX = entityNodes.length > 0
+            ? Math.max(...entityNodes.map((node) => node.position.x))
+            : 100; // Default starting x
+        const xOffset = 150; // Space between entities
+        const xPosition = entityNodes.length > 0 ? rightmostX + xOffset : rightmostX;
+        // Create a new entity node with extended properties
+        const newEntity = {
+            id: newEntityId,
+            type: 'sequenceEntity',
+            position: { x: xPosition, y: 50 },
+            data: {
+                label: `Entity ${entityCount + 1}`,
+                color: theme.primary,
+                backgroundColor: theme.secondary,
+                lifelineLength: 500, // Use same height as others
+                shape: shape, // Use the provided shape
+                fontSize: 12,
+                borderWidth: 2,
+                description: '',
+                collapsed: false,
+            },
+            draggable: true,
+            zIndex: 5, // Higher z-index to appear above other elements
+        };
+        // Adjust position based on entity shape
+        let offsetX = 55;
+        switch (shape) {
+            case 'circle':
+                offsetX = 40;
+                break;
+            case 'database':
+                offsetX = 45;
+                break;
+            case 'actor':
+                offsetX = 60;
+                break;
+            default:
+                offsetX = 55;
+                break;
+        }
+        const activationBar = {
+            id: `${newEntityId}-activation`,
+            type: 'activationBar',
+            position: { x: xPosition + offsetX, y: 180 }, // Position below the entity
+            data: {
+                entityId: newEntityId,
+                color: theme.secondary,
+                borderColor: theme.primary,
+                length: 150,
+            },
+            draggable: true,
+            zIndex: 1, // Lower z-index to appear behind entity boxes but above combined fragments
+        };
+        setNodes((nds) => [...nds, newEntity, activationBar]);
+    }, [nodes, setNodes, theme, getSequenceEntityNodes]);
+    // Filter entities for Add Message Dialog
+    const sequenceEntities = useCallback(() => {
+        return getSequenceEntityNodes().map((node) => ({
+            id: node.id,
+            type: 'sequenceEntity',
+            data: node.data,
+            position: node.position,
+            draggable: node.draggable,
+            zIndex: node.zIndex,
+        }));
+    }, [getSequenceEntityNodes]);
+    // Handler to open add message dialog
+    const handleOpenAddMessageDialog = useCallback(() => {
+        // Filter to get only entity nodes
+        const entityNodes = getSequenceEntityNodes();
+        if (entityNodes.length < 1) {
+            alert(t('sequenceDiagram.errors.needEntitiesForMessage'));
+            return;
+        }
+        setShowMessageDialog(true);
+    }, [getSequenceEntityNodes]);
+    // Handler to create a new message with specified source, target, and type
+    const handleAddCustomMessage = useCallback((sourceId, targetId, messageType, label) => {
+        var _a, _b;
+        // Find the source and target nodes
+        const sourceNode = nodes.find((n) => n.id === sourceId);
+        const targetNode = nodes.find((n) => n.id === targetId);
+        if (!sourceNode || !targetNode) {
+            console.error(t('sequenceDiagram.errors.sourceTargetNotFound'));
+            return;
+        }
+        // Calculate a reasonable Y position for the new message
+        const messageY = Math.max(...edges.map((edge) => { var _a; return ((_a = edge.data) === null || _a === void 0 ? void 0 : _a.y) || 0; }), 180) + 60; // Add some spacing
+        // Calculate handle positions based on nodes
+        const sourceX = ((_a = sourceNode.position) === null || _a === void 0 ? void 0 : _a.x) || 0;
+        const targetX = ((_b = targetNode.position) === null || _b === void 0 ? void 0 : _b.x) || 0;
+        // Calculate source and target handles
+        let sourceHandle = 'right';
+        let targetHandle = 'left';
+        if (messageType === 'self') {
+            // For self messages, always use the right side
+            sourceHandle = 'right';
+            targetHandle = 'right';
+        }
+        else if (sourceX > targetX) {
+            // If source is to the right of target (server-to-client)
+            sourceHandle = 'left';
+            targetHandle = 'right';
+        }
+        else {
+            // If source is to the left of target (client-to-server)
+            sourceHandle = 'right';
+            targetHandle = 'left';
+        }
+        // Create a message from the source to the target entity
+        const newEdge = {
+            id: `seq-edge-${edges.length + 1}`,
+            source: sourceId,
+            target: targetId,
+            type: 'sequenceMessage',
+            sourceHandle: sourceHandle,
+            targetHandle: targetHandle,
+            data: {
+                label: label,
+                type: messageType,
+                y: messageY,
+            },
+            animated: messageType === 'async',
+        };
+        setEdges((eds) => [...eds, newEdge]);
+        setNodes((nds) => {
+            return nds.map((node) => {
+                if (node.type === 'sequenceEntity' &&
+                    (node.id === sourceId || node.id === targetId)) {
+                    const nodeData = node.data;
+                    // Find all messages (edges) connected to this node, including the new one
+                    const connectedMessages = [...edges, newEdge].filter((edge) => edge.source === node.id || edge.target === node.id);
+                    // Find the max Y position among these messages
+                    const maxY = Math.max(...connectedMessages.map((edge) => { var _a; return ((_a = edge.data) === null || _a === void 0 ? void 0 : _a.y) || 0; }), nodeData.lifelineLength || 0);
+                    const newLength = Math.max(maxY + 40, nodeData.lifelineLength || 0);
+                    // Only update if needed
+                    if (newLength > (nodeData.lifelineLength || 0)) {
+                        return Object.assign(Object.assign({}, node), { data: Object.assign(Object.assign({}, nodeData), { lifelineLength: newLength }) });
+                    }
+                }
+                return node;
+            });
+        });
+    }, [nodes, edges, setEdges, setNodes]);
+    // Handler for the original add message button (now opens the dialog)
+    const handleAddMessage = useCallback(() => {
+        handleOpenAddMessageDialog();
+    }, [handleOpenAddMessageDialog]);
+    // 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 = t('sequenceDiagram.export.filename');
+        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(t('sequenceDiagram.errors.importFailed'));
+            }
+        };
+    }, [setNodes, setEdges]);
+    // Function to handle theme changes
+    const handleThemeChange = useCallback((newTheme) => {
+        setTheme(newTheme);
+        // Update nodes with new theme colors
+        setNodes((nds) => nds.map((node) => {
+            if (node.type === 'sequenceEntity') {
+                const nodeData = node.data;
+                return Object.assign(Object.assign({}, node), { data: Object.assign(Object.assign({}, nodeData), { color: newTheme.primary, backgroundColor: newTheme.secondary }) });
+            }
+            else if (node.type === 'activationBar') {
+                const nodeData = node.data;
+                return Object.assign(Object.assign({}, node), { data: Object.assign(Object.assign({}, nodeData), { color: newTheme.secondary, borderColor: newTheme.primary }) });
+            }
+            return node;
+        }));
+    }, [setNodes]);
+    // Toggle fullscreen mode
+    const toggleFullscreen = useCallback(() => {
+        if (!diagramContainerRef.current)
+            return;
+        const element = diagramContainerRef.current;
+        const doc = document;
+        if (!isFullscreen) {
+            if (element.requestFullscreen) {
+                element.requestFullscreen();
+            }
+            else if (element.webkitRequestFullscreen) {
+                element.webkitRequestFullscreen();
+            }
+            else if (element.msRequestFullscreen) {
+                element.msRequestFullscreen();
+            }
+        }
+        else {
+            if (doc.exitFullscreen) {
+                doc.exitFullscreen();
+            }
+            else if (doc.webkitExitFullscreen) {
+                doc.webkitExitFullscreen();
+            }
+            else if (doc.msExitFullscreen) {
+                doc.msExitFullscreen();
+            }
+        }
+        setIsFullscreen(!isFullscreen);
+    }, [isFullscreen]);
+    // Listen for fullscreen change events from browser
+    React.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);
+        };
+    }, []);
+    // Properly handle connections between nodes
+    const onConnect = useCallback((params) => {
+        var _a, _b;
+        console.log('Connection params:', params);
+        if (!params.source || !params.target)
+            return;
+        // Find the source and target nodes
+        const sourceNode = nodes.find((n) => n.id === params.source);
+        const targetNode = nodes.find((n) => n.id === params.target);
+        if (!sourceNode || !targetNode)
+            return;
+        // Only allow connections between sequence entities
+        if (sourceNode.type !== 'sequenceEntity' ||
+            targetNode.type !== 'sequenceEntity') {
+            alert(t('sequenceDiagram.errors.onlyConnectEntities'));
+            return;
+        }
+        // Calculate a Y position for the new message
+        const messageY = Math.max(...edges.map((edge) => { var _a; return ((_a = edge.data) === null || _a === void 0 ? void 0 : _a.y) || 0; }), 180) + 60; // Add some spacing
+        // Calculate handle positions based on nodes
+        const sourceX = ((_a = sourceNode.position) === null || _a === void 0 ? void 0 : _a.x) || 0;
+        const targetX = ((_b = targetNode.position) === null || _b === void 0 ? void 0 : _b.x) || 0;
+        // Determine correct handles based on relative positions
+        let sourceHandle = params.sourceHandle;
+        let targetHandle = params.targetHandle;
+        // If handles aren't explicitly provided by the connection event,
+        // calculate them based on node positions
+        if (!sourceHandle || !targetHandle) {
+            if (sourceX > targetX) {
+                // Source is to the right of target (server-to-client)
+                sourceHandle = 'left';
+                targetHandle = 'right';
+            }
+            else {
+                // Source is to the left of target (client-to-server)
+                sourceHandle = 'right';
+                targetHandle = 'left';
+            }
+        }
+        // Create a new edge for the message
+        const newEdge = {
+            id: `seq-edge-${edges.length + 1}`,
+            source: params.source,
+            target: params.target,
+            type: 'sequenceMessage',
+            sourceHandle: sourceHandle,
+            targetHandle: targetHandle,
+            data: {
+                label: `Message ${edges.length + 1}`,
+                type: 'sync', // Default to sync message
+                y: messageY,
+            },
+            animated: false,
+        };
+        setEdges((eds) => [...eds, newEdge]);
+        setNodes((nds) => {
+            return nds.map((node) => {
+                if (node.type === 'sequenceEntity' &&
+                    (node.id === params.source || node.id === params.target)) {
+                    const nodeData = node.data;
+                    // Find all messages (edges) connected to this node, including the new one
+                    const connectedMessages = [...edges, newEdge].filter((edge) => edge.source === node.id || edge.target === node.id);
+                    // Find the max Y position among these messages
+                    const maxY = Math.max(...connectedMessages.map((edge) => { var _a; return ((_a = edge.data) === null || _a === void 0 ? void 0 : _a.y) || 0; }), nodeData.lifelineLength || 0);
+                    const newLength = Math.max(maxY + 40, nodeData.lifelineLength || 0);
+                    // Only update if needed
+                    if (newLength > (nodeData.lifelineLength || 0)) {
+                        return Object.assign(Object.assign({}, node), { data: Object.assign(Object.assign({}, nodeData), { lifelineLength: newLength }) });
+                    }
+                }
+                return node;
+            });
+        });
+    }, [nodes, edges, setEdges, setNodes]);
+    // Handle node click events - use ReactFlow's NodeMouseHandler type
+    const onNodeClick = useCallback((event, node) => {
+        var _a, _b;
+        // If the node is a combined fragment, select it for editing
+        if (node.type === 'combinedFragment') {
+            setSelectedFragmentId(node.id);
+            // Set current fragment dimensions
+            const width = ((_a = node.style) === null || _a === void 0 ? void 0 : _a.width) || 400;
+            const height = ((_b = node.style) === null || _b === void 0 ? void 0 : _b.height) || 150;
+            setFragmentSettings({ width: Number(width), height: Number(height) });
+            // Show the settings panel
+            setShowFragmentSettings(true);
+            setShowEntitySettings(false);
+        }
+        // If the node is an entity, select it for settings
+        else if (node.type === 'sequenceEntity') {
+            setSelectedEntityId(node.id);
+            setShowEntitySettings(true);
+            setShowFragmentSettings(false);
+        }
+        else {
+            // If clicking on a non-fragment node while settings are open, close them
+            if (showFragmentSettings) {
+                setShowFragmentSettings(false);
+                setSelectedFragmentId(null);
+            }
+            if (showEntitySettings) {
+                setShowEntitySettings(false);
+                setSelectedEntityId(null);
+            }
+        }
+    }, [showFragmentSettings, showEntitySettings]);
+    // Handle node double-click for label editing - use ReactFlow's NodeMouseHandler type
+    const onNodeDoubleClick = useCallback((event, node) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (node.type === 'sequenceEntity') {
+            const nodeData = node.data;
+            setEditingNode(node.id);
+            setEditingEdge(null);
+            setEditingLabel(nodeData.label || '');
+            setEditingType('node');
+        }
+        else if (node.type === 'combinedFragment') {
+            const nodeData = node.data;
+            setEditingNode(node.id);
+            setEditingEdge(null);
+            setEditingLabel(nodeData.label || '');
+            setEditingType('fragment');
+            setEditingConditions(nodeData.conditions || []);
+        }
+    }, []);
+    // Handle edge double-click for label editing - use ReactFlow's EdgeMouseHandler type
+    const onEdgeDoubleClick = useCallback((event, edge) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (edge.type === 'sequenceMessage') {
+            const edgeData = edge.data;
+            setEditingEdge(edge.id);
+            setEditingNode(null);
+            setEditingLabel((edgeData === null || edgeData === void 0 ? void 0 : edgeData.label) || '');
+            setEditingType('edge');
+        }
+    }, []);
+    // Handle label input change
+    const handleLabelChange = useCallback((e) => {
+        setEditingLabel(e.target.value);
+    }, []);
+    // Handle condition change
+    const handleConditionChange = (idx, value) => {
+        const updated = [...editingConditions];
+        updated[idx] = value;
+        setEditingConditions(updated);
+    };
+    // Handle add condition
+    const handleAddCondition = () => {
+        setEditingConditions([...editingConditions, '']);
+    };
+    // Handle remove condition
+    const handleRemoveCondition = (idx) => {
+        setEditingConditions(editingConditions.filter((_, i) => i !== idx));
+    };
+    // Save the edited label
+    const saveLabel = useCallback(() => {
+        if (editingNode && editingType === 'node') {
+            setNodes((nds) => nds.map((node) => {
+                if (node.id === editingNode) {
+                    return Object.assign(Object.assign({}, node), { data: Object.assign(Object.assign({}, node.data), { label: editingLabel }) });
+                }
+                return node;
+            }));
+            setEditingNode(null);
+        }
+        else if (editingNode && editingType === 'fragment') {
+            setNodes((nds) => nds.map((node) => {
+                if (node.id === editingNode) {
+                    return Object.assign(Object.assign({}, node), { data: Object.assign(Object.assign({}, node.data), { label: editingLabel, conditions: editingConditions }) });
+                }
+                return node;
+            }));
+            setEditingNode(null);
+            setEditingType('node');
+        }
+        else if (editingEdge && editingType === 'edge') {
+            setEdges((eds) => eds.map((edge) => {
+                if (edge.id === editingEdge) {
+                    return Object.assign(Object.assign({}, edge), { data: Object.assign(Object.assign({}, edge.data), { label: editingLabel }) });
+                }
+                return edge;
+            }));
+            setEditingEdge(null);
+        }
+        // Reset editing state
+        setEditingType('node');
+    }, [
+        editingNode,
+        editingEdge,
+        editingType,
+        editingLabel,
+        editingConditions,
+        setNodes,
+        setEdges,
+    ]);
+    // Handle keyboard events for the input field
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter') {
+            saveLabel();
+        }
+        else if (e.key === 'Escape') {
+            setEditingNode(null);
+            setEditingEdge(null);
+        }
+    }, [saveLabel]);
+    // Cancel editing
+    const cancelEditing = useCallback(() => {
+        setEditingNode(null);
+        setEditingEdge(null);
+        setEditingType('node');
+    }, []);
+    // Handler to add a new alt fragment
+    const handleAddAltFragment = useCallback((fragmentType = 'alt') => {
+        console.log(`Adding new ${fragmentType} fragment...`);
+        // Find all fragment nodes
+        const fragmentNodes = getCombinedFragmentNodes();
+        const fragmentCount = fragmentNodes.length;
+        const newFragmentId = `${fragmentType}-fragment-${fragmentCount + 1}`;
+        // Find the lowest y position among fragments
+        const defaultX = 250; // Fixed x position for all fragments
+        const defaultY = 300; // Default starting y for fragments
+        const lowestY = fragmentNodes.length > 0
+            ? Math.max(...fragmentNodes.map((node) => node.position.y))
+            : defaultY;
+        const yOffset = 200; // Space between fragments vertically
+        const centerX = defaultX;
+        const centerY = fragmentNodes.length > 0 ? lowestY + yOffset : lowestY;
+        // Set up conditions based on fragment type
+        let conditions = [];
+        switch (fragmentType) {
+            case 'alt':
+                conditions = ['[condition]', '[else]'];
+                break;
+            case 'opt':
+                conditions = ['[condition]'];
+                break;
+            case 'loop':
+                conditions = ['[loop condition]'];
+                break;
+            case 'par':
+                conditions = ['[parallel 1]', '[parallel 2]'];
+                break;
+            default:
+                conditions = ['[condition]'];
+        }
+        // Create a new fragment node
+        const newFragment = {
+            id: newFragmentId,
+            type: 'combinedFragment',
+            position: { x: centerX, y: centerY },
+            style: {
+                width: fragmentSettings.width,
+                height: fragmentSettings.height,
+            },
+            data: {
+                label: fragmentType,
+                conditions: conditions,
+                style: {
+                    width: fragmentSettings.width,
+                    height: fragmentSettings.height,
+                },
+                color: '#000000',
+                backgroundColor: '#ffffff',
+                lifelineLength: 0,
+            },
+            draggable: true,
+            zIndex: 0, // Lower z-index to appear behind other elements
+        };
+        setNodes((nds) => [...nds, newFragment]);
+        setSelectedFragmentId(newFragmentId);
+        setShowFragmentSettings(true);
+    }, [fragmentSettings, getCombinedFragmentNodes, setNodes]);
+    // Function to update selected fragment
+    const updateSelectedFragment = useCallback((fragmentId, updates) => {
+        setNodes((nds) => nds.map((node) => {
+            if (node.id === fragmentId) {
+                // Safely handle the style spread by ensuring the fragment data has a style property
+                const fragmentData = node.data;
+                const currentStyle = fragmentData.style || {};
+                // Apply updates to both style and data.style to ensure consistency
+                const updatedNode = Object.assign(Object.assign({}, node), { style: Object.assign(Object.assign({}, node.style), updates), data: Object.assign(Object.assign({}, fragmentData), { style: Object.assign(Object.assign({}, currentStyle), updates) }) });
+                return updatedNode;
+            }
+            return node;
+        }));
+    }, [setNodes]);
+    const handleFragmentWidthChange = useCallback((width) => {
+        setFragmentSettings((prev) => (Object.assign(Object.assign({}, prev), { width })));
+        if (selectedFragmentId) {
+            updateSelectedFragment(selectedFragmentId, { width });
+        }
+    }, [selectedFragmentId, updateSelectedFragment]);
+    const handleFragmentHeightChange = useCallback((height) => {
+        setFragmentSettings((prev) => (Object.assign(Object.assign({}, prev), { height })));
+        if (selectedFragmentId) {
+            updateSelectedFragment(selectedFragmentId, { height });
+        }
+    }, [selectedFragmentId, updateSelectedFragment]);
+    const closeFragmentSettings = useCallback(() => {
+        setShowFragmentSettings(false);
+        setSelectedFragmentId(null);
+    }, []);
+    // Function to update selected entity
+    const updateSelectedEntity = useCallback((updates) => {
+        if (!selectedEntityId)
+            return;
+        setNodes((nds) => nds.map((node) => {
+            if (node.id === selectedEntityId) {
+                return Object.assign(Object.assign({}, node), { data: Object.assign(Object.assign({}, node.data), updates) });
+            }
+            return node;
+        }));
+    }, [selectedEntityId, setNodes]);
+    // Close entity settings
+    const closeEntitySettings = useCallback(() => {
+        setShowEntitySettings(false);
+        setSelectedEntityId(null);
+    }, []);
+    // Handler to load a template diagram
+    const loadTemplateData = useCallback((templateType) => {
+        console.log(`Loading template: ${templateType}`);
+        const template = getTemplateData(templateType);
+        if (template.nodes.length > 0) {
+            setNodes(template.nodes);
+            setEdges(template.edges);
+        }
+    }, [setNodes, setEdges]);
+    return (_jsx(_Fragment, { children: _jsxs(Box, { sx: { display: 'flex', width: '100%', height: '100vh' }, children: [_jsx(Sidebar, { children: _jsx(DiagramControls, { onAddEntity: handleAddEntity, onAddMessage: handleAddMessage, onAddAltFragment: handleAddAltFragment, onUndo: handleUndo, onRedo: handleRedo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1, onLoadTemplate: loadTemplateData }) }), _jsx(Box, { sx: { flex: 1, height: '100%', position: 'relative' }, children: _jsxs("div", { ref: diagramContainerRef, className: `diagram-container ${isFullscreen ? 'fullscreen' : ''}`, style: {
+                            width: '100%',
+                            height: '100%',
+                            border: '1px solid #333',
+                            position: 'relative',
+                            backgroundColor: '#1a1a1a',
+                            color: '#ffffff',
+                        }, children: [_jsx(ReactFlow, { nodes: nodes, edges: edges, onNodesChange: onNodesChangeLockedY, onEdgesChange: onEdgesChange, onConnect: onConnect, nodeTypes: sequenceNodeTypes, edgeTypes: sequenceEdgeTypes, fitView: true, attributionPosition: "bottom-left", connectOnClick: false, onNodeClick: onNodeClick, onNodeDoubleClick: onNodeDoubleClick, onEdgeDoubleClick: onEdgeDoubleClick, style: {
+                                    backgroundColor: '#1a1a1a',
+                                }, children: _jsx(Background, { color: "#333", variant: BackgroundVariant.Dots, gap: 16 }) }), _jsx(DiagramPanel, { historyIndex: historyIndex, historyLength: history.length, onUndo: handleUndo, onRedo: handleRedo, onClear: () => {
+                                    const clearedState = { nodes: [], edges: [] };
+                                    const newHistory = history.slice(0, historyIndex + 1);
+                                    newHistory.push(clearedState);
+                                    setNodes([]);
+                                    setEdges([]);
+                                    setHistory(newHistory);
+                                    setHistoryIndex(newHistory.length - 1);
+                                }, onImport: () => { }, isSettingsOpen: false, onToggleSettings: () => { } }), _jsx(AiButton, {}), _jsx(MiniMapCommon, {}), showFragmentSettings && (_jsx(FragmentSettings, { fragmentId: selectedFragmentId, width: fragmentSettings.width, height: fragmentSettings.height, onWidthChange: handleFragmentWidthChange, onHeightChange: handleFragmentHeightChange, onClose: closeFragmentSettings })), showEntitySettings && selectedEntityId && (_jsx(EntitySettings, { entityId: selectedEntityId, data: ((_a = nodes.find((node) => node.id === selectedEntityId && node.type === 'sequenceEntity')) === null || _a === void 0 ? void 0 : _a.data) || {
+                                    label: '',
+                                    color: '#61dafb',
+                                    backgroundColor: '#2a2a2a',
+                                    lifelineLength: 500
+                                }, onUpdate: updateSelectedEntity, onClose: closeEntitySettings })), (editingNode || editingEdge) && (_jsxs(Box, { sx: {
+                                    position: 'absolute',
+                                    zIndex: 10,
+                                    top: 10,
+                                    left: '50%',
+                                    transform: 'translateX(-50%)',
+                                    bgcolor: '#242424',
+                                    border: '1px solid #333',
+                                    color: '#fff',
+                                    p: 2,
+                                    borderRadius: 1,
+                                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
+                                    minWidth: 320,
+                                    '& .MuiTextField-root': {
+                                        '& .MuiInputLabel-root': {
+                                            color: '#999',
+                                        },
+                                        '& .MuiOutlinedInput-root': {
+                                            color: '#fff',
+                                            '& fieldset': {
+                                                borderColor: '#444',
+                                            },
+                                            '&:hover fieldset': {
+                                                borderColor: '#61dafb',
+                                            },
+                                            '&.Mui-focused fieldset': {
+                                                borderColor: '#61dafb',
+                                            },
+                                        },
+                                    },
+                                    '& .MuiButton-contained': {
+                                        bgcolor: '#61dafb',
+                                        color: '#000',
+                                        '&:hover': {
+                                            bgcolor: '#4db6d6',
+                                        },
+                                    },
+                                    '& .MuiButton-outlined': {
+                                        borderColor: '#333',
+                                        color: '#fff',
+                                        '&:hover': {
+                                            borderColor: '#61dafb',
+                                            bgcolor: 'rgba(97, 218, 251, 0.1)',
+                                        },
+                                    },
+                                    '& .MuiIconButton-root': {
+                                        color: '#999',
+                                        '&:hover': {
+                                            color: '#fff',
+                                            bgcolor: 'rgba(255, 255, 255, 0.1)',
+                                        },
+                                    },
+                                }, children: [_jsx(Typography, { sx: { mb: 1, fontWeight: 'bold', color: '#fff' }, children: editingType === 'node'
+                                            ? t('sequenceFlow.editLabels.entityLabel')
+                                            : editingType === 'edge'
+                                                ? t('sequenceFlow.editLabels.messageLabel')
+                                                : t('sequenceFlow.editLabels.editFragment') }), editingType === 'fragment' ? (_jsxs(_Fragment, { children: [_jsx(Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: _jsx(TextField, { type: "text", value: editingLabel, onChange: handleLabelChange, onKeyDown: handleKeyDown, autoFocus: true, size: "small", sx: { width: 200 }, label: t('fragmentSettings.fragmentName') }) }), _jsxs(Box, { mb: 2, children: [_jsx(Typography, { variant: "body2", fontWeight: "bold", mb: 0.5, sx: { color: '#61dafb' }, children: t('fragmentSettings.conditions') }), editingConditions.map((cond, idx) => (_jsxs(Box, { display: "flex", alignItems: "center", mb: 1, children: [_jsx(TextField, { value: cond, onChange: (e) => handleConditionChange(idx, e.target.value), size: "small", fullWidth: true, sx: { mr: 1 } }), _jsx(IconButton, { onClick: () => handleRemoveCondition(idx), size: "small", children: _jsx(CloseIcon, { fontSize: "small" }) })] }, idx))), _jsx(Button, { onClick: handleAddCondition, size: "small", variant: "outlined", children: t('fragmentSettings.addCondition') })] }), _jsxs(Box, { display: "flex", gap: 2, children: [_jsx(Button, { variant: "contained", size: "small", onClick: saveLabel, sx: { textTransform: 'none' }, children: t('common.save') }), _jsx(Button, { variant: "outlined", size: "small", onClick: cancelEditing, sx: { textTransform: 'none' }, children: t('common.cancel') })] })] })) : (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(TextField, { type: "text", value: editingLabel, onChange: handleLabelChange, onKeyDown: handleKeyDown, autoFocus: true, size: "small", sx: { width: 200 } }), _jsx(Button, { variant: "contained", size: "small", onClick: saveLabel, sx: { textTransform: 'none' }, children: t('common.save') }), _jsx(Button, { variant: "outlined", size: "small", onClick: cancelEditing, sx: { textTransform: 'none' }, children: t('common.cancel') })] }))] })), _jsx(AddMessageDialog, { open: showMessageDialog, onClose: () => setShowMessageDialog(false), onAddMessage: handleAddCustomMessage, entities: sequenceEntities() })] }) })] }) }));
+};
+export default SequenceDiagramFlow;
+//# sourceMappingURL=SequenceDiagramFlow.js.map