documentationfor yFiles for HTML 2.6

KeyboardInputMode

Show usages

An IInputMode that recognizes simple key events and invokes a registered handler.

Inheritance Hierarchy
KeyboardInputMode
Implemented Interfaces
IInputMode

Remarks

This mode is exclusive by default.

Examples

Typically the KeyboardInputMode is installed as child mode of a GraphEditorInputMode or GraphViewerInputMode and can be retrieved from the keyboardInputMode property.
Getting the KeyboardInputMode from its parent input mode
const keyboardInputMode = mode.keyboardInputMode
Adding a handler for a keyboard event
const keyboardInputMode = graphEditorInputMode.keyboardInputMode
const myCommand = ICommand.createCommand('MyCommand')

// The command creates a new node in the center of the viewport
keyboardInputMode.addCommandBinding(
  myCommand,
  (command, parameter, target) => {
    graphEditorInputMode.createNode(
      graphEditorInputMode.graphComponent.viewport.center
    )
    return true
  },
  (command, parameter, target) => true
)

// Execute the command if the Insert key is pressed
keyboardInputMode.addKeyBinding(Key.INSERT, ModifierKeys.NONE, myCommand)const keyboardInputMode = graphEditorInputMode.keyboardInputMode
const myCommand = ICommand.createCommand('MyCommand')

// The command creates a new node in the center of the viewport
keyboardInputMode.addCommandBinding(
  myCommand,
  (command, parameter, target) => {
    graphEditorInputMode.createNode(
      graphEditorInputMode.graphComponent!.viewport.center
    )
    return true
  },
  (command, parameter, target) => true
)

// Execute the command if the Insert key is pressed
keyboardInputMode.addKeyBinding(Key.INSERT, ModifierKeys.NONE, myCommand)
Adding a handler triggered by a keyboard event recognizer
const keyboardInputMode = graphEditorInputMode.keyboardInputMode

// Execute the FIT_GRAPH_BOUNDS command if the Enter key is pressed
keyboardInputMode.addRecognizerBinding(
  (src, args) => args instanceof KeyEventArgs && args.key === Key.ENTER,
  ICommand.FIT_GRAPH_BOUNDS
)

Type Details

yfiles module
view-component
yfiles-umd modules
All view modules
Legacy UMD name
yfiles.input.KeyboardInputMode

See Also

Keyboard Input, Keyboard Input, Commands, Custom Command Bindings, User Interaction

Constructors

Properties

Methods