🎉 JointJS has new documentation! 🥳
🎉 JointJS has new documentation! 🥳
The ui.Keyboard is an essential plugin for creating keyboard shortcuts in your JointJS+ application. It allows you to bind custom handlers (functions) to arbitrary keyboard events (e.g a single keystroke, key combination).
| on(event, callback, [context]) | Bind a callback function to an object. The callback will be invoked whenever the keyboard `event` is fired. It is the same logic as Backbone.Events.on. More information about `event` can be found in the Event description section. |
| off(event, callback, [context]) | Remove a previously-bound callback function from an object. It is the same logic as Backbone.Events.off. More information about `event` can be found in the Event description section. |
| enable() | Start tracking keyboard events (enabled by default). |
| disable() | Stop tracking keyboard events. |
| isActive(name, event) | Check if key `name` is currently pressed. `event` is the DOM Event `KeyboardEvent`. It is available for modifiers only - `alt`, `ctrl`, `shift`, `command` |
The shortcut can be defined as a string, either a single keystroke e.g. enter, esc, up, down, left or a combination like ctr+c, ctrl+alt+t etc. If you need to be more specific - in terms of keydown, keyup, keypress events - you can also define the shortcut as keydown:a, keyup:enter or even keyup:ctrl+x.
Multiple shortcuts bound to a single handler can be defined as a list of shortcuts, separated by a space.
keyboard.on('ctrl+v shift+insert', pasteHandler);Please note that all Backbone event methods also support an event map syntax.
keyboard.on({
'enter': addNewHandler,
'ctrl+enter' : createNewHandler,
'up down left right': moveHandler
});