@flowuent-org/diagramming-core 1.0.5

package/packages/diagrams/src/lib/templates/arch/components/EdgeDialog.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  TextField,
+  FormControlLabel,
+  Switch,
+  Typography,
+  Box,
+} from '@mui/material';
+import { Edge } from '@xyflow/react';
+
+interface EdgeData extends Record<string, unknown> {
+  label?: string;
+}
+
+interface EdgeDialogProps {
+  open: boolean;
+  onClose: () => void;
+  selectedEdge: Edge<EdgeData> | null;
+  edgeLabel: string;
+  onEdgeLabelChange: (label: string) => void;
+  onEdgeUpdate: () => void;
+  onKeyPress: (event: React.KeyboardEvent) => void;
+  isAnimated?: boolean;
+  onAnimationToggle?: (checked: boolean) => void;
+}
+
+const EdgeDialog: React.FC<EdgeDialogProps> = ({
+  open,
+  onClose,
+  selectedEdge,
+  edgeLabel,
+  onEdgeLabelChange,
+  onEdgeUpdate,
+  onKeyPress,
+  isAnimated = false,
+  onAnimationToggle,
+}) => {
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>Edit Edge</DialogTitle>
+      <DialogContent>
+        <Box sx={{ mb: 2 }}>
+          <Typography variant="subtitle2" color="text.secondary" gutterBottom>
+            Edge Properties
+          </Typography>
+          <TextField
+            autoFocus
+            margin="dense"
+            label="Label"
+            fullWidth
+            variant="outlined"
+            value={edgeLabel}
+            onChange={(e) => onEdgeLabelChange(e.target.value)}
+            onKeyPress={onKeyPress}
+          />
+        </Box>
+        <FormControlLabel
+          control={
+            <Switch
+              checked={isAnimated}
+              onChange={(e) => onAnimationToggle?.(e.target.checked)}
+              color="primary"
+            />
+          }
+          label="Animate Edge"
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button onClick={onEdgeUpdate} variant="contained" color="primary">
+          Update
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default EdgeDialog; 

package/packages/diagrams/src/lib/templates/arch/components/EdgeSettings.tsx

@@ -0,0 +1,82 @@
+import { Box, Switch, TextField, Typography, Paper } from '@mui/material';
+import { Edge } from '@xyflow/react';
+
+interface EdgeData extends Record<string, unknown> {
+  label?: string;
+}
+
+interface EdgeSettingsProps {
+  selectedEdge: Edge<EdgeData> | null;
+  edgeLabel: string;
+  onEdgeLabelChange: (label: string) => void;
+  onEdgeUpdate: () => void;
+  isAnimated: boolean;
+  onAnimationToggle: (checked: boolean) => void;
+}
+
+const EdgeSettings: React.FC<EdgeSettingsProps> = ({
+  selectedEdge,
+  edgeLabel,
+  onEdgeLabelChange,
+  onEdgeUpdate,
+  isAnimated,
+  onAnimationToggle,
+}) => {
+  if (!selectedEdge) return null;
+
+  const handleLabelChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onEdgeLabelChange(e.target.value);
+  };
+
+  const handleLabelBlur = () => {
+    onEdgeUpdate();
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      onEdgeUpdate();
+    }
+  };
+
+  return (
+    <Paper 
+      elevation={3}
+      sx={{ 
+        position: 'absolute',
+        top: 10,
+        right: 10,
+        width: 250,
+        p: 2,
+        bgcolor: 'background.paper',
+        borderRadius: 1,
+        zIndex: 1000
+      }}
+    >
+      <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 'bold' }}>
+        Edge Settings
+      </Typography>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+        <TextField
+          size="small"
+          label="Edge Label"
+          value={edgeLabel}
+          onChange={handleLabelChange}
+          onBlur={handleLabelBlur}
+          onKeyPress={handleKeyPress}
+          fullWidth
+          variant="outlined"
+        />
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <Typography variant="body2">Animate Edge</Typography>
+          <Switch
+            size="small"
+            checked={isAnimated}
+            onChange={(e) => onAnimationToggle(e.target.checked)}
+          />
+        </Box>
+      </Box>
+    </Paper>
+  );
+};
+
+export default EdgeSettings; 

package/packages/diagrams/src/lib/templates/arch/components/GroupControls.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import { Node } from '@xyflow/react';
+
+interface NodeData extends Record<string, unknown> {
+  label: string;
+  isGroup?: boolean;
+  parentId?: string;
+}
+
+interface GroupControlsProps {
+  selectedNode: Node<NodeData> | null;
+  groupWidth: number;
+  groupHeight: number;
+  onGroupSizeChange: (width: number, height: number) => void;
+}
+
+const GroupControls: React.FC<GroupControlsProps> = ({
+  selectedNode,
+  groupWidth,
+  groupHeight,
+  onGroupSizeChange,
+}) => {
+  if (!selectedNode?.data.isGroup) return null;
+
+  return (
+    <Box sx={{ p: 2, bgcolor: 'background.paper', borderRadius: 1 }}>
+      <div style={{ marginBottom: 10 }}>
+        <label style={{ display: 'block', marginBottom: 5 }}>Width: {groupWidth}px</label>
+        <input
+          type="range"
+          min="200"
+          max="1000"
+          value={groupWidth}
+          onChange={(e) => {
+            const width = parseInt(e.target.value);
+            onGroupSizeChange(width, groupHeight);
+          }}
+          style={{ width: '100%' }}
+        />
+      </div>
+      <div>
+        <label style={{ display: 'block', marginBottom: 5 }}>Height: {groupHeight}px</label>
+        <input
+          type="range"
+          min="100"
+          max="800"
+          value={groupHeight}
+          onChange={(e) => {
+            const height = parseInt(e.target.value);
+            onGroupSizeChange(groupWidth, height);
+          }}
+          style={{ width: '100%' }}
+        />
+      </div>
+    </Box>
+  );
+};
+
+export default GroupControls; 

package/packages/diagrams/src/lib/templates/arch/components/GroupSizeDialog.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  Box,
+  Typography,
+  IconButton,
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { Node } from '@xyflow/react';
+
+interface NodeData extends Record<string, unknown> {
+  label: string;
+  isGroup?: boolean;
+  parentId?: string;
+}
+
+interface GroupSizeDialogProps {
+  selectedNode: Node<NodeData> | null;
+  groupWidth: number;
+  groupHeight: number;
+  onGroupSizeChange: (width: number, height: number) => void;
+}
+
+const GroupSizeDialog: React.FC<GroupSizeDialogProps> = ({
+  selectedNode,
+  groupWidth,
+  groupHeight,
+  onGroupSizeChange,
+}) => {
+  if (!selectedNode || !selectedNode.data?.isGroup) return null;
+
+  return (
+    <Box
+      sx={{
+        position: 'absolute',
+        top: 10,
+        right: 10,
+        bgcolor: 'background.paper',
+        p: 2,
+        borderRadius: 1,
+        boxShadow: 3,
+        zIndex: 1000,
+        width: 300,
+      }}
+    >
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+        <Typography variant="subtitle1" fontWeight="bold">
+          Group Size: {selectedNode.data.label}
+        </Typography>
+      </Box>
+
+      <Box sx={{ mb: 2 }}>
+        <Typography variant="caption" display="block" gutterBottom>
+          Width: {groupWidth}px
+        </Typography>
+        <input
+          type="range"
+          min="200"
+          max="1000"
+          value={groupWidth}
+          onChange={(e) => onGroupSizeChange(parseInt(e.target.value), groupHeight)}
+          style={{ width: '100%' }}
+        />
+      </Box>
+
+      <Box>
+        <Typography variant="caption" display="block" gutterBottom>
+          Height: {groupHeight}px
+        </Typography>
+        <input
+          type="range"
+          min="100"
+          max="800"
+          value={groupHeight}
+          onChange={(e) => onGroupSizeChange(groupWidth, parseInt(e.target.value))}
+          style={{ width: '100%' }}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default GroupSizeDialog; 

package/packages/diagrams/src/lib/templates/arch/components/NodeDialog.tsx

@@ -0,0 +1,215 @@
+import React from 'react';
+import {
+  Box,
+  Typography,
+  Button,
+  TextField,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+} from '@mui/material';
+import { Node } from '@xyflow/react';
+
+interface NodeData extends Record<string, unknown> {
+  label: string;
+  isGroup?: boolean;
+  parentId?: string;
+}
+
+interface NodeTypeInfo {
+  background: string;
+  label: string;
+}
+
+interface NodeTypes {
+  service: NodeTypeInfo;
+  database: NodeTypeInfo;
+  cache: NodeTypeInfo;
+  monitoring: NodeTypeInfo;
+  gateway: NodeTypeInfo;
+  group: NodeTypeInfo;
+  web: NodeTypeInfo;
+  layer: NodeTypeInfo;
+}
+
+interface NodeColorOption {
+  value: string;
+  label: string;
+  color: string;
+}
+
+interface NodeDialogProps {
+  open: boolean;
+  onClose: () => void;
+  selectedNode: Node<NodeData> | null;
+  newNodeType: keyof NodeTypes;
+  newNodeLabel: string;
+  selectedColor: string;
+  nodeTypes: NodeTypes;
+  colorOptions: NodeColorOption[];
+  onNodeTypeChange: (type: keyof NodeTypes) => void;
+  onColorChange: (color: string) => void;
+  onLabelChange: (label: string) => void;
+  onAddNode: () => void;
+  onUpdateLabel: () => void;
+  onAddChildNode: (parentId: string) => void;
+  groupWidth?: number;
+  groupHeight?: number;
+  onGroupSizeChange?: (width: number, height: number) => void;
+}
+
+const NodeDialog: React.FC<NodeDialogProps> = ({
+  open,
+  onClose,
+  selectedNode,
+  newNodeType,
+  newNodeLabel,
+  selectedColor,
+  nodeTypes,
+  colorOptions,
+  onNodeTypeChange,
+  onColorChange,
+  onLabelChange,
+  onAddNode,
+  onUpdateLabel,
+  onAddChildNode,
+  groupWidth = 600,
+  groupHeight = 200,
+  onGroupSizeChange,
+}) => {
+  if (!open) return null;
+
+  return (
+    <Box
+      sx={{
+        position: 'absolute',
+        zIndex: 10,
+        top: 10,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        bgcolor: 'background.paper',
+        p: 2,
+        borderRadius: 1,
+        boxShadow: 3,
+        minWidth: 320,
+      }}
+    >
+      <Typography sx={{ mb: 1, fontWeight: 'bold' }}>
+        {selectedNode ? "Edit Node" : "Add New Node"}
+      </Typography>
+      
+      {!selectedNode && (
+        <Box sx={{ mb: 2 }}>
+          <FormControl fullWidth sx={{ mb: 2 }}>
+            <InputLabel>Node Type</InputLabel>
+            <Select
+              value={newNodeType}
+              onChange={(e) => onNodeTypeChange(e.target.value as keyof NodeTypes)}
+              label="Node Type"
+              size="small"
+            >
+              {Object.entries(nodeTypes)
+                .filter(([key]) => key !== "group")
+                .map(([key, value]) => (
+                  <MenuItem key={key} value={key}>
+                    {value.label}
+                  </MenuItem>
+                ))}
+            </Select>
+          </FormControl>
+          
+          <FormControl fullWidth>
+            <InputLabel>Node Color</InputLabel>
+            <Select
+              value={selectedColor}
+              onChange={(e) => onColorChange(e.target.value)}
+              label="Node Color"
+              size="small"
+            >
+              {colorOptions.map((option) => (
+                <MenuItem 
+                  key={option.value} 
+                  value={option.value}
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 1
+                  }}
+                >
+                  <Box
+                    sx={{
+                      width: 20,
+                      height: 20,
+                      borderRadius: 1,
+                      backgroundColor: option.color,
+                      border: '1px solid rgba(0,0,0,0.1)'
+                    }}
+                  />
+                  {option.label}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Box>
+      )}
+
+      {(selectedNode?.data.isGroup || newNodeType === 'group') && onGroupSizeChange && (
+        <Box sx={{ mb: 2 }}>
+          <Typography variant="subtitle2" sx={{ mb: 1 }}>Group Size</Typography>
+          <Box sx={{ mb: 1 }}>
+            <Typography variant="caption">Width: {groupWidth}px</Typography>
+            <input
+              type="range"
+              min="200"
+              max="1000"
+              value={groupWidth}
+              onChange={(e) => onGroupSizeChange(parseInt(e.target.value), groupHeight)}
+              style={{ width: '100%' }}
+            />
+          </Box>
+          <Box>
+            <Typography variant="caption">Height: {groupHeight}px</Typography>
+            <input
+              type="range"
+              min="100"
+              max="800"
+              value={groupHeight}
+              onChange={(e) => onGroupSizeChange(groupWidth, parseInt(e.target.value))}
+              style={{ width: '100%' }}
+            />
+          </Box>
+        </Box>
+      )}
+
+      <Box display="flex" alignItems="center" gap={2}>
+        <TextField
+          autoFocus
+          size="small"
+          label="Label"
+          value={newNodeLabel}
+          onChange={(e) => onLabelChange(e.target.value)}
+          sx={{ width: 200 }}
+        />
+        <Button
+          variant="contained"
+          size="small"
+          onClick={selectedNode?.data.isGroup ? () => onAddChildNode(selectedNode.id) : (selectedNode ? onUpdateLabel : onAddNode)}
+          sx={{ textTransform: 'none' }}
+        >
+          {selectedNode?.data.isGroup ? "Add Child" : (selectedNode ? "Update" : "Add")}
+        </Button>
+        <Button
+          variant="outlined"
+          size="small"
+          onClick={onClose}
+          sx={{ textTransform: 'none' }}
+        >
+          Cancel
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default NodeDialog; 

package/packages/diagrams/src/lib/templates/arch/components/nodeTypes.ts

@@ -0,0 +1,92 @@
+import { nodeColors } from "../data/templatee-data";
+
+// Define node data interface
+export interface NodeData extends Record<string, unknown> {
+    label: string;
+    isGroup?: boolean;
+    parentId?: string;
+  }
+  
+  // Define node types interface
+  export interface NodeTypeInfo {
+    background: string;
+    label: string;
+  }
+  
+  export interface NodeTypes {
+    service: NodeTypeInfo;
+    database: NodeTypeInfo;
+    cache: NodeTypeInfo;
+    monitoring: NodeTypeInfo;
+    gateway: NodeTypeInfo;
+    group: NodeTypeInfo;
+    web: NodeTypeInfo;
+    layer: NodeTypeInfo;
+  }
+  
+  // Define node colors with transparency
+  
+export const nodeTypes: NodeTypes = {
+    service: { background: nodeColors.blue, label: 'Service' },
+    database: { background: nodeColors.orange, label: 'Database' },
+    cache: { background: nodeColors.green, label: 'Cache' },
+    monitoring: { background: nodeColors.purple, label: 'Monitoring' },
+    gateway: { background: nodeColors.pink, label: 'Gateway' },
+    group: { background: 'rgba(240, 240, 240, 0.5)', label: 'Group' },
+    web: { background: nodeColors.green, label: 'Web Service' },
+    layer: { background: nodeColors.blue, label: 'Layer' },
+  };
+  
+  // Add interface for node color selection
+  interface NodeColorOption {
+    value: string;
+    label: string;
+    color: string;
+  }
+  
+export const colorOptions: NodeColorOption[] = [
+    { value: 'blue', label: 'Blue', color: nodeColors.blue },
+    { value: 'green', label: 'Green', color: nodeColors.green },
+    { value: 'orange', label: 'Orange', color: nodeColors.orange },
+    { value: 'purple', label: 'Purple', color: nodeColors.purple },
+    { value: 'pink', label: 'Pink', color: nodeColors.pink },
+  ];
+  
+  export interface EdgeData extends Record<string, unknown> {
+    label?: string;
+  }
+  
+export const defaultEdgeStyle = {
+    strokeWidth: 2,
+    labelStyle: {
+      fill: '#000',
+      fontWeight: 700,
+      display: 'block',
+      fontSize: 12,
+    },
+    labelBgStyle: {
+      fill: '#fff',
+      opacity: 0.8,
+      borderRadius: 4,
+      padding: 4,
+    },
+    animated: false,
+    style: {
+      stroke: '#555',
+      strokeWidth: 2,
+    },
+  };
+  
+export const edgeStyles = {
+    ...defaultEdgeStyle,
+    zIndex: 1,
+  };
+  
+export const animatedEdgeStyle = {
+    ...defaultEdgeStyle,
+    animated: true,
+    style: {
+      stroke: '#3b82f6',
+      strokeWidth: 2,
+    },
+  };