开始
在使用软件的过程中，我们经常会使用一些快捷键来提高效率，比如 Ctrl +C、Ctrl + V，同样，在流程图应用中，也需要一些快捷键来提高编辑效率。
实现
X6 提供了 clipboard 来实现画布上节点的复制、剪切、粘贴功能，经常和快捷键搭使用。
const graph = new Graph({
clipboard: true,
})
// copy
graph.bindKey(['meta+c', 'ctrl+c'], () => {
const cells = graph.getSelectedCells()
if (cells.length) {
graph.copy(cells)
}
return false
})
//cut
graph.bindKey(['meta+x', 'ctrl+x'], () => {
const cells = graph.getSelectedCells()
if (cells.length) {
graph.cut(cells)
}
return false
})
// paste
graph.bindKey(['meta+v', 'ctrl+v'], () => {
if (!graph.isClipboardEmpty()) {
const cells = graph.paste({ offset: 32 })
graph.cleanSelection()
graph.select(cells)
}
return false
})
快捷键还可以搭配选择功能使用，实现常见的 Ctrl + A 全选、Backspace 删除选择元素。
// select all
graph.bindKey(['meta+a', 'ctrl+a'], () => {
const nodes = graph.getNodes()
if (nodes) {
graph.select(nodes)
}
})
//delete
graph.bindKey('backspace', () => {
const cells = graph.getSelectedCells()
if (cells.length) {
graph.removeCells(cells)
}
})
在流程图编辑过程中经常要使用撤销、恢复功能，将这两个操作和 Ctrl + Z、Ctrl + Shift + Z 绑定在一起是常见的需求。
//undo redo
graph.bindKey(['meta+z', 'ctrl+z'], () => {
if (graph.history.canUndo()) {
graph.history.undo()
}
return false
})
graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
if (graph.history.canRedo()) {
graph.history.redo()
}
return false
})
最后
快捷键对于一款应用来说是非常重要的一部分，但是设计不好的快捷键会让用户抓狂，所以在设计快捷键的时候一般与传统的软件对齐，而不是自己随心所欲的设定。如果为一个全新的功能配置快捷键，可能需要好好花心思研究用户的使用习惯。
