Feature: 高级编排自动布局 (#314)

* feat: adFlow auto layout

* chore: delete file and build pnpm lock file

client/package.json

@@ -21,6 +21,7 @@
     "axios": "^1.3.3",
     "cookie": "^0.5.0",
     "crypto": "^1.0.1",
+    "dagre": "^0.8.5",
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.7",
     "downloadjs": "^1.4.7",

client/src/pages/app/detail/components/AdEdit/index.tsx

@@ -8,10 +8,11 @@ import ReactFlow, {
   useEdgesState,
   XYPosition,
   Connection,
-  useViewport
+  useViewport,
+  useReactFlow
 } from 'reactflow';
-import { Box, Flex, IconButton, useTheme, useDisclosure } from '@chakra-ui/react';
-import { SmallCloseIcon } from '@chakra-ui/icons';
+import { Box, Flex, IconButton, useTheme, useDisclosure, Icon } from '@chakra-ui/react';
+import { RepeatIcon, SmallCloseIcon } from '@chakra-ui/icons';
 import {
   edgeOptions,
   connectionLineStyle,
@@ -35,6 +36,7 @@ import { useToast } from '@/hooks/useToast';
 import { useTranslation } from 'next-i18next';
 import { useCopyData } from '@/utils/tools';
 import dynamic from 'next/dynamic';
+import dagre from 'dagre';
 
 import MyIcon from '@/components/Icon';
 import ButtonEdge from './components/modules/ButtonEdge';
@@ -445,6 +447,8 @@ const AppEdit = ({ app, onCloseSettings }: Props) => {
     initData(JSON.parse(JSON.stringify(app.modules)));
   }, [app.modules]);
 
+  const reactFlowInstance = useReactFlow();
+
   return (
     <>
       {/* header */}
@@ -587,7 +591,51 @@ const AppEdit = ({ app, onCloseSettings }: Props) => {
           }}
         >
           <Background />
-          <Controls position={'bottom-right'} style={{ display: 'flex' }} showInteractive={false} />
+          <Controls position={'bottom-right'} style={{ display: 'flex' }} showInteractive={false}>
+            <button
+              className="react-flow__controls-button react-flow__controls-fitview"
+              onClick={() => {
+                var g = new dagre.graphlib.Graph();
+                g.setGraph({
+                  rankdir: 'LR',
+                  align: 'DL',
+                  graph: 'greedy',
+                  ranksep: 200,
+                  ranker: 'longest-path',
+                  nodesep: 300,
+                  edgesep: 100
+                });
+                g.setDefaultEdgeLabel(function () {
+                  return {};
+                });
+                reactFlowInstance.getNodes().forEach((node) => {
+                  g.setNode(node.id, node);
+                });
+                reactFlowInstance.getEdges().forEach((edge) => {
+                  g.setEdge(edge.source, edge.target);
+                });
+                const p = dagre.layout(g);
+                const newNodes = g.nodes().map(function (v) {
+                  const node = g.node(v);
+                  return {
+                    ...node,
+                    position: {
+                      x: node.x,
+                      y: node.y
+                    },
+                    x: undefined,
+                    y: undefined
+                  };
+                });
+                reactFlowInstance.setNodes(newNodes);
+                requestAnimationFrame(() => {
+                  reactFlowInstance.fitView();
+                });
+              }}
+            >
+              <Icon as={RepeatIcon} />
+            </button>
+          </Controls>
         </ReactFlow>
 
         <TemplateList