键盘快捷键 Keyboard

键盘事件可用于绑定快捷键，如 Ctrl+C 复制节点 Ctrl+V 粘贴节点，创建画布时通过以下配置启用。

const netGraph = new NetPlanGraph({
  keyboard: true,
})

// 等同于
const netGraph = new NetPlanGraph({
  keyboard: {
    enabled: true,
  },
})

创建画布后，也可以调用 netGraph.enableKeyboard() 和 netGraph.disableKeyboard() 来启用和禁用键盘事件。

if (netGraph.isKeyboardEnabled()) {
  netGraph.disableKeyboard()
} else {
  netGraph.enableKeyboard()
}

选项

global

是否为全局键盘事件，设置为 true 时键盘事件绑定在 Document 上，否则绑定在画布容器上。当绑定在画布容器上时，需要容器获得焦点才能触发键盘事件。默认为 false。

format

绑定或解绑键盘事件时，格式化按键字符串。

const netGraph = new NetPlanGraph({
  keyboard: {
    enabled: true, // 是否启用键盘事件，缺省时切换键盘事件的启用状态。
    format(key) {
      return key
        .replace(/\s/g, '')
        .replace('cmd', 'command')
    },
  },
})

netGraph.bindKey('cmd', (e) => { })
// 被格式化后等同于 graph.bindKey('command', (e) => { })

guard

判断一个键盘事件是否应该被处理，返回 false 时对应的键盘事件被忽略。

const netGraph = new NetPlanGraph({
    keyboard: {
      enabled: true,
      guard(e) {
        if (e.altKey) { // 当按下 alt 键时，忽略所有键盘事件
          return false
        }
        return true
      }
    }
})

API

netGraph.bindKey(...)

绑定快捷键。

bindKey(
  keys: string | string[], 
  callback: (e: KeyboardEvent) => void, 
  action?: 'keypress' | 'keydown' | 'keyup',
): this

netGraph.unbindKey(...)

解绑快捷键。

unbindKey(
  keys: string | string[], 
  action?: 'keypress' | 'keydown' | 'keyup',
): this

netGraph.isKeyboardEnabled()

获取是否启用了键盘事件。

netGraph.enableKeyboard()

启用键盘事件。

netGraph.disableKeyboard()

禁用键盘事件。

netGraph.toggleKeyboard(enabled?: boolean)

切换键盘事件的启用状态。