@flowgram-vue/free-auto-layout-plugin 0.2.0

package/src/dagre-layout/acyclic.ts

@@ -0,0 +1,129 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { LayoutGraph } from './graph';
+
+/**
+ * DFS去环算法
+ * @param graph 布局图实例
+ * @returns 反馈弧集（需要反转的边的ID数组）
+ */
+const dfsFAS = (graph: LayoutGraph): string[] => {
+  const visited: { [key: string]: boolean } = {};
+  const stack: { [key: string]: boolean } = {};
+  const fas: string[] = [];
+
+  /**
+   * DFS遍历
+   * @param nodeId 当前节点ID
+   */
+  const dfs = (nodeId: string): void => {
+    visited[nodeId] = true;
+    stack[nodeId] = true;
+
+    const outEdges = graph.edges.filter((edge) => edge.from === nodeId);
+    outEdges.forEach((edge) => {
+      if (!visited[edge.to]) {
+        dfs(edge.to);
+      } else if (stack[edge.to]) {
+        // 发现环，将该边添加到反馈弧集
+        fas.push(edge.id);
+      }
+    });
+
+    stack[nodeId] = false;
+  };
+
+  // 对每个未访问的节点进行DFS
+  graph.nodes.forEach((node) => {
+    if (!visited[node.id]) {
+      dfs(node.id);
+    }
+  });
+
+  return fas;
+};
+
+/**
+ * 贪心去环算法
+ * @param graph 布局图实例
+ * @returns 反馈弧集（需要反转的边的ID数组）
+ */
+const greedyFAS = (graph: LayoutGraph): string[] => {
+  const fas: string[] = [];
+  const nodeOrder: string[] = [];
+
+  // 计算节点的入度和出度
+  const inDegree: { [key: string]: number } = {};
+  const outDegree: { [key: string]: number } = {};
+
+  graph.nodes.forEach((node) => {
+    inDegree[node.id] = 0;
+    outDegree[node.id] = 0;
+  });
+
+  graph.edges.forEach((edge) => {
+    inDegree[edge.to]++;
+    outDegree[edge.from]++;
+  });
+
+  // 贪心选择节点
+  while (nodeOrder.length < graph.nodes.length) {
+    let maxDiff = -Infinity;
+    let bestNode: string | null = null;
+
+    graph.nodes.forEach((node) => {
+      if (!nodeOrder.includes(node.id)) {
+        const diff = outDegree[node.id] - inDegree[node.id];
+        if (diff > maxDiff) {
+          maxDiff = diff;
+          bestNode = node.id;
+        }
+      }
+    });
+
+    if (bestNode) {
+      nodeOrder.push(bestNode);
+      // 更新相邻节点的入度和出度
+      graph.edges.forEach((edge) => {
+        if (edge.from === bestNode) {
+          inDegree[edge.to]--;
+        }
+        if (edge.to === bestNode) {
+          outDegree[edge.from]--;
+        }
+      });
+    }
+  }
+
+  // 根据节点顺序确定需要反转的边
+  graph.edges.forEach((edge) => {
+    if (nodeOrder.indexOf(edge.from) > nodeOrder.indexOf(edge.to)) {
+      fas.push(edge.id);
+    }
+  });
+
+  return fas;
+};
+
+/**
+ * 去环
+ */
+export const acyclic = (graph: LayoutGraph, acyclicer: 'dfs' | 'greedy' = 'dfs'): LayoutGraph => {
+  // 使用DFS或贪心算法获取反馈弧集
+  const fas = acyclicer === 'dfs' ? dfsFAS(graph) : greedyFAS(graph);
+
+  // 反转反馈弧集中的边
+  fas.forEach((edgeId) => {
+    const edge = graph.edges.find((e) => e.id === edgeId);
+    if (edge) {
+      const { from, to } = edge;
+      graph.removeEdge(edgeId);
+      graph.addLayoutEdge({ id: edgeId, from: to, to: from });
+    }
+  });
+
+  return graph;
+};

package/src/dagre-layout/graph.ts

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { WorkflowLineEntity, WorkflowNodeEntity } from '@flowgram-vue/free-layout-core';
+import { TransformData } from '@flowgram-vue/core';
+
+import type { ILayoutGraph, LayoutEdge, LayoutNode } from './type';
+
+export class LayoutGraph implements ILayoutGraph {
+  public readonly store: {
+    nodes: Map<string, LayoutNode>;
+    edges: Map<string, LayoutEdge>;
+  } = {
+    nodes: new Map(),
+    edges: new Map(),
+  };
+
+  public get nodes(): LayoutNode[] {
+    return Array.from(this.store.nodes.values());
+  }
+
+  public get edges(): LayoutEdge[] {
+    return Array.from(this.store.edges.values());
+  }
+
+  public getNode(id: string): LayoutNode | undefined {
+    return this.store.nodes.get(id);
+  }
+
+  public hasNode(id: string): boolean {
+    return this.store.nodes.has(id);
+  }
+
+  public addNode(nodeEntity: WorkflowNodeEntity): LayoutNode {
+    const transform = nodeEntity.getData(TransformData);
+    const layoutNode: LayoutNode = {
+      id: nodeEntity.id,
+      node: nodeEntity,
+      rank: -1,
+      order: -1,
+      position: { x: transform.position.x, y: transform.position.y },
+      size: { width: transform.bounds.width, height: transform.bounds.height },
+    };
+    this.store.nodes.set(layoutNode.id, layoutNode);
+    return layoutNode;
+  }
+
+  public addLayoutNode(layoutNode: LayoutNode): void {
+    this.store.nodes.set(layoutNode.id, layoutNode);
+  }
+
+  public addEdge(edgeEntity: WorkflowLineEntity): LayoutEdge {
+    const layoutEdge: LayoutEdge = {
+      id: edgeEntity.id,
+      from: edgeEntity.from!.id,
+      to: edgeEntity.to!.id,
+    };
+    this.store.edges.set(layoutEdge.id, layoutEdge);
+    return layoutEdge;
+  }
+
+  public addLayoutEdge(layoutEdge: LayoutEdge): void {
+    this.store.edges.set(layoutEdge.id, layoutEdge);
+  }
+
+  public removeEdge(id: string): void {
+    this.store.edges.delete(id);
+  }
+}

package/src/dagre-layout/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './acyclic';
+export * from './rank';
+export * from './order';
+export * from './layout';

package/src/dagre-layout/layout.ts

@@ -0,0 +1,151 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  WorkflowLineEntity,
+  WorkflowNodeEntity,
+  WorkflowNodeLinesData,
+} from '@flowgram-vue/free-layout-core';
+import { TransformData } from '@flowgram-vue/core';
+
+import { LayoutNode } from './type';
+import { LayoutGraph } from './graph';
+import { acyclic, feasibleTree, longestPath, networkSimplex, normalizeRanks, order } from './';
+
+/**
+ * 布局算法
+ * 参考 dagre.js 的实现 https://github.com/dagrejs/dagre
+ */
+export namespace DagreLayout {
+  const getNextEdges = (node: WorkflowNodeEntity): WorkflowLineEntity[] => {
+    const linesData = node.getData<WorkflowNodeLinesData>(WorkflowNodeLinesData);
+    return linesData.outputLines.filter((line) => line.from && line.to);
+  };
+
+  const getPrevEdges = (node: WorkflowNodeEntity): WorkflowLineEntity[] => {
+    const linesData = node.getData<WorkflowNodeLinesData>(WorkflowNodeLinesData);
+    return linesData.inputLines.filter((line) => line.from && line.to);
+  };
+
+  /** 添加节点 */
+  const createData = (params: {
+    node: WorkflowNodeEntity;
+    depth: number;
+    graph: LayoutGraph;
+  }): LayoutGraph => {
+    const { node, depth, graph } = params;
+    if (graph.hasNode(node.id)) {
+      return graph;
+    }
+    graph.addNode(node);
+    const prevEdges = getPrevEdges(node);
+    const nextEdges = getNextEdges(node);
+    prevEdges.forEach((prevEdge) => {
+      graph.addEdge(prevEdge);
+      createData({ node: prevEdge.from!, depth: depth - 1, graph });
+    });
+    nextEdges.forEach((nextEdge) => {
+      graph.addEdge(nextEdge);
+      createData({ node: nextEdge.to!, depth: depth + 1, graph });
+    });
+    return graph;
+  };
+
+  // 定义一些常量
+  const NODE_SPACING = 100; // 同层级节点之间的垂直间距
+  const RANK_SPACING = 100; // 层级之间的水平间距
+
+  /** 计算图中所有节点的坐标 */
+  const calcCoordinates = (graph: LayoutGraph): LayoutGraph => {
+    // 按rank对节点进行分组
+    const rankGroups = groupNodesByRank(graph.nodes);
+
+    // 计算每个rank的最大高度
+    const rankHeights = calculateRankHeights(rankGroups);
+
+    // 计算每个节点的坐标
+    let currentX = 0;
+    rankGroups.forEach((nodesInRank, rank) => {
+      const rankHeight = rankHeights[rank];
+
+      nodesInRank.forEach((node) => {
+        // 计算X坐标
+        node.position.x = currentX + node.size.width / 2;
+
+        // 计算Y坐标
+        const totalHeightOfRank = nodesInRank.reduce((sum, n) => sum + n.size.height, 0);
+        const totalSpacing = (nodesInRank.length - 1) * NODE_SPACING;
+        const startY = (rankHeight - totalHeightOfRank - totalSpacing) / 2;
+
+        let currentY = startY;
+        for (let i = 0; i < node.order; i++) {
+          currentY += nodesInRank[i].size.height + NODE_SPACING;
+        }
+        node.position.y = currentY + node.size.height / 2;
+      });
+
+      // 更新X坐标为下一个rank的起始位置
+      currentX += rankHeight + RANK_SPACING;
+    });
+    return graph;
+  };
+
+  /** 按rank对节点进行分组 */
+  const groupNodesByRank = (nodes: LayoutNode[]): LayoutNode[][] => {
+    const groups: LayoutNode[][] = [];
+    nodes.forEach((node) => {
+      if (!groups[node.rank]) {
+        groups[node.rank] = [];
+      }
+      groups[node.rank].push(node);
+    });
+    return groups;
+  };
+
+  /** 计算每个rank的最大高度 */
+  const calculateRankHeights = (rankGroups: LayoutNode[][]): number[] =>
+    rankGroups.map((nodesInRank) => Math.max(...nodesInRank.map((node) => node.size.width)));
+
+  const positioning = (graph: LayoutGraph): LayoutGraph => {
+    graph.nodes.forEach((node) => {
+      const transform = node.node.getData(TransformData);
+      transform.update({
+        position: node.position,
+      });
+    });
+    return graph;
+  };
+
+  const rank = (
+    graph: LayoutGraph,
+    ranker: 'longest-path' | 'network-simplex' | 'tight-tree' = 'network-simplex'
+  ): LayoutGraph => {
+    if (ranker === 'longest-path') {
+      longestPath(graph);
+    } else if (ranker === 'network-simplex') {
+      networkSimplex(graph);
+    } else if (ranker === 'tight-tree') {
+      feasibleTree(graph);
+    }
+    return graph;
+  };
+
+  export const applyLayout = (graph: LayoutGraph): void => {
+    acyclic(graph); // 去环
+    rank(graph); // 分层
+    normalizeRanks(graph); // 归一化 rank 值
+    order(graph); // 重心法对同层级节点进行排序
+    calcCoordinates(graph); // 分配坐标
+    positioning(graph); // 应用布局
+  };
+
+  /** 创建布局图 */
+  export const createGraph = (node: WorkflowNodeEntity): LayoutGraph => {
+    const graph = new LayoutGraph();
+    createData({ node, depth: 0, graph });
+    applyLayout(graph);
+    return graph;
+  };
+}

package/src/dagre-layout/order.ts

@@ -0,0 +1,261 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { LayoutGraph } from './graph';
+
+// 辅助函数：获取图中的最大rank
+const getMaxRank = (graph: LayoutGraph): number =>
+  Math.max(...graph.nodes.map((node) => node.rank));
+
+// 辅助函数：根据rank构建层级图
+const buildLayerGraph = (
+  graph: LayoutGraph,
+  rank: number,
+  edgeType: 'inEdges' | 'outEdges'
+): LayoutGraph => {
+  const layerGraph = new LayoutGraph();
+
+  graph.nodes
+    .filter((node) => node.rank === rank)
+    .forEach((node) => {
+      layerGraph.addLayoutNode(node);
+    });
+
+  graph.edges.forEach((edge) => {
+    const sourceNode = graph.getNode(edge.from);
+    const targetNode = graph.getNode(edge.to);
+    if (!sourceNode || !targetNode) return;
+
+    if (edgeType === 'inEdges' && targetNode.rank === rank) {
+      layerGraph.addLayoutEdge(edge);
+    } else if (edgeType === 'outEdges' && sourceNode.rank === rank) {
+      layerGraph.addLayoutEdge(edge);
+    }
+  });
+
+  return layerGraph;
+};
+
+// 辅助函数：初始化order
+const initOrder = (graph: LayoutGraph): { [key: number]: string[] } => {
+  const layering: { [key: number]: string[] } = {};
+  graph.nodes.forEach((node) => {
+    if (!layering[node.rank]) {
+      layering[node.rank] = [];
+    }
+    layering[node.rank].push(node.id);
+  });
+  return layering;
+};
+
+// 辅助函数：分配order
+const assignOrder = (graph: LayoutGraph, layering: { [key: number]: string[] }): void => {
+  Object.entries(layering).forEach(([rank, layer]) => {
+    layer.forEach((nodeId, index) => {
+      const node = graph.getNode(nodeId);
+      if (node) {
+        node.order = index;
+      }
+    });
+  });
+};
+
+// 辅助函数：计算交叉数
+const crossCount = (graph: LayoutGraph, layering: { [key: number]: string[] }): number => {
+  let cc = 0;
+  const layers = Object.values(layering);
+
+  for (let i = 1; i < layers.length; i++) {
+    const northLayer = layers[i - 1];
+    const southLayer = layers[i];
+
+    for (let j = 0; j < northLayer.length; j++) {
+      for (let k = j + 1; k < northLayer.length; k++) {
+        const v = graph.getNode(northLayer[j]);
+        const w = graph.getNode(northLayer[k]);
+        if (!v || !w) continue;
+
+        // 获取v和w的南向邻居
+        const vNeighbors = graph.edges
+          .filter((e) => e.from === v.id)
+          .map((e) => graph.getNode(e.to));
+        const wNeighbors = graph.edges
+          .filter((e) => e.from === w.id)
+          .map((e) => graph.getNode(e.to));
+
+        for (const vNeighbor of vNeighbors) {
+          for (const wNeighbor of wNeighbors) {
+            if (!vNeighbor || !wNeighbor) continue;
+            if (southLayer.indexOf(vNeighbor.id) > southLayer.indexOf(wNeighbor.id)) {
+              cc++;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  return cc;
+};
+
+// 辅助函数：构建复合图
+const buildCompoundGraph = (): LayoutGraph => new LayoutGraph();
+
+// 辅助函数：添加子图约束
+const addSubgraphConstraints = (layerGraph: LayoutGraph, cg: LayoutGraph, vs: string[]): void => {
+  const prev: { [key: string]: string } = {};
+  let root = layerGraph.nodes[0]?.id;
+  vs.forEach((v) => {
+    let prevV = prev[root];
+    if (prevV) {
+      cg.addLayoutEdge({ id: `${prevV}-${v}`, from: prevV, to: v, weight: 0 });
+    }
+    prev[root] = v;
+  });
+};
+
+// 辅助函数：对子图进行排序
+const sortSubgraph = (
+  layerGraph: LayoutGraph,
+  root: string,
+  cg: LayoutGraph,
+  biasRight: boolean
+): { vs: string[] } => {
+  const vs: string[] = [];
+  const visited = new Set<string>();
+  const nodeData = new Map<string, { barycenter: number; weight: number }>();
+
+  const dfs = (v: string) => {
+    if (visited.has(v)) return;
+    visited.add(v);
+
+    let barycenter = 0;
+    let weight = 0;
+
+    const node = layerGraph.getNode(v);
+    if (node) {
+      const edges = biasRight
+        ? layerGraph.edges.filter((e) => e.to === v)
+        : layerGraph.edges.filter((e) => e.from === v);
+
+      edges.forEach((edge) => {
+        const w = biasRight ? edge.from : edge.to;
+        const otherNode = layerGraph.getNode(w);
+        if (otherNode) {
+          const edgeWeight = edge.weight || 1;
+          weight += edgeWeight;
+          barycenter += (otherNode.order || 0) * edgeWeight;
+        }
+      });
+
+      if (weight > 0) {
+        barycenter /= weight;
+      }
+    }
+
+    nodeData.set(v, { barycenter, weight });
+    vs.push(v);
+
+    const neighbors = layerGraph.edges
+      .filter((e) => e.from === v || e.to === v)
+      .map((e) => (e.from === v ? e.to : e.from));
+    neighbors.sort((a, b) => {
+      const nodeA = layerGraph.getNode(a);
+      const nodeB = layerGraph.getNode(b);
+      return (nodeA?.order || 0) - (nodeB?.order || 0);
+    });
+    neighbors.forEach(dfs);
+  };
+
+  dfs(root);
+
+  // 根据重心值和权重排序
+  vs.sort((a, b) => {
+    const aData = nodeData.get(a);
+    const bData = nodeData.get(b);
+    if (aData && bData) {
+      if (Math.abs(aData.barycenter - bData.barycenter) < 0.001) {
+        return bData.weight - aData.weight;
+      }
+      return aData.barycenter - bData.barycenter;
+    }
+    return 0;
+  });
+
+  return { vs };
+};
+
+// 新增：局部搜索优化
+const localSearch = (graph: LayoutGraph, layering: { [key: number]: string[] }): void => {
+  const ranks = Object.keys(layering).map(Number);
+  ranks.forEach((rank) => {
+    const layer = layering[rank];
+    for (let i = 0; i < layer.length - 1; i++) {
+      for (let j = i + 1; j < layer.length; j++) {
+        const currentCC = crossCount(graph, layering);
+        // 交换两个节点的位置
+        [layer[i], layer[j]] = [layer[j], layer[i]];
+        const newCC = crossCount(graph, layering);
+        // 如果交叉数增加，则恢复交换
+        if (newCC > currentCC) {
+          [layer[i], layer[j]] = [layer[j], layer[i]];
+        }
+      }
+    }
+  });
+};
+
+// 优化：sweepLayerGraphs 函数
+const sweepLayerGraphs = (layerGraphs: LayoutGraph[], biasRight: boolean): void => {
+  const cg = buildCompoundGraph();
+  layerGraphs.forEach((lg) => {
+    const root = lg.nodes[0]?.id;
+    if (root) {
+      const sorted = sortSubgraph(lg, root, cg, biasRight);
+      sorted.vs.forEach((v, i) => {
+        const node = lg.getNode(v);
+        if (node) {
+          node.order = i;
+        }
+      });
+      addSubgraphConstraints(lg, cg, sorted.vs);
+    }
+  });
+};
+
+// 更新主函数 order
+export const order = (graph: LayoutGraph): LayoutGraph => {
+  const maxRank = getMaxRank(graph);
+  const downLayerGraphs = Array.from({ length: maxRank + 1 }, (_, i) =>
+    buildLayerGraph(graph, i, 'inEdges')
+  );
+  const upLayerGraphs = Array.from({ length: maxRank + 1 }, (_, i) =>
+    buildLayerGraph(graph, maxRank - i, 'outEdges')
+  );
+
+  let layering = initOrder(graph);
+  assignOrder(graph, layering);
+
+  let bestCC = Number.POSITIVE_INFINITY;
+  let bestLayering = layering;
+
+  // 增加迭代次数
+  for (let i = 0, lastBest = 0; lastBest < 8; ++i, ++lastBest) {
+    sweepLayerGraphs(i % 2 ? downLayerGraphs : upLayerGraphs, i % 4 >= 2);
+
+    layering = initOrder(graph);
+    localSearch(graph, layering); // 应用局部搜索
+    const cc = crossCount(graph, layering);
+    if (cc < bestCC) {
+      lastBest = 0;
+      bestLayering = JSON.parse(JSON.stringify(layering));
+      bestCC = cc;
+    }
+  }
+
+  assignOrder(graph, bestLayering);
+
+  return graph;
+};