@flowuent-org/diagramming-core 1.3.9 → 1.4.0

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

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