Class KeyHandler

Event handler that listens to keystroke events. This is not a singleton, however, it is normally only required once if the target is the document element (default).

This handler installs a key event listener in the topmost DOM node and processes all events that originate from descandants of Graph#container or from the topmost DOM node. The latter means that all unhandled keystrokes are handled by this object regardless of the focused state of the .

Example:

The following example creates a key handler that listens to the delete key (46) and deletes the selection cells if the graph is enabled.

let keyHandler = new KeyHandler(graph);
keyHandler.bindKey(46, (evt)=>
{
  if (graph.isEnabled())
  {
    graph.removeCells();
  }
});

Keycodes:

See http://tinyurl.com/yp8jgl or http://tinyurl.com/229yqw for a list of keycodes or install a key event listener into the document element and print the key codes of the respective events to the console.

To support the Command key and the Control key on the Mac, the following code can be used.

keyHandler.getFunction = (evt)=>
{
  if (evt != null)
  {
    return (mxEvent.isControlDown(evt) || (Client.IS_MAC && evt.metaKey)) ? this.controlKeys[evt.keyCode] : this.normalKeys[evt.keyCode];
  }

  return null;
};

Constructor: KeyHandler

Constructs an event handler that executes functions bound to specific keystrokes.

Param: graph

Reference to the associated Graph.

Param: target

Optional reference to the event target. If null, the document element is used as the event target, that is, the object where the key event listener is installed.

Constructors

constructor

Properties

controlKeys controlShiftKeys enabled graph keydownHandler normalKeys shiftKeys target

Methods

bindControlKey bindControlShiftKey bindKey bindShiftKey escape getFunction isControlDown isEnabled isEnabledForEvent isEventIgnored isGraphEvent keyDown onDestroy setEnabled

Constructors

constructor

Properties

controlKeys

controlKeys: {
    [key: number]: Function;
} = {}

Maps from keycodes to functions for pressed control keys.

controlShiftKeys

controlShiftKeys: {
    [key: number]: Function;
} = {}

Maps from keycodes to functions for pressed control and shift keys.

enabled

enabled: boolean = true

Specifies if events are handled. Default is true.

graph

graph: null | Graph = null

Reference to the Graph associated with this handler.

keydownHandler

keydownHandler: null | ((event: KeyboardEvent) => void) = null

normalKeys

normalKeys: {
    [key: number]: Function;
} = {}

Maps from keycodes to functions for non-pressed control keys.

shiftKeys

shiftKeys: {
    [key: number]: Function;
} = {}

Maps from keycodes to functions for pressed shift keys.

target

target: null | Element = null

Reference to the target DOM, that is, the DOM node where the key event listeners are installed.

Methods

bindControlKey

  • bindControlKey(code, funct): void

  • Binds the specified keycode to the given function. This binding is used if the control key is pressed.

    Parameters

    • code: number

      Integer that specifies the keycode.

    • funct: Function

      JavaScript function that takes the key event as an argument.

    Returns void

bindControlShiftKey

  • bindControlShiftKey(code, funct): void

  • Binds the specified keycode to the given function. This binding is used if the control and shift key are pressed.

    Parameters

    • code: number

      Integer that specifies the keycode.

    • funct: Function

      JavaScript function that takes the key event as an argument.

    Returns void

bindKey

  • bindKey(code, funct): void

  • Binds the specified keycode to the given function. This binding is used if the control key is not pressed.

    Parameters

    • code: number

      Integer that specifies the keycode.

    • funct: Function

      JavaScript function that takes the key event as an argument.

    Returns void

bindShiftKey

  • bindShiftKey(code, funct): void

  • Binds the specified keycode to the given function. This binding is used if the shift key is pressed.

    Parameters

    • code: number

      Integer that specifies the keycode.

    • funct: Function

      JavaScript function that takes the key event as an argument.

    Returns void

escape

  • escape(evt): void

  • Hook to process ESCAPE keystrokes. This implementation invokes Graph#stopEditing to cancel the current editing, connecting and/or other ongoing modifications.

    Parameters

    • evt: KeyboardEvent

      Key event that represents the keystroke. Possible keycode in this case is 27 (ESCAPE).

    Returns void

getFunction

  • getFunction(evt): null | Function

  • Returns the function associated with the given key event or null if no function is associated with the given event.

    Parameters

    • evt: KeyboardEvent

      Key event whose associated function should be returned.

    Returns null | Function

isControlDown

  • isControlDown(evt): boolean

  • Returns true if the control key is pressed. This uses Event#isControlDown.

    Parameters

    • evt: KeyboardEvent

      Key event whose control key pressed state should be returned.

    Returns boolean

isEnabled

isEnabledForEvent

  • isEnabledForEvent(evt): boolean

  • Returns true if the given event should be handled. is called later if the event is not an escape key stroke, in which case is called. This implementation returns true if returns true for both, this handler and , if the event is not consumed and if returns true.

    Parameters

    • evt: KeyboardEvent

      Key event that represents the keystroke.

    Returns boolean

isEventIgnored

  • isEventIgnored(evt): boolean

  • Returns true if the given keystroke should be ignored. This returns graph.isEditing().

    Parameters

    • evt: KeyboardEvent

      Key event that represents the keystroke.

    Returns boolean

isGraphEvent

  • isGraphEvent(evt): boolean

  • Returns true if the event should be processed by this handler, that is, if the event source is either the target, one of its direct children, a descendant of the Graph#container, or the Graph#cellEditor of the .

    Parameters

    • evt: KeyboardEvent

      Key event that represents the keystroke.

    Returns boolean

keyDown

  • keyDown(evt): void

  • Handles the event by invoking the function bound to the respective keystroke if returns true for the given event and if returns false, except for escape for which is not invoked.

    Parameters

    • evt: KeyboardEvent

      Key event that represents the keystroke.

    Returns void

onDestroy

  • onDestroy(): void

  • Destroys the handler and all its references into the DOM. This does normally not need to be called, it is called automatically when the window unloads (in IE).

    Returns void

setEnabled

  • setEnabled(enabled): void

  • Enables or disables event handling by updating .

    Parameters

    • enabled: boolean

      Boolean that specifies the new enabled state.

    Returns void

Settings

Member Visibility

On This Page

Constructors
Properties
Methods