开始
连线是 X6 中非常重要的一部分,X6 内置了很多实用的连线功能,也提供了优雅的扩展机制 ,这是相比于其他流程图框架占据绝对优势的地方。本文通过实现流程图的连线功能来一步步介绍 X6 的连线机制。
实现
图形定义
X6 中连线分两种形式,代码生成的和用户手动拖拽而成,首先来看怎么通过代码建立连线:
// source 或 target 是坐标点
graph.addEdge({
source: [0, 0],
target: [100, 100]
})
// source 或 target 是节点对象
graph.addEdge({
source: sourceNode,
target: targetNode,
})
// source 或 target 是节点 ID
graph.addEdge({
source: 'sourceId',
target: 'targetId',
})
// source 或 target 是连接桩
graph.addEdge({
source: {
cell: 'cellId1', port: 'portId1' },
target: {
cell: 'cellId2', port: 'portId2' }
})
如果想通过手动操作来创建连线,需要有两个条件:
- 需要从具有 magnet: true 属性的元素上才能手动拖拽出连线
- 需要在全局 connecting 配置中自定义 createEdge 方法
import {
Graph, Shape } from '@antv/x6'
const graph = new Graph({
connecting: {
createEdge() {
return new Shape.Edge()
},
},
})
graph.addNode({
shape: 'rect',
x: