@flowgram.ai/free-auto-layout-plugin 0.1.0-alpha.3 → 0.1.0-alpha.30

package/dist/esm/index.js

@@ -2081,21 +2081,47 @@ import { definePluginCreator } from "@flowgram.ai/core";
 
 // src/services.ts
 import { inject, injectable } from "inversify";
+import { Rectangle } from "@flowgram.ai/utils";
 import {
   WorkflowDocument,
   WorkflowNodeLinesData
 } from "@flowgram.ai/free-layout-core";
+import { Playground } from "@flowgram.ai/core";
+
+// src/layout/constant.ts
+var DefaultLayoutConfig = {
+  rankdir: "LR",
+  align: void 0,
+  nodesep: 100,
+  edgesep: 10,
+  ranksep: 100,
+  marginx: 0,
+  marginy: 0,
+  acyclicer: void 0,
+  ranker: "network-simplex"
+};
+var DefaultLayoutOptions = {
+  filterNode: void 0,
+  getFollowNode: void 0,
+  disableFitView: false,
+  enableAnimation: false,
+  animationDuration: 300
+};
 
 // src/layout/store.ts
-import { FlowNodeTransformData } from "@flowgram.ai/document";
+import { FlowNodeBaseType } from "@flowgram.ai/document";
 var LayoutStore = class {
-  constructor() {
+  constructor(config) {
+    this.config = config;
     this.init = false;
   }
   get initialized() {
     return this.init;
   }
   getNode(id) {
+    if (!id) {
+      return void 0;
+    }
     return this.store.nodes.get(id);
   }
   getNodeByIndex(index) {
@@ -2111,56 +2137,76 @@ var LayoutStore = class {
   get edges() {
     return Array.from(this.store.edges.values());
   }
-  create(params) {
+  create(params, options) {
+    this.container = params.container;
     this.store = this.createStore(params);
     this.indexMap = this.createIndexMap();
+    this.setOptions(options);
     this.init = true;
   }
   /** 创建布局数据 */
   createStore(params) {
-    const { nodes, edges } = params;
+    const { layoutNodes, layoutEdges } = params;
+    const virtualEdges = this.createVirtualEdges(params);
     const store = {
       nodes: /* @__PURE__ */ new Map(),
       edges: /* @__PURE__ */ new Map()
     };
-    nodes.forEach((node, index) => {
-      const { bounds } = node.getData(FlowNodeTransformData);
-      const layoutNode = {
-        id: node.id,
-        entity: node,
-        index: "",
-        // 初始化时，index 未计算
-        rank: -1,
-        // 初始化时，节点还未布局，层级为-1
-        order: -1,
-        // 初始化时，节点还未布局，顺序为-1
-        position: { x: bounds.center.x, y: bounds.center.y },
-        offset: { x: 0, y: 0 },
-        size: { width: bounds.width, height: bounds.height },
-        hasChildren: node.collapsedChildren?.length > 0
-      };
-      store.nodes.set(layoutNode.id, layoutNode);
-    });
-    edges.forEach((edge) => {
-      const { from, to } = edge.info;
-      if (!from || !to || edge.vertical) {
-        return;
-      }
-      const layoutEdge = {
-        id: edge.id,
-        entity: edge,
-        from,
-        to,
-        fromIndex: "",
-        // 初始化时，index 未计算
-        toIndex: "",
-        // 初始化时，index 未计算
-        name: edge.id
-      };
-      store.edges.set(layoutEdge.id, layoutEdge);
-    });
+    layoutNodes.forEach((node) => store.nodes.set(node.id, node));
+    layoutEdges.concat(virtualEdges).forEach((edge) => store.edges.set(edge.id, edge));
     return store;
   }
+  /** 创建虚拟线条数据 */
+  createVirtualEdges(params) {
+    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 || edge.vertical) {
+          return;
+        }
+        const id = `virtual_${groupId}_from_${from}_to_${to}`;
+        const layoutEdge = {
+          id,
+          entity: edge,
+          from,
+          to: groupId,
+          fromIndex: "",
+          // 初始化时，index 未计算
+          toIndex: "",
+          // 初始化时，index 未计算
+          name: id
+        };
+        return layoutEdge;
+      }).filter(Boolean);
+      const groupToEdges = edges.filter((edge) => blockIdSet.has(edge.from?.id ?? "")).map((edge) => {
+        const { from, to } = edge.info;
+        if (!from || !to || edge.vertical) {
+          return;
+        }
+        const id = `virtual_${groupId}_from_${from}_to_${to}`;
+        const layoutEdge = {
+          id,
+          entity: edge,
+          from: groupId,
+          to,
+          fromIndex: "",
+          // 初始化时，index 未计算
+          toIndex: "",
+          // 初始化时，index 未计算
+          name: id
+        };
+        return layoutEdge;
+      }).filter(Boolean);
+      return [...groupFromEdges, ...groupToEdges];
+    }).flat();
+    return virtualEdges;
+  }
   /** 创建节点索引映射 */
   createIndexMap() {
     const nodeIndexes = this.sortNodes();
@@ -2196,27 +2242,42 @@ var LayoutStore = class {
     this.nodes.forEach((node) => {
       nodeIdList.push(node.id);
     });
-    const sameFromEdges = /* @__PURE__ */ new Map();
     this.edges.forEach((edge) => {
       nodeIdList.push(edge.to);
-      if (edge.entity.info.fromPort) {
-        const edgesForFrom = sameFromEdges.get(edge.from) || [];
-        sameFromEdges.set(edge.from, [...edgesForFrom, edge]);
-      }
     });
-    sameFromEdges.forEach((edges, from) => {
-      const sortedEdges = edges.sort((a, b) => {
-        const aPort = a.entity.fromPort;
-        const bPort = b.entity.fromPort;
+    const visited = /* @__PURE__ */ new Set();
+    const visit = (node) => {
+      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;
+        if (aPort === bPort && aNode && bNode) {
+          return aNode.position.y - bNode.position.y;
+        }
         if (aPort && bPort) {
           return aPort.point.y - bPort.point.y;
         }
         return 0;
       });
-      sortedEdges.forEach((edge) => {
-        nodeIdList.push(edge.to);
+      sortedLines.forEach((line) => {
+        const { to } = line;
+        if (!to) {
+          return;
+        }
+        visit(to);
       });
-    });
+    };
+    visit(this.container.entity);
     const uniqueNodeIds = nodeIdList.reduceRight((acc, nodeId) => {
       if (!acc.includes(nodeId)) {
         acc.unshift(nodeId);
@@ -2225,21 +2286,52 @@ var LayoutStore = class {
     }, []);
     return uniqueNodeIds;
   }
+  /** 记录运行选项 */
+  setOptions(options) {
+    this.options = options;
+    this.setFollowNode(options.getFollowNode);
+  }
+  /** 设置跟随节点配置 */
+  setFollowNode(getFollowNode) {
+    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;
+    });
+  }
 };
 
 // src/layout/position.ts
-import { FlowNodeTransformData as FlowNodeTransformData2 } from "@flowgram.ai/document";
-import { startTween, TransformData } from "@flowgram.ai/core";
+import { startTween } from "@flowgram.ai/core";
 var LayoutPosition = class {
   constructor(store) {
     this.store = store;
   }
   async position() {
+    if (this.store.options.enableAnimation) {
+      return this.positionWithAnimation();
+    }
+    return this.positionDirectly();
+  }
+  positionDirectly() {
+    this.store.nodes.forEach((layoutNode) => {
+      this.updateNodePosition({ layoutNode, step: 100 });
+    });
+  }
+  async positionWithAnimation() {
     return new Promise((resolve) => {
       startTween({
         from: { d: 0 },
         to: { d: 100 },
-        duration: 300,
+        duration: this.store.options.animationDuration ?? 0,
         onUpdate: (v) => {
           this.store.nodes.forEach((layoutNode) => {
             this.updateNodePosition({ layoutNode, step: v.d });
@@ -2253,41 +2345,28 @@ var LayoutPosition = class {
   }
   updateNodePosition(params) {
     const { layoutNode, step } = params;
-    const transform = layoutNode.entity.getData(TransformData);
-    const position2 = {
+    const { transform } = layoutNode.entity.transform;
+    const layoutPosition = {
       x: layoutNode.position.x + layoutNode.offset.x,
-      y: layoutNode.position.y + layoutNode.offset.y
+      // layoutNode.position.y 是中心点，但画布节点原点在上边沿的中间，所以 y 坐标需要转化后一下
+      y: layoutNode.position.y + layoutNode.offset.y - (layoutNode.size.height - layoutNode.padding.top - layoutNode.padding.bottom) / 2
+    };
+    const deltaX = (layoutPosition.x - transform.position.x) * step / 100;
+    const deltaY = (layoutPosition.y - transform.position.y) * step / 100;
+    const position2 = {
+      x: transform.position.x + deltaX,
+      y: transform.position.y + deltaY
     };
-    const deltaX = (position2.x - transform.position.x) * step / 100;
-    const deltaY = (position2.y - transform.bounds.height / 2 - transform.position.y) * step / 100;
-    if (layoutNode.hasChildren) {
-      layoutNode.entity.collapsedChildren.forEach((childNode) => {
-        const childNodeTransformData = childNode.getData(FlowNodeTransformData2);
-        childNodeTransformData.fireChange();
-      });
-    }
     transform.update({
-      position: {
-        x: transform.position.x + deltaX,
-        y: transform.position.y + deltaY
-      }
+      position: position2
     });
+    const document = layoutNode.entity.document;
+    document.layout.updateAffectedTransform(layoutNode.entity);
   }
 };
 
 // src/layout/dagre.ts
-import { FlowNodeTransformData as FlowNodeTransformData3 } from "@flowgram.ai/document";
 import { Graph as DagreGraph } from "@dagrejs/graphlib";
-
-// src/layout/constant.ts
-var DagreLayoutOptions = {
-  rankdir: "LR",
-  nodesep: 100,
-  ranksep: 100,
-  ranker: "network-simplex"
-};
-
-// src/layout/dagre.ts
 var DagreLayout = class {
   constructor(store) {
     this.store = store;
@@ -2336,17 +2415,11 @@ var DagreLayout = class {
   createGraph() {
     const graph = new DagreGraph({ multigraph: true });
     graph.setDefaultEdgeLabel(() => ({}));
-    graph.setGraph(DagreLayoutOptions);
+    graph.setGraph(this.store.config);
     return graph;
   }
   graphSetData() {
-    const nodes = Array.from(this.store.nodes.values());
-    const edges = Array.from(this.store.edges.values()).sort((next, prev) => {
-      if (next.fromIndex === prev.fromIndex) {
-        return next.toIndex < prev.toIndex ? -1 : 1;
-      }
-      return next.fromIndex < prev.fromIndex ? -1 : 1;
-    });
+    const { nodes, edges } = this.store;
     nodes.forEach((layoutNode) => {
       this.graph.setNode(layoutNode.index, {
         originID: layoutNode.id,
@@ -2354,7 +2427,12 @@ var DagreLayout = class {
         height: layoutNode.size.height
       });
     });
-    edges.forEach((layoutEdge) => {
+    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,
@@ -2385,12 +2463,11 @@ var DagreLayout = class {
     return Number.isNaN(number) ? 0 : number;
   }
   getOffsetX(layoutNode) {
-    if (!layoutNode.hasChildren) {
+    if (layoutNode.layoutNodes.length === 0) {
       return 0;
     }
-    const nodeTransform = layoutNode.entity.getData(FlowNodeTransformData3);
-    const { bounds, padding } = nodeTransform;
-    const leftOffset = -bounds.width / 2 + padding.left;
+    const { padding } = layoutNode;
+    const leftOffset = -layoutNode.size.width / 2 + padding.left;
     return leftOffset;
   }
   setOrderAndRank(g) {
@@ -2458,14 +2535,13 @@ var DagreLayout = class {
 
 // src/layout/layout.ts
 var Layout = class {
-  constructor() {
-    this._store = new LayoutStore();
+  constructor(config) {
+    this._store = new LayoutStore(config);
     this._layout = new DagreLayout(this._store);
     this._position = new LayoutPosition(this._store);
   }
-  init(params, options = {}) {
-    this._store.create(params);
-    this.setFollowNode(options.getFollowNode);
+  init(params, options) {
+    this._store.create(params, options);
   }
   layout() {
     if (!this._store.initialized) {
@@ -2479,44 +2555,144 @@ var Layout = class {
     }
     return await this._position.position();
   }
-  setFollowNode(getFollowNode) {
-    if (!getFollowNode) return;
-    const context = { store: this._store };
-    this._store.nodes.forEach((node) => {
-      const followTo = getFollowNode(node, context)?.followTo;
-      if (!followTo) return;
-      const followToNode = this._store.getNode(followTo);
-      if (!followToNode) return;
-      if (!followToNode.followedBy) {
-        followToNode.followedBy = [];
-      }
-      followToNode.followedBy.push(node.id);
-      node.followTo = followTo;
-    });
-  }
 };
 
 // src/services.ts
 var AutoLayoutService = class {
+  constructor() {
+    this.layoutConfig = DefaultLayoutConfig;
+  }
+  init(options) {
+    this.layoutConfig = {
+      ...this.layoutConfig,
+      ...options.layoutConfig
+    };
+  }
   async layout(options = {}) {
-    await this.layoutNode(this.document.root, options);
+    const 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((layout2) => layout2.position());
+    const fitViewPromise = this.fitView(layoutOptions, rect);
+    await Promise.all([...positionPromise, fitViewPromise]);
+  }
+  async fitView(options, rect) {
+    if (options.disableFitView === true) {
+      return;
+    }
+    return this.playground.config.fitView(rect, options.enableAnimation, 30);
   }
-  async layoutNode(node, options) {
-    const nodes = node.collapsedChildren;
-    if (!nodes || !Array.isArray(nodes) || !nodes.length) {
+  async layoutNode(container, options) {
+    const { layoutNodes, layoutEdges } = container;
+    if (layoutNodes.length === 0) {
+      return [];
+    }
+    const childrenLayouts = (await Promise.all(layoutNodes.map((n) => this.layoutNode(n, options)))).flat();
+    const layoutConfig = {
+      ...this.layoutConfig,
+      ...options.layoutConfig
+    };
+    const layout2 = new Layout(layoutConfig);
+    layout2.init({ container, layoutNodes, layoutEdges }, options);
+    layout2.layout();
+    const rect = this.getLayoutNodeRect(container);
+    container.size = {
+      width: rect.width,
+      height: rect.height
+    };
+    return [...childrenLayouts, layout2];
+  }
+  createLayoutNodes(nodes, options) {
+    return nodes.map((node) => this.createLayoutNode(node, options));
+  }
+  /** 创建节点布局数据 */
+  createLayoutNode(node, options) {
+    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: width2, height, center } = bounds;
+    const { x, y } = center;
+    const 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: width2, height },
+      layoutNodes,
+      layoutEdges
+    };
+    return layoutNode;
+  }
+  createLayoutEdges(edges) {
+    const layoutEdges = edges.map((edge) => this.createLayoutEdge(edge)).filter(Boolean);
+    return layoutEdges;
+  }
+  /** 创建线条布局数据 */
+  createLayoutEdge(edge) {
+    const { from, to } = edge.info;
+    if (!from || !to) {
       return;
     }
-    const edges = node.collapsedChildren.map((child) => {
-      const childLinesData = child.getData(WorkflowNodeLinesData);
-      return childLinesData.outputLines.filter(Boolean);
+    const layoutEdge = {
+      id: edge.id,
+      entity: edge,
+      from,
+      to,
+      fromIndex: "",
+      // 初始化时，index 未计算
+      toIndex: "",
+      // 初始化时，index 未计算
+      name: edge.id
+    };
+    return layoutEdge;
+  }
+  getNodesAllLines(nodes) {
+    const lines = nodes.map((node) => {
+      const linesData = node.getData(WorkflowNodeLinesData);
+      const outputLines = linesData.outputLines.filter(Boolean);
+      const inputLines = linesData.inputLines.filter(Boolean);
+      return [...outputLines, ...inputLines];
     }).flat();
-    await Promise.all(nodes.map(async (child) => this.layoutNode(child, options)));
-    const layout2 = new Layout();
-    layout2.init({ nodes, edges }, options);
-    layout2.layout();
-    await layout2.position();
+    return lines;
+  }
+  getLayoutNodeRect(layoutNode) {
+    const rects = layoutNode.layoutNodes.map((node) => this.layoutNodeRect(node));
+    const rect = Rectangle.enlarge(rects);
+    const { padding } = layoutNode;
+    const width2 = 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, width2, height);
+  }
+  layoutNodeRect(layoutNode) {
+    const { width: width2, height } = layoutNode.size;
+    const x = layoutNode.position.x - width2 / 2;
+    const y = layoutNode.position.y - height / 2;
+    return new Rectangle(x, y, width2, height);
   }
 };
+__decorateClass([
+  inject(Playground)
+], AutoLayoutService.prototype, "playground", 2);
 __decorateClass([
   inject(WorkflowDocument)
 ], AutoLayoutService.prototype, "document", 2);
@@ -2528,7 +2704,11 @@ AutoLayoutService = __decorateClass([
 var createFreeAutoLayoutPlugin = definePluginCreator({
   onBind: ({ bind }) => {
     bind(AutoLayoutService).toSelf().inSingletonScope();
-  }
+  },
+  onInit: (ctx, opts) => {
+    ctx.get(AutoLayoutService).init(opts);
+  },
+  singleton: true
 });
 
 // src/index.ts
@@ -2536,6 +2716,7 @@ import { Graph as Graph8 } from "@dagrejs/graphlib";
 export {
   AutoLayoutService,
   Graph8 as DagreGraph,
+  DefaultLayoutConfig,
   Layout,
   createFreeAutoLayoutPlugin,
   dagreLib