@flowuent-org/diagramming-core 1.0.5

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

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

@@ -0,0 +1,213 @@
+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' },
+    ],
+  };