70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
import { DagreLayout, type DagreLayoutOptions } from '@antv/layout'
|
||
|
||
export default class Dagre {
|
||
static pluginName = 'dagre'
|
||
lf: any
|
||
option: DagreLayoutOptions | any
|
||
render(lf: any) {
|
||
this.lf = lf
|
||
}
|
||
|
||
/**
|
||
* 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为grid的偶数倍
|
||
* ranksep: 40, // 每一层节点之间间距 注意：如果有grid，需要保证ranksep为grid的偶数倍
|
||
* controlPoints: false, // 是否保留布局连线的控制点
|
||
* radial: false, // 是否基于 dagre 进行辐射布局
|
||
* focusNode: null, // radial 为 true 时生效，关注的节点
|
||
* };
|
||
*/
|
||
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()
|
||
}
|
||
}
|