antv/x6 键盘快捷键事件

.伊泽瑞尔2023-11-18 5:10

antv/x6 键盘快捷键事件

引用插件

安装

javascript 复制代码

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

导入

javascript 复制代码

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'

取消/重做

javascript 复制代码

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

放大/缩小

javascript 复制代码

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

复制/剪切/粘贴

javascript 复制代码

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