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.
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();
}
});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;
};| mxKeyHandler | Event handler that listens to keystroke events. |
| Functions | |
| mxKeyHandler | Constructs an event handler that executes functions bound to specific keystrokes. |
| Variables | |
| graph | Reference to the mxGraph associated with this handler. |
| target | Reference to the target DOM, that is, the DOM node where the key event listeners are installed. |
| normalKeys | Maps from keycodes to functions for non-pressed control keys. |
| shiftKeys | Maps from keycodes to functions for pressed shift keys. |
| controlKeys | Maps from keycodes to functions for pressed control keys. |
| controlShiftKeys | Maps from keycodes to functions for pressed control and shift keys. |
| enabled | Specifies if events are handled. |
| Functions | |
| isEnabled | Returns true if events are handled. |
| setEnabled | Enables or disables event handling by updating enabled. |
| bindKey | Binds the specified keycode to the given function. |
| bindShiftKey | Binds the specified keycode to the given function. |
| bindControlKey | Binds the specified keycode to the given function. |
| bindControlShiftKey | Binds the specified keycode to the given function. |
| isControlDown | Returns true if the control key is pressed. |
| getFunction | Returns the function associated with the given key event or null if no function is associated with the given event. |
| isGraphEvent | 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. |
| keyDown | Handles the event by invoking the function bound to the respective keystroke if isEnabledForEvent returns true for the given event and if isEventIgnored returns false, except for escape for which isEventIgnored is not invoked. |
| isEnabledForEvent | Returns true if the given event should be handled. |
| isEventIgnored | Returns true if the given keystroke should be ignored. |
| escape | Hook to process ESCAPE keystrokes. |
| destroy | Destroys the handler and all its references into the DOM. |
function mxKeyHandler( graph, target )
Constructs an event handler that executes functions bound to specific keystrokes.
| graph | Reference to the associated mxGraph. |
| 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. |
mxKeyHandler.prototype.graph
Reference to the mxGraph associated with this handler.
mxKeyHandler.prototype.isEnabled = function()
Returns true if events are handled. This implementation returns enabled.
mxKeyHandler.prototype.setEnabled = function( enabled )
Enables or disables event handling by updating enabled.
| enabled | Boolean that specifies the new enabled state. |
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.
| code | Integer that specifies the keycode. |
| funct | JavaScript function that takes the key event as an argument. |
mxKeyHandler.prototype.isControlDown = function( evt )
Returns true if the control key is pressed. This uses mxEvent.isControlDown.
| evt | Key event whose control key pressed state should be returned. |
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.
| evt | Key event that represents the keystroke. |
mxKeyHandler.prototype.keyDown = function( evt )
Handles the event by invoking the function bound to the respective keystroke if isEnabledForEvent returns true for the given event and if isEventIgnored returns false, except for escape for which isEventIgnored is not invoked.
| evt | Key event that represents the keystroke. |
mxKeyHandler.prototype.isEnabledForEvent = function( evt )
Returns true if the given event should be handled. isEventIgnored is called later if the event is not an escape key stroke, in which case escape is called. This implementation returns true if isEnabled returns true for both, this handler and graph, if the event is not consumed and if isGraphEvent returns true.
| evt | Key event that represents the keystroke. |
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.
| evt | Key event that represents the keystroke. Possible keycode in this case is 27 (ESCAPE). |
Constructs an event handler that executes functions bound to specific keystrokes.
function mxKeyHandler( graph, target )
Reference to the mxGraph associated with this handler.
mxKeyHandler.prototype.graph
Reference to the target DOM, that is, the DOM node where the key event listeners are installed.
mxKeyHandler.prototype.target
Maps from keycodes to functions for non-pressed control keys.
mxKeyHandler.prototype.normalKeys
Maps from keycodes to functions for pressed shift keys.
mxKeyHandler.prototype.shiftKeys
Maps from keycodes to functions for pressed control keys.
mxKeyHandler.prototype.controlKeys
Maps from keycodes to functions for pressed control and shift keys.
mxKeyHandler.prototype.controlShiftKeys
Specifies if events are handled.
mxKeyHandler.prototype.enabled
Returns true if events are handled.
mxKeyHandler.prototype.isEnabled = function()
Enables or disables event handling by updating enabled.
mxKeyHandler.prototype.setEnabled = function( enabled )
Binds the specified keycode to the given function.
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 )
Returns true if the control key is pressed.
mxKeyHandler.prototype.isControlDown = function( evt )
Returns the function associated with the given key event or null if no function is associated with the given event.
mxKeyHandler.prototype.getFunction = 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.
mxKeyHandler.prototype.isGraphEvent = function( evt )
Holds the mxCellEditor that is used as the in-place editing.
mxGraph.prototype.cellEditor
Handles the event by invoking the function bound to the respective keystroke if isEnabledForEvent returns true for the given event and if isEventIgnored returns false, except for escape for which isEventIgnored is not invoked.
mxKeyHandler.prototype.keyDown = function( evt )
Returns true if the given event should be handled.
mxKeyHandler.prototype.isEnabledForEvent = function( evt )
Returns true if the given keystroke should be ignored.
mxKeyHandler.prototype.isEventIgnored = function( evt )
Hook to process ESCAPE keystrokes.
mxKeyHandler.prototype.escape = function( evt )
Destroys the handler and all its references into the DOM.
mxKeyHandler.prototype.destroy = function()
Returns true if the control key is pressed for the given event.
isControlDown: function( evt )
Stops the current editing and fires a editingStopped event.
mxGraph.prototype.stopEditing = function( cancel )