@flowuent-org/diagramming-core 1.1.0 → 1.1.2

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

@@ -0,0 +1,559 @@
+import React, { useState } from 'react';
+
+import {
+  Box,
+  Button,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  Slider,
+  TextField,
+  Typography,
+  Switch,
+  FormControlLabel,
+  IconButton,
+  Divider,
+  Card,
+  SelectChangeEvent,
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { useTranslation } from 'react-i18next';
+import {
+  EntitySettingsProps,
+  ActivationSection,
+  SequenceEntityShape
+} from '../../../types/sequence-types';
+
+// Predefined color options - names will be translated dynamically
+const colorOptions = [
+  { nameKey: 'colors.blue', primary: '#0066cc', secondary: '#e6f0ff' },
+  { nameKey: 'colors.green', primary: '#00994c', secondary: '#e6fff2' },
+  { nameKey: 'colors.red', primary: '#cc3300', secondary: '#ffe6e6' },
+  { nameKey: 'colors.purple', primary: '#6600cc', secondary: '#f0e6ff' },
+  { nameKey: 'colors.orange', primary: '#cc6600', secondary: '#fff2e6' },
+  { nameKey: 'colors.teal', primary: '#008080', secondary: '#e6ffff' },
+  { nameKey: 'colors.pink', primary: '#cc0066', secondary: '#ffe6f2' },
+  { nameKey: 'colors.gray', primary: '#666666', secondary: '#f0f0f0' },
+];
+
+const EntitySettings: React.FC<EntitySettingsProps> = ({
+  entityId,
+  data,
+  onUpdate,
+  onClose,
+}) => {
+  const { t } = useTranslation();
+
+  const [shapeType, setShapeType] = useState(data.shape || 'rectangle');
+  const [fontSize, setFontSize] = useState(data.fontSize || 12);
+  const [borderWidth, setBorderWidth] = useState<number>(data.borderWidth || 2);
+  const [description, setDescription] = useState<string>(data.description || '');
+  const [collapsed, setCollapsed] = useState<boolean>(data.collapsed || false);
+  const [color, setColor] = useState<string>(data.color || '#0066cc');
+  const [backgroundColor, setBackgroundColor] = useState<string>(data.backgroundColor || '#e6f0ff');
+  const [activationSections, setActivationSections] = useState<ActivationSection[]>(
+    data.activationSections || [{ start: 150, end: 300 }]
+  );
+
+  // Initialize activation area from data
+  React.useEffect(() => {
+    if (data.activationSections && data.activationSections.length > 0) {
+      setActivationSections(data.activationSections);
+    }
+  }, [data.activationSections]);
+
+  // Add activation area state
+  const hasActivation = !!(data.activationSections && data.activationSections.length > 0);
+  const [showActivation, setShowActivation] = useState<boolean>(hasActivation);
+
+  const handleShapeChange = (event: SelectChangeEvent<SequenceEntityShape>) => {
+    const newShape = event.target.value as SequenceEntityShape;
+    setShapeType(newShape);
+    onUpdate({ shape: newShape });
+  };
+
+  const handleFontSizeChange = (event: Event, newValue: number | number[]) => {
+    const newSize = newValue as number;
+    setFontSize(newSize);
+    onUpdate({ fontSize: newSize });
+  };
+
+  const handleBorderWidthChange = (
+    event: Event,
+    newValue: number | number[],
+  ) => {
+    const newWidth = newValue as number;
+    setBorderWidth(newWidth);
+    onUpdate({ borderWidth: newWidth });
+  };
+
+  const handleDescriptionChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const newDesc = event.target.value;
+    setDescription(newDesc);
+    onUpdate({ description: newDesc });
+  };
+
+  const handleCollapsedChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const newCollapsed = event.target.checked;
+    setCollapsed(newCollapsed);
+    onUpdate({ collapsed: newCollapsed });
+  };
+
+  const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newColor = event.target.value;
+    setColor(newColor);
+    onUpdate({ color: newColor });
+  };
+
+  const handleBackgroundColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newBgColor = event.target.value;
+    setBackgroundColor(newBgColor);
+    onUpdate({ backgroundColor: newBgColor });
+  };
+
+  const handleColorPresetSelect = (primary: string, secondary: string) => {
+    setColor(primary);
+    setBackgroundColor(secondary);
+    onUpdate({ color: primary, backgroundColor: secondary });
+  };
+
+  const handleActivationToggle = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.checked;
+    setShowActivation(newValue);
+
+    if (newValue) {
+      // Add a default activation section
+      const newSections = [{ start: 150, end: 300 }];
+      setActivationSections(newSections);
+      onUpdate({
+        activationSections: newSections,
+      });
+    } else {
+      // Remove activation sections
+      setActivationSections([]);
+      onUpdate({
+        activationSections: [],
+      });
+    }
+  };
+
+  const addActivationSection = () => {
+    const newSection: ActivationSection = { start: 150, end: 300 };
+    const updatedSections = [...activationSections, newSection];
+    setActivationSections(updatedSections);
+    onUpdate({ activationSections: updatedSections });
+  };
+
+  const removeActivationSection = (index: number) => {
+    const updatedSections = activationSections.filter((_, i) => i !== index);
+    setActivationSections(updatedSections);
+    onUpdate({ activationSections: updatedSections });
+  };
+
+  // Handle changes to activation section positions
+  const handleActivationPositionChange = (index: number, property: 'start' | 'end', value: number) => {
+    const updatedSections = [...activationSections];
+    updatedSections[index] = {
+      ...updatedSections[index],
+      [property]: value
+    };
+    setActivationSections(updatedSections);
+    onUpdate({ activationSections: updatedSections });
+  };
+
+  return (
+    <Box
+      className="entity-settings"
+      sx={{
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bgcolor: '#242424',
+        color: '#fff',
+        p: 2,
+        border: '1px solid #333',
+        borderRadius: 1,
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
+        zIndex: 10,
+        width: 300,
+        maxHeight: 'calc(100vh - 100px)',
+        overflowY: 'auto',
+        // Custom scrollbar styling
+        '&::-webkit-scrollbar': {
+          width: '6px',
+        },
+        '&::-webkit-scrollbar-track': {
+          background: 'transparent',
+        },
+        '&::-webkit-scrollbar-thumb': {
+          background: '#444',
+          borderRadius: '3px',
+          '&:hover': {
+            background: '#666',
+          },
+        },
+        // Style all form controls for dark theme
+        '& .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',
+          },
+        },
+        '& .MuiTextField-root': {
+          '& .MuiInputLabel-root': {
+            color: '#999',
+          },
+          '& .MuiOutlinedInput-root': {
+            color: '#fff',
+            '& fieldset': {
+              borderColor: '#444',
+            },
+            '&:hover fieldset': {
+              borderColor: '#61dafb',
+            },
+            '&.Mui-focused fieldset': {
+              borderColor: '#61dafb',
+            },
+          },
+        },
+        '& .MuiSlider-root': {
+          color: '#61dafb',
+          '& .MuiSlider-rail': {
+            backgroundColor: '#333',
+          },
+          '& .MuiSlider-track': {
+            backgroundColor: '#61dafb',
+          },
+          '& .MuiSlider-thumb': {
+            backgroundColor: '#61dafb',
+            '&:hover, &.Mui-active': {
+              boxShadow: '0 0 0 8px rgba(97, 218, 251, 0.16)',
+            },
+          },
+        },
+        '& .MuiSwitch-root': {
+          '& .MuiSwitch-switchBase.Mui-checked': {
+            color: '#61dafb',
+            '& + .MuiSwitch-track': {
+              backgroundColor: '#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)',
+          },
+        },
+        '& .MuiDivider-root': {
+          borderColor: '#333',
+        },
+        '& .MuiCard-root': {
+          bgcolor: '#2a2a2a',
+          border: '1px solid #333',
+        },
+      }}
+    >
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        alignItems="center"
+        mb={2}
+      >
+        <Typography variant="h6" sx={{ m: 0, color: '#61dafb' }}>
+          {t('entitySettings.title')}
+        </Typography>
+        <IconButton onClick={onClose} size="small">
+          <CloseIcon fontSize="small" />
+        </IconButton>
+      </Box>
+
+      {/* Color Settings Section */}
+      <Typography variant="subtitle1" gutterBottom sx={{ color: '#61dafb' }}>
+        {t('common.colors')}
+      </Typography>
+
+      <Box mb={2}>
+        <Box display="flex" alignItems="center" mb={1}>
+          <Typography variant="body2" sx={{ width: '100px', color: '#fff' }}>
+            {t('colors.borderColor')}:
+          </Typography>
+          <Box display="flex" alignItems="center" width="100%">
+            <Box
+              sx={{
+                width: '24px',
+                height: '24px',
+                border: '1px solid #444',
+                mr: 1,
+                backgroundColor: color,
+                borderRadius: '4px'
+              }}
+            />
+            <input
+              type="color"
+              value={color}
+              onChange={handleColorChange}
+              style={{
+                width: '100%',
+                backgroundColor: '#333',
+                border: '1px solid #444',
+                borderRadius: '4px',
+              }}
+            />
+          </Box>
+        </Box>
+
+        <Box display="flex" alignItems="center">
+          <Typography variant="body2" sx={{ width: '100px', color: '#fff' }}>
+            {t('colors.background')}:
+          </Typography>
+          <Box display="flex" alignItems="center" width="100%">
+            <Box
+              sx={{
+                width: '24px',
+                height: '24px',
+                border: '1px solid #444',
+                mr: 1,
+                backgroundColor: backgroundColor,
+                borderRadius: '4px'
+              }}
+            />
+            <input
+              type="color"
+              value={backgroundColor}
+              onChange={handleBackgroundColorChange}
+              style={{
+                width: '100%',
+                backgroundColor: '#333',
+                border: '1px solid #444',
+                borderRadius: '4px',
+              }}
+            />
+          </Box>
+        </Box>
+      </Box>
+
+      {/* Color presets */}
+      <Typography variant="subtitle2" gutterBottom sx={{ color: '#61dafb' }}>
+        {t('colors.colorPresets')}
+      </Typography>
+      <Box
+        display="flex"
+        flexWrap="wrap"
+        gap={1}
+        mb={2}
+      >
+        {colorOptions.map((colorSet, index) => (
+          <Box
+            key={index}
+            onClick={() => handleColorPresetSelect(colorSet.primary, colorSet.secondary)}
+            sx={{
+              width: '32px',
+              height: '32px',
+              cursor: 'pointer',
+              border: `2px solid ${colorSet.primary}`,
+              backgroundColor: colorSet.secondary,
+              borderRadius: '4px',
+              '&:hover': {
+                outline: '2px solid #61dafb',
+              }
+            }}
+            title={t(colorSet.nameKey)}
+          />
+        ))}
+      </Box>
+
+      <Divider sx={{ my: 2 }} />
+
+      <FormControl fullWidth variant="outlined" size="small" sx={{ mb: 2 }}>
+        <InputLabel>{t('common.shape')}</InputLabel>
+        <Select
+          value={shapeType}
+          onChange={handleShapeChange}
+          label={t('common.shape')}
+        >
+          <MenuItem value="rectangle">{t('sequenceDiagram.shapes.rectangle')}</MenuItem>
+          <MenuItem value="roundedBox">{t('sequenceDiagram.shapes.roundedBox')}</MenuItem>
+          <MenuItem value="circle">{t('sequenceDiagram.shapes.circle')}</MenuItem>
+          <MenuItem value="database">{t('sequenceDiagram.shapes.database')}</MenuItem>
+          <MenuItem value="actor">{t('sequenceDiagram.shapes.actor')}</MenuItem>
+        </Select>
+      </FormControl>
+      <Box mb={2}>
+        <Typography gutterBottom sx={{ color: '#fff' }}>{t('entitySettings.fontSize')}: {fontSize}px</Typography>
+        <Slider
+          value={fontSize}
+          onChange={handleFontSizeChange}
+          min={10}
+          max={24}
+          step={1}
+          valueLabelDisplay="auto"
+        />
+      </Box>
+      <Box mb={2}>
+        <Typography gutterBottom sx={{ color: '#fff' }}>{t('entitySettings.borderWidth')}: {borderWidth}px</Typography>
+        <Slider
+          value={borderWidth}
+          onChange={handleBorderWidthChange}
+          min={1}
+          max={5}
+          step={1}
+          valueLabelDisplay="auto"
+        />
+      </Box>
+      <TextField
+        label={t('common.description')}
+        value={description}
+        onChange={handleDescriptionChange}
+        fullWidth
+        variant="outlined"
+        size="small"
+        sx={{ mb: 2 }}
+      />
+      <FormControlLabel
+        control={
+          <Switch
+            checked={collapsed}
+            onChange={handleCollapsedChange}
+            color="primary"
+          />
+        }
+        label={t('entitySettings.collapseLifeline')}
+        sx={{ mb: 2 }}
+      />
+
+      {/* Add activation area toggle */}
+      <FormControlLabel
+        control={
+          <Switch
+            checked={showActivation}
+            onChange={handleActivationToggle}
+            color="primary"
+          />
+        }
+        label={t('entitySettings.showActivationArea')}
+        sx={{ mb: 2 }}
+      />
+
+      <Divider sx={{ my: 2 }} />
+
+      {/* Activation Areas Section */}
+      {showActivation && (
+        <Box mb={2}>
+          <Box display="flex" justifyContent="space-between" alignItems="center" mb={1}>
+            <Typography variant="subtitle1">{t('entitySettings.activationAreas')}</Typography>
+            <Button
+              startIcon={<AddIcon />}
+              size="small"
+              variant="outlined"
+              color="primary"
+              onClick={addActivationSection}
+            >
+              {t('common.add')}
+            </Button>
+          </Box>
+
+          {activationSections.length === 0 ? (
+            <Typography variant="body2" color="text.secondary" sx={{ fontStyle: 'italic', mb: 1 }}>
+              {t('entitySettings.noActivationAreas')}
+            </Typography>
+          ) : (
+            activationSections.map((section, index) => (
+              <Card key={index} variant="outlined" sx={{ mb: 2, p: 1.5 }}>
+                <Box display="flex" justifyContent="space-between" alignItems="center" mb={1}>
+                  <Typography variant="subtitle2">{t('entitySettings.activation')} {index + 1}</Typography>
+                  <IconButton
+                    size="small"
+                    color="error"
+                    onClick={() => removeActivationSection(index)}
+                  >
+                    <DeleteIcon fontSize="small" />
+                  </IconButton>
+                </Box>
+
+                <Box mb={1.5}>
+                  <Typography variant="body2" gutterBottom>
+                    {t('entitySettings.startPosition')}: {section.start}
+                  </Typography>
+                  <Slider
+                    value={section.start}
+                    onChange={(event, value) => handleActivationPositionChange(index, 'start', value as number)}
+                    min={0}
+                    max={Math.min(section.end - 20, data.lifelineLength - 20)}
+                    step={10}
+                    valueLabelDisplay="auto"
+                    size="small"
+                  />
+                </Box>
+
+                <Box>
+                  <Typography variant="body2" gutterBottom>
+                    {t('entitySettings.endPosition')}: {section.end}
+                  </Typography>
+                  <Slider
+                    value={section.end}
+                    onChange={(event, value) => handleActivationPositionChange(index, 'end', value as number)}
+                    min={section.start + 20}
+                    max={data.lifelineLength}
+                    step={10}
+                    valueLabelDisplay="auto"
+                    size="small"
+                  />
+                </Box>
+              </Card>
+            ))
+          )}
+        </Box>
+      )}
+
+      <Button
+        variant="contained"
+        color="primary"
+        fullWidth
+        onClick={onClose}
+        sx={{ mt: 1 }}
+      >
+        {t('entitySettings.buttons.applyChanges')}
+      </Button>
+    </Box>
+  );
+};
+
+export default EntitySettings;

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

@@ -0,0 +1,116 @@
+import { Box, Button, IconButton, Slider, Typography } from "@mui/material";
+import CloseIcon from '@mui/icons-material/Close';
+import { useTranslation } from 'react-i18next';
+import { FragmentSettingsProps } from "../../../types/sequence-types";
+
+const FragmentSettings: React.FC<FragmentSettingsProps> = ({
+  fragmentId,
+  width,
+  height,
+  onWidthChange,
+  onHeightChange,
+  onClose,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Box
+      className="fragment-settings"
+      sx={{
+        position: 'absolute',
+        top: 100,
+        right: 20,
+        bgcolor: '#242424',
+        color: '#fff',
+        p: 2,
+        border: '1px solid #333',
+        borderRadius: 1,
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
+        zIndex: 10,
+        width: 250,
+        '& .MuiSlider-root': {
+          color: '#61dafb',
+          '& .MuiSlider-rail': {
+            backgroundColor: '#333',
+          },
+          '& .MuiSlider-track': {
+            backgroundColor: '#61dafb',
+          },
+          '& .MuiSlider-thumb': {
+            backgroundColor: '#61dafb',
+            '&:hover, &.Mui-active': {
+              boxShadow: '0 0 0 8px rgba(97, 218, 251, 0.16)',
+            },
+          },
+        },
+      }}
+    >
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        alignItems="center"
+        mb={1.5}
+      >
+        <Typography variant="h6" component="div" sx={{ m: 0, color: '#61dafb' }}>
+          {t('fragmentSettings.title')}
+        </Typography>
+        <IconButton
+          onClick={onClose}
+          size="small"
+          sx={{
+            color: '#999',
+            '&:hover': {
+              color: '#fff',
+              bgcolor: 'rgba(255, 255, 255, 0.1)',
+            },
+          }}
+        >
+          <CloseIcon fontSize="small" />
+        </IconButton>
+      </Box>
+      <Box mb={2}>
+        <Typography variant="body2" fontWeight="bold" mb={0.5} sx={{ color: '#fff' }}>
+          {t('fragmentSettings.width')}: {width}px
+        </Typography>
+        <Slider
+          id="fragment-width"
+          min={200}
+          max={800}
+          step={10}
+          value={width}
+          onChange={(_, value) => onWidthChange(value as number)}
+        />
+      </Box>
+      <Box mb={2}>
+        <Typography variant="body2" fontWeight="bold" mb={0.5} sx={{ color: '#fff' }}>
+          {t('fragmentSettings.height')}: {height}px
+        </Typography>
+        <Slider
+          id="fragment-height"
+          min={100}
+          max={500}
+          step={10}
+          value={height}
+          onChange={(_, value) => onHeightChange(value as number)}
+        />
+      </Box>
+      <Box mt={3} textAlign="center">
+        <Button
+          onClick={onClose}
+          variant="contained"
+          sx={{
+            bgcolor: '#61dafb',
+            color: '#000',
+            '&:hover': {
+              bgcolor: '#4db6d6',
+            },
+          }}
+        >
+          {t('fragmentSettings.buttons.applyChanges')}
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default FragmentSettings;

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

@@ -0,0 +1,14 @@
+import { CombinedFragmentNode } from './CombinedFragmentNode';
+import { ActivationBarNode } from './ActivationBarNode';
+import { SequenceEntityNode } from './SequenceEntityNode';
+import { SequenceMessageEdge } from './SequenceMessageEdge';
+
+export const sequenceNodeTypes = {
+  sequenceEntity: SequenceEntityNode,
+  activationBar: ActivationBarNode,
+  combinedFragment: CombinedFragmentNode,
+};
+
+export const sequenceEdgeTypes = {
+  sequenceMessage: SequenceMessageEdge,
+};