@flowgram.ai/free-auto-layout-plugin 0.1.0-alpha.15 → 0.1.0-alpha.16

package/dist/index.js

@@ -26,8 +26,8 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   AutoLayoutService: () => AutoLayoutService,
   DagreGraph: () => import_graphlib10.Graph,
   DefaultLayoutConfig: () => DefaultLayoutConfig,
@@ -35,7 +35,7 @@ __export(src_exports, {
   createFreeAutoLayoutPlugin: () => createFreeAutoLayoutPlugin,
   dagreLib: () => dagreLib
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/dagre-lib/greedy-fas.js
 var import_graphlib = require("@dagrejs/graphlib");
@@ -2105,11 +2105,13 @@ var dagreLib = {
 };
 
 // src/create-auto-layout-plugin.tsx
-var import_core2 = require("@flowgram.ai/core");
+var import_core3 = require("@flowgram.ai/core");
 
 // src/services.ts
 var import_inversify = require("inversify");
-var import_free_layout_core2 = require("@flowgram.ai/free-layout-core");
+var import_utils = require("@flowgram.ai/utils");
+var import_free_layout_core = require("@flowgram.ai/free-layout-core");
+var import_core2 = require("@flowgram.ai/core");
 
 // src/layout/constant.ts
 var DefaultLayoutConfig = {
@@ -2125,11 +2127,12 @@ var DefaultLayoutConfig = {
 };
 var DefaultLayoutOptions = {
   getFollowNode: void 0,
-  enableAnimation: false
+  disableFitView: false,
+  enableAnimation: false,
+  animationDuration: 300
 };
 
 // src/layout/store.ts
-var import_free_layout_core = require("@flowgram.ai/free-layout-core");
 var import_document = require("@flowgram.ai/document");
 var LayoutStore = class {
   constructor(config) {
@@ -2159,6 +2162,7 @@ var LayoutStore = class {
     return Array.from(this.store.edges.values());
   }
   create(params, options) {
+    this.container = params.container;
     this.store = this.createStore(params);
     this.indexMap = this.createIndexMap();
     this.setOptions(options);
@@ -2166,10 +2170,7 @@ var LayoutStore = class {
   }
   /** 创建布局数据 */
   createStore(params) {
-    const { nodes, edges, container } = params;
-    this.container = container;
-    const layoutNodes = this.createLayoutNodes(nodes);
-    const layoutEdges = this.createEdgesStore(edges);
+    const { layoutNodes, layoutEdges } = params;
     const virtualEdges = this.createVirtualEdges(params);
     const store = {
       nodes: /* @__PURE__ */ new Map(),
@@ -2179,53 +2180,11 @@ var LayoutStore = class {
     layoutEdges.concat(virtualEdges).forEach((edge) => store.edges.set(edge.id, edge));
     return store;
   }
-  /** 创建节点布局数据 */
-  createLayoutNodes(nodes) {
-    const layoutNodes = nodes.map((node, index) => {
-      const { bounds } = node.getData(import_document.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
-      };
-      return layoutNode;
-    });
-    return layoutNodes;
-  }
-  /** 创建线条布局数据 */
-  createEdgesStore(edges) {
-    const layoutEdges = edges.map((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
-      };
-      return layoutEdge;
-    }).filter(Boolean);
-    return layoutEdges;
-  }
   /** 创建虚拟线条数据 */
   createVirtualEdges(params) {
-    const { nodes, edges } = 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 === import_document.FlowNodeBaseType.GROUP);
     const virtualEdges = groupNodes.map((group) => {
       const { id: groupId, blocks = [] } = group;
@@ -2312,7 +2271,7 @@ var LayoutStore = class {
     });
     const visited = /* @__PURE__ */ new Set();
     const visit = (node) => {
-      if (visited.has(node.id)) {
+      if (!node || visited.has(node.id)) {
         return;
       }
       visited.add(node.id);
@@ -2320,7 +2279,7 @@ var LayoutStore = class {
       node.blocks.forEach((child) => {
         visit(child);
       });
-      const { outputLines } = node.getData(import_free_layout_core.WorkflowNodeLinesData);
+      const { outputLines } = node.lines;
       const sortedLines = outputLines.sort((a, b) => {
         const aNode = this.getNode(a.to?.id);
         const bNode = this.getNode(b.to?.id);
@@ -2342,7 +2301,7 @@ var LayoutStore = class {
         visit(to);
       });
     };
-    visit(this.container);
+    visit(this.container.entity);
     const uniqueNodeIds = nodeIdList.reduceRight((acc, nodeId) => {
       if (!acc.includes(nodeId)) {
         acc.unshift(nodeId);
@@ -2396,7 +2355,7 @@ var LayoutPosition = class {
       (0, import_core.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 });
@@ -2410,18 +2369,20 @@ var LayoutPosition = class {
   }
   updateNodePosition(params) {
     const { layoutNode, step } = params;
-    const transform = layoutNode.entity.getData(import_core.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.size.height / 2 + layoutNode.offset.y
+    };
+    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;
     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);
@@ -2429,7 +2390,6 @@ var LayoutPosition = class {
 };
 
 // src/layout/dagre.ts
-var import_document2 = require("@flowgram.ai/document");
 var import_graphlib9 = require("@dagrejs/graphlib");
 var DagreLayout = class {
   constructor(store) {
@@ -2483,13 +2443,7 @@ var DagreLayout = class {
     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,
@@ -2497,7 +2451,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,
@@ -2528,12 +2487,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(import_document2.FlowNodeTransformData);
-    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) {
@@ -2635,42 +2593,131 @@ var AutoLayoutService = class {
     };
   }
   async layout(options = {}) {
-    await this.layoutNode(this.document.root, {
+    const layoutOptions = {
       ...DefaultLayoutOptions,
       ...options
-    });
-  }
-  async layoutNode(node, options) {
-    const nodes = node.blocks;
-    if (!nodes || !Array.isArray(nodes) || !nodes.length) {
+    };
+    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;
     }
-    const edges = this.getNodesAllLines(nodes);
-    await Promise.all(nodes.map(async (child) => this.layoutNode(child, options)));
+    return this.playground.config.fitView(rect, options.enableAnimation, 30);
+  }
+  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 layout2 = new Layout(this.layoutConfig);
-    layout2.init({ nodes, edges, container: node }, options);
+    layout2.init({ container, layoutNodes, layoutEdges }, options);
     layout2.layout();
-    await layout2.position();
+    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;
+    const edges = this.getNodesAllLines(blocks);
+    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 || edge.vertical) {
+      return;
+    }
+    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(import_free_layout_core2.WorkflowNodeLinesData);
+      const linesData = node.getData(import_free_layout_core.WorkflowNodeLinesData);
       const outputLines = linesData.outputLines.filter(Boolean);
       const inputLines = linesData.inputLines.filter(Boolean);
       return [...outputLines, ...inputLines];
     }).flat();
     return lines;
   }
+  getLayoutNodeRect(layoutNode) {
+    const rects = layoutNode.layoutNodes.map((node) => this.layoutNodeRect(node));
+    const rect = import_utils.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 import_utils.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 import_utils.Rectangle(x, y, width2, height);
+  }
 };
 __decorateClass([
-  (0, import_inversify.inject)(import_free_layout_core2.WorkflowDocument)
+  (0, import_inversify.inject)(import_core2.Playground)
+], AutoLayoutService.prototype, "playground", 2);
+__decorateClass([
+  (0, import_inversify.inject)(import_free_layout_core.WorkflowDocument)
 ], AutoLayoutService.prototype, "document", 2);
 AutoLayoutService = __decorateClass([
   (0, import_inversify.injectable)()
 ], AutoLayoutService);
 
 // src/create-auto-layout-plugin.tsx
-var createFreeAutoLayoutPlugin = (0, import_core2.definePluginCreator)({
+var createFreeAutoLayoutPlugin = (0, import_core3.definePluginCreator)({
   onBind: ({ bind }) => {
     bind(AutoLayoutService).toSelf().inSingletonScope();
   },