Keyboard Input

Keyboard support for GraphComponent is managed by KeyboardInputMode. You can use KeyboardInputMode to override or disable existing shortcuts, and to add new keyboard shortcuts.

Overriding Defaults

The keyboard shortcuts that are supported by default, such as Ctrl+C for copy or Ctrl+Z for undo, are handled internally through Commands. You can override their default behavior using addCommandBinding. The original handlers are not replaced. Instead, the new handlers are added and invoked before the original ones. To prevent the execution of the original handlers, you must set ExecuteCommandArgs.handled to true in the execute handler.

Similarly, if a canExecuteHandler is provided that sets CanExecuteCommandArgs.canExecute to false, you need to set CanExecuteCommandArgs.handled to true to prevent subsequent querying of the original handler.

graphEditorInputMode.keyboardInputMode.addCommandBinding(
  Command.EDIT_LABEL,
  (executeArgs) => {
    if (executeArgs.parameter instanceof HTMLTextAreaElement) {
      editTextBoxText(executeArgs.parameter)
    }
    executeArgs.handled = true
  },
  (canExecuteArgs) => {
    // if the command parameter is a TextBox this command can be executed
    canExecuteArgs.canExecute =
      canExecuteArgs.parameter instanceof HTMLTextAreaElement
    // don't query further
    canExecuteArgs.handled = true
  }
)

You can disable a shortcut by setting the CanExecuteCommandArgs.canExecute to false and setting CanExecuteCommandArgs.handled to true to prevent the subsequent querying of the original handler.

graphEditorInputMode.keyboardInputMode.addCommandBinding(
  Command.EDIT_LABEL,
  (executeArgs) => (executeArgs.handled = true),
  (canExecuteArgs) => {
    // cannot execute
    canExecuteArgs.canExecute = false
    // don't query further
    canExecuteArgs.handled = true
  }
)

Adding New Keyboard Shortcuts

While monitoring the platform’s keyboard events directly and responding to them is generally straightforward and effective, setting up listeners on the KeyboardInputMode offers the benefit of preventing input processing when the KeyboardInputMode or its parent input mode is disabled, such as during animations. Custom handlers can be added using the addKeyBinding or addRecognizerBinding methods.

graphEditorInputMode.keyboardInputMode.addKeyBinding(
  'N',
  ModifierKeys.CONTROL,
  () => graph.clear()
)