antv x6 拖动节点到两节点连接的边时，自动插入

最新推荐文章于 2024-03-01 16:22:59 发布

我真的是落叶

最新推荐文章于 2024-03-01 16:22:59 发布

阅读量1.2k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/ZCJSGSZ/article/details/126545542

版权

使用官方提供的方法，插入节点后找到相交的边

const findIntersectsEdge = (node) => {
      const edges = graph.getEdges()
      const bbox = node.getBBox()
      const lines = [
        bbox.leftLine,
        bbox.rightLine,
        bbox.topLine,
        bbox.bottomLine
      ]
      let res = null
      edges.forEach((edge) => {
        const view = graph.findViewByCell(edge)
        lines.forEach((line) => {
          if (view) {
            if (view.path.intersectsWithLine(line)) {
              res = edge
            }
          }
        })
      })
      return res
    }

获取到该节点后，在节点创建/移动（根据需求进行修改）时进行插入

graph.on('node:added', ({ node }) => {
	const e = findIntersectsEdge(node)
        if (e) {
          if (e.store.data.source.cell) {
            const sourceNode = e.getSourceNode()
            const targetNode = e.getTargetNode()
            if (sourceNode && targetNode) {
              e.clone().setSource({
                cell: sourceNode.id
              }).setTarget({
                cell: node.id
              }).addTo(graph)
              e.clone().setSource({
                cell: node.id
              }).setTarget({
                cell: targetNode.id
              }).addTo(graph)
              graph.removeEdge(e)
            }
          }
        }
})