@flowuent-org/diagramming-core 1.3.10 → 1.4.0

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

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

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

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