@flowuent-org/diagramming-core 1.3.9 → 1.4.0

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

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

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

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

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

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