@flowuent-org/diagramming-core 1.0.5

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

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