使用antv-x6 实现按住ctrl拖动单节点

264 阅读1分钟

实现思路:在按住ctrl的时候,记录下这个操作,拖动节点的时候,如果是按住ctrl期间,就暂时去掉该节点的所有子节点关系,并记录下所有移除的子节点,在松开ctrl之后,将移除的子节点都恢复。

1、使用变量记录是否按下了ctrl

this.graph.on('ctrl', () => {
    this.isCtrlDown = true
}, 'keydown')

2、使用变量记录是否松开了ctrl

this.graph.on('ctrl', () => {
    this.isCtrlDown = true
}, 'keyup')

3、节点开始拖动时,去掉该节点的所有子节点关系

this.graph.on('node:move', ({node}) => {
    if (this.isCtrlDown) {
        this.ctrlNode = node
        this.ctrlChilds = []
        node.eachChild(child => {
            node.unembed(child)
            this.ctrlChilds.push(child)
        })
    }
})

4、节点结束拖动时,恢复该节点的所有子节点关系

this.graph.on('node:moved', ({node}) => {
    if (this.isCtrlDown) {
        this.ctrlChilds.forEach(child => {
            this.ctrlNode.embed(child)
        })
    }
})