mxKeyHandler

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 <mxGraph.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 graph.

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.

var keyHandler = new mxKeyHandler(graph);
keyHandler.bindKey(46, function(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 = function(evt)
{
  if (evt != null)
  {
    return (mxEvent.isControlDown(evt) || (mxClient.IS_MAC && evt.metaKey)) ? this.controlKeys[evt.keyCode] : this.normalKeys[evt.keyCode];
  }

  return null;
};
Summary
mxKeyHandlerEvent handler that listens to keystroke events.
Functions
mxKeyHandlerConstructs an event handler that executes functions bound to specific keystrokes.
Variables
graphReference to the mxGraph associated with this handler.
targetReference to the target DOM, that is, the DOM node where the key event listeners are installed.
normalKeysMaps from keycodes to functions for non-pressed control keys.
shiftKeysMaps from keycodes to functions for pressed shift keys.
controlKeysMaps from keycodes to functions for pressed control keys.
controlShiftKeysMaps from keycodes to functions for pressed control and shift keys.
enabledSpecifies if events are handled.
Functions
isEnabledReturns true if events are handled.
setEnabledEnables or disables event handling by updating enabled.
bindKeyBinds the specified keycode to the given function.
bindShiftKeyBinds the specified keycode to the given function.
bindControlKeyBinds the specified keycode to the given function.
bindControlShiftKeyBinds the specified keycode to the given function.
isControlDownReturns true if the control key is pressed.
getFunctionReturns the function associated with the given key event or null if no function is associated with the given event.
isGraphEventReturns 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 <mxGraph.container>, or the mxGraph.cellEditor of the graph.
keyDownHandles the event by invoking the function bound to the respective keystroke if mxGraph.isEnabled, isEnabled and isGraphEvent all return true for the given event and mxGraph.isEditing returns false.
escapeHook to process ESCAPE keystrokes.
destroyDestroys the handler and all its references into the DOM.

Functions

mxKeyHandler

function mxKeyHandler(graph,
target)

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

Parameters

graphReference to the associated mxGraph.
targetOptional 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.

Variables

graph

mxKeyHandler.prototype.graph

Reference to the mxGraph associated with this handler.

target

mxKeyHandler.prototype.target

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

normalKeys

mxKeyHandler.prototype.normalKeys

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

shiftKeys

mxKeyHandler.prototype.shiftKeys

Maps from keycodes to functions for pressed shift keys.

controlKeys

mxKeyHandler.prototype.controlKeys

Maps from keycodes to functions for pressed control keys.

controlShiftKeys

mxKeyHandler.prototype.controlShiftKeys

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

enabled

mxKeyHandler.prototype.enabled

Specifies if events are handled.  Default is true.

Functions

isEnabled

mxKeyHandler.prototype.isEnabled = function()

Returns true if events are handled.  This implementation returns enabled.

setEnabled

mxKeyHandler.prototype.setEnabled = function(enabled)

Enables or disables event handling by updating enabled.

Parameters

enabledBoolean that specifies the new enabled state.

bindKey

mxKeyHandler.prototype.bindKey = function(code,
funct)

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

Parameters

codeInteger that specifies the keycode.
functJavaScript function that takes the key event as an argument.

bindShiftKey

mxKeyHandler.prototype.bindShiftKey = function(code,
funct)

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

Parameters

codeInteger that specifies the keycode.
functJavaScript function that takes the key event as an argument.

bindControlKey

mxKeyHandler.prototype.bindControlKey = function(code,
funct)

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

Parameters

codeInteger that specifies the keycode.
functJavaScript function that takes the key event as an argument.

bindControlShiftKey

mxKeyHandler.prototype.bindControlShiftKey = function(code,
funct)

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

Parameters

codeInteger that specifies the keycode.
functJavaScript function that takes the key event as an argument.

isControlDown

mxKeyHandler.prototype.isControlDown = function(evt)

Returns true if the control key is pressed.  This uses mxEvent.isControlDown.

Parameters

evtKey event whose control key pressed state should be returned.

getFunction

mxKeyHandler.prototype.getFunction = function(evt)

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

Parameters

evtKey event whose associated function should be returned.

isGraphEvent

mxKeyHandler.prototype.isGraphEvent = function(evt)

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 <mxGraph.container>, or the mxGraph.cellEditor of the graph.

Parameters

evtKey event that represents the keystroke.

keyDown

mxKeyHandler.prototype.keyDown = function(evt)

Handles the event by invoking the function bound to the respective keystroke if mxGraph.isEnabled, isEnabled and isGraphEvent all return true for the given event and mxGraph.isEditing returns false.  If the graph is editing only the <enter> and escape cases are handled by calling the respective hooks.

Parameters

evtKey event that represents the keystroke.

escape

mxKeyHandler.prototype.escape = function(evt)

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

Parameters

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

destroy

mxKeyHandler.prototype.destroy = function()

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

function mxKeyHandler(graph,
target)
Constructs an event handler that executes functions bound to specific keystrokes.
mxKeyHandler.prototype.graph
Reference to the mxGraph associated with this handler.
Extends mxEventSource to implement a graph component for the browser.
mxKeyHandler.prototype.target
Reference to the target DOM, that is, the DOM node where the key event listeners are installed.
mxKeyHandler.prototype.normalKeys
Maps from keycodes to functions for non-pressed control keys.
mxKeyHandler.prototype.shiftKeys
Maps from keycodes to functions for pressed shift keys.
mxKeyHandler.prototype.controlKeys
Maps from keycodes to functions for pressed control keys.
mxKeyHandler.prototype.controlShiftKeys
Maps from keycodes to functions for pressed control and shift keys.
mxKeyHandler.prototype.enabled
Specifies if events are handled.
mxKeyHandler.prototype.isEnabled = function()
Returns true if events are handled.
mxKeyHandler.prototype.setEnabled = function(enabled)
Enables or disables event handling by updating enabled.
mxKeyHandler.prototype.bindKey = function(code,
funct)
Binds the specified keycode to the given function.
mxKeyHandler.prototype.bindShiftKey = function(code,
funct)
Binds the specified keycode to the given function.
mxKeyHandler.prototype.bindControlKey = function(code,
funct)
Binds the specified keycode to the given function.
mxKeyHandler.prototype.bindControlShiftKey = function(code,
funct)
Binds the specified keycode to the given function.
mxKeyHandler.prototype.isControlDown = function(evt)
Returns true if the control key is pressed.
mxKeyHandler.prototype.getFunction = function(evt)
Returns the function associated with the given key event or null if no function is associated with the given event.
mxKeyHandler.prototype.isGraphEvent = function(evt)
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 mxGraph.container, or the mxGraph.cellEditor of the graph.
mxGraph.prototype.cellEditor
Holds the mxCellEditor that is used as the in-place editing.
mxKeyHandler.prototype.keyDown = function(evt)
Handles the event by invoking the function bound to the respective keystroke if mxGraph.isEnabled, isEnabled and isGraphEvent all return true for the given event and mxGraph.isEditing returns false.
mxGraph.prototype.isEnabled = function()
Returns true if the graph is enabled.
mxGraph.prototype.isEditing = function(cell)
Returns true if the given cell is currently being edited.
mxKeyHandler.prototype.escape = function(evt)
Hook to process ESCAPE keystrokes.
mxKeyHandler.prototype.destroy = function()
Destroys the handler and all its references into the DOM.
isControlDown: function(evt)
Returns true if the control key is pressed for the given event.
mxGraph.prototype.stopEditing = function(cancel)
Stops the current editing.
Close