@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/templates/arch/ArchDiagram.tsx

@@ -1,793 +1,793 @@
-import { useCallback, useState, useEffect } from 'react';
-import {
-  ReactFlow,
-  addEdge,
-  Background,
-  useNodesState,
-  useEdgesState,
-  Controls,
-  Connection,
-  Edge,
-  Panel,
-  Node,
-  useReactFlow,
-  ReactFlowProvider,
-  MarkerType,
-} from '@xyflow/react';
-import { Box, Button, Paper, ClickAwayListener } from '@mui/material';
-import UndoIcon from '@mui/icons-material/Undo';
-import RedoIcon from '@mui/icons-material/Redo';
-import DownloadIcon from '@mui/icons-material/Download';
-import UploadIcon from '@mui/icons-material/Upload';
-
-import NodeDialog from './components/NodeDialog';
-import EdgeSettings from './components/EdgeSettings';
-import GroupSizeDialog from './components/GroupSizeDialog';
-import ArchDiagramControls from './controls/ArchDiagramControls';
-
-import '@xyflow/react/dist/style.css';
-import {
-  eventDrivenTemplate,
-  microservicesTemplate,
-  nodeColors,
-  threeTierTemplate,
-} from './data/templatee-data';
-import {
-  animatedEdgeStyle,
-  defaultEdgeStyle,
-  EdgeData,
-  edgeStyles,
-  NodeData,
-  nodeTypes,
-  NodeTypes,
-} from './components/nodeTypes';
-
-const ArchDiagramInner = ({
-  archNodes,
-  archEdges,
-}: {
-  archNodes: Node<NodeData>[];
-  archEdges: Edge<EdgeData>[];
-}) => {
-  const [nodes, setNodes, onNodesChange] = useNodesState<Node<NodeData>>([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge<EdgeData>>([]);
-  const [history, setHistory] = useState<
-    { nodes: Node<NodeData>[]; edges: Edge<EdgeData>[] }[]
-  >([{ nodes: [], edges: [] }]);
-  const [historyIndex, setHistoryIndex] = useState(0);
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [selectedNode, setSelectedNode] = useState<Node<NodeData> | null>(null);
-  const [newNodeType, setNewNodeType] = useState<keyof NodeTypes>('service');
-  const [newNodeLabel, setNewNodeLabel] = useState('');
-  const [selectedColor, setSelectedColor] = useState<string>('blue');
-  const [groupWidth, setGroupWidth] = useState(600);
-  const [groupHeight, setGroupHeight] = useState(200);
-  const [selectedEdge, setSelectedEdge] = useState<Edge<EdgeData> | null>(null);
-  const [edgeLabel, setEdgeLabel] = useState('');
-  const [isEdgeAnimated, setIsEdgeAnimated] = useState(false);
-  const [isInitialized, setIsInitialized] = useState(false);
-
-  const { getNodes, getViewport } = useReactFlow();
-
-  useEffect(() => {
-    if (archNodes && archEdges) {
-      // Ensure nodes have valid positions and styles
-      const validNodes = archNodes.map(node => {
-        // Handle different node types
-        const nodeType = node.type;
-        
-        let nodeStyle;
-        if (nodeType === 'subnetNode') {
-          nodeStyle = {
-            backgroundColor: node.data?.color || 'transparent',
-            border: `1px solid ${node.data?.borderColor || '#777'}`,
-            borderRadius: '8px',
-            padding: '20px',
-            width: node.data?.width || 500,
-            height: node.data?.height || 250,
-            zIndex: node.style?.zIndex || 1,
-          } as const;
-        } else if (nodeType === 'serviceNode') {
-          nodeStyle = {
-            backgroundColor: node.data?.color || nodeColors.blue,
-            border: '1px solid #777',
-            borderRadius: '8px',
-            padding: '10px',
-            width: 130,
-            height: 80,
-            zIndex: node.style?.zIndex || 2,
-          } as const;
-        } else {
-          nodeStyle = {
-            backgroundColor: node.data?.color || nodeColors.blue,
-            border: '1px solid #777',
-            borderRadius: '8px',
-            padding: '10px',
-            width: node.style?.width || 130,
-            height: node.style?.height || 80,
-            zIndex: node.style?.zIndex || 1,
-          } as const;
-        }
-        
-        return {
-          ...node,
-          position: node.position || { x: 0, y: 0 },
-          style: nodeStyle as React.CSSProperties,
-          data: {
-            ...node.data,
-            label: node.data?.label || 'New Node',
-          }
-        } as Node<NodeData>;
-      });
-      
-      // Ensure edges have proper styling
-      const validEdges = archEdges.map(edge => {
-        const edgeStyle = {
-          stroke: edge.style?.stroke || '#555',
-          strokeWidth: edge.style?.strokeWidth || 2,
-        };
-        
-        return {
-          ...edge,
-          type: edge.type || 'smoothstep',
-          animated: edge.animated || false,
-          style: edgeStyle,
-          markerEnd: {
-            type: MarkerType.ArrowClosed,
-            width: 20,
-            height: 20,
-            color: edgeStyle.stroke,
-          },
-        } as Edge<EdgeData>;
-      });
-      
-      setNodes(validNodes);
-      setEdges(validEdges);
-      setHistory([{ nodes: validNodes, edges: validEdges }]);
-      setIsInitialized(true);
-    }
-  }, [archNodes, archEdges]);
-
-  const findCenterPosition = useCallback(() => {
-    // Default center position
-    const defaultPosition = {
-      x: window.innerWidth / 2,
-      y: window.innerHeight / 2,
-    };
-
-    if (!isInitialized) {
-      return defaultPosition;
-    }
-
-    try {
-      const viewport = getViewport();
-      if (
-        !viewport ||
-        typeof viewport.x === 'undefined' ||
-        typeof viewport.y === 'undefined' ||
-        typeof viewport.zoom === 'undefined'
-      ) {
-        return defaultPosition;
-      }
-
-      const centerX =
-        -viewport.x / viewport.zoom + window.innerWidth / (2 * viewport.zoom);
-      const centerY =
-        -viewport.y / viewport.zoom + window.innerHeight / (2 * viewport.zoom);
-
-      const existingNodes = getNodes();
-      if (!existingNodes || existingNodes.length === 0) {
-        return { x: centerX, y: centerY };
-      }
-
-      const centerThreshold = 100;
-      const centeredNodes = existingNodes.filter((node) => {
-        if (
-          !node ||
-          !node.position ||
-          typeof node.position.x === 'undefined' ||
-          typeof node.position.y === 'undefined'
-        ) {
-          return false;
-        }
-        const dx = Math.abs(node.position.x - centerX);
-        const dy = Math.abs(node.position.y - centerY);
-        return dx < centerThreshold && dy < centerThreshold;
-      });
-
-      if (centeredNodes.length > 0) {
-        const leftmostX = Math.min(
-          ...centeredNodes.map((node) => node.position?.x || 0),
-        );
-        return {
-          x: leftmostX - 200,
-          y: centerY,
-        };
-      }
-
-      return { x: centerX, y: centerY };
-    } catch (error) {
-      console.error('Error calculating center position:', error);
-      return defaultPosition;
-    }
-  }, [getViewport, getNodes, isInitialized]);
-
-  const onConnect = useCallback(
-    (connection: Connection) => {
-      const newEdge = {
-        ...connection,
-        id: `edge-${Date.now()}`,
-        ...(isEdgeAnimated ? animatedEdgeStyle : edgeStyles),
-        type: 'smoothstep',
-        label: '',
-        labelStyle: {
-          ...defaultEdgeStyle.labelStyle,
-          display: edgeLabel ? 'block' : 'none',
-        },
-        labelBgStyle: defaultEdgeStyle.labelBgStyle,
-      };
-      setEdges((eds) => addEdge(newEdge as Edge<EdgeData>, eds));
-    },
-    [isEdgeAnimated, edgeLabel],
-  );
-
-  const toggleEdgeAnimation = useCallback((edgeId: string) => {
-    setEdges((eds) =>
-      eds.map((edge) => {
-        if (edge.id === edgeId) {
-          const isCurrentlyAnimated = edge.animated;
-          return {
-            ...edge,
-            ...(isCurrentlyAnimated ? edgeStyles : animatedEdgeStyle),
-          };
-        }
-        return edge;
-      }),
-    );
-  }, []);
-
-  const onDragOver = useCallback((event: React.DragEvent) => {
-    event.preventDefault();
-    event.dataTransfer.dropEffect = 'move';
-  }, []);
-
-  const handleGroupSizeChange = useCallback(
-    (width: number, height: number) => {
-      if (!selectedNode?.data?.isGroup) return;
-
-      setGroupWidth(width);
-      setGroupHeight(height);
-
-      setNodes((nds) =>
-        nds.map((node) =>
-          node.id === selectedNode.id
-            ? {
-                ...node,
-                style: {
-                  ...node.style,
-                  width,
-                  height,
-                },
-              }
-            : node,
-        ),
-      );
-    },
-    [selectedNode, setNodes],
-  );
-
-  const onNodeClick = (event: React.MouseEvent, node: Node<NodeData>) => {
-    if ((event.target as HTMLElement).classList.contains('nodrag')) {
-      return;
-    }
-
-    setSelectedNode(node);
-    setNewNodeLabel(node.data?.label || '');
-
-    if (!node.data?.isGroup) {
-      setIsDialogOpen(true);
-    }
-  };
-
-  const handleAddGroupNode = () => {
-    const position = findCenterPosition();
-
-    const newNode = {
-      id: `group-${Date.now()}`,
-      type: 'group',
-      data: {
-        label: newNodeLabel || 'New Group',
-        isGroup: true,
-      },
-      position,
-      style: {
-        width: groupWidth,
-        height: groupHeight,
-        backgroundColor: 'rgba(240, 240, 240, 0.5)',
-        border: '1px dashed #777',
-        borderRadius: '8px',
-        padding: '20px',
-        zIndex: -1,
-      },
-      selectable: true,
-      draggable: true,
-    };
-
-    const groupNode = newNode as Node<NodeData>;
-    setNodes((nds) => [...nds, groupNode]);
-    setNewNodeLabel('');
-    setIsDialogOpen(false);
-  };
-
-  useEffect(() => {
-    setNodes((nds) =>
-      nds.map((node) => {
-        if (node.data?.isGroup) {
-          return {
-            ...node,
-            style: {
-              ...node.style,
-              zIndex: -1,
-            },
-            draggable: true,
-          };
-        }
-        return node;
-      }),
-    );
-  }, []);
-
-  const handleAddNode = (type: string, color: string) => {
-    const nodeInfo = nodeTypes[type as keyof NodeTypes];
-    const position = findCenterPosition();
-
-    const newNode = {
-      id: `${type}-${Date.now()}`,
-      type,
-      data: { label: `New ${nodeInfo.label}` },
-      position,
-      draggable: true,
-      style: {
-        background: color,
-        border: '1px solid #777',
-        borderRadius: '8px',
-        padding: '10px',
-        width: 130,
-      },
-    };
-    setNodes((nds) => [...nds, newNode as Node<NodeData>]);
-  };
-
-  const handleAddChildNode = (parentId: string) => {
-    const parent = nodes.find((node) => node.id === parentId);
-    if (!parent || !parent.data?.isGroup) return;
-
-    // Calculate position relative to parent
-    const childPosition = {
-      x: parent.position.x + 50,
-      y: parent.position.y + 50,
-    };
-
-    const newNode = {
-      id: `service-${Date.now()}`,
-      type: 'service',
-      data: {
-        label: 'New Service',
-        parentId: parentId,
-      },
-      position: childPosition,
-      draggable: true,
-      style: {
-        background: nodeColors.blue,
-        border: '1px solid #777',
-        borderRadius: '8px',
-        padding: '10px',
-        width: 130,
-      },
-    };
-
-    setNodes((nds) => [...nds, newNode as Node<NodeData>]);
-    setIsDialogOpen(false);
-  };
-
-  const handleUpdateLabel = () => {
-    if (!selectedNode) return;
-
-    setNodes((nds) =>
-      nds.map((node) =>
-        node.id === selectedNode.id
-          ? { ...node, data: { ...node.data, label: newNodeLabel } }
-          : node,
-      ),
-    );
-    setIsDialogOpen(false);
-  };
-
-  const onEdgeClick = useCallback(
-    (event: React.MouseEvent, edge: Edge<EdgeData>) => {
-      event.preventDefault();
-      if (event.shiftKey) {
-        // Toggle animation when clicking with shift key
-        toggleEdgeAnimation(edge.id);
-        return;
-      }
-      setSelectedEdge(edge);
-      setEdgeLabel(String(edge.label || edge.data?.label || ''));
-      setIsEdgeAnimated(!!edge.animated);
-    },
-    [toggleEdgeAnimation],
-  );
-
-  const handleEdgeUpdate = useCallback(() => {
-    if (!selectedEdge) return;
-
-    setEdges((eds) =>
-      eds.map((edge) => {
-        if (edge.id === selectedEdge.id) {
-          const updatedEdge = {
-            ...edge,
-            label: edgeLabel || '',
-            data: {
-              ...edge.data,
-              label: edgeLabel || '',
-            } as EdgeData,
-            style: {
-              ...(edge.animated ? animatedEdgeStyle.style : edgeStyles.style),
-            },
-            labelStyle: {
-              ...defaultEdgeStyle.labelStyle,
-              display: edgeLabel ? 'block' : 'none',
-            },
-            labelBgStyle: defaultEdgeStyle.labelBgStyle,
-          };
-          return updatedEdge;
-        }
-        return edge;
-      }),
-    );
-    setSelectedEdge(null);
-    setEdgeLabel('');
-  }, [selectedEdge, edgeLabel]);
-
-  const handleLoadTemplate = useCallback((templateType: string) => {
-    let template;
-    switch (templateType) {
-      case 'microservices':
-        template = microservicesTemplate;
-        break;
-      case 'three-tier':
-        template = threeTierTemplate;
-        break;
-      case 'event-driven':
-        template = eventDrivenTemplate;
-        break;
-      default:
-        return;
-    }
-    setNodes(template.nodes as Node<NodeData>[]);
-    setEdges(template.edges as Edge<EdgeData>[]);
-  }, []);
-
-  // Handle undo
-  const handleUndo = useCallback(() => {
-    if (historyIndex > 0) {
-      const newIndex = historyIndex - 1;
-      const previousState = history[newIndex];
-      setNodes(previousState.nodes);
-      setEdges(previousState.edges);
-      setHistoryIndex(newIndex);
-    }
-  }, [history, historyIndex]);
-
-  // Handle redo
-  const handleRedo = useCallback(() => {
-    if (historyIndex < history.length - 1) {
-      const newIndex = historyIndex + 1;
-      const nextState = history[newIndex];
-      setNodes(nextState.nodes);
-      setEdges(nextState.edges);
-      setHistoryIndex(newIndex);
-    }
-  }, [history, historyIndex]);
-
-  // Export diagram
-  const exportDiagram = useCallback(() => {
-    const diagramData = {
-      nodes,
-      edges,
-    };
-    const dataStr = JSON.stringify(diagramData, null, 2);
-    const dataUri =
-      'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr);
-    const exportFileDefaultName = 'diagram.json';
-
-    const linkElement = document.createElement('a');
-    linkElement.setAttribute('href', dataUri);
-    linkElement.setAttribute('download', exportFileDefaultName);
-    linkElement.click();
-  }, [nodes, edges]);
-
-  // Import diagram
-  const importDiagram = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      const file = event.target.files?.[0];
-      if (file) {
-        const reader = new FileReader();
-        reader.onload = (e) => {
-          try {
-            const content = e.target?.result as string;
-            const { nodes: importedNodes, edges: importedEdges } =
-              JSON.parse(content);
-            setNodes(importedNodes);
-            setEdges(importedEdges);
-            // Add to history
-            const newHistory = history.slice(0, historyIndex + 1);
-            newHistory.push({ nodes: importedNodes, edges: importedEdges });
-            setHistory(newHistory);
-            setHistoryIndex(newHistory.length - 1);
-          } catch (error) {
-            console.error('Error importing diagram:', error);
-          }
-        };
-        reader.readAsText(file);
-      }
-    },
-    [history, historyIndex],
-  );
-
-  // Update history when nodes or edges change
-  useEffect(() => {
-    const currentState = { nodes, edges };
-    if (
-      JSON.stringify(currentState) !==
-      JSON.stringify(history[history.length - 1])
-    ) {
-      const newHistory = history.slice(0, historyIndex + 1);
-      newHistory.push(currentState);
-      setHistory(newHistory);
-      setHistoryIndex(newHistory.length - 1);
-    }
-  }, [nodes, edges]);
-
-  const handleClickAway = () => {
-    setIsDialogOpen(false);
-    setSelectedNode(null);
-    setSelectedEdge(null);
-    setEdgeLabel('');
-  };
-
-  // Add handler for diagram pane clicks
-  const handlePaneClick = useCallback(() => {
-    handleClickAway();
-  }, []);
-
-  return (
-    <div style={{ width: '100vw', height: '100vh' }}>
-      <ReactFlow<Node<NodeData>, Edge<EdgeData>>
-        nodes={nodes}
-        edges={edges}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-        onConnect={onConnect}
-        onNodeClick={onNodeClick}
-        onEdgeClick={onEdgeClick}
-        onPaneClick={handlePaneClick}
-        onDragOver={onDragOver}
-        className="react-flow-subflows-example"
-        fitView
-        minZoom={0.2}
-        maxZoom={1.5}
-        defaultEdgeOptions={{
-          type: 'smoothstep',
-          animated: false,
-          style: edgeStyles,
-        }}
-        nodesDraggable={true}
-        nodesConnectable={true}
-        elementsSelectable={true}
-        edgesFocusable={true}
-        onInit={() => setIsInitialized(true)}
-      >
-        <Panel position="top-left">
-          <Box sx={{ display: 'flex', gap: 2, alignItems: 'flex-start' }}>
-            <ArchDiagramControls
-              onAddNode={handleAddNode}
-              onAddGroup={handleAddGroupNode}
-              onUndo={handleUndo}
-              onRedo={handleRedo}
-              canUndo={historyIndex > 0}
-              canRedo={historyIndex < history.length - 1}
-              onLoadTemplate={handleLoadTemplate}
-            />
-          </Box>
-        </Panel>
-
-        {/* Edge Settings */}
-        {selectedEdge && (
-          <ClickAwayListener
-            onClickAway={handleClickAway}
-            mouseEvent="onMouseDown"
-            touchEvent="onTouchStart"
-          >
-            <EdgeSettings
-              selectedEdge={selectedEdge}
-              edgeLabel={edgeLabel}
-              onEdgeLabelChange={setEdgeLabel}
-              onEdgeUpdate={handleEdgeUpdate}
-              isAnimated={isEdgeAnimated}
-              onAnimationToggle={(checked) => {
-                setIsEdgeAnimated(checked);
-                if (selectedEdge) {
-                  toggleEdgeAnimation(selectedEdge.id);
-                }
-              }}
-            />
-          </ClickAwayListener>
-        )}
-
-        {/* Add GroupSizeDialog */}
-        <GroupSizeDialog
-          selectedNode={selectedNode}
-          groupWidth={groupWidth}
-          groupHeight={groupHeight}
-          onGroupSizeChange={handleGroupSizeChange}
-        />
-
-        <Panel position="bottom-right">
-          <Paper
-            elevation={3}
-            sx={{
-              p: 1.5,
-              borderRadius: 2,
-              bgcolor: 'background.paper',
-              maxWidth: '480px',
-            }}
-          >
-            <Box
-              sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                gap: 1,
-                justifyContent: 'space-between',
-              }}
-            >
-              <Button
-                variant="contained"
-                color="primary"
-                size="small"
-                onClick={() => {
-                  const clearedState = { nodes: [], edges: [] };
-                  const newHistory = history.slice(0, historyIndex + 1);
-                  newHistory.push(clearedState);
-                  setNodes([]);
-                  setEdges([]);
-                  setHistory(newHistory);
-                  setHistoryIndex(newHistory.length - 1);
-                }}
-              >
-                Clear
-              </Button>
-
-              <Box sx={{ display: 'flex', gap: 1 }}>
-                <Button
-                  variant="contained"
-                  color="primary"
-                  size="small"
-                  startIcon={<UndoIcon />}
-                  onClick={handleUndo}
-                  disabled={historyIndex <= 0}
-                  sx={{
-                    minWidth: '40px',
-                    px: 1,
-                  }}
-                >
-                  Undo
-                </Button>
-                <Button
-                  variant="contained"
-                  color="primary"
-                  size="small"
-                  startIcon={<RedoIcon />}
-                  onClick={handleRedo}
-                  disabled={historyIndex >= history.length - 1}
-                  sx={{
-                    minWidth: '40px',
-                    px: 1,
-                  }}
-                >
-                  Redo
-                </Button>
-              </Box>
-
-              <Box sx={{ display: 'flex', gap: 1 }}>
-                <Button
-                  variant="outlined"
-                  size="small"
-                  onClick={exportDiagram}
-                  startIcon={<DownloadIcon />}
-                  sx={{
-                    minWidth: '40px',
-                    px: 1,
-                  }}
-                >
-                  Export
-                </Button>
-                <Button
-                  variant="outlined"
-                  component="label"
-                  size="small"
-                  startIcon={<UploadIcon />}
-                  sx={{
-                    minWidth: '40px',
-                    px: 1,
-                  }}
-                >
-                  Import
-                  <input
-                    type="file"
-                    onChange={importDiagram}
-                    accept=".json"
-                    style={{ display: 'none' }}
-                  />
-                </Button>
-              </Box>
-            </Box>
-          </Paper>
-        </Panel>
-
-        <Controls />
-        <Background color="#E6E6E6" gap={16} />
-      </ReactFlow>
-
-      {/* Node Dialog with ClickAwayListener */}
-      {isDialogOpen && (
-        <ClickAwayListener
-          onClickAway={handleClickAway}
-          mouseEvent="onMouseDown"
-          touchEvent="onTouchStart"
-        >
-          <NodeDialog
-            open={isDialogOpen}
-            onClose={() => setIsDialogOpen(false)}
-            selectedNode={selectedNode}
-            newNodeType={newNodeType}
-            newNodeLabel={newNodeLabel}
-            selectedColor={selectedColor}
-            nodeTypes={nodeTypes}
-            colorOptions={[
-              { 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 },
-            ]}
-            onNodeTypeChange={setNewNodeType}
-            onColorChange={setSelectedColor}
-            onLabelChange={setNewNodeLabel}
-            onAddNode={() =>
-              handleAddNode(
-                newNodeType,
-                nodeColors[selectedColor as keyof typeof nodeColors],
-              )
-            }
-            onUpdateLabel={handleUpdateLabel}
-            onAddChildNode={handleAddChildNode}
-          />
-        </ClickAwayListener>
-      )}
-    </div>
-  );
-};
-
-const ArchDiagram = (props: {
-  archNodes: Node<NodeData>[];
-  archEdges: Edge<EdgeData>[];
-}) => {
-  return (
-    <ReactFlowProvider>
-      <ArchDiagramInner {...props} />
-    </ReactFlowProvider>
-  );
-};
-
-export default ArchDiagram;
+import { useCallback, useState, useEffect } from 'react';
+import {
+  ReactFlow,
+  addEdge,
+  Background,
+  useNodesState,
+  useEdgesState,
+  Controls,
+  Connection,
+  Edge,
+  Panel,
+  Node,
+  useReactFlow,
+  ReactFlowProvider,
+  MarkerType,
+} from '@xyflow/react';
+import { Box, Button, Paper, ClickAwayListener } from '@mui/material';
+import UndoIcon from '@mui/icons-material/Undo';
+import RedoIcon from '@mui/icons-material/Redo';
+import DownloadIcon from '@mui/icons-material/Download';
+import UploadIcon from '@mui/icons-material/Upload';
+
+import NodeDialog from './components/NodeDialog';
+import EdgeSettings from './components/EdgeSettings';
+import GroupSizeDialog from './components/GroupSizeDialog';
+import ArchDiagramControls from './controls/ArchDiagramControls';
+
+import '@xyflow/react/dist/style.css';
+import {
+  eventDrivenTemplate,
+  microservicesTemplate,
+  nodeColors,
+  threeTierTemplate,
+} from './data/templatee-data';
+import {
+  animatedEdgeStyle,
+  defaultEdgeStyle,
+  EdgeData,
+  edgeStyles,
+  NodeData,
+  nodeTypes,
+  NodeTypes,
+} from './components/nodeTypes';
+
+const ArchDiagramInner = ({
+  archNodes,
+  archEdges,
+}: {
+  archNodes: Node<NodeData>[];
+  archEdges: Edge<EdgeData>[];
+}) => {
+  const [nodes, setNodes, onNodesChange] = useNodesState<Node<NodeData>>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge<EdgeData>>([]);
+  const [history, setHistory] = useState<
+    { nodes: Node<NodeData>[]; edges: Edge<EdgeData>[] }[]
+  >([{ nodes: [], edges: [] }]);
+  const [historyIndex, setHistoryIndex] = useState(0);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [selectedNode, setSelectedNode] = useState<Node<NodeData> | null>(null);
+  const [newNodeType, setNewNodeType] = useState<keyof NodeTypes>('service');
+  const [newNodeLabel, setNewNodeLabel] = useState('');
+  const [selectedColor, setSelectedColor] = useState<string>('blue');
+  const [groupWidth, setGroupWidth] = useState(600);
+  const [groupHeight, setGroupHeight] = useState(200);
+  const [selectedEdge, setSelectedEdge] = useState<Edge<EdgeData> | null>(null);
+  const [edgeLabel, setEdgeLabel] = useState('');
+  const [isEdgeAnimated, setIsEdgeAnimated] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  const { getNodes, getViewport } = useReactFlow();
+
+  useEffect(() => {
+    if (archNodes && archEdges) {
+      // Ensure nodes have valid positions and styles
+      const validNodes = archNodes.map(node => {
+        // Handle different node types
+        const nodeType = node.type;
+        
+        let nodeStyle;
+        if (nodeType === 'subnetNode') {
+          nodeStyle = {
+            backgroundColor: node.data?.color || 'transparent',
+            border: `1px solid ${node.data?.borderColor || '#777'}`,
+            borderRadius: '8px',
+            padding: '20px',
+            width: node.data?.width || 500,
+            height: node.data?.height || 250,
+            zIndex: node.style?.zIndex || 1,
+          } as const;
+        } else if (nodeType === 'serviceNode') {
+          nodeStyle = {
+            backgroundColor: node.data?.color || nodeColors.blue,
+            border: '1px solid #777',
+            borderRadius: '8px',
+            padding: '10px',
+            width: 130,
+            height: 80,
+            zIndex: node.style?.zIndex || 2,
+          } as const;
+        } else {
+          nodeStyle = {
+            backgroundColor: node.data?.color || nodeColors.blue,
+            border: '1px solid #777',
+            borderRadius: '8px',
+            padding: '10px',
+            width: node.style?.width || 130,
+            height: node.style?.height || 80,
+            zIndex: node.style?.zIndex || 1,
+          } as const;
+        }
+        
+        return {
+          ...node,
+          position: node.position || { x: 0, y: 0 },
+          style: nodeStyle as React.CSSProperties,
+          data: {
+            ...node.data,
+            label: node.data?.label || 'New Node',
+          }
+        } as Node<NodeData>;
+      });
+      
+      // Ensure edges have proper styling
+      const validEdges = archEdges.map(edge => {
+        const edgeStyle = {
+          stroke: edge.style?.stroke || '#555',
+          strokeWidth: edge.style?.strokeWidth || 2,
+        };
+        
+        return {
+          ...edge,
+          type: edge.type || 'smoothstep',
+          animated: edge.animated || false,
+          style: edgeStyle,
+          markerEnd: {
+            type: MarkerType.ArrowClosed,
+            width: 20,
+            height: 20,
+            color: edgeStyle.stroke,
+          },
+        } as Edge<EdgeData>;
+      });
+      
+      setNodes(validNodes);
+      setEdges(validEdges);
+      setHistory([{ nodes: validNodes, edges: validEdges }]);
+      setIsInitialized(true);
+    }
+  }, [archNodes, archEdges]);
+
+  const findCenterPosition = useCallback(() => {
+    // Default center position
+    const defaultPosition = {
+      x: window.innerWidth / 2,
+      y: window.innerHeight / 2,
+    };
+
+    if (!isInitialized) {
+      return defaultPosition;
+    }
+
+    try {
+      const viewport = getViewport();
+      if (
+        !viewport ||
+        typeof viewport.x === 'undefined' ||
+        typeof viewport.y === 'undefined' ||
+        typeof viewport.zoom === 'undefined'
+      ) {
+        return defaultPosition;
+      }
+
+      const centerX =
+        -viewport.x / viewport.zoom + window.innerWidth / (2 * viewport.zoom);
+      const centerY =
+        -viewport.y / viewport.zoom + window.innerHeight / (2 * viewport.zoom);
+
+      const existingNodes = getNodes();
+      if (!existingNodes || existingNodes.length === 0) {
+        return { x: centerX, y: centerY };
+      }
+
+      const centerThreshold = 100;
+      const centeredNodes = existingNodes.filter((node) => {
+        if (
+          !node ||
+          !node.position ||
+          typeof node.position.x === 'undefined' ||
+          typeof node.position.y === 'undefined'
+        ) {
+          return false;
+        }
+        const dx = Math.abs(node.position.x - centerX);
+        const dy = Math.abs(node.position.y - centerY);
+        return dx < centerThreshold && dy < centerThreshold;
+      });
+
+      if (centeredNodes.length > 0) {
+        const leftmostX = Math.min(
+          ...centeredNodes.map((node) => node.position?.x || 0),
+        );
+        return {
+          x: leftmostX - 200,
+          y: centerY,
+        };
+      }
+
+      return { x: centerX, y: centerY };
+    } catch (error) {
+      console.error('Error calculating center position:', error);
+      return defaultPosition;
+    }
+  }, [getViewport, getNodes, isInitialized]);
+
+  const onConnect = useCallback(
+    (connection: Connection) => {
+      const newEdge = {
+        ...connection,
+        id: `edge-${Date.now()}`,
+        ...(isEdgeAnimated ? animatedEdgeStyle : edgeStyles),
+        type: 'smoothstep',
+        label: '',
+        labelStyle: {
+          ...defaultEdgeStyle.labelStyle,
+          display: edgeLabel ? 'block' : 'none',
+        },
+        labelBgStyle: defaultEdgeStyle.labelBgStyle,
+      };
+      setEdges((eds) => addEdge(newEdge as Edge<EdgeData>, eds));
+    },
+    [isEdgeAnimated, edgeLabel],
+  );
+
+  const toggleEdgeAnimation = useCallback((edgeId: string) => {
+    setEdges((eds) =>
+      eds.map((edge) => {
+        if (edge.id === edgeId) {
+          const isCurrentlyAnimated = edge.animated;
+          return {
+            ...edge,
+            ...(isCurrentlyAnimated ? edgeStyles : animatedEdgeStyle),
+          };
+        }
+        return edge;
+      }),
+    );
+  }, []);
+
+  const onDragOver = useCallback((event: React.DragEvent) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+  }, []);
+
+  const handleGroupSizeChange = useCallback(
+    (width: number, height: number) => {
+      if (!selectedNode?.data?.isGroup) return;
+
+      setGroupWidth(width);
+      setGroupHeight(height);
+
+      setNodes((nds) =>
+        nds.map((node) =>
+          node.id === selectedNode.id
+            ? {
+                ...node,
+                style: {
+                  ...node.style,
+                  width,
+                  height,
+                },
+              }
+            : node,
+        ),
+      );
+    },
+    [selectedNode, setNodes],
+  );
+
+  const onNodeClick = (event: React.MouseEvent, node: Node<NodeData>) => {
+    if ((event.target as HTMLElement).classList.contains('nodrag')) {
+      return;
+    }
+
+    setSelectedNode(node);
+    setNewNodeLabel(node.data?.label || '');
+
+    if (!node.data?.isGroup) {
+      setIsDialogOpen(true);
+    }
+  };
+
+  const handleAddGroupNode = () => {
+    const position = findCenterPosition();
+
+    const newNode = {
+      id: `group-${Date.now()}`,
+      type: 'group',
+      data: {
+        label: newNodeLabel || 'New Group',
+        isGroup: true,
+      },
+      position,
+      style: {
+        width: groupWidth,
+        height: groupHeight,
+        backgroundColor: 'rgba(240, 240, 240, 0.5)',
+        border: '1px dashed #777',
+        borderRadius: '8px',
+        padding: '20px',
+        zIndex: -1,
+      },
+      selectable: true,
+      draggable: true,
+    };
+
+    const groupNode = newNode as Node<NodeData>;
+    setNodes((nds) => [...nds, groupNode]);
+    setNewNodeLabel('');
+    setIsDialogOpen(false);
+  };
+
+  useEffect(() => {
+    setNodes((nds) =>
+      nds.map((node) => {
+        if (node.data?.isGroup) {
+          return {
+            ...node,
+            style: {
+              ...node.style,
+              zIndex: -1,
+            },
+            draggable: true,
+          };
+        }
+        return node;
+      }),
+    );
+  }, []);
+
+  const handleAddNode = (type: string, color: string) => {
+    const nodeInfo = nodeTypes[type as keyof NodeTypes];
+    const position = findCenterPosition();
+
+    const newNode = {
+      id: `${type}-${Date.now()}`,
+      type,
+      data: { label: `New ${nodeInfo.label}` },
+      position,
+      draggable: true,
+      style: {
+        background: color,
+        border: '1px solid #777',
+        borderRadius: '8px',
+        padding: '10px',
+        width: 130,
+      },
+    };
+    setNodes((nds) => [...nds, newNode as Node<NodeData>]);
+  };
+
+  const handleAddChildNode = (parentId: string) => {
+    const parent = nodes.find((node) => node.id === parentId);
+    if (!parent || !parent.data?.isGroup) return;
+
+    // Calculate position relative to parent
+    const childPosition = {
+      x: parent.position.x + 50,
+      y: parent.position.y + 50,
+    };
+
+    const newNode = {
+      id: `service-${Date.now()}`,
+      type: 'service',
+      data: {
+        label: 'New Service',
+        parentId: parentId,
+      },
+      position: childPosition,
+      draggable: true,
+      style: {
+        background: nodeColors.blue,
+        border: '1px solid #777',
+        borderRadius: '8px',
+        padding: '10px',
+        width: 130,
+      },
+    };
+
+    setNodes((nds) => [...nds, newNode as Node<NodeData>]);
+    setIsDialogOpen(false);
+  };
+
+  const handleUpdateLabel = () => {
+    if (!selectedNode) return;
+
+    setNodes((nds) =>
+      nds.map((node) =>
+        node.id === selectedNode.id
+          ? { ...node, data: { ...node.data, label: newNodeLabel } }
+          : node,
+      ),
+    );
+    setIsDialogOpen(false);
+  };
+
+  const onEdgeClick = useCallback(
+    (event: React.MouseEvent, edge: Edge<EdgeData>) => {
+      event.preventDefault();
+      if (event.shiftKey) {
+        // Toggle animation when clicking with shift key
+        toggleEdgeAnimation(edge.id);
+        return;
+      }
+      setSelectedEdge(edge);
+      setEdgeLabel(String(edge.label || edge.data?.label || ''));
+      setIsEdgeAnimated(!!edge.animated);
+    },
+    [toggleEdgeAnimation],
+  );
+
+  const handleEdgeUpdate = useCallback(() => {
+    if (!selectedEdge) return;
+
+    setEdges((eds) =>
+      eds.map((edge) => {
+        if (edge.id === selectedEdge.id) {
+          const updatedEdge = {
+            ...edge,
+            label: edgeLabel || '',
+            data: {
+              ...edge.data,
+              label: edgeLabel || '',
+            } as EdgeData,
+            style: {
+              ...(edge.animated ? animatedEdgeStyle.style : edgeStyles.style),
+            },
+            labelStyle: {
+              ...defaultEdgeStyle.labelStyle,
+              display: edgeLabel ? 'block' : 'none',
+            },
+            labelBgStyle: defaultEdgeStyle.labelBgStyle,
+          };
+          return updatedEdge;
+        }
+        return edge;
+      }),
+    );
+    setSelectedEdge(null);
+    setEdgeLabel('');
+  }, [selectedEdge, edgeLabel]);
+
+  const handleLoadTemplate = useCallback((templateType: string) => {
+    let template;
+    switch (templateType) {
+      case 'microservices':
+        template = microservicesTemplate;
+        break;
+      case 'three-tier':
+        template = threeTierTemplate;
+        break;
+      case 'event-driven':
+        template = eventDrivenTemplate;
+        break;
+      default:
+        return;
+    }
+    setNodes(template.nodes as Node<NodeData>[]);
+    setEdges(template.edges as Edge<EdgeData>[]);
+  }, []);
+
+  // Handle undo
+  const handleUndo = useCallback(() => {
+    if (historyIndex > 0) {
+      const newIndex = historyIndex - 1;
+      const previousState = history[newIndex];
+      setNodes(previousState.nodes);
+      setEdges(previousState.edges);
+      setHistoryIndex(newIndex);
+    }
+  }, [history, historyIndex]);
+
+  // Handle redo
+  const handleRedo = useCallback(() => {
+    if (historyIndex < history.length - 1) {
+      const newIndex = historyIndex + 1;
+      const nextState = history[newIndex];
+      setNodes(nextState.nodes);
+      setEdges(nextState.edges);
+      setHistoryIndex(newIndex);
+    }
+  }, [history, historyIndex]);
+
+  // Export diagram
+  const exportDiagram = useCallback(() => {
+    const diagramData = {
+      nodes,
+      edges,
+    };
+    const dataStr = JSON.stringify(diagramData, null, 2);
+    const dataUri =
+      'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr);
+    const exportFileDefaultName = 'diagram.json';
+
+    const linkElement = document.createElement('a');
+    linkElement.setAttribute('href', dataUri);
+    linkElement.setAttribute('download', exportFileDefaultName);
+    linkElement.click();
+  }, [nodes, edges]);
+
+  // Import diagram
+  const importDiagram = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          try {
+            const content = e.target?.result as string;
+            const { nodes: importedNodes, edges: importedEdges } =
+              JSON.parse(content);
+            setNodes(importedNodes);
+            setEdges(importedEdges);
+            // Add to history
+            const newHistory = history.slice(0, historyIndex + 1);
+            newHistory.push({ nodes: importedNodes, edges: importedEdges });
+            setHistory(newHistory);
+            setHistoryIndex(newHistory.length - 1);
+          } catch (error) {
+            console.error('Error importing diagram:', error);
+          }
+        };
+        reader.readAsText(file);
+      }
+    },
+    [history, historyIndex],
+  );
+
+  // Update history when nodes or edges change
+  useEffect(() => {
+    const currentState = { nodes, edges };
+    if (
+      JSON.stringify(currentState) !==
+      JSON.stringify(history[history.length - 1])
+    ) {
+      const newHistory = history.slice(0, historyIndex + 1);
+      newHistory.push(currentState);
+      setHistory(newHistory);
+      setHistoryIndex(newHistory.length - 1);
+    }
+  }, [nodes, edges]);
+
+  const handleClickAway = () => {
+    setIsDialogOpen(false);
+    setSelectedNode(null);
+    setSelectedEdge(null);
+    setEdgeLabel('');
+  };
+
+  // Add handler for diagram pane clicks
+  const handlePaneClick = useCallback(() => {
+    handleClickAway();
+  }, []);
+
+  return (
+    <div style={{ width: '100vw', height: '100vh' }}>
+      <ReactFlow<Node<NodeData>, Edge<EdgeData>>
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        onNodeClick={onNodeClick}
+        onEdgeClick={onEdgeClick}
+        onPaneClick={handlePaneClick}
+        onDragOver={onDragOver}
+        className="react-flow-subflows-example"
+        fitView
+        minZoom={0.2}
+        maxZoom={1.5}
+        defaultEdgeOptions={{
+          type: 'smoothstep',
+          animated: false,
+          style: edgeStyles,
+        }}
+        nodesDraggable={true}
+        nodesConnectable={true}
+        elementsSelectable={true}
+        edgesFocusable={true}
+        onInit={() => setIsInitialized(true)}
+      >
+        <Panel position="top-left">
+          <Box sx={{ display: 'flex', gap: 2, alignItems: 'flex-start' }}>
+            <ArchDiagramControls
+              onAddNode={handleAddNode}
+              onAddGroup={handleAddGroupNode}
+              onUndo={handleUndo}
+              onRedo={handleRedo}
+              canUndo={historyIndex > 0}
+              canRedo={historyIndex < history.length - 1}
+              onLoadTemplate={handleLoadTemplate}
+            />
+          </Box>
+        </Panel>
+
+        {/* Edge Settings */}
+        {selectedEdge && (
+          <ClickAwayListener
+            onClickAway={handleClickAway}
+            mouseEvent="onMouseDown"
+            touchEvent="onTouchStart"
+          >
+            <EdgeSettings
+              selectedEdge={selectedEdge}
+              edgeLabel={edgeLabel}
+              onEdgeLabelChange={setEdgeLabel}
+              onEdgeUpdate={handleEdgeUpdate}
+              isAnimated={isEdgeAnimated}
+              onAnimationToggle={(checked) => {
+                setIsEdgeAnimated(checked);
+                if (selectedEdge) {
+                  toggleEdgeAnimation(selectedEdge.id);
+                }
+              }}
+            />
+          </ClickAwayListener>
+        )}
+
+        {/* Add GroupSizeDialog */}
+        <GroupSizeDialog
+          selectedNode={selectedNode}
+          groupWidth={groupWidth}
+          groupHeight={groupHeight}
+          onGroupSizeChange={handleGroupSizeChange}
+        />
+
+        <Panel position="bottom-right">
+          <Paper
+            elevation={3}
+            sx={{
+              p: 1.5,
+              borderRadius: 2,
+              bgcolor: 'background.paper',
+              maxWidth: '480px',
+            }}
+          >
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'row',
+                gap: 1,
+                justifyContent: 'space-between',
+              }}
+            >
+              <Button
+                variant="contained"
+                color="primary"
+                size="small"
+                onClick={() => {
+                  const clearedState = { nodes: [], edges: [] };
+                  const newHistory = history.slice(0, historyIndex + 1);
+                  newHistory.push(clearedState);
+                  setNodes([]);
+                  setEdges([]);
+                  setHistory(newHistory);
+                  setHistoryIndex(newHistory.length - 1);
+                }}
+              >
+                Clear
+              </Button>
+
+              <Box sx={{ display: 'flex', gap: 1 }}>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  size="small"
+                  startIcon={<UndoIcon />}
+                  onClick={handleUndo}
+                  disabled={historyIndex <= 0}
+                  sx={{
+                    minWidth: '40px',
+                    px: 1,
+                  }}
+                >
+                  Undo
+                </Button>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  size="small"
+                  startIcon={<RedoIcon />}
+                  onClick={handleRedo}
+                  disabled={historyIndex >= history.length - 1}
+                  sx={{
+                    minWidth: '40px',
+                    px: 1,
+                  }}
+                >
+                  Redo
+                </Button>
+              </Box>
+
+              <Box sx={{ display: 'flex', gap: 1 }}>
+                <Button
+                  variant="outlined"
+                  size="small"
+                  onClick={exportDiagram}
+                  startIcon={<DownloadIcon />}
+                  sx={{
+                    minWidth: '40px',
+                    px: 1,
+                  }}
+                >
+                  Export
+                </Button>
+                <Button
+                  variant="outlined"
+                  component="label"
+                  size="small"
+                  startIcon={<UploadIcon />}
+                  sx={{
+                    minWidth: '40px',
+                    px: 1,
+                  }}
+                >
+                  Import
+                  <input
+                    type="file"
+                    onChange={importDiagram}
+                    accept=".json"
+                    style={{ display: 'none' }}
+                  />
+                </Button>
+              </Box>
+            </Box>
+          </Paper>
+        </Panel>
+
+        <Controls />
+        <Background color="#E6E6E6" gap={16} />
+      </ReactFlow>
+
+      {/* Node Dialog with ClickAwayListener */}
+      {isDialogOpen && (
+        <ClickAwayListener
+          onClickAway={handleClickAway}
+          mouseEvent="onMouseDown"
+          touchEvent="onTouchStart"
+        >
+          <NodeDialog
+            open={isDialogOpen}
+            onClose={() => setIsDialogOpen(false)}
+            selectedNode={selectedNode}
+            newNodeType={newNodeType}
+            newNodeLabel={newNodeLabel}
+            selectedColor={selectedColor}
+            nodeTypes={nodeTypes}
+            colorOptions={[
+              { 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 },
+            ]}
+            onNodeTypeChange={setNewNodeType}
+            onColorChange={setSelectedColor}
+            onLabelChange={setNewNodeLabel}
+            onAddNode={() =>
+              handleAddNode(
+                newNodeType,
+                nodeColors[selectedColor as keyof typeof nodeColors],
+              )
+            }
+            onUpdateLabel={handleUpdateLabel}
+            onAddChildNode={handleAddChildNode}
+          />
+        </ClickAwayListener>
+      )}
+    </div>
+  );
+};
+
+const ArchDiagram = (props: {
+  archNodes: Node<NodeData>[];
+  archEdges: Edge<EdgeData>[];
+}) => {
+  return (
+    <ReactFlowProvider>
+      <ArchDiagramInner {...props} />
+    </ReactFlowProvider>
+  );
+};
+
+export default ArchDiagram;