效果
// 画布绑定监听事件
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()
})
