@flowuent-org/diagramming-core 1.0.5

package/packages/diagrams/src/lib/templates/sequence/components/ActivationBarNode.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import { NodeProps } from '@xyflow/react';
+import { ActivationBarData } from '../../../types/sequence-types';
+
+export const ActivationBarNode: React.FC<NodeProps> = (props) => {
+  const { data } = props as NodeProps & { data: ActivationBarData };
+  const { color, borderColor, length } = data;
+
+  // Get dark theme colors
+  const getBackgroundColor = () => {
+    return color || '#333333';
+  };
+
+  const getBorderColor = () => {
+    return borderColor || '#61dafb';
+  };
+
+  return (
+    <Box
+      className="activation-bar"
+      sx={{
+        width: '10px',
+        height: `${length}px`,
+        backgroundColor: getBackgroundColor(),
+        border: `1px solid ${getBorderColor()}`,
+        position: 'absolute',
+        opacity: 0.8,
+        borderRadius: '2px',
+      }}
+    />
+  );
+};

package/packages/diagrams/src/lib/templates/sequence/components/AddMessageDialog.tsx

@@ -0,0 +1,302 @@
+import React, { useState, useEffect } from 'react';
+import '@xyflow/react/dist/style.css';
+import {
+  Box,
+  Button,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  TextField,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  SelectChangeEvent,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { AddMessageDialogProps, SequenceMessageType } from '../../../types/sequence-types';
+
+const AddMessageDialog: React.FC<AddMessageDialogProps> = ({
+  open,
+  onClose,
+  onAddMessage,
+  entities,
+}) => {
+  const { t } = useTranslation();
+  const [sourceId, setSourceId] = useState<string>('');
+  const [targetId, setTargetId] = useState<string>('');
+  const [messageType, setMessageType] = useState<SequenceMessageType>('sync');
+  const [messageLabel, setMessageLabel] = useState<string>('');
+
+  // Reset form when dialog opens
+  React.useEffect(() => {
+    if (open && entities.length > 0) {
+      setSourceId(entities[0].id);
+      setTargetId(entities.length > 1 ? entities[1].id : entities[0].id);
+      setMessageType('sync');
+      setMessageLabel('New Message');
+    }
+  }, [open, entities]);
+
+  const handleSubmit = () => {
+    // If source and target are same and type is not 'self', set to 'self'
+    let effectiveMessageType = messageType;
+    if (sourceId === targetId && messageType !== 'self') {
+      effectiveMessageType = 'self';
+    }
+
+    onAddMessage(sourceId, targetId, effectiveMessageType, messageLabel);
+    onClose();
+  };
+
+  // Handle message type pre-selection when source/target changes
+  const handleSourceTargetChange = (
+    newSourceId: string,
+    newTargetId: string,
+  ) => {
+    // If source and target are the same, automatically select 'self' message type
+    if (newSourceId === newTargetId && messageType !== 'self') {
+      setMessageType('self');
+    }
+  };
+
+  // Update source with validation
+  const handleSourceChange = (event: SelectChangeEvent) => {
+    const newSourceId = event.target.value as string;
+    setSourceId(newSourceId);
+    handleSourceTargetChange(newSourceId, targetId);
+  };
+
+  // Update target with validation
+  const handleTargetChange = (event: SelectChangeEvent) => {
+    const newTargetId = event.target.value as string;
+    setTargetId(newTargetId);
+    handleSourceTargetChange(sourceId, newTargetId);
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      maxWidth="sm"
+      fullWidth
+      PaperProps={{
+        sx: {
+          bgcolor: '#242424',
+          color: '#fff',
+          border: '1px solid #333',
+          '& .MuiDialogTitle-root': {
+            color: '#61dafb',
+            borderBottom: '1px solid #333',
+          },
+          '& .MuiDialogContent-root': {
+            bgcolor: '#242424',
+          },
+          '& .MuiDialogActions-root': {
+            bgcolor: '#242424',
+            borderTop: '1px solid #333',
+          },
+          '& .MuiFormControl-root': {
+            '& .MuiInputLabel-root': {
+              color: '#999',
+            },
+            '& .MuiOutlinedInput-root': {
+              color: '#fff',
+              '& fieldset': {
+                borderColor: '#444',
+              },
+              '&:hover fieldset': {
+                borderColor: '#61dafb',
+              },
+              '&.Mui-focused fieldset': {
+                borderColor: '#61dafb',
+              },
+            },
+            '& .MuiSelect-icon': {
+              color: '#61dafb',
+            },
+            '& .MuiMenuItem-root': {
+              color: '#fff',
+              '&:hover': {
+                bgcolor: 'rgba(97, 218, 251, 0.1)',
+              },
+              '&.Mui-selected': {
+                bgcolor: 'rgba(97, 218, 251, 0.2)',
+                '&:hover': {
+                  bgcolor: 'rgba(97, 218, 251, 0.3)',
+                },
+              },
+            },
+          },
+          '& .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',
+            },
+            '&:disabled': {
+              bgcolor: '#2a2a2a',
+              color: '#666',
+            },
+          },
+          '& .MuiButton-text': {
+            color: '#fff',
+            '&:hover': {
+              bgcolor: 'rgba(255, 255, 255, 0.1)',
+            },
+          },
+        },
+      }}
+    >
+      <DialogTitle>{t('addMessageDialog.title')}</DialogTitle>
+      <DialogContent>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, my: 2 }}>
+          <FormControl fullWidth>
+            <InputLabel>{t('addMessageDialog.sourceEntity')}</InputLabel>
+            <Select
+              value={sourceId}
+              onChange={handleSourceChange}
+              label={t('addMessageDialog.sourceEntity')}
+              MenuProps={{
+                PaperProps: {
+                  sx: {
+                    bgcolor: '#242424',
+                    border: '1px solid #333',
+                    '& .MuiMenuItem-root': {
+                      color: '#fff',
+                      '&:hover': {
+                        bgcolor: 'rgba(97, 218, 251, 0.1)',
+                      },
+                      '&.Mui-selected': {
+                        bgcolor: 'rgba(97, 218, 251, 0.2)',
+                        '&:hover': {
+                          bgcolor: 'rgba(97, 218, 251, 0.3)',
+                        },
+                      },
+                    },
+                  },
+                },
+              }}
+            >
+              {entities.map((entity) => (
+                <MenuItem key={`source-${entity.id}`} value={entity.id}>
+                  {entity.data.label as string}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+
+          <FormControl fullWidth>
+            <InputLabel>{t('addMessageDialog.targetEntity')}</InputLabel>
+            <Select
+              value={targetId}
+              onChange={handleTargetChange}
+              label={t('addMessageDialog.targetEntity')}
+              MenuProps={{
+                PaperProps: {
+                  sx: {
+                    bgcolor: '#242424',
+                    border: '1px solid #333',
+                    '& .MuiMenuItem-root': {
+                      color: '#fff',
+                      '&:hover': {
+                        bgcolor: 'rgba(97, 218, 251, 0.1)',
+                      },
+                      '&.Mui-selected': {
+                        bgcolor: 'rgba(97, 218, 251, 0.2)',
+                        '&:hover': {
+                          bgcolor: 'rgba(97, 218, 251, 0.3)',
+                        },
+                      },
+                    },
+                  },
+                },
+              }}
+            >
+              {entities.map((entity) => (
+                <MenuItem key={`target-${entity.id}`} value={entity.id}>
+                  {entity.data.label as string}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+
+          <FormControl fullWidth>
+            <InputLabel>{t('addMessageDialog.messageType')}</InputLabel>
+            <Select
+              value={messageType}
+              onChange={(e) => setMessageType(e.target.value as SequenceMessageType)}
+              label={t('addMessageDialog.messageType')}
+              disabled={sourceId === targetId} // Disable if source = target (force self message)
+              MenuProps={{
+                PaperProps: {
+                  sx: {
+                    bgcolor: '#242424',
+                    border: '1px solid #333',
+                    '& .MuiMenuItem-root': {
+                      color: '#fff',
+                      '&:hover': {
+                        bgcolor: 'rgba(97, 218, 251, 0.1)',
+                      },
+                      '&.Mui-selected': {
+                        bgcolor: 'rgba(97, 218, 251, 0.2)',
+                        '&:hover': {
+                          bgcolor: 'rgba(97, 218, 251, 0.3)',
+                        },
+                      },
+                    },
+                  },
+                },
+              }}
+            >
+              <MenuItem value="sync">{t('sequenceDiagram.messageTypes.synchronous')}</MenuItem>
+              <MenuItem value="async">{t('sequenceDiagram.messageTypes.asynchronous')}</MenuItem>
+              <MenuItem value="return">{t('sequenceDiagram.messageTypes.return')}</MenuItem>
+              <MenuItem value="self">{t('sequenceDiagram.messageTypes.selfMessage')}</MenuItem>
+            </Select>
+          </FormControl>
+
+          <TextField
+            label={t('addMessageDialog.messageLabel')}
+            value={messageLabel}
+            onChange={(e) => setMessageLabel(e.target.value)}
+            fullWidth
+          />
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} color="primary">
+          {t('addMessageDialog.buttons.cancel')}
+        </Button>
+        <Button
+          onClick={handleSubmit}
+          color="primary"
+          variant="contained"
+          disabled={!sourceId || !targetId || !messageLabel}
+        >
+          {t('addMessageDialog.buttons.addMessage')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default AddMessageDialog;

package/packages/diagrams/src/lib/templates/sequence/components/CombinedFragmentNode.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { Box, Typography, IconButton } from '@mui/material';
+import { NodeProps } from '@xyflow/react';
+import { CombinedFragmentData } from '../../../types/sequence-types';
+
+export const CombinedFragmentNode: React.FC<NodeProps> = (props) => {
+  const { data } = props as NodeProps & { data: CombinedFragmentData };
+  const { label, conditions } = data;
+  const nodeStyle: { width?: number | string; height?: number | string } = data.style || {};
+
+  return (
+    <Box
+      className="combined-fragment"
+      sx={{
+        width: nodeStyle?.width || '400px',
+        height: nodeStyle?.height || '150px',
+        border: '1px dashed #61dafb',
+        position: 'relative',
+        backgroundColor: 'rgba(36, 36, 36, 0.3)',
+        borderRadius: '4px',
+      }}
+    >
+      <Box
+        className="fragment-header"
+        sx={{
+          position: 'absolute',
+          top: '-20px',
+          left: '10px',
+          padding: '0 10px',
+          backgroundColor: '#242424',
+          border: '1px solid #61dafb',
+          borderRadius: '4px',
+          fontWeight: 'bold',
+          color: '#61dafb',
+          fontSize: '12px',
+        }}
+      >
+        {label}
+      </Box>
+
+      {conditions &&
+        conditions.map((condition, index) => (
+          <Box
+            key={index}
+            className="fragment-condition"
+            sx={{
+              position: 'absolute',
+              top: `${10 + index * ((Number(nodeStyle?.height) || 150) / conditions.length)}px`,
+              left: '10px',
+              padding: '0 5px',
+              backgroundColor: '#242424',
+              border: index === 0 ? 'none' : '1px solid #444',
+              borderWidth: index === 0 ? '0' : '1px 0 0 0',
+              width: 'calc(100% - 20px)',
+              color: '#fff',
+              fontSize: '11px',
+              borderRadius: index === 0 ? '0' : '2px 2px 0 0',
+            }}
+          >
+            {condition}
+          </Box>
+        ))}
+    </Box>
+  );
+};