在vue3中浅尝antv X6 2.0 （二）

这篇主要记录一下当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时，并对该节点进行操作，你可以使用这个方法：

扫描二维码关注公众号，回复： 15527232 查看本文章

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吧～这样可能更容易理解某些操作）

在vue3中浅尝antv X6 2.0 （二）

猜你喜欢