@flowuent-org/diagramming-core 1.1.0 → 1.1.2

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

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