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

package/src/layout/position.ts

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { WorkflowDocument } from '@flowgram-vue/free-layout-core';
+import { PositionSchema, startTween } from '@flowgram-vue/core';
+
+import { LayoutNode } from './type';
+import { LayoutStore } from './store';
+
+export class LayoutPosition {
+  constructor(private readonly store: LayoutStore) {}
+
+  public async position(): Promise<void> {
+    if (this.store.options.enableAnimation) {
+      return this.positionWithAnimation();
+    }
+    return this.positionDirectly();
+  }
+
+  private positionDirectly(): void {
+    this.store.nodes.forEach((layoutNode) => {
+      this.updateNodePosition({ layoutNode, step: 100 });
+    });
+  }
+
+  private async positionWithAnimation(): Promise<void> {
+    return new Promise((resolve) => {
+      startTween({
+        from: { d: 0 },
+        to: { d: 100 },
+        duration: this.store.options.animationDuration ?? 0,
+        onUpdate: (v) => {
+          this.store.nodes.forEach((layoutNode) => {
+            this.updateNodePosition({ layoutNode, step: v.d });
+          });
+        },
+        onComplete: () => {
+          resolve();
+        },
+      });
+    });
+  }
+
+  private updateNodePosition(params: { layoutNode: LayoutNode; step: number }): void {
+    const { layoutNode, step } = params;
+    const { transform } = layoutNode.entity.transform;
+
+    const centerToTopEdgeOffset =
+      (layoutNode.size.height - layoutNode.padding.top - layoutNode.padding.bottom) / 2;
+
+    const layoutPosition: PositionSchema = {
+      x: layoutNode.position.x + layoutNode.offset.x,
+      y: layoutNode.position.y + layoutNode.offset.y - centerToTopEdgeOffset,
+    };
+
+    const deltaX = ((layoutPosition.x - transform.position.x) * step) / 100;
+    const deltaY = ((layoutPosition.y - transform.position.y) * step) / 100;
+
+    const position = {
+      x: transform.position.x + deltaX,
+      y: transform.position.y + deltaY,
+    };
+
+    transform.update({
+      position,
+    });
+    const document = layoutNode.entity.document as WorkflowDocument;
+    document.layout.updateAffectedTransform(layoutNode.entity);
+  }
+}

package/src/layout/store.ts

@@ -0,0 +1,262 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { WorkflowNodeEntity } from '@flowgram-vue/free-layout-core';
+import { FlowNodeBaseType } from '@flowgram-vue/document';
+
+import type {
+  GetFollowNode,
+  ILayoutStore,
+  LayoutConfig,
+  LayoutEdge,
+  LayoutNode,
+  LayoutOptions,
+  LayoutParams,
+  LayoutStoreData,
+} from './type';
+
+export class LayoutStore implements ILayoutStore {
+  private indexMap: Map<string, string>;
+
+  private init: boolean = false;
+
+  private store: LayoutStoreData;
+
+  public options: LayoutOptions;
+
+  public container: LayoutNode;
+
+  constructor(public readonly config: LayoutConfig) {}
+
+  public get initialized(): boolean {
+    return this.init;
+  }
+
+  public getNode(id?: string): LayoutNode | undefined {
+    if (!id) {
+      return undefined;
+    }
+    return this.store.nodes.get(id);
+  }
+
+  public getNodeByIndex(index: string): LayoutNode | undefined {
+    const id = this.indexMap.get(index);
+    return id ? this.getNode(id) : undefined;
+  }
+
+  public getEdge(id: string): LayoutEdge | undefined {
+    return this.store.edges.get(id);
+  }
+
+  public get nodes(): LayoutNode[] {
+    return Array.from(this.store.nodes.values());
+  }
+
+  public get edges(): LayoutEdge[] {
+    return Array.from(this.store.edges.values());
+  }
+
+  public create(params: LayoutParams, options: LayoutOptions): void {
+    this.container = params.container;
+    this.store = this.createStore(params);
+    this.indexMap = this.createIndexMap();
+    this.setOptions(options);
+    this.init = true;
+  }
+
+  /** 创建布局数据 */
+  private createStore(params: LayoutParams): LayoutStoreData {
+    const { layoutNodes, layoutEdges } = params;
+    const virtualEdges = this.createVirtualEdges(params);
+    const store = {
+      nodes: new Map(),
+      edges: new Map(),
+    };
+    layoutNodes.forEach((node) => store.nodes.set(node.id, node));
+    layoutEdges.concat(virtualEdges).forEach((edge) => store.edges.set(edge.id, edge));
+    return store;
+  }
+
+  /** 创建虚拟线条数据 */
+  private createVirtualEdges(params: LayoutParams): LayoutEdge[] {
+    const { layoutNodes, layoutEdges } = params;
+    const nodes = layoutNodes.map((layoutNode) => layoutNode.entity);
+    const edges = layoutEdges.map((layoutEdge) => layoutEdge.entity);
+    const groupNodes = nodes.filter((n) => n.flowNodeType === FlowNodeBaseType.GROUP);
+    const virtualEdges = groupNodes
+      .map((group) => {
+        const { id: groupId, blocks = [] } = group;
+        const blockIdSet = new Set(blocks.map((b) => b.id));
+        const groupFromEdges = edges
+          .filter((edge) => blockIdSet.has(edge.to?.id ?? ''))
+          .map((edge) => {
+            const { from, to } = edge.info;
+            if (!from || !to) {
+              return;
+            }
+            const id = `virtual_${groupId}_from_${from}_to_${to}`;
+            const layoutEdge: LayoutEdge = {
+              id: id,
+              entity: edge,
+              from,
+              to: groupId,
+              fromIndex: '', // 初始化时，index 未计算
+              toIndex: '', // 初始化时，index 未计算
+              name: id,
+            };
+            return layoutEdge;
+          })
+          .filter(Boolean) as LayoutEdge[];
+        const groupToEdges = edges
+          .filter((edge) => blockIdSet.has(edge.from?.id ?? ''))
+          .map((edge) => {
+            const { from, to } = edge.info;
+            if (!from || !to) {
+              return;
+            }
+            const id = `virtual_${groupId}_from_${from}_to_${to}`;
+            const layoutEdge: LayoutEdge = {
+              id: id,
+              entity: edge,
+              from: groupId,
+              to,
+              fromIndex: '', // 初始化时，index 未计算
+              toIndex: '', // 初始化时，index 未计算
+              name: id,
+            };
+            return layoutEdge;
+          })
+          .filter(Boolean) as LayoutEdge[];
+        return [...groupFromEdges, ...groupToEdges];
+      })
+      .flat();
+    return virtualEdges;
+  }
+
+  /** 创建节点索引映射 */
+  private createIndexMap(): Map<string, string> {
+    const nodeIndexes = this.sortNodes();
+    const nodeToIndex = new Map<string, string>();
+
+    // 创建节点索引映射
+    nodeIndexes.forEach((nodeId, nodeIndex) => {
+      const node = this.getNode(nodeId);
+      if (!node) {
+        return;
+      }
+      const graphIndex = String(100000 + nodeIndex);
+      nodeToIndex.set(node.id, graphIndex);
+      node.index = graphIndex;
+    });
+
+    // 创建连线索引映射
+    this.edges.forEach((edge) => {
+      const fromIndex = nodeToIndex.get(edge.from);
+      const toIndex = nodeToIndex.get(edge.to);
+      if (!fromIndex || !toIndex) {
+        this.store.edges.delete(edge.id);
+        return;
+      }
+      edge.fromIndex = fromIndex;
+      edge.toIndex = toIndex;
+    });
+
+    // 创建索引到节点的映射
+    const indexToNode = new Map();
+    nodeToIndex.forEach((index, id) => {
+      indexToNode.set(index, id);
+    });
+
+    return indexToNode;
+  }
+
+  /** 节点排序 */
+  private sortNodes(): Array<string> {
+    // 节点 id 列表，id 可能重复
+    const nodeIdList: string[] = [];
+
+    // 第1级排序：按照 node 添加顺序排序
+    this.nodes.forEach((node) => {
+      nodeIdList.push(node.id);
+    });
+
+    // 第2级排序：被连线节点排序靠后
+    this.edges.forEach((edge) => {
+      nodeIdList.push(edge.to);
+    });
+
+    // 第3级排序：按照从开始节点进行遍历排序
+    const visited = new Set<string>();
+    const visit = (node?: WorkflowNodeEntity) => {
+      if (!node || visited.has(node.id)) {
+        return;
+      }
+      visited.add(node.id);
+      nodeIdList.push(node.id);
+      // 访问子节点
+      node.blocks.forEach((child) => {
+        visit(child);
+      });
+      // 访问后续节点
+      const { outputLines } = node.lines;
+      const sortedLines = outputLines.sort((a, b) => {
+        const aNode = this.getNode(a.to?.id);
+        const bNode = this.getNode(b.to?.id);
+        const aPort = a.fromPort;
+        const bPort = b.fromPort;
+        // 同端口，对比to节点y轴坐标
+        if (aPort === bPort && aNode && bNode) {
+          return aNode.position.y - bNode.position.y;
+        }
+        // 同from节点的不同端口，对比端口y轴坐标
+        if (aPort && bPort) {
+          return aPort.point.y - bPort.point.y;
+        }
+        return 0;
+      });
+      sortedLines.forEach((line) => {
+        const { to } = line;
+        if (!to) {
+          return;
+        }
+        visit(to);
+      });
+    };
+    visit(this.container.entity);
+
+    // 使用 reduceRight 去重并保留最后一个出现的节点 id
+    const uniqueNodeIds: string[] = nodeIdList.reduceRight((acc: string[], nodeId: string) => {
+      if (!acc.includes(nodeId)) {
+        acc.unshift(nodeId);
+      }
+      return acc;
+    }, []);
+
+    return uniqueNodeIds;
+  }
+
+  /** 记录运行选项 */
+  private setOptions(options: LayoutOptions): void {
+    this.options = options;
+    this.setFollowNode(options.getFollowNode);
+  }
+
+  /** 设置跟随节点配置 */
+  private setFollowNode(getFollowNode?: GetFollowNode): void {
+    if (!getFollowNode) return;
+    const context = { store: this };
+    this.nodes.forEach((node) => {
+      const followTo = getFollowNode(node, context)?.followTo;
+      if (!followTo) return;
+      const followToNode = this.getNode(followTo);
+      if (!followToNode) return;
+      if (!followToNode.followedBy) {
+        followToNode.followedBy = [];
+      }
+      followToNode.followedBy.push(node.id);
+      node.followTo = followTo;
+    });
+  }
+}

package/src/layout/type.ts

@@ -0,0 +1,162 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { WorkflowLineEntity, WorkflowNodeEntity } from '@flowgram-vue/free-layout-core';
+
+export interface LayoutStoreData {
+  nodes: Map<string, LayoutNode>;
+  edges: Map<string, LayoutEdge>;
+}
+
+export interface ILayoutStore {
+  container: LayoutNode;
+  options: LayoutOptions;
+  get initialized(): boolean;
+  getNode(id?: string): LayoutNode | undefined;
+  getNodeByIndex(index: string): LayoutNode | undefined;
+  getEdge(id: string): LayoutEdge | undefined;
+  nodes: LayoutNode[];
+  edges: LayoutEdge[];
+  create(params: LayoutParams, options: LayoutOptions): void;
+}
+
+export interface ILayout {
+  init(params: LayoutParams, options: LayoutOptions): void;
+  layout(): void;
+  position(): Promise<void>;
+}
+
+export interface LayoutSize {
+  width: number;
+  height: number;
+}
+
+export interface LayoutNode {
+  id: string;
+  /** 节点索引 */
+  index: string;
+  /** 节点实体 */
+  entity: WorkflowNodeEntity;
+  /** 层级 */
+  rank: number;
+  /** 顺序 */
+  order: number;
+  /** 位置 */
+  position: {
+    x: number;
+    y: number;
+  };
+  /** 偏移量 */
+  offset: {
+    x: number;
+    y: number;
+  };
+  /** 边距 */
+  padding: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+  };
+  /** 宽高 */
+  size: LayoutSize;
+  /** 子节点 */
+  layoutNodes: LayoutNode[];
+  /** 子线条 */
+  layoutEdges: LayoutEdge[];
+  /** 被跟随节点 */
+  followedBy?: string[];
+  /** 跟随节点 */
+  followTo?: string;
+}
+
+export interface LayoutEdge {
+  id: string;
+  /** 线条实体 */
+  entity: WorkflowLineEntity;
+  /** 起点 */
+  from: string;
+  /** 终点 */
+  to: string;
+  /** 起点索引 */
+  fromIndex: string;
+  /** 终点索引 */
+  toIndex: string;
+  /** 线条名称 */
+  name: string;
+}
+
+export interface DagreNode {
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+  order: number;
+  rank: number;
+}
+
+export interface LayoutParams {
+  container: LayoutNode;
+  layoutNodes: LayoutNode[];
+  layoutEdges: LayoutEdge[];
+}
+
+export interface LayoutOptions {
+  /** Custom layout configuration to override default dagre settings. */
+  layoutConfig?: Partial<LayoutConfig>;
+  /** The container node entity used as the root for the layout. */
+  containerNode?: WorkflowNodeEntity;
+  /** Custom function to determine follow-node relationships between layout nodes. */
+  getFollowNode?: GetFollowNode;
+  /** Whether to animate node movements during layout positioning. */
+  enableAnimation?: boolean;
+  /** Duration of the position animation in milliseconds. Only effective when `enableAnimation` is true. */
+  animationDuration?: number;
+  /** When true, skips the fit-view step after layout is applied. */
+  disableFitView?: boolean;
+  /**
+   * When true, aligns nodes by their top edge instead of their center point.
+   * Defaults to false (center-aligned). Set to true to place all nodes' top edges on the same horizontal line.
+   */
+  alignTopEdge?: boolean;
+  /** Filter function to exclude specific nodes from the layout. Return false to skip a node. */
+  filterNode?: (params: { node: WorkflowNodeEntity; parent?: WorkflowNodeEntity }) => boolean;
+  /** Filter function to exclude specific edges from the layout. Return false to skip an edge. */
+  filterLine?: (params: { line: WorkflowLineEntity }) => boolean;
+}
+
+export interface LayoutConfig {
+  /** Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right. */
+  rankdir: 'TB' | 'BT' | 'LR' | 'RL';
+  /** Alignment for rank nodes. Can be UL, UR, DL, or DR, where U = up, D = down, L = left, and R = right. */
+  align: 'UL' | 'UR' | 'DL' | 'DR' | undefined;
+  /** Number of pixels that separate nodes horizontally in the layout. */
+  nodesep: number;
+  /** Number of pixels that separate edges horizontally in the layout. */
+  edgesep: number;
+  /** Number of pixels that separate edges horizontally in the layout. */
+  ranksep: number;
+  /** Number of pixels to use as a margin around the left and right of the graph. */
+  marginx: number;
+  /** Number of pixels to use as a margin around the top and bottom of the graph. */
+  marginy: number;
+  /** If set to greedy, uses a greedy heuristic for finding a feedback arc set for a graph. A feedback arc set is a set of edges that can be removed to make a graph acyclic. */
+  acyclicer: 'greedy' | undefined;
+  /** Type of algorithm to assigns a rank to each node in the input graph. Possible values: network-simplex, tight-tree or longest-path */
+  ranker: 'network-simplex' | 'tight-tree' | 'longest-path';
+}
+
+export type GetFollowNode = (
+  node: LayoutNode,
+  context: {
+    store: ILayoutStore;
+    /** 业务自定义参数 */
+    [key: string]: any;
+  }
+) =>
+  | {
+      followTo?: string;
+    }
+  | undefined;

package/src/services.ts

@@ -0,0 +1,174 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, injectable } from 'inversify';
+import { Rectangle } from '@flowgram-vue/utils';
+import {
+  WorkflowDocument,
+  WorkflowLineEntity,
+  WorkflowNodeEntity,
+  WorkflowNodeLinesData,
+} from '@flowgram-vue/free-layout-core';
+import { Playground } from '@flowgram-vue/core';
+
+import { AutoLayoutOptions } from './type';
+import { LayoutConfig, LayoutEdge, LayoutNode } from './layout/type';
+import { DefaultLayoutOptions } from './layout/constant';
+import { DefaultLayoutConfig, Layout, type LayoutOptions } from './layout';
+
+@injectable()
+export class AutoLayoutService {
+  @inject(Playground)
+  private playground: Playground;
+
+  @inject(WorkflowDocument) private readonly document: WorkflowDocument;
+
+  private layoutConfig: LayoutConfig = DefaultLayoutConfig;
+
+  public init(options: AutoLayoutOptions) {
+    this.layoutConfig = {
+      ...this.layoutConfig,
+      ...options.layoutConfig,
+    };
+  }
+
+  public async layout(options: Partial<LayoutOptions> = {}): Promise<void> {
+    const layoutOptions: LayoutOptions = {
+      ...DefaultLayoutOptions,
+      ...options,
+    };
+    const containerNode = layoutOptions.containerNode ?? this.document.root;
+    const container = this.createLayoutNode(containerNode, options);
+    const layouts = await this.layoutNode(container, layoutOptions);
+    const rect = this.getLayoutNodeRect(container);
+    const positionPromise = layouts.map((layout) => layout.position());
+    const fitViewPromise = this.fitView(layoutOptions, rect);
+    await Promise.all([...positionPromise, fitViewPromise]);
+  }
+
+  private async fitView(options: LayoutOptions, rect: Rectangle): Promise<void> {
+    if (options.disableFitView === true) {
+      return;
+    }
+    // 留出 30 像素的边界
+    return this.playground.config.fitView(rect, options.enableAnimation, 30);
+  }
+
+  private async layoutNode(container: LayoutNode, options: LayoutOptions): Promise<Layout[]> {
+    const { layoutNodes, layoutEdges } = container;
+    if (layoutNodes.length === 0) {
+      return [];
+    }
+    // 触发子节点布局
+    const childrenLayouts = (
+      await Promise.all(layoutNodes.map((n) => this.layoutNode(n, options)))
+    ).flat();
+    const layoutConfig: LayoutConfig = {
+      ...this.layoutConfig,
+      ...options.layoutConfig,
+    };
+    const layout = new Layout(layoutConfig);
+    layout.init({ container, layoutNodes, layoutEdges }, options);
+    layout.layout();
+    const rect = this.getLayoutNodeRect(container);
+    container.size = {
+      width: rect.width,
+      height: rect.height,
+    };
+    return [...childrenLayouts, layout];
+  }
+
+  private createLayoutNodes(nodes: WorkflowNodeEntity[], options: LayoutOptions): LayoutNode[] {
+    return nodes.map((node) => this.createLayoutNode(node, options));
+  }
+
+  /** 创建节点布局数据 */
+  private createLayoutNode(node: WorkflowNodeEntity, options: LayoutOptions): LayoutNode {
+    const blocks = node.blocks.filter((blockNode) =>
+      options.filterNode ? options.filterNode?.({ node: blockNode, parent: node.parent }) : true
+    );
+    const edges = this.getNodesAllLines(blocks).filter((edge) =>
+      options.filterLine ? options.filterLine?.({ line: edge }) : true
+    );
+
+    // 创建子布局节点
+    const layoutNodes = this.createLayoutNodes(blocks, options);
+    const layoutEdges = this.createLayoutEdges(edges);
+
+    const { bounds, padding } = node.transform;
+    const { width, height, center } = bounds;
+    const { x, y } = center;
+    const layoutNode: LayoutNode = {
+      id: node.id,
+      entity: node,
+      index: '', // 初始化时，index 未计算
+      rank: -1, // 初始化时，节点还未布局，层级为-1
+      order: -1, // 初始化时，节点还未布局，顺序为-1
+      position: { x, y },
+      offset: { x: 0, y: 0 },
+      padding,
+      size: { width, height },
+      layoutNodes,
+      layoutEdges,
+    };
+    return layoutNode;
+  }
+
+  private createLayoutEdges(edges: WorkflowLineEntity[]): LayoutEdge[] {
+    const layoutEdges = edges
+      .map((edge) => this.createLayoutEdge(edge))
+      .filter(Boolean) as LayoutEdge[];
+    return layoutEdges;
+  }
+
+  /** 创建线条布局数据 */
+  private createLayoutEdge(edge: WorkflowLineEntity): LayoutEdge | undefined {
+    const { from, to } = edge.info;
+    if (!from || !to) {
+      return;
+    }
+    const layoutEdge: LayoutEdge = {
+      id: edge.id,
+      entity: edge,
+      from,
+      to,
+      fromIndex: '', // 初始化时，index 未计算
+      toIndex: '', // 初始化时，index 未计算
+      name: edge.id,
+    };
+    return layoutEdge;
+  }
+
+  private getNodesAllLines(nodes: WorkflowNodeEntity[]): WorkflowLineEntity[] {
+    const lines = nodes
+      .map((node) => {
+        const linesData = node.getData<WorkflowNodeLinesData>(WorkflowNodeLinesData);
+        const outputLines = linesData.outputLines.filter(Boolean);
+        const inputLines = linesData.inputLines.filter(Boolean);
+        return [...outputLines, ...inputLines];
+      })
+      .flat();
+
+    return lines;
+  }
+
+  private getLayoutNodeRect(layoutNode: LayoutNode): Rectangle {
+    const rects = layoutNode.layoutNodes.map((node) => this.layoutNodeRect(node));
+    const rect = Rectangle.enlarge(rects);
+    const { padding } = layoutNode;
+    const width = rect.width + padding.left + padding.right;
+    const height = rect.height + padding.top + padding.bottom;
+    const x = rect.x - padding.left;
+    const y = rect.y - padding.top;
+    return new Rectangle(x, y, width, height);
+  }
+
+  private layoutNodeRect(layoutNode: LayoutNode): Rectangle {
+    const { width, height } = layoutNode.size;
+    const x = layoutNode.position.x - width / 2;
+    const y = layoutNode.position.y - height / 2;
+    return new Rectangle(x, y, width, height);
+  }
+}

package/src/type.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { LayoutConfig } from './layout/type';
+
+export interface AutoLayoutOptions {
+  layoutConfig?: Partial<LayoutConfig>;
+}