antv-x6_工作流_節(jié)點(diǎn)_增加元素刪除按鈕2022-09-15

效果
  // 畫布綁定監(jiān)聽事件
    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 }, // 工具對應(yīng)的參數(shù)
                      },])
                    }
      })

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

原文檔:
antv-x6官網(wǎng)文檔
vue-x6-flow的源碼

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容