@flowuent-org/diagramming-core 1.3.9 → 1.4.0

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

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

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

@@ -1,65 +0,0 @@
-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>
-  );
-};