antv x6使用Vue+ElementPlus实现右键菜单

基于X6官方给出的React版的右键菜单示例，实现Vue版本的，其中右键菜单使用的是ElMenu的样式。

import { ToolsView } from '@antv/x6'
import { h, render } from 'vue'
import { ElMenu, ElMenuItem } from 'element-plus'
export class ContextMenuTool extends ToolsView.ToolItem {
  private timer: number

  private onMouseDown = () => {
    this.timer = window.setTimeout(() => {
      this.toggleContextMenu(false)
    }, 200)
  }
  private toggleContextMenu(visible: boolean, e?: any ) {
    render(null, this.container)
    document.removeEventListener('mousedown', this.onMouseDown)
    if (visible && e) {
      const VNode = h(
        ElMenu,
        {
          style: {
            position: 'fixed',
            top: `${e.e.clientY + 10}px`,
            left: `${e.e.clientX + 10}px`
          }
        },
        this.options.menu.map((element) => {
          return h(ElMenuItem, { key: element.key, style: {
            height: '30px'
            }, onClick(){
              if (element.click) element.click(e)
            } }, element.label)
        })
      )
      render(VNode, this.container)
      document.addEventListener('mousedown', this.onMouseDown)
    }
  }

  private onContextMenu(e) {
    if (this.timer) {
      clearTimeout(this.timer)
      this.timer = 0
    }
    this.toggleContextMenu(true, e)
  }

  delegateEvents() {
    this.cellView.on('cell:contextmenu', this.onContextMenu, this)
    return super.delegateEvents()
  }

  protected onRemove() {
    this.cellView.off('cell:contextmenu', this.onContextMenu, this)
  }
}

使用：

import { ContextMenuTool } from './context_menu.ts'

ContextMenuTool.config({
  tagName: 'div',
  isSVGElement: false,
})

const graph = new Graph({
  container: document.getElementById('container'),
  grid: true,
})

const menu = [
  {
    key: 'input',
    label: '输入内容',
    click(view) {
      console.log(view)
    }
  },
  {
    key: 'flow',
    label: '查看流水'
  }
]

graph.addNode({
  shape: 'core_boss_node', // 自定义的节点
  x: 100,
  y: 150,
  id: 'id1',
  tools:[
          {
             name: 'contextmenu',
             args: {
                 menu,
             },
          },
   ]
})

效果：