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

package/src/dagre-layout/rank/feasible-tree.ts

@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { LayoutEdge } from '../type';
+import { LayoutGraph } from '../graph';
+
+/**
+ * 计算边的松弛度
+ */
+const calculateSlack = (graph: LayoutGraph, edge: LayoutEdge): number => {
+  const sourceNode = graph.getNode(edge.from);
+  const targetNode = graph.getNode(edge.to);
+  if (!sourceNode || !targetNode) {
+    return Number.POSITIVE_INFINITY;
+  }
+  return targetNode.rank - sourceNode.rank - (edge.minlen || 1);
+};
+
+/**
+ * 深度优先搜索构建紧致树
+ */
+const dfs = (graph: LayoutGraph, tightTree: LayoutGraph, nodeId: string): void => {
+  const edges = graph.edges.filter((e) => e.from === nodeId || e.to === nodeId);
+  edges.forEach((edge) => {
+    const neighborId = edge.from === nodeId ? edge.to : edge.from;
+    if (!tightTree.hasNode(neighborId) && calculateSlack(graph, edge) === 0) {
+      const neighborNode = graph.getNode(neighborId);
+      if (neighborNode) {
+        tightTree.addLayoutNode({ ...neighborNode });
+        tightTree.addLayoutEdge({ ...edge });
+        dfs(graph, tightTree, neighborId);
+      }
+    }
+  });
+};
+
+/**
+ * 构建最大紧致树
+ */
+const buildTightTree = (graph: LayoutGraph, tightTree: LayoutGraph): number => {
+  tightTree.nodes.forEach((node) => dfs(graph, tightTree, node.id));
+  return tightTree.nodes.length;
+};
+
+/**
+ * 找到具有最小松弛度的边
+ */
+const findMinSlackEdge = (graph: LayoutGraph, tightTree: LayoutGraph): LayoutEdge | undefined => {
+  let minSlack = Number.POSITIVE_INFINITY;
+  let minSlackEdge: LayoutEdge | undefined;
+
+  graph.edges.forEach((edge) => {
+    const hasSource = tightTree.hasNode(edge.from);
+    const hasTarget = tightTree.hasNode(edge.to);
+    if (hasSource !== hasTarget) {
+      const slack = calculateSlack(graph, edge);
+      if (slack < minSlack) {
+        minSlack = slack;
+        minSlackEdge = edge;
+      }
+    }
+  });
+
+  return minSlackEdge;
+};
+
+/**
+ * 调整rank值
+ */
+const shiftRanks = (graph: LayoutGraph, tightTree: LayoutGraph, delta: number): void => {
+  tightTree.nodes.forEach((node) => {
+    const graphNode = graph.getNode(node.id);
+    if (graphNode) {
+      graphNode.rank += delta;
+    }
+  });
+};
+
+/**
+ * 构建紧致生成树
+ */
+export const feasibleTree = (graph: LayoutGraph): LayoutGraph => {
+  const tightTree = new LayoutGraph();
+
+  // 选择任意节点作为起始节点
+  const startNode = graph.nodes[0];
+  tightTree.addLayoutNode({ ...startNode });
+
+  while (buildTightTree(graph, tightTree) < graph.nodes.length) {
+    const minSlackEdge = findMinSlackEdge(graph, tightTree);
+    if (minSlackEdge) {
+      const delta = tightTree.hasNode(minSlackEdge.from)
+        ? calculateSlack(graph, minSlackEdge)
+        : -calculateSlack(graph, minSlackEdge);
+      shiftRanks(graph, tightTree, delta);
+    }
+  }
+
+  return tightTree;
+};

package/src/dagre-layout/rank/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { feasibleTree } from './feasible-tree';
+export { longestPath } from './longest-path';
+export { networkSimplex } from './network-simplex';
+export { normalizeRanks } from './normalize-ranks';

package/src/dagre-layout/rank/longest-path.ts

@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { LayoutGraph } from '../graph';
+
+/**
+ * 计算图中节点的最长路径
+ */
+export const longestPath = (graph: LayoutGraph): LayoutGraph => {
+  // 用于记录已访问的节点
+  const visited: Record<string, boolean> = {};
+
+  /**
+   * 深度优先搜索计算节点的层级
+   * @param nodeId 当前节点ID
+   * @returns 计算得到的层级
+   */
+  const dfs = (nodeId: string): number => {
+    const node = graph.getNode(nodeId);
+
+    // 如果节点不存在，返回 -1
+    if (!node) {
+      return -1;
+    }
+
+    // 如果节点已访问且已经计算过rank，直接返回其rank
+    if (visited[nodeId] && node.rank !== -1) {
+      return node.rank;
+    }
+
+    // 标记节点为已访问
+    visited[nodeId] = true;
+
+    // 获取所有以当前节点为起点的边
+    const outgoingEdges = graph.edges.filter((edge) => edge.from === nodeId);
+
+    // 如果没有出边，说明是叶子节点，rank为0
+    if (outgoingEdges.length === 0) {
+      node.rank = 0;
+      return 0;
+    }
+
+    // 计算所有子节点的最大rank
+    let maxChildRank = -1;
+    outgoingEdges.forEach((edge) => {
+      const childRank = dfs(edge.to);
+      const minlen = edge.minlen || 1; // 使用默认最小长度1，如果未指定
+      maxChildRank = Math.max(maxChildRank, childRank + minlen);
+    });
+
+    // 当前节点的rank为子节点最大rank + 1
+    node.rank = maxChildRank;
+    return node.rank;
+  };
+
+  // 从每个没有入边的节点（源节点）开始DFS
+  const sourceNodes = graph.nodes.filter(
+    (node) => !graph.edges.some((edge) => edge.to === node.id)
+  );
+
+  sourceNodes.forEach((node) => dfs(node.id));
+
+  // 确保所有节点都被访问到
+  graph.nodes.forEach((node) => {
+    if (node.rank === -1) {
+      dfs(node.id);
+    }
+  });
+
+  // 反转rank值，使得源节点的rank最小
+  const maxRank = Math.max(...graph.nodes.map((node) => node.rank));
+  graph.nodes.forEach((node) => {
+    node.rank = maxRank - node.rank;
+  });
+
+  return graph;
+};

package/src/dagre-layout/rank/network-simplex.ts

@@ -0,0 +1,235 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { LayoutEdge, LayoutNode } from '../type';
+import { LayoutGraph } from '../graph';
+import { longestPath } from './longest-path';
+import { feasibleTree } from './feasible-tree';
+
+/**
+ * 网络单纯形
+ * 参考 https://github.com/dagrejs/dagre/blob/master/lib/rank/network-simplex.js
+ */
+export const networkSimplex = (g: LayoutGraph): LayoutGraph => {
+  longestPath(g); // 初始化层级
+  const t = feasibleTree(g); // 构建紧致生成树
+  initLowLimValues(t);
+  initCutValues(t, g);
+
+  let e: LayoutEdge | undefined;
+  while ((e = leaveEdge(t))) {
+    const f = enterEdge(t, g, e);
+    if (f) {
+      exchangeEdges(t, g, e, f);
+    }
+  }
+  return g;
+};
+
+const initLowLimValues = (t: LayoutGraph): void => {
+  const root = t.nodes[0];
+  if (root) {
+    dfsAssignLowLim(t, new Map<string, boolean>(), { nextLim: 1 }, root.id);
+  }
+};
+
+const dfsAssignLowLim = (
+  t: LayoutGraph,
+  visited: Map<string, boolean>,
+  state: { nextLim: number },
+  v: string,
+  parent?: string
+): void => {
+  const node = t.getNode(v);
+  if (!node) return;
+
+  const low = state.nextLim;
+  visited.set(v, true);
+
+  t.edges
+    .filter((e) => e.from === v || e.to === v)
+    .forEach((e) => {
+      const w = e.from === v ? e.to : e.from;
+      if (!visited.get(w)) {
+        dfsAssignLowLim(t, visited, state, w, v);
+      }
+    });
+
+  node.low = low;
+  node.lim = state.nextLim++;
+  if (parent) {
+    node.parent = parent;
+  } else {
+    delete node.parent;
+  }
+};
+
+const initCutValues = (t: LayoutGraph, g: LayoutGraph): void => {
+  const vs = postorder(t);
+  vs.slice(0, -1).forEach((v) => assignCutValue(t, g, v));
+};
+
+const postorder = (t: LayoutGraph): string[] => {
+  const visited = new Set<string>();
+  const result: string[] = [];
+
+  const dfs = (nodeId: string): void => {
+    const node = t.getNode(nodeId);
+    if (!node || visited.has(nodeId)) return;
+
+    visited.add(nodeId);
+
+    t.edges
+      .filter((e) => e.from === nodeId || e.to === nodeId)
+      .forEach((e) => {
+        const neighborId = e.from === nodeId ? e.to : e.from;
+        dfs(neighborId);
+      });
+
+    result.push(nodeId);
+  };
+
+  t.nodes.forEach((node) => dfs(node.id));
+  return result;
+};
+
+const assignCutValue = (t: LayoutGraph, g: LayoutGraph, childId: string): void => {
+  const child = t.getNode(childId);
+  if (!child || !child.parent) return;
+
+  const edge = t.edges.find((e) => e.from === childId && e.to === child.parent);
+  if (edge) {
+    edge.cutvalue = calcCutValue(t, g, childId);
+  }
+};
+
+const calcCutValue = (t: LayoutGraph, g: LayoutGraph, childId: string): number => {
+  const child = t.getNode(childId);
+  if (!child || !child.parent) return 0;
+
+  let cutValue = 0;
+  const graphEdge = g.edges.find(
+    (e) =>
+      (e.from === childId && e.to === child.parent) || (e.from === child.parent && e.to === childId)
+  );
+
+  if (graphEdge) {
+    cutValue = graphEdge.weight || 0;
+  }
+
+  g.edges
+    .filter((e) => e.from === childId || e.to === childId)
+    .forEach((e) => {
+      const otherId = e.from === childId ? e.to : e.from;
+      if (otherId !== child.parent) {
+        const otherWeight = e.weight || 0;
+        cutValue += e.from === childId ? otherWeight : -otherWeight;
+        if (isTreeEdge(t, childId, otherId)) {
+          const treeEdge = t.edges.find(
+            (te) =>
+              (te.from === childId && te.to === otherId) ||
+              (te.from === otherId && te.to === childId)
+          );
+          if (treeEdge && treeEdge.cutvalue !== undefined) {
+            cutValue += e.from === childId ? -treeEdge.cutvalue : treeEdge.cutvalue;
+          }
+        }
+      }
+    });
+
+  return cutValue;
+};
+
+const isTreeEdge = (t: LayoutGraph, u: string, v: string): boolean =>
+  t.edges.some((e) => (e.from === u && e.to === v) || (e.from === v && e.to === u));
+
+const leaveEdge = (t: LayoutGraph): LayoutEdge | undefined =>
+  t.edges.find((e) => (e.cutvalue || 0) < 0);
+
+const enterEdge = (t: LayoutGraph, g: LayoutGraph, edge: LayoutEdge): LayoutEdge | undefined => {
+  const vLabel = t.getNode(edge.from);
+  const wLabel = t.getNode(edge.to);
+  if (!vLabel || !wLabel) return undefined;
+
+  const tailLabel = vLabel.lim! > wLabel.lim! ? wLabel : vLabel;
+  const flip = tailLabel === wLabel;
+
+  const candidates = g.edges.filter((e) => {
+    const vNode = t.getNode(e.from);
+    const wNode = t.getNode(e.to);
+    return (
+      vNode &&
+      wNode &&
+      flip === isDescendant(t, vNode, tailLabel) &&
+      flip !== isDescendant(t, wNode, tailLabel)
+    );
+  });
+
+  return candidates.reduce((acc, e) => {
+    if (slack(g, e) < slack(g, acc)) {
+      return e;
+    }
+    return acc;
+  });
+};
+
+const isDescendant = (t: LayoutGraph, vLabel: LayoutNode, rootLabel: LayoutNode): boolean =>
+  (rootLabel.low || 0) <= (vLabel.lim || 0) && (vLabel.lim || 0) <= (rootLabel.lim || 0);
+
+const slack = (g: LayoutGraph, edge: LayoutEdge): number => {
+  const source = g.getNode(edge.from);
+  const target = g.getNode(edge.to);
+  if (!source || !target) return Number.POSITIVE_INFINITY;
+  return Math.abs(target.rank - source.rank) - (edge.minlen || 1);
+};
+
+const exchangeEdges = (t: LayoutGraph, g: LayoutGraph, e: LayoutEdge, f: LayoutEdge): void => {
+  t.removeEdge(e.id);
+  t.addLayoutEdge(f);
+  initLowLimValues(t);
+  initCutValues(t, g);
+  updateRanks(t, g);
+};
+
+const updateRanks = (t: LayoutGraph, g: LayoutGraph): void => {
+  const root = t.nodes.find((v) => !v.parent);
+  if (!root) return;
+
+  const vs = preorder(t, root.id);
+  vs.slice(1).forEach((v) => {
+    const node = t.getNode(v);
+    const parent = t.getNode(node?.parent || '');
+    if (!node || !parent) return;
+
+    const edge = g.edges.find(
+      (e) => (e.from === v && e.to === node.parent) || (e.from === node.parent && e.to === v)
+    );
+    if (!edge) return;
+
+    const flipped = edge.from === node.parent;
+    node.rank = parent.rank + (flipped ? edge.minlen || 1 : -(edge.minlen || 1));
+  });
+};
+
+const preorder = (t: LayoutGraph, root: string): string[] => {
+  const result: string[] = [];
+  const visited = new Set<string>();
+
+  const dfs = (nodeId: string): void => {
+    if (visited.has(nodeId)) return;
+    visited.add(nodeId);
+    result.push(nodeId);
+
+    t.edges
+      .filter((e) => e.from === nodeId || e.to === nodeId)
+      .forEach((e) => {
+        const neighborId = e.from === nodeId ? e.to : e.from;
+        dfs(neighborId);
+      });
+  };
+
+  dfs(root);
+  return result;
+};

package/src/dagre-layout/rank/normalize-ranks.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { LayoutGraph } from '../graph';
+
+export const normalizeRanks = (graph: LayoutGraph): LayoutGraph => {
+  // 获取所有节点的 rank 值
+  const nodeRanks: number[] = graph.nodes.map((node) => {
+    const rank: number = node.rank;
+    return rank === -1 ? Number.MAX_VALUE : rank;
+  });
+
+  // 找出最小的 rank 值
+  const minRank: number = Math.min(...nodeRanks);
+
+  // 调整所有节点的 rank 值
+  graph.nodes.forEach((node) => {
+    if (node.rank !== -1) {
+      node.rank -= minRank;
+    }
+  });
+
+  return graph;
+};

package/src/dagre-layout/type.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { WorkflowNodeEntity } from '@flowgram-vue/free-layout-core';
+
+export interface LayoutNode {
+  id: string;
+  node: WorkflowNodeEntity;
+  /** 层级 */
+  rank: number;
+  /** 同层级索引 */
+  order: number;
+  /** 位置 */
+  position: {
+    x: number;
+    y: number;
+  };
+  /** 宽高 */
+  size: {
+    width: number;
+    height: number;
+  };
+  low?: number;
+  lim?: number;
+  parent?: string;
+}
+
+export interface LayoutEdge {
+  id: string;
+  from: string;
+  to: string;
+
+  cutvalue?: number;
+  minlen?: number;
+  weight?: number;
+}
+
+export interface ILayoutGraph {
+  nodes: LayoutNode[];
+  edges: LayoutEdge[];
+}

package/src/dagre-lib/acyclic.js

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+'use strict';
+
+import greedyFAS from './greedy-fas';
+import { uniqueId } from './util';
+
+export const acyclic = {
+  run,
+  undo,
+};
+
+export default acyclic;
+
+function run(g) {
+  let fas = g.graph().acyclicer === 'greedy' ? greedyFAS(g, weightFn(g)) : dfsFAS(g);
+  fas.forEach((e) => {
+    let label = g.edge(e);
+    g.removeEdge(e);
+    label.forwardName = e.name;
+    label.reversed = true;
+    g.setEdge(e.w, e.v, label, uniqueId('rev'));
+  });
+
+  function weightFn(g) {
+    return (e) => {
+      return g.edge(e).weight;
+    };
+  }
+}
+
+function dfsFAS(g) {
+  let fas = [];
+  let stack = {};
+  let visited = {};
+
+  function dfs(v) {
+    if (Object.hasOwn(visited, v)) {
+      return;
+    }
+    visited[v] = true;
+    stack[v] = true;
+    g.outEdges(v).forEach((e) => {
+      if (Object.hasOwn(stack, e.w)) {
+        fas.push(e);
+      } else {
+        dfs(e.w);
+      }
+    });
+    delete stack[v];
+  }
+
+  g.nodes().forEach(dfs);
+  return fas;
+}
+
+function undo(g) {
+  g.edges().forEach((e) => {
+    let label = g.edge(e);
+    if (label.reversed) {
+      g.removeEdge(e);
+
+      let forwardName = label.forwardName;
+      delete label.reversed;
+      delete label.forwardName;
+      g.setEdge(e.w, e.v, label, forwardName);
+    }
+  });
+}

package/src/dagre-lib/add-border-segments.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { util } from './util';
+
+export { addBorderSegments };
+export default addBorderSegments;
+
+function addBorderSegments(g) {
+  function dfs(v) {
+    let children = g.children(v);
+    let node = g.node(v);
+    if (children.length) {
+      children.forEach(dfs);
+    }
+
+    if (Object.hasOwn(node, 'minRank')) {
+      node.borderLeft = [];
+      node.borderRight = [];
+      for (let rank = node.minRank, maxRank = node.maxRank + 1; rank < maxRank; ++rank) {
+        addBorderNode(g, 'borderLeft', '_bl', v, node, rank);
+        addBorderNode(g, 'borderRight', '_br', v, node, rank);
+      }
+    }
+  }
+
+  g.children().forEach(dfs);
+}
+
+function addBorderNode(g, prop, prefix, sg, sgNode, rank) {
+  let label = { width: 0, height: 0, rank: rank, borderType: prop };
+  let prev = sgNode[prop][rank - 1];
+  let curr = util.addDummyNode(g, 'border', label, prefix);
+  sgNode[prop][rank] = curr;
+  g.setParent(curr, sg);
+  if (prev) {
+    g.setEdge(prev, curr, { weight: 1 });
+  }
+}

package/src/dagre-lib/coordinate-system.js

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+'use strict';
+
+export const coordinateSystem = {
+  adjust,
+  undo,
+};
+
+export default coordinateSystem;
+
+function adjust(g) {
+  let rankDir = g.graph().rankdir.toLowerCase();
+  if (rankDir === 'lr' || rankDir === 'rl') {
+    swapWidthHeight(g);
+  }
+}
+
+function undo(g) {
+  let rankDir = g.graph().rankdir.toLowerCase();
+  if (rankDir === 'bt' || rankDir === 'rl') {
+    reverseY(g);
+  }
+
+  if (rankDir === 'lr' || rankDir === 'rl') {
+    swapXY(g);
+    swapWidthHeight(g);
+  }
+}
+
+function swapWidthHeight(g) {
+  g.nodes().forEach((v) => swapWidthHeightOne(g.node(v)));
+  g.edges().forEach((e) => swapWidthHeightOne(g.edge(e)));
+}
+
+function swapWidthHeightOne(attrs) {
+  let w = attrs.width;
+  attrs.width = attrs.height;
+  attrs.height = w;
+}
+
+function reverseY(g) {
+  g.nodes().forEach((v) => reverseYOne(g.node(v)));
+
+  g.edges().forEach((e) => {
+    let edge = g.edge(e);
+    edge.points.forEach(reverseYOne);
+    if (Object.hasOwn(edge, 'y')) {
+      reverseYOne(edge);
+    }
+  });
+}
+
+function reverseYOne(attrs) {
+  attrs.y = -attrs.y;
+}
+
+function swapXY(g) {
+  g.nodes().forEach((v) => swapXYOne(g.node(v)));
+
+  g.edges().forEach((e) => {
+    let edge = g.edge(e);
+    edge.points.forEach(swapXYOne);
+    if (Object.hasOwn(edge, 'x')) {
+      swapXYOne(edge);
+    }
+  });
+}
+
+function swapXYOne(attrs) {
+  let x = attrs.x;
+  attrs.x = attrs.y;
+  attrs.y = x;
+}