这篇主要记录一下当antv X6画布中的两个节点连接成功后要进行的操作
graph.on('edge:connected', ({ isNew,edge }) => {
// 这里的isNew是一个布尔值,代表两个节点是否连接成功 true为成功 false为失败
if (isNew) {
const sourceId = edge.getSourceCell().id // sourceId为源节点id
const targetId = edge.getTargetCell().id // targetId为剪头指向的节点id
// 当拿到这两个id就可以做一些操作了 举个例子:
let arr =[{ label:'', children:[] }]
if (sourceId && targetId) {
arr[0].label=sourceId
arr[0].children.push(targetNode)
}
})
大概如下图,可以看到两个id分别为节点1和节点2
当然,如果你在添加节点的时候没有对节点id进行自定义设置,那么id就是默认的(一长串...)添加节点的时候直接这样设置就好了:
let count = 0
let node = graph.addNode({
shape: 'custom-rect',
label: type,
x: -50,
y: -50,
id: `节点${++count}`, // 设置节点id
})
顺便说一下 如果是在节点生成后对节点id进行修改的话,是不能!!!直接赋值修改的!!!
比如这样:
node.id = '666'
这是错误的❌方法
你只能通过antv X6官方的方法,path是指路径,value是指你要修改的内容(实在不知道的就直接打印节点看看它有哪些信息)
如果你是想要在修改节点信息后,将修改的信息用于两个节点连接成功的时候去做一些操作,那么以上修改方法只有一个会达到你想要的效果,那就是在添加节点的时候直接对id进行你想要的修改(也就是addNode的操作),这因为在 graph.on('edge:connected')节点连接的时候,edge指向的是旧的节点的信息,而不是新的
当你需要在画布中寻找是否有一个你指定的节点id时,并对该节点进行操作,你可以使用这个方法:
const findId = (data) => {
const curID = data.label // 这个是你指定的id值
const selectedNode = graph.getCellById(curID) // 在画布中查找是否有节点id等于curID
// 这里说明一下,你一定要区分cell和node的关系,确认清楚你要的是cell的id还是node的id 我这里取的是cell
console.log(selectedNode,'selectedNode')
if (selectedNode) {
reset(graph)
selectedNode.attr('body/stroke', 'red') // 如果有 该节点边框颜色会变成红色
}
}
以上内容,仅为个人前端学习中的总结,如有不妥之处,欢迎一起交流,一起学习~~~
(ps:后面有时间再抽个vue3+antv X6 2.0+elemnet plus小demo吧~ 这样可能更容易理解某些操作)