蛇形修改bug。

src/hooks/vueflowHooks.ts

@@ -1,19 +1,80 @@
-import { paddingLeft } from "html2canvas/dist/types/css/property-descriptors/padding";
+import { MessagePlugin } from "tdesign-vue-next";
+
+export const isStraightFlow = (nodes: any[], edges: any[]) => {
+  let isSerial = false;
+  let message = "非标准直线型流程图";
+
+  // 如果nodes的数量小于1 说明没有节点 直接返回false
+  if (nodes && nodes.length < 2) {
+    return [isSerial, "节点数量少于2"];
+  }
+
+  // 如果edges的数量小于1 说明没有边 直接返回false
+  if (edges && edges.length < 1) {
+    return [isSerial, "边数量少于1"];
+  }
+
+  // 如果nodes的数量不等于edges的数量+1 说明没有完全连线或者是不是直线
+  if (nodes?.length !== edges?.length + 1) {
+    return [isSerial, message];
+  }
+
+  // 每一个边的源节点id组成一个set，如果set的数量和edges的数量不相等，说明不是标准直线型流程图
+  let sourceNodeIdsSet = new Set(
+    edges.map((edge) => {
+      return edge.source;
+    })
+  );
+  if (sourceNodeIdsSet.size !== edges.length) {
+    return [isSerial, message];
+  }
+
+  // 能到这里说明是直线
+  return [true, "是直线"];
+};
+
+// 按照edges的顺序重新给nodes排序
+export const sortNodesByEdges = (nodes: any[], edges: any[]) => {
+  // 先获取所有边的node的id
+  let edgeIds = [edges[0].sourceNode.id];
+  for (let i = 1; i < edges.length; i++) {
+    edgeIds.push(edges[i].targetNode.id);
+  }
+
+  // 创建一个ids到对应的索引的映射
+  const idIndexMap = edgeIds.reduce((map, id, index) => {
+    map[id] = index;
+    return map;
+  }, {});
+
+  // 根据ids数组中的顺序对对象数组进行排序
+  return nodes.sort((a, b) => {
+    return idIndexMap[a.id] - idIndexMap[b.id];
+  });
+};
 
 export const useSnakeLayoutHook = (
   nodes: any[],
-  canvasHeight: number = 100,
-  spacingY: number = 100,
+  edges: any[],
+  spacingY: number = 150,
   spacingX: number = 200
 ) => {
+  let [isStraight, msg] = isStraightFlow(nodes, edges);
+  if (!isStraight) {
+    MessagePlugin.warning(msg);
+    return nodes; //这里要返回nodes， 因为外面要用到
+  }
+
+  console.log("dddd", nodes, edges);
+
+  nodes = sortNodesByEdges(nodes, edges);
+
   const snakeNodes = [];
 
   // 内边距
   const paddingTop = 35;
   const paddingLeft = 15;
 
-  console.log("hook", nodes);
-
   // 这是每一个个列的数量  列数量
   const nodesPerColumn = 6; //Math.floor(canvasHeight / spacingY);
 

src/views/base/craftManagement/route/bindProcess.vue

@@ -667,7 +667,7 @@ async function layoutGraph(direction) {
 }
 // 转换为蛇形布局
 const convertToSnakeLayout = () => {
-  nodes.value = useSnakeLayoutHook(nodes.value);
+  nodes.value = useSnakeLayoutHook(nodes.value, edges.value);
   addHistory();
 };
 </script>