实现思路:在按住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)
})
}
})