基于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,
},
},
]
})
效果: