antv/x6 键盘快捷键事件

引用插件

安装

npm install @antv/x6-plugin-selection --save
npm install @antv/x6-plugin-keyboard --save
npm install @antv/x6-plugin-clipboard --save
npm install @antv/x6-plugin-history --save
1
2
3
4

导入

import { Selection } from '@antv/x6-plugin-selection'
import { Keyboard } from '@antv/x6-plugin-keyboard'
import { Clipboard } from '@antv/x6-plugin-clipboard'
import { History } from '@antv/x6-plugin-history'
1
2
3
4

取消/重做

    this.graph.bindKey(['meta+z', 'ctrl+z'], () => {
      if (this.graph.canUndo()) {
        this.graph.undo()
      }
      return false
    })
    this.graph.bindKey(['meta+y', 'ctrl+y'], () => {
      if (this.graph.canRedo()) {
        this.graph.redo()
      }
      return false
    })
1
2
3
4
5
6
7
8
9
10
11
12

放大/缩小

    this.graph.bindKey(['ctrl+1', 'meta+1'], () => {
      const zoom = this.graph.zoom()
      if (zoom < 1.5) {
        this.graph.zoom(0.1)
      }
    })
    this.graph.bindKey(['ctrl+2', 'meta+2'], () => {
      const zoom = this.graph.zoom()
      if (zoom > 0.5) {
        this.graph.zoom(-0.1)
      }
    })
1
2
3
4
5
6
7
8
9
10
11
12

复制/剪切/粘贴

    this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
      const cells = this.graph.getSelectedCells()
      if (cells.length) {
        this.graph.copy(cells)
      }
      return false
    })
    
	this.graph.bindKey(['meta+x', 'ctrl+x'], () => {
	  const cells = graph.getSelectedCells()
	  if (cells.length) {
	    graph.cut(cells)
	  }
	  return false
	})

    this.graph.bindKey(['meta+v', 'ctrl+v'], () => {
      if (!this.graph.isClipboardEmpty()) {
        const cells = this.graph.paste({ offset: 32 })
        this.graph.cleanSelection()
        this.graph.select(cells)
      }
      return false
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24