从0到1实现流程图08-快捷键篇

开始

在使用软件的过程中，我们经常会使用一些快捷键来提高效率，比如 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
})

最后

快捷键对于一款应用来说是非常重要的一部分，但是设计不好的快捷键会让用户抓狂，所以在设计快捷键的时候一般与传统的软件对齐，而不是自己随心所欲的设定。如果为一个全新的功能配置快捷键，可能需要好好花心思研究用户的使用习惯。

1. 源码：传送门
2. 记得给 X6 仓库加星