Method layout

ui/src/workflow/plugins/dagre.ts:25–68

* option: { * rankdir: "TB", // layout 方向, 可选 TB, BT, LR, RL * align: undefined, // 节点对齐方式，可选 UL, UR, DL, DR * nodeSize: undefined, // 节点大小 * nodesepFunc: undefined, // 节点水平间距(px) * ranksepFunc: undefined, // 每一层节点之间间距 * nodesep: 40, // 节点水平间距(px) 注意：如果有grid，需要保证nodesep

(option = {})

   * };
   */
  layout(option = {}) {
    const { nodes, edges, gridSize } = this.lf.graphModel
    // 为了保证生成的节点在girdSize上，需要处理一下。
    let nodesep = 40
    let ranksep = 40
    if (gridSize > 20) {
      nodesep = gridSize * 2
      ranksep = gridSize * 2
    }
    this.option = {
      type: 'dagre',
      rankdir: 'LR',
      // align: 'UL',
      // align: 'UR',
      align: 'DR',
      nodesep,
      ranksep,
      begin: [120, 120],
      ...option,
    }
    const layoutInstance = new DagreLayout(this.option)
    const layoutData = layoutInstance.layout({
      nodes: nodes.map((node: any) => ({
        id: node.id,
        size: {
          width: node.width,
          height: node.height,
        },
        model: node,
      })),
      edges: edges.map((edge: any) => ({
        source: edge.sourceNodeId,
        target: edge.targetNodeId,
        model: edge,
      })),
    })

    layoutData.nodes?.forEach((node: any) => {
      // @ts-ignore: pass node data
      const { model } = node
      model.set_position({ x: node.x, y: node.y })
    })
    this.lf.fitView()
  }
}