antv/x6 边添加鼠标悬浮高亮和删除功能
- 效果
- 添加悬浮效果和删除工具
- 取消悬浮效果
- 边删除后的回调函数
效果
添加悬浮效果和删除工具
this.graph.on('edge:mouseenter', ({ cell }) => {
let cellId = cell.store.data.source.cell
let sourceCell = _this.graph.getCellById(cellId)
cell.attr('line', { stroke: '#cf1322', strokeWidth: 4, strokeDasharray: '0' })
cell.zIndex = 100000000
if (sourceCell.store.data.shape === 'CSA') {
return false
}
if (sourceCell.store.data.shape === 'script') {
let portID = cell.store.data.source.port
let port = sourceCell.getPort(portID)
if (port.attrs && port.attrs.noDEL) {
return false
}
}
cell.addTools([
{
name: 'button-remove',
args: { distance: -40 },
},
{
name: 'target-arrowhead',
args: {
attrs: {
fill: '#1d39c4',
},
},
},
])
})
- zIndex 设置100000为了让高亮的边在其他边上方，这样点击删除按钮时候更方便。
取消悬浮效果
this.graph.on('edge:mouseleave', ({ cell }) => {
console.log(cell)
cell.removeTools()
cell.attr('line', { stroke: '#7C8394', strokeWidth: 1, strokeDasharray: '4, 2' })
cell.zIndex = 0
})
边删除后的回调函数
this.graph.on('cell:removed', ({ cell, index, options }) => {
console.log(cell)
})
