antv-x6_工作流_节点_增加元素删除按钮2022-09-15

效果

  // 画布绑定监听事件
    graphOnEvent () {
      // 控制连接桩显示/隐藏
      const showPorts = (ports, show) => {
        for (let i = 0, len = ports.length; i < len; i = i + 1) {
          ports[i].style.visibility = show ? 'visible' : 'hidden'
        }
      }


      this.graph.on('cell:mouseenter', ({ cell }) => {

                    if (cell.isNode()) {
                      cell.addTools([
                        {
                          name: 'boundary',
                          args: {
                            attrs: {
                              fill: '#7c68fc',
                              stroke: '#333',
                              'stroke-width': 1,
                              'fill-opacity': 0.2,
                            },
                          },
                        },
                        {
                          name: 'button-remove',
                          args: {
                            x: 0,
                            y: 0,
                            offset: { x: -10, y: -10 },
                          },
                        },
                      ])
                    } else {
                      // cell.addTools(['vertices', 'segments'])
                      cell.addTools([
                      { name: 'boundary' },
                      {
                        name: 'button-remove',  // 工具名称
                        args: { x: 10, y: 10 }, // 工具对应的参数
                      },])
                    }
      })

      this.graph.on('cell:mouseleave', ({ cell }) => {
        cell.removeTools()
      })

原文档：
antv-x6官网文档
vue-x6-flow的源码