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

package/src/dagre-lib/util.js

@@ -0,0 +1,365 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/* eslint "no-console": off */
+
+'use strict';
+
+import { Graph } from '@dagrejs/graphlib';
+
+const util = {
+  addBorderNode,
+  addDummyNode,
+  applyWithChunking,
+  asNonCompoundGraph,
+  buildLayerMatrix,
+  intersectRect,
+  mapValues,
+  maxRank,
+  normalizeRanks,
+  notime,
+  partition,
+  pick,
+  predecessorWeights,
+  range,
+  removeEmptyRanks,
+  simplify,
+  successorWeights,
+  time,
+  uniqueId,
+  zipObject,
+};
+
+export {
+  util,
+  addBorderNode,
+  addDummyNode,
+  applyWithChunking,
+  asNonCompoundGraph,
+  buildLayerMatrix,
+  intersectRect,
+  mapValues,
+  maxRank,
+  normalizeRanks,
+  notime,
+  partition,
+  pick,
+  predecessorWeights,
+  range,
+  removeEmptyRanks,
+  simplify,
+  successorWeights,
+  time,
+  uniqueId,
+  zipObject,
+};
+
+export default util;
+
+/*
+ * Adds a dummy node to the graph and return v.
+ */
+function addDummyNode(g, type, attrs, name) {
+  let v;
+  do {
+    v = uniqueId(name);
+  } while (g.hasNode(v));
+
+  attrs.dummy = type;
+  g.setNode(v, attrs);
+  return v;
+}
+
+/*
+ * Returns a new graph with only simple edges. Handles aggregation of data
+ * associated with multi-edges.
+ */
+function simplify(g) {
+  let simplified = new Graph().setGraph(g.graph());
+  g.nodes().forEach((v) => simplified.setNode(v, g.node(v)));
+  g.edges().forEach((e) => {
+    let simpleLabel = simplified.edge(e.v, e.w) || { weight: 0, minlen: 1 };
+    let label = g.edge(e);
+    simplified.setEdge(e.v, e.w, {
+      weight: simpleLabel.weight + label.weight,
+      minlen: Math.max(simpleLabel.minlen, label.minlen),
+    });
+  });
+  return simplified;
+}
+
+function asNonCompoundGraph(g) {
+  let simplified = new Graph({ multigraph: g.isMultigraph() }).setGraph(g.graph());
+  g.nodes().forEach((v) => {
+    if (!g.children(v).length) {
+      simplified.setNode(v, g.node(v));
+    }
+  });
+  g.edges().forEach((e) => {
+    simplified.setEdge(e, g.edge(e));
+  });
+  return simplified;
+}
+
+function successorWeights(g) {
+  let weightMap = g.nodes().map((v) => {
+    let sucs = {};
+    g.outEdges(v).forEach((e) => {
+      sucs[e.w] = (sucs[e.w] || 0) + g.edge(e).weight;
+    });
+    return sucs;
+  });
+  return zipObject(g.nodes(), weightMap);
+}
+
+function predecessorWeights(g) {
+  let weightMap = g.nodes().map((v) => {
+    let preds = {};
+    g.inEdges(v).forEach((e) => {
+      preds[e.v] = (preds[e.v] || 0) + g.edge(e).weight;
+    });
+    return preds;
+  });
+  return zipObject(g.nodes(), weightMap);
+}
+
+/*
+ * Finds where a line starting at point ({x, y}) would intersect a rectangle
+ * ({x, y, width, height}) if it were pointing at the rectangle's center.
+ */
+function intersectRect(rect, point) {
+  let x = rect.x;
+  let y = rect.y;
+
+  // Rectangle intersection algorithm from:
+  // http://math.stackexchange.com/questions/108113/find-edge-between-two-boxes
+  let dx = point.x - x;
+  let dy = point.y - y;
+  let w = rect.width / 2;
+  let h = rect.height / 2;
+
+  if (!dx && !dy) {
+    throw new Error('Not possible to find intersection inside of the rectangle');
+  }
+
+  let sx, sy;
+  if (Math.abs(dy) * w > Math.abs(dx) * h) {
+    // Intersection is top or bottom of rect.
+    if (dy < 0) {
+      h = -h;
+    }
+    sx = (h * dx) / dy;
+    sy = h;
+  } else {
+    // Intersection is left or right of rect.
+    if (dx < 0) {
+      w = -w;
+    }
+    sx = w;
+    sy = (w * dy) / dx;
+  }
+
+  return { x: x + sx, y: y + sy };
+}
+
+/*
+ * Given a DAG with each node assigned "rank" and "order" properties, this
+ * function will produce a matrix with the ids of each node.
+ */
+function buildLayerMatrix(g) {
+  let layering = range(maxRank(g) + 1).map(() => []);
+  g.nodes().forEach((v) => {
+    let node = g.node(v);
+    let rank = node.rank;
+    if (rank !== undefined) {
+      layering[rank][node.order] = v;
+    }
+  });
+  return layering;
+}
+
+/*
+ * Adjusts the ranks for all nodes in the graph such that all nodes v have
+ * rank(v) >= 0 and at least one node w has rank(w) = 0.
+ */
+function normalizeRanks(g) {
+  let nodeRanks = g.nodes().map((v) => {
+    let rank = g.node(v).rank;
+    if (rank === undefined) {
+      return Number.MAX_VALUE;
+    }
+
+    return rank;
+  });
+  let min = applyWithChunking(Math.min, nodeRanks);
+  g.nodes().forEach((v) => {
+    let node = g.node(v);
+    if (Object.hasOwn(node, 'rank')) {
+      node.rank -= min;
+    }
+  });
+}
+
+function removeEmptyRanks(g) {
+  // Ranks may not start at 0, so we need to offset them
+  let nodeRanks = g.nodes().map((v) => g.node(v).rank);
+  let offset = applyWithChunking(Math.min, nodeRanks);
+
+  let layers = [];
+  g.nodes().forEach((v) => {
+    let rank = g.node(v).rank - offset;
+    if (!layers[rank]) {
+      layers[rank] = [];
+    }
+    layers[rank].push(v);
+  });
+
+  let delta = 0;
+  let nodeRankFactor = g.graph().nodeRankFactor;
+  Array.from(layers).forEach((vs, i) => {
+    if (vs === undefined && i % nodeRankFactor !== 0) {
+      --delta;
+    } else if (vs !== undefined && delta) {
+      vs.forEach((v) => (g.node(v).rank += delta));
+    }
+  });
+}
+
+function addBorderNode(g, prefix, rank, order) {
+  let node = {
+    width: 0,
+    height: 0,
+  };
+  if (arguments.length >= 4) {
+    node.rank = rank;
+    node.order = order;
+  }
+  return addDummyNode(g, 'border', node, prefix);
+}
+
+function splitToChunks(array, chunkSize = CHUNKING_THRESHOLD) {
+  const chunks = [];
+  for (let i = 0; i < array.length; i += chunkSize) {
+    const chunk = array.slice(i, i + chunkSize);
+    chunks.push(chunk);
+  }
+  return chunks;
+}
+
+const CHUNKING_THRESHOLD = 65535;
+
+function applyWithChunking(fn, argsArray) {
+  if (argsArray.length > CHUNKING_THRESHOLD) {
+    const chunks = splitToChunks(argsArray);
+    return fn.apply(
+      null,
+      chunks.map((chunk) => fn.apply(null, chunk))
+    );
+  } else {
+    return fn.apply(null, argsArray);
+  }
+}
+
+function maxRank(g) {
+  const nodes = g.nodes();
+  const nodeRanks = nodes.map((v) => {
+    let rank = g.node(v).rank;
+    if (rank === undefined) {
+      return Number.MIN_VALUE;
+    }
+    return rank;
+  });
+
+  return applyWithChunking(Math.max, nodeRanks);
+}
+
+/*
+ * Partition a collection into two groups: `lhs` and `rhs`. If the supplied
+ * function returns true for an entry it goes into `lhs`. Otherwise it goes
+ * into `rhs.
+ */
+function partition(collection, fn) {
+  let result = { lhs: [], rhs: [] };
+  collection.forEach((value) => {
+    if (fn(value)) {
+      result.lhs.push(value);
+    } else {
+      result.rhs.push(value);
+    }
+  });
+  return result;
+}
+
+/*
+ * Returns a new function that wraps `fn` with a timer. The wrapper logs the
+ * time it takes to execute the function.
+ */
+function time(name, fn) {
+  let start = Date.now();
+  try {
+    return fn();
+  } finally {
+    console.log(name + ' time: ' + (Date.now() - start) + 'ms');
+  }
+}
+
+function notime(name, fn) {
+  return fn();
+}
+
+let idCounter = 0;
+function uniqueId(prefix) {
+  var id = ++idCounter;
+  return toString(prefix) + id;
+}
+
+function range(start, limit, step = 1) {
+  if (limit == null) {
+    limit = start;
+    start = 0;
+  }
+
+  let endCon = (i) => i < limit;
+  if (step < 0) {
+    endCon = (i) => limit < i;
+  }
+
+  const range = [];
+  for (let i = start; endCon(i); i += step) {
+    range.push(i);
+  }
+
+  return range;
+}
+
+function pick(source, keys) {
+  const dest = {};
+  for (const key of keys) {
+    if (source[key] !== undefined) {
+      dest[key] = source[key];
+    }
+  }
+
+  return dest;
+}
+
+function mapValues(obj, funcOrProp) {
+  let func = funcOrProp;
+  if (typeof funcOrProp === 'string') {
+    func = (val) => val[funcOrProp];
+  }
+
+  return Object.entries(obj).reduce((acc, [k, v]) => {
+    acc[k] = func(v, k);
+    return acc;
+  }, {});
+}
+
+function zipObject(props, values) {
+  return props.reduce((acc, key, i) => {
+    acc[key] = values[i];
+    return acc;
+  }, {});
+}

package/src/dagre-lib/version.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export default '1.1.5-pre';

package/src/env.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<object, object, unknown>;
+  export default component;
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { dagreLib } from './dagre-lib';
+export { createFreeAutoLayoutPlugin } from './create-auto-layout-plugin';
+export { AutoLayoutService } from './services';
+export { Graph as DagreGraph } from '@dagrejs/graphlib';
+export * from './layout';

package/src/layout/constant.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { LayoutConfig, LayoutOptions } from './type';
+
+export const DefaultLayoutConfig: LayoutConfig = {
+  rankdir: 'LR',
+  align: undefined,
+  nodesep: 100,
+  edgesep: 10,
+  ranksep: 100,
+  marginx: 0,
+  marginy: 0,
+  acyclicer: undefined,
+  ranker: 'network-simplex',
+};
+
+export const DefaultLayoutOptions: LayoutOptions = {
+  filterNode: undefined,
+  getFollowNode: undefined,
+  disableFitView: false,
+  enableAnimation: false,
+  animationDuration: 300,
+};

package/src/layout/dagre.ts

@@ -0,0 +1,245 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Graph as DagreGraph } from '@dagrejs/graphlib';
+
+import { dagreLib } from '../dagre-lib/index';
+import { DagreNode, LayoutNode } from './type';
+import { LayoutStore } from './store';
+
+export class DagreLayout {
+  private readonly graph: DagreGraph;
+
+  constructor(private readonly store: LayoutStore) {
+    this.graph = this.createGraph();
+  }
+
+  public layout(): void {
+    this.graphSetData();
+    this.dagreLayout();
+    this.alignTopEdgeIfNeeded();
+    this.layoutSetPosition();
+  }
+
+  private dagreLayout(): void {
+    let layoutGraph = dagreLib.buildLayoutGraph(this.graph);
+    this.runLayout(layoutGraph);
+    dagreLib.updateInputGraph(this.graph, layoutGraph);
+  }
+
+  private runLayout(graph: DagreGraph): void {
+    dagreLib.makeSpaceForEdgeLabels(graph);
+    dagreLib.removeSelfEdges(graph);
+    dagreLib.acyclic.run(graph);
+    dagreLib.nestingGraph.run(graph);
+    dagreLib.rank(dagreLib.util.asNonCompoundGraph(graph));
+    dagreLib.injectEdgeLabelProxies(graph);
+    dagreLib.removeEmptyRanks(graph);
+    dagreLib.nestingGraph.cleanup(graph);
+    dagreLib.normalizeRanks(graph);
+    dagreLib.assignRankMinMax(graph);
+    dagreLib.removeEdgeLabelProxies(graph);
+    dagreLib.normalize.run(graph);
+    dagreLib.parentDummyChains(graph);
+    dagreLib.addBorderSegments(graph);
+    dagreLib.order(graph);
+    this.setOrderAndRank(graph);
+    dagreLib.insertSelfEdges(graph);
+    dagreLib.coordinateSystem.adjust(graph);
+    dagreLib.position(graph);
+    dagreLib.positionSelfEdges(graph);
+    dagreLib.removeBorderNodes(graph);
+    dagreLib.normalize.undo(graph);
+    dagreLib.fixupEdgeLabelCoords(graph);
+    dagreLib.coordinateSystem.undo(graph);
+    dagreLib.translateGraph(graph);
+    dagreLib.assignNodeIntersects(graph);
+    dagreLib.reversePointsForReversedEdges(graph);
+    dagreLib.acyclic.undo(graph);
+  }
+
+  private createGraph(): DagreGraph {
+    const graph = new DagreGraph({ multigraph: true });
+    graph.setDefaultEdgeLabel(() => ({}));
+    graph.setGraph(this.store.config);
+    return graph;
+  }
+
+  private graphSetData(): void {
+    const { nodes, edges } = this.store;
+    nodes.forEach((layoutNode) => {
+      this.graph.setNode(layoutNode.index, {
+        originID: layoutNode.id,
+        width: layoutNode.size.width,
+        height: layoutNode.size.height,
+      });
+    });
+    edges
+      .sort((next, prev) => {
+        if (next.fromIndex === prev.fromIndex) {
+          return next.toIndex! < prev.toIndex! ? -1 : 1;
+        }
+        return next.fromIndex < prev.fromIndex ? -1 : 1;
+      })
+      .forEach((layoutEdge) => {
+        this.graph.setEdge({
+          v: layoutEdge.fromIndex,
+          w: layoutEdge.toIndex,
+          name: layoutEdge.name,
+        });
+      });
+  }
+
+  private layoutSetPosition(): void {
+    this.store.nodes.forEach((layoutNode) => {
+      const offsetX = this.getOffsetX(layoutNode);
+      const graphNode = this.graph.node(layoutNode.index);
+      if (!graphNode) {
+        // 异常兜底，一般不会出现
+        layoutNode.rank = -1;
+        layoutNode.position = {
+          x: layoutNode.position.x + offsetX,
+          y: layoutNode.position.y,
+        };
+        return;
+      }
+      layoutNode.rank = graphNode.rank ?? -1;
+      layoutNode.position = {
+        x: this.normalizeNumber(graphNode.x) + offsetX,
+        y: this.normalizeNumber(graphNode.y),
+      };
+    });
+  }
+
+  private alignTopEdgeIfNeeded(): void {
+    const { alignTopEdge } = this.store.options;
+    const { rankdir, marginy = 0 } = this.store.config;
+
+    if (!alignTopEdge || (rankdir !== 'LR' && rankdir !== 'RL')) {
+      return;
+    }
+
+    const rankGroups = this.rankGroup(this.graph);
+
+    rankGroups.forEach((indexSet) => {
+      const graphNodes = Array.from(indexSet)
+        .map((id) => this.graph.node(id) as DagreNode | undefined)
+        .filter(Boolean) as DagreNode[];
+
+      if (graphNodes.length === 0) {
+        return;
+      }
+
+      const minTop = Math.min(...graphNodes.map((node) => node.y - node.height / 2));
+      const deltaY = marginy - minTop;
+
+      if (deltaY === 0) {
+        return;
+      }
+
+      graphNodes.forEach((node) => {
+        node.y += deltaY;
+      });
+    });
+  }
+
+  private normalizeNumber(number: number): number {
+    // NaN 转为 0，异常兜底，一般不会出现
+    return Number.isNaN(number) ? 0 : number;
+  }
+
+  private getOffsetX(layoutNode: LayoutNode): number {
+    if (layoutNode.layoutNodes.length === 0) {
+      return 0;
+    }
+    // 存在子节点才需计算padding带来的偏移
+    const { padding } = layoutNode;
+    const leftOffset = -layoutNode.size.width / 2 + padding.left;
+    return leftOffset;
+  }
+
+  private setOrderAndRank(g: DagreGraph): DagreGraph {
+    // 跟随调整
+    this.followAdjust(g);
+    // 重新排序
+    this.normalizeOrder(g);
+    return g;
+  }
+
+  /** 跟随调整 */
+  private followAdjust(g: DagreGraph): void {
+    const rankGroup = this.rankGroup(g);
+    g.nodes().forEach((i) => {
+      const graphNode: DagreNode = g.node(i);
+      const layoutNode = this.store.getNodeByIndex(i);
+
+      // 没有跟随节点，则不调整
+      if (!graphNode || !layoutNode?.followedBy) return;
+      const { followedBy } = layoutNode;
+      const { rank: targetRank, order: targetOrder } = graphNode;
+
+      // 跟随节点索引
+      const followIndexes = followedBy
+        .map((id) => this.store.getNode(id)?.index)
+        .filter(Boolean) as string[];
+      const followSet = new Set(followIndexes);
+
+      // 目标节点之后的节点
+      const rankIndexes = rankGroup.get(targetRank);
+      if (!rankIndexes) return;
+      const afterIndexes = Array.from(rankIndexes).filter((index) => {
+        if (followSet.has(index)) return false;
+        const graphNode = g.node(index);
+        return graphNode.order > targetOrder;
+      });
+
+      // 目标节点之后的节点 order 增加跟随节点数量
+      afterIndexes.forEach((index) => {
+        const graphNode = g.node(index);
+        graphNode.order = graphNode.order + followedBy.length;
+      });
+
+      // 跟随节点 order 增加
+      followIndexes.forEach((followIndex, index) => {
+        const graphNode = g.node(followIndex);
+        graphNode.order = targetOrder + index + 1;
+        // 更新 rank 分组缓存
+        const originRank = graphNode.rank;
+        graphNode.rank = targetRank;
+        rankGroup.get(originRank)?.delete(followIndex);
+        rankGroup.get(targetRank)?.add(followIndex);
+      });
+    });
+  }
+
+  /** rank 内 order 可能不连续，需要重新排序 */
+  private normalizeOrder(g: DagreGraph): void {
+    const rankGroup = this.rankGroup(g);
+    rankGroup.forEach((indexSet, rank) => {
+      const graphNodes: DagreNode[] = Array.from(indexSet).map((id) => g.node(id));
+      graphNodes.sort((a, b) => a.order - b.order);
+      graphNodes.forEach((node, index) => {
+        node.order = index;
+      });
+    });
+  }
+
+  /** 获取 rank 分组 */
+  private rankGroup(g: DagreGraph): Map<number, Set<string>> {
+    const rankGroup = new Map<number, Set<string>>();
+    g.nodes().forEach((i) => {
+      const graphNode = g.node(i) as DagreNode | undefined;
+      if (!graphNode || typeof graphNode.rank !== 'number') {
+        return;
+      }
+      const rank = graphNode.rank;
+      if (!rankGroup.has(rank)) {
+        rankGroup.set(rank, new Set());
+      }
+      rankGroup.get(rank)?.add(i);
+    });
+    return rankGroup;
+  }
+}

package/src/layout/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { Layout } from './layout';
+export type { LayoutNode, LayoutEdge, GetFollowNode, LayoutOptions } from './type';
+export type { LayoutStore } from './store';
+export { DefaultLayoutConfig } from './constant';

package/src/layout/layout.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { ILayout, LayoutConfig, LayoutOptions, LayoutParams } from './type';
+import { LayoutStore } from './store';
+import { LayoutPosition } from './position';
+import { DagreLayout } from './dagre';
+
+export class Layout implements ILayout {
+  private readonly _store: LayoutStore;
+
+  private readonly _layout: DagreLayout;
+
+  private readonly _position: LayoutPosition;
+
+  constructor(config: LayoutConfig) {
+    this._store = new LayoutStore(config);
+    this._layout = new DagreLayout(this._store);
+    this._position = new LayoutPosition(this._store);
+  }
+
+  public init(params: LayoutParams, options: LayoutOptions): void {
+    this._store.create(params, options);
+  }
+
+  public layout(): void {
+    if (!this._store.initialized) {
+      return;
+    }
+    this._layout.layout();
+  }
+
+  public async position(): Promise<void> {
+    if (!this._store.initialized) {
+      return;
+    }
+    return await this._position.position();
+  }
+}