@flowuent-org/diagramming-core 1.3.10 → 1.4.1

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

@@ -1,215 +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>
-  );
-};
-
+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

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