From 0 to 1 to realize the flowchart 08-Shortcut key articles

begin

In the process of using software, we often use some shortcut keys to improve efficiency, such as Ctrl + C, Ctrl + V. Similarly, in flowchart applications, we also need some shortcut keys to improve editing efficiency.

achieve

X6 provides clipboard to realize the functions of copying, cutting and pasting nodes on the canvas, which is often used with shortcut keys.

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
})

Shortcut keys can also be used with the selection function to realize the common Ctrl + A to select all and Backspace to delete selected elements.

// 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)
  }
})

In the process of editing flowcharts, undo and redo functions are often used. It is a common requirement to bind these two operations with Ctrl + Z and 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
})

At last

Shortcut keys are a very important part of an application, but poorly designed shortcut keys will make users crazy, so when designing shortcut keys, it is generally aligned with traditional software, instead of setting it as you want. If you configure shortcut keys for a brand-new function, you may need to study the user's habits carefully.

1. Source code: portal
2. Remember to X6 warehouse