@flowuent-org/diagramming-core 1.3.10 → 1.4.0

package/packages/diagrams/src/lib/templates/arch/controls/ArchDiagramControls.tsx

@@ -1,350 +0,0 @@
-import React, { useState } from 'react';
-import {
-  Box,
-  Typography,
-  Button,
-  Paper,
-  IconButton,
-  Tabs,
-  Tab,
-  Tooltip,
-  Divider,
-  Collapse,
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-} from '@mui/material';
-import StorageIcon from '@mui/icons-material/Storage';
-import ApiIcon from '@mui/icons-material/Api';
-import CloudIcon from '@mui/icons-material/Cloud';
-import MonitorIcon from '@mui/icons-material/Monitor';
-import SecurityIcon from '@mui/icons-material/Security';
-import GroupWorkIcon from '@mui/icons-material/GroupWork';
-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 TimelineIcon from '@mui/icons-material/Timeline';
-import LayersIcon from '@mui/icons-material/Layers';
-import WebIcon from '@mui/icons-material/Web';
-
-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>
-  );
-}
-
-interface ArchDiagramControlsProps {
-  onAddNode: (type: string, color: string) => void;
-  onAddGroup: () => void;
-  onUndo: () => void;
-  onRedo: () => void;
-  canUndo: boolean;
-  canRedo: boolean;
-  onLoadTemplate?: (templateType: string) => void;
-}
-
-// Define node colors with transparency
-const nodeColors = {
-  blue: 'rgba(100, 181, 246, 0.6)',    // Transparent light blue
-  green: 'rgba(129, 199, 132, 0.6)',   // Transparent light green
-  orange: 'rgba(255, 183, 77, 0.6)',   // Transparent light orange
-  purple: 'rgba(186, 104, 200, 0.6)',  // Transparent light purple
-  pink: 'rgba(240, 98, 146, 0.6)',     // Transparent light pink
-};
-
-const ArchDiagramControls: React.FC<ArchDiagramControlsProps> = ({
-  onAddNode,
-  onAddGroup,
-  onUndo,
-  onRedo,
-  canUndo,
-  canRedo,
-  onLoadTemplate,
-}) => {
-  const [tabValue, setTabValue] = useState(0);
-  const [expandServices, setExpandServices] = useState(true);
-  const [expandInfrastructure, setExpandInfrastructure] = useState(true);
-  const [expandGroups, setExpandGroups] = useState(true);
-
-  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
-    setTabValue(newValue);
-  };
-
-  const handleAddNode = (type: string, color: string) => {
-    onAddNode(type, color);
-  };
-
-  const handleLoadTemplate = (templateType: string) => {
-    if (onLoadTemplate) {
-      onLoadTemplate(templateType);
-    }
-  };
-
-  return (
-    <Paper
-      elevation={3}
-      sx={{
-        p: 2,
-        borderRadius: 2,
-        bgcolor: 'background.paper',
-        width: '280px',
-      }}
-    >
-      <Box display="flex" justifyContent="space-between" alignItems="center" mb={1}>
-        <Typography variant="h6" sx={{ fontWeight: 'medium' }}>
-          Architecture Diagram
-        </Typography>
-        <Box>
-          <Tooltip title="Undo">
-            <span>
-              <IconButton
-                size="small"
-                onClick={onUndo}
-                disabled={!canUndo}
-                sx={{ color: canUndo ? 'primary.main' : 'text.disabled' }}
-              >
-                <UndoIcon fontSize="small" />
-              </IconButton>
-            </span>
-          </Tooltip>
-          <Tooltip title="Redo">
-            <span>
-              <IconButton
-                size="small"
-                onClick={onRedo}
-                disabled={!canRedo}
-                sx={{ color: canRedo ? 'primary.main' : 'text.disabled' }}
-              >
-                <RedoIcon fontSize="small" />
-              </IconButton>
-            </span>
-          </Tooltip>
-        </Box>
-      </Box>
-
-      <Tabs
-        value={tabValue}
-        onChange={handleTabChange}
-        variant="fullWidth"
-        sx={{ borderBottom: 1, borderColor: 'divider', mb: 1 }}
-      >
-        <Tab label="Components" />
-        <Tab label="Templates" />
-      </Tabs>
-
-      <TabPanel value={tabValue} index={0}>
-        {/* Services Section */}
-        <Box mb={1}>
-          <Box
-            display="flex"
-            justifyContent="space-between"
-            alignItems="center"
-            onClick={() => setExpandServices(!expandServices)}
-            sx={{ cursor: 'pointer', '&:hover': { bgcolor: 'action.hover' }, p: 1, borderRadius: 1 }}
-          >
-            <Typography variant="subtitle2" fontWeight="bold">
-              Services
-            </Typography>
-            {expandServices ? <ExpandLessIcon fontSize="small" /> : <ExpandMoreIcon fontSize="small" />}
-          </Box>
-
-          <Collapse in={expandServices}>
-            <List dense disablePadding>
-              <ListItem disablePadding>
-                <ListItemButton onClick={() => handleAddNode('service', nodeColors.blue)} sx={{ pl: 2 }}>
-                  <ListItemIcon sx={{ minWidth: 36 }}>
-                    <ApiIcon fontSize="small" />
-                  </ListItemIcon>
-                  <ListItemText primary="Service" />
-                </ListItemButton>
-              </ListItem>
-
-              <ListItem disablePadding>
-                <ListItemButton onClick={() => handleAddNode('gateway', nodeColors.pink)} sx={{ pl: 2 }}>
-                  <ListItemIcon sx={{ minWidth: 36 }}>
-                    <SecurityIcon fontSize="small" />
-                  </ListItemIcon>
-                  <ListItemText primary="Gateway" />
-                </ListItemButton>
-              </ListItem>
-
-              <ListItem disablePadding>
-                <ListItemButton onClick={() => handleAddNode('web', nodeColors.green)} sx={{ pl: 2 }}>
-                  <ListItemIcon sx={{ minWidth: 36 }}>
-                    <WebIcon fontSize="small" />
-                  </ListItemIcon>
-                  <ListItemText primary="Web Service" />
-                </ListItemButton>
-              </ListItem>
-            </List>
-          </Collapse>
-        </Box>
-
-        <Divider sx={{ my: 1 }} />
-
-        {/* Infrastructure Section */}
-        <Box mb={1}>
-          <Box
-            display="flex"
-            justifyContent="space-between"
-            alignItems="center"
-            onClick={() => setExpandInfrastructure(!expandInfrastructure)}
-            sx={{ cursor: 'pointer', '&:hover': { bgcolor: 'action.hover' }, p: 1, borderRadius: 1 }}
-          >
-            <Typography variant="subtitle2" fontWeight="bold">
-              Infrastructure
-            </Typography>
-            {expandInfrastructure ? <ExpandLessIcon fontSize="small" /> : <ExpandMoreIcon fontSize="small" />}
-          </Box>
-
-          <Collapse in={expandInfrastructure}>
-            <List dense disablePadding>
-              <ListItem disablePadding>
-                <ListItemButton onClick={() => handleAddNode('database', nodeColors.orange)} sx={{ pl: 2 }}>
-                  <ListItemIcon sx={{ minWidth: 36 }}>
-                    <StorageIcon fontSize="small" />
-                  </ListItemIcon>
-                  <ListItemText primary="Database" />
-                </ListItemButton>
-              </ListItem>
-
-              <ListItem disablePadding>
-                <ListItemButton onClick={() => handleAddNode('cache', nodeColors.green)} sx={{ pl: 2 }}>
-                  <ListItemIcon sx={{ minWidth: 36 }}>
-                    <CloudIcon fontSize="small" />
-                  </ListItemIcon>
-                  <ListItemText primary="Cache" />
-                </ListItemButton>
-              </ListItem>
-
-              <ListItem disablePadding>
-                <ListItemButton onClick={() => handleAddNode('monitoring', nodeColors.purple)} sx={{ pl: 2 }}>
-                  <ListItemIcon sx={{ minWidth: 36 }}>
-                    <MonitorIcon fontSize="small" />
-                  </ListItemIcon>
-                  <ListItemText primary="Monitoring" />
-                </ListItemButton>
-              </ListItem>
-            </List>
-          </Collapse>
-        </Box>
-
-        <Divider sx={{ my: 1 }} />
-
-        {/* Groups Section */}
-        <Box mb={1}>
-          <Box
-            display="flex"
-            justifyContent="space-between"
-            alignItems="center"
-            onClick={() => setExpandGroups(!expandGroups)}
-            sx={{ cursor: 'pointer', '&:hover': { bgcolor: 'action.hover' }, p: 1, borderRadius: 1 }}
-          >
-            <Typography variant="subtitle2" fontWeight="bold">
-              Groups
-            </Typography>
-            {expandGroups ? <ExpandLessIcon fontSize="small" /> : <ExpandMoreIcon fontSize="small" />}
-          </Box>
-
-          <Collapse in={expandGroups}>
-            <List dense disablePadding>
-              <ListItem disablePadding>
-                <ListItemButton onClick={onAddGroup} sx={{ pl: 2 }}>
-                  <ListItemIcon sx={{ minWidth: 36 }}>
-                    <GroupWorkIcon fontSize="small" />
-                  </ListItemIcon>
-                  <ListItemText primary="Add Group" />
-                </ListItemButton>
-              </ListItem>
-
-              <ListItem disablePadding>
-                <ListItemButton onClick={() => handleAddNode('layer', nodeColors.blue)} sx={{ pl: 2 }}>
-                  <ListItemIcon sx={{ minWidth: 36 }}>
-                    <LayersIcon fontSize="small" />
-                  </ListItemIcon>
-                  <ListItemText primary="Add Layer" />
-                </ListItemButton>
-              </ListItem>
-            </List>
-          </Collapse>
-        </Box>
-      </TabPanel>
-
-      {/* Templates Tab */}
-      <TabPanel value={tabValue} index={1}>
-        <Typography variant="body2" color="text.secondary" sx={{ p: 1 }}>
-          Quick start with pre-defined architecture templates
-        </Typography>
-
-        <List dense>
-          <ListItem disablePadding>
-            <ListItemButton
-              onClick={() => handleLoadTemplate('microservices')}
-              sx={{ pl: 2, border: '1px solid', borderColor: 'divider', borderRadius: 1, mb: 1 }}
-            >
-              <ListItemIcon sx={{ minWidth: 36 }}>
-                <TimelineIcon fontSize="small" />
-              </ListItemIcon>
-              <ListItemText
-                primary="Microservices Architecture"
-                secondary="Basic microservices setup with gateway"
-              />
-            </ListItemButton>
-          </ListItem>
-
-          <ListItem disablePadding>
-            <ListItemButton
-              onClick={() => handleLoadTemplate('three-tier')}
-              sx={{ pl: 2, border: '1px solid', borderColor: 'divider', borderRadius: 1, mb: 1 }}
-            >
-              <ListItemIcon sx={{ minWidth: 36 }}>
-                <LayersIcon fontSize="small" />
-              </ListItemIcon>
-              <ListItemText
-                primary="Three-Tier Architecture"
-                secondary="Frontend, backend, and database layers"
-              />
-            </ListItemButton>
-          </ListItem>
-
-          <ListItem disablePadding>
-            <ListItemButton
-              onClick={() => handleLoadTemplate('event-driven')}
-              sx={{ pl: 2, border: '1px solid', borderColor: 'divider', borderRadius: 1 }}
-            >
-              <ListItemIcon sx={{ minWidth: 36 }}>
-                <TimelineIcon fontSize="small" />
-              </ListItemIcon>
-              <ListItemText
-                primary="Event-Driven Architecture"
-                secondary="Event-based system with message queues"
-              />
-            </ListItemButton>
-          </ListItem>
-        </List>
-      </TabPanel>
-    </Paper>
-  );
-};
-
-export default ArchDiagramControls; 

package/packages/diagrams/src/lib/templates/arch/data/templatee-data.ts

@@ -1,213 +0,0 @@
-export const nodeColors = {
-    blue: 'rgba(100, 181, 246, 0.6)', // Transparent light blue
-    green: 'rgba(129, 199, 132, 0.6)', // Transparent light green
-    orange: 'rgba(255, 183, 77, 0.6)', // Transparent light orange
-    purple: 'rgba(186, 104, 200, 0.6)', // Transparent light purple
-    pink: 'rgba(240, 98, 146, 0.6)', // Transparent light pink
-  };
-
-
-  export const microservicesTemplate = {
-    nodes: [
-      {
-        id: 'gateway',
-        type: 'gateway',
-        data: { label: 'API Gateway' },
-        position: { x: 400, y: 100 },
-        style: {
-          background: nodeColors.pink,
-          border: '1px solid #777',
-          borderRadius: '8px',
-          padding: '10px',
-          width: 130,
-        },
-      },
-      {
-        id: 'auth-service',
-        type: 'service',
-        data: { label: 'Auth Service' },
-        position: { x: 200, y: 250 },
-        style: {
-          background: nodeColors.blue,
-          border: '1px solid #777',
-          borderRadius: '8px',
-          padding: '10px',
-          width: 130,
-        },
-      },
-      {
-        id: 'user-service',
-        type: 'service',
-        data: { label: 'User Service' },
-        position: { x: 400, y: 250 },
-        style: {
-          background: nodeColors.blue,
-          border: '1px solid #777',
-          borderRadius: '8px',
-          padding: '10px',
-          width: 130,
-        },
-      },
-      {
-        id: 'database',
-        type: 'database',
-        data: { label: 'Database' },
-        position: { x: 300, y: 400 },
-        style: {
-          background: nodeColors.orange,
-          border: '1px solid #777',
-          borderRadius: '8px',
-          padding: '10px',
-          width: 130,
-        },
-      },
-    ],
-    edges: [
-      { id: 'e1', source: 'gateway', target: 'auth-service', type: 'smoothstep' },
-      { id: 'e2', source: 'gateway', target: 'user-service', type: 'smoothstep' },
-      {
-        id: 'e3',
-        source: 'auth-service',
-        target: 'database',
-        type: 'smoothstep',
-      },
-      {
-        id: 'e4',
-        source: 'user-service',
-        target: 'database',
-        type: 'smoothstep',
-      },
-    ],
-  };
-  
-  export const threeTierTemplate = {
-    nodes: [
-      {
-        id: 'presentation',
-        type: 'layer',
-        data: { label: 'Presentation Layer' },
-        position: { x: 300, y: 100 },
-        style: {
-          width: 400,
-          height: 100,
-          background: 'rgba(240, 240, 240, 0.5)',
-          border: '1px dashed #777',
-          borderRadius: '8px',
-          padding: '20px',
-        },
-      },
-      {
-        id: 'business',
-        type: 'layer',
-        data: { label: 'Business Layer' },
-        position: { x: 300, y: 250 },
-        style: {
-          width: 400,
-          height: 100,
-          background: 'rgba(240, 240, 240, 0.5)',
-          border: '1px dashed #777',
-          borderRadius: '8px',
-          padding: '20px',
-        },
-      },
-      {
-        id: 'data',
-        type: 'layer',
-        data: { label: 'Data Layer' },
-        position: { x: 300, y: 400 },
-        style: {
-          width: 400,
-          height: 100,
-          background: 'rgba(240, 240, 240, 0.5)',
-          border: '1px dashed #777',
-          borderRadius: '8px',
-          padding: '20px',
-        },
-      },
-    ],
-    edges: [
-      {
-        id: 'e1',
-        source: 'presentation',
-        target: 'business',
-        type: 'smoothstep',
-      },
-      { id: 'e2', source: 'business', target: 'data', type: 'smoothstep' },
-    ],
-  };
-  
-  export const eventDrivenTemplate = {
-    nodes: [
-      {
-        id: 'producer1',
-        type: 'service',
-        data: { label: 'Event Producer 1' },
-        position: { x: 200, y: 100 },
-        style: {
-          background: nodeColors.blue,
-          border: '1px solid #777',
-          borderRadius: '8px',
-          padding: '10px',
-          width: 130,
-        },
-      },
-      {
-        id: 'producer2',
-        type: 'service',
-        data: { label: 'Event Producer 2' },
-        position: { x: 400, y: 100 },
-        style: {
-          background: nodeColors.blue,
-          border: '1px solid #777',
-          borderRadius: '8px',
-          padding: '10px',
-          width: 130,
-        },
-      },
-      {
-        id: 'queue',
-        type: 'service',
-        data: { label: 'Message Queue' },
-        position: { x: 300, y: 250 },
-        style: {
-          background: nodeColors.purple,
-          border: '1px solid #777',
-          borderRadius: '8px',
-          padding: '10px',
-          width: 130,
-        },
-      },
-      {
-        id: 'consumer1',
-        type: 'service',
-        data: { label: 'Event Consumer 1' },
-        position: { x: 200, y: 400 },
-        style: {
-          background: nodeColors.green,
-          border: '1px solid #777',
-          borderRadius: '8px',
-          padding: '10px',
-          width: 130,
-        },
-      },
-      {
-        id: 'consumer2',
-        type: 'service',
-        data: { label: 'Event Consumer 2' },
-        position: { x: 400, y: 400 },
-        style: {
-          background: nodeColors.green,
-          border: '1px solid #777',
-          borderRadius: '8px',
-          padding: '10px',
-          width: 130,
-        },
-      },
-    ],
-    edges: [
-      { id: 'e1', source: 'producer1', target: 'queue', type: 'smoothstep' },
-      { id: 'e2', source: 'producer2', target: 'queue', type: 'smoothstep' },
-      { id: 'e3', source: 'queue', target: 'consumer1', type: 'smoothstep' },
-      { id: 'e4', source: 'queue', target: 'consumer2', type: 'smoothstep' },
-    ],
-  };