开始
在手动连线的过程中，还需要处理一些交互细节，比如到达连接桩附近自动吸附、可连接元素的高亮显示等，幸运的是这些都不需要我们自己去实现，X6 提供了便利的配置方式帮我们解决这些问题。
实现
连接配置
当连线到达连接桩附近时，我们希望连线会自动吸附到连接桩上面，这样交互体验会更好：
const graph = new Graph({
connecting: {
snap: {
radius: 20, // 离目标 20px 的时候自动吸附
},
}
})
现在拖动连线到空白处放开后，会生成一条终点在空白处的连线，这种连线在流程图中是无效的连线，所以希望如果终点在空白处时，该连线自动消失：
const graph = new Graph({
connecting: {
allowBlank: false
}
})
1.gif
在实际业务中还需要用户根据业务逻辑来定义连线有效性，X6 根据判断的先后顺序提供了三个方法：
| 方法 | 触发时机 |
|---|---|
| validateMagnet | 点击 magnet 元素时根据 validateMagnet 返回值判断是否新增边 |
| validateConnection | 拖拽连线的过程中根据 validateConnection 返回值判断是否可以连接 |
| validateEdge | 当停止拖动边的时候根据 validateEdge 返回值来判断边是否生效，如果返回 false, 该边会被清除 |
const graph = new Graph({
connecting: {
validateConnection({ targetMagnet }) {
if (targetMagnet) {
// 只能连接 group 为 top 的连接桩
return targetMagnet!.getAttribute('port-group') === 'top'
}
return false
}
}
})
2.gif
高亮配置
从上图我们可以发现，当连接桩可以被连接的时候，当连线到达它附近时，会出现高亮的效果，这个效果其实也是可以自定义的：
const graph = new Graph({
highlighting: {
magnetAdsorbed: {
name: 'stroke',
args: {
attrs: {
fill: '#D06269',
stroke: '#D06269',
},
},
}
}
})
3.gif
最后
X6 的很多功能都是从实际业务场景中沉淀出来的，在一些交互细节的地方打磨的已经足够光滑，但是还有一些不够好的地方，希望能得到大家的反馈。
