@flowuent-org/diagramming-core 1.0.5

package/packages/diagrams/src/lib/templates/sequence/controls/DiagramControls.tsx

@@ -0,0 +1,707 @@
+import React, { useState } from 'react';
+import {
+  Box,
+  Typography,
+  Button,
+  Paper,
+  Stack,
+  IconButton,
+  Tabs,
+  Tab,
+  Tooltip,
+  Divider,
+  Collapse,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  InputBase,
+  InputAdornment,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import CallSplitIcon from '@mui/icons-material/CallSplit';
+import LoopIcon from '@mui/icons-material/Loop';
+import ParallelIcon from '@mui/icons-material/LinearScale';
+import OptIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import DatabaseIcon from '@mui/icons-material/Storage';
+import ActorIcon from '@mui/icons-material/Person';
+import CircleIcon from '@mui/icons-material/Circle';
+import SquareIcon from '@mui/icons-material/Square';
+import RectangleIcon from '@mui/icons-material/CropSquare';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import UndoIcon from '@mui/icons-material/Undo';
+import RedoIcon from '@mui/icons-material/Redo';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import SearchIcon from '@mui/icons-material/Search';
+import ForwardIcon from '@mui/icons-material/Forward';
+import SelfIcon from '@mui/icons-material/Loop';
+import TimelineIcon from '@mui/icons-material/Timeline';
+import {
+  DiagramControlsProps,
+  SequenceEntityShape,
+  CombinedFragmentType
+} from '../../../types/sequence-types';
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+      style={{ padding: '8px 0' }}
+    >
+      {value === index && <Box>{children}</Box>}
+    </div>
+  );
+}
+
+const DiagramControls: React.FC<DiagramControlsProps> = ({
+  onAddEntity,
+  onAddMessage,
+  onAddAltFragment,
+  onUndo,
+  onRedo,
+  canUndo,
+  canRedo,
+  onLoadTemplate,
+}) => {
+  const { t } = useTranslation();
+
+  const [tabValue, setTabValue] = useState(0);
+  const [expandEntities, setExpandEntities] = useState(true);
+  const [expandFragments, setExpandFragments] = useState(true);
+  const [expandMessages, setExpandMessages] = useState(true);
+
+  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
+    setTabValue(newValue);
+  };
+
+  // We'll use this for different entity shapes when implemented
+  const handleAddEntityWithShape = (shape: SequenceEntityShape) => {
+    console.log(`Adding entity with shape: ${shape}`);
+    onAddEntity(shape);
+  };
+
+  // We'll use this for different fragment types when implemented
+  const handleAddFragmentWithType = (type: CombinedFragmentType) => {
+    console.log(`Adding fragment with type: ${type}`);
+    onAddAltFragment(type);
+  };
+
+  // Add handlers for template selection
+  const handleLoadTemplate = (templateType: string) => {
+    console.log(`Loading template: ${templateType}`);
+    if (onLoadTemplate) {
+      onLoadTemplate(templateType);
+    }
+  };
+
+  return (
+    <>
+      <InputBase
+        placeholder={t('common.search')}
+        startAdornment={
+          <InputAdornment position="start">
+            <SearchIcon sx={{ color: '#A0A0A0', fontSize: '20px' }} />
+          </InputAdornment>
+        }
+        sx={{
+          bgcolor: '#232323',
+          border: '1px solid #444',
+          borderRadius: '24px',
+          px: 2,
+          py: 0.75,
+          mb: 2,
+          color: 'white',
+          width: '100%',
+          fontSize: '14px',
+          '& .MuiInputBase-input': {
+            padding: 0,
+            '&::placeholder': {
+              color: '#A0A0A0',
+              opacity: 1,
+            },
+          },
+          '& .MuiInputAdornment-root': {
+            marginRight: 1,
+          },
+        }}
+        inputProps={{
+          'aria-label': 'search',
+        }}
+      />
+      <Paper
+        elevation={3}
+        component="div"
+        sx={{
+          p: 2,
+          borderRadius: 2,
+          bgcolor: '#242424',
+          color: '#ffffff',
+          width: '100%',
+          '& .MuiTypography-root': {
+            color: '#ffffff',
+          },
+          '& .MuiTab-root': {
+            color: '#ffffff',
+            '&.Mui-selected': {
+              color: '#61dafb',
+            },
+          },
+          '& .MuiTabs-indicator': {
+            backgroundColor: '#61dafb',
+          },
+          '& .MuiDivider-root': {
+            borderColor: '#444',
+          },
+          '& .MuiListItemText-primary': {
+            color: '#ffffff',
+          },
+          '& .MuiListItemText-secondary': {
+            color: '#cccccc',
+          },
+          '& .MuiIconButton-root': {
+            color: '#ffffff',
+            '&.Mui-disabled': {
+              color: '#666',
+            },
+          },
+          '& .MuiSvgIcon-root': {
+            color: '#ffffff',
+          },
+        }}
+      >
+        <Box
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          mb={1}
+        >
+          <Typography
+            variant="h6"
+            sx={{ fontWeight: 'medium', color: '#ffffff' }}
+          >
+            {t('diagramControls.sequenceDiagram')}
+          </Typography>
+          <Box>
+            <Tooltip title={t('common.undo')}>
+              <span>
+                <IconButton
+                  size="small"
+                  onClick={onUndo}
+                  disabled={!canUndo}
+                  sx={{ color: canUndo ? '#61dafb' : '#666' }}
+                >
+                  <UndoIcon fontSize="small" />
+                </IconButton>
+              </span>
+            </Tooltip>
+            <Tooltip title={t('common.redo')}>
+              <span>
+                <IconButton
+                  size="small"
+                  onClick={onRedo}
+                  disabled={!canRedo}
+                  sx={{ color: canRedo ? '#61dafb' : '#666' }}
+                >
+                  <RedoIcon fontSize="small" />
+                </IconButton>
+              </span>
+            </Tooltip>
+          </Box>
+        </Box>
+
+        <Tabs
+          value={tabValue}
+          onChange={handleTabChange}
+          variant="fullWidth"
+          sx={{ borderBottom: 1, borderColor: '#444', mb: 1 }}
+        >
+          <Tab label={t('diagramControls.components')} sx={{ color: '#ffffff' }} />
+          <Tab label={t('diagramControls.templates')} sx={{ color: '#ffffff' }} />
+        </Tabs>
+
+        <TabPanel value={tabValue} index={0}>
+          {/* Entities Section */}
+          <Box mb={1}>
+            <Box
+              display="flex"
+              justifyContent="space-between"
+              alignItems="center"
+              onClick={() => setExpandEntities(!expandEntities)}
+              sx={{
+                cursor: 'pointer',
+                '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                p: 1,
+                borderRadius: 1,
+              }}
+            >
+              <Typography
+                variant="subtitle2"
+                fontWeight="bold"
+                sx={{ color: '#ffffff' }}
+              >
+                {t('diagramControls.entities')}
+              </Typography>
+              {expandEntities ? (
+                <ExpandLessIcon fontSize="small" sx={{ color: '#ffffff' }} />
+              ) : (
+                <ExpandMoreIcon fontSize="small" sx={{ color: '#ffffff' }} />
+              )}
+            </Box>
+
+            <Collapse in={expandEntities}>
+              <List dense disablePadding>
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={() => handleAddEntityWithShape('rectangle')}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <RectangleIcon
+                        fontSize="small"
+                        sx={{ color: '#ffffff' }}
+                      />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={t('sequenceDiagram.shapes.rectangle')}
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={() => handleAddEntityWithShape('roundedBox')}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <SquareIcon fontSize="small" sx={{ color: '#ffffff' }} />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={t('sequenceDiagram.shapes.roundedBox')}
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={() => handleAddEntityWithShape('circle')}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <CircleIcon fontSize="small" sx={{ color: '#ffffff' }} />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={t('sequenceDiagram.shapes.circle')}
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={() => handleAddEntityWithShape('database')}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <DatabaseIcon
+                        fontSize="small"
+                        sx={{ color: '#ffffff' }}
+                      />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary="Database"
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={() => handleAddEntityWithShape('actor')}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <ActorIcon fontSize="small" sx={{ color: '#ffffff' }} />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary="Actor"
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+              </List>
+            </Collapse>
+          </Box>
+
+          <Divider sx={{ my: 1, borderColor: '#444' }} />
+
+          {/* Messages Section */}
+          <Box mb={1}>
+            <Box
+              display="flex"
+              justifyContent="space-between"
+              alignItems="center"
+              onClick={() => setExpandMessages(!expandMessages)}
+              sx={{
+                cursor: 'pointer',
+                '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                p: 1,
+                borderRadius: 1,
+              }}
+            >
+              <Typography
+                variant="subtitle2"
+                fontWeight="bold"
+                sx={{ color: '#ffffff' }}
+              >
+                Messages
+              </Typography>
+              {expandMessages ? (
+                <ExpandLessIcon fontSize="small" sx={{ color: '#ffffff' }} />
+              ) : (
+                <ExpandMoreIcon fontSize="small" sx={{ color: '#ffffff' }} />
+              )}
+            </Box>
+
+            <Collapse in={expandMessages}>
+              <List dense disablePadding>
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={onAddMessage}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <ArrowForwardIcon
+                        fontSize="small"
+                        sx={{ color: '#ffffff' }}
+                      />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary="Synchronous"
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={onAddMessage}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <ForwardIcon fontSize="small" sx={{ color: '#ffffff' }} />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary="Asynchronous"
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={onAddMessage}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <ArrowBackIcon
+                        fontSize="small"
+                        sx={{ color: '#ffffff' }}
+                      />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary="Return"
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={onAddMessage}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <SelfIcon fontSize="small" sx={{ color: '#ffffff' }} />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary="Self Message"
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+              </List>
+            </Collapse>
+          </Box>
+
+          <Divider sx={{ my: 1, borderColor: '#444' }} />
+
+          {/* Combined Fragments Section */}
+          <Box mb={1}>
+            <Box
+              display="flex"
+              justifyContent="space-between"
+              alignItems="center"
+              onClick={() => setExpandFragments(!expandFragments)}
+              sx={{
+                cursor: 'pointer',
+                '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                p: 1,
+                borderRadius: 1,
+              }}
+            >
+              <Typography
+                variant="subtitle2"
+                fontWeight="bold"
+                sx={{ color: '#ffffff' }}
+              >
+                Combined Fragments
+              </Typography>
+              {expandFragments ? (
+                <ExpandLessIcon fontSize="small" sx={{ color: '#ffffff' }} />
+              ) : (
+                <ExpandMoreIcon fontSize="small" sx={{ color: '#ffffff' }} />
+              )}
+            </Box>
+
+            <Collapse in={expandFragments}>
+              <List dense disablePadding>
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={() => handleAddFragmentWithType('alt')}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <CallSplitIcon
+                        fontSize="small"
+                        sx={{ color: '#ffffff' }}
+                      />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary="Alt (Conditional)"
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={() => handleAddFragmentWithType('loop')}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <LoopIcon fontSize="small" sx={{ color: '#ffffff' }} />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary="Loop"
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={() => handleAddFragmentWithType('opt')}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <OptIcon fontSize="small" sx={{ color: '#ffffff' }} />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary="Opt (Optional)"
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+
+                <ListItem disablePadding>
+                  <ListItemButton
+                    onClick={() => handleAddFragmentWithType('par')}
+                    sx={{
+                      pl: 2,
+                      '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                    }}
+                  >
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <ParallelIcon
+                        fontSize="small"
+                        sx={{ color: '#ffffff' }}
+                      />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary="Par (Parallel)"
+                      sx={{
+                        '& .MuiListItemText-primary': { color: '#ffffff' },
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+              </List>
+            </Collapse>
+          </Box>
+        </TabPanel>
+
+        {/* Templates Tab */}
+        <TabPanel value={tabValue} index={1}>
+          <Typography variant="body2" sx={{ p: 1, color: '#cccccc' }}>
+            Quick start with pre-defined sequence diagram templates
+          </Typography>
+
+          <List dense>
+            <ListItem disablePadding>
+              <ListItemButton
+                onClick={() => handleLoadTemplate('client-server')}
+                sx={{
+                  pl: 2,
+                  border: '1px solid #444',
+                  borderRadius: 1,
+                  mb: 1,
+                  '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                }}
+              >
+                <ListItemIcon sx={{ minWidth: 36 }}>
+                  <TimelineIcon fontSize="small" sx={{ color: '#ffffff' }} />
+                </ListItemIcon>
+                <ListItemText
+                  primary="Client-Server Interaction"
+                  secondary="Basic request-response flow"
+                  sx={{
+                    '& .MuiListItemText-primary': { color: '#ffffff' },
+                    '& .MuiListItemText-secondary': { color: '#cccccc' },
+                  }}
+                />
+              </ListItemButton>
+            </ListItem>
+
+            <ListItem disablePadding>
+              <ListItemButton
+                onClick={() => handleLoadTemplate('authentication')}
+                sx={{
+                  pl: 2,
+                  border: '1px solid #444',
+                  borderRadius: 1,
+                  mb: 1,
+                  '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                }}
+              >
+                <ListItemIcon sx={{ minWidth: 36 }}>
+                  <TimelineIcon fontSize="small" sx={{ color: '#ffffff' }} />
+                </ListItemIcon>
+                <ListItemText
+                  primary="Authentication Flow"
+                  secondary="Login process with validation"
+                  sx={{
+                    '& .MuiListItemText-primary': { color: '#ffffff' },
+                    '& .MuiListItemText-secondary': { color: '#cccccc' },
+                  }}
+                />
+              </ListItemButton>
+            </ListItem>
+
+            <ListItem disablePadding>
+              <ListItemButton
+                onClick={() => handleLoadTemplate('database-transaction')}
+                sx={{
+                  pl: 2,
+                  border: '1px solid #444',
+                  borderRadius: 1,
+                  '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' },
+                }}
+              >
+                <ListItemIcon sx={{ minWidth: 36 }}>
+                  <TimelineIcon fontSize="small" sx={{ color: '#ffffff' }} />
+                </ListItemIcon>
+                <ListItemText
+                  primary="Database Transaction"
+                  secondary="CRUD operation sequence"
+                  sx={{
+                    '& .MuiListItemText-primary': { color: '#ffffff' },
+                    '& .MuiListItemText-secondary': { color: '#cccccc' },
+                  }}
+                />
+              </ListItemButton>
+            </ListItem>
+          </List>
+        </TabPanel>
+      </Paper>
+    </>
+  );
+};
+
+export default DiagramControls;