Keyboard shortcuts
JointJS+ provides an Keyboard plugin that enables the ability to create keyboard shortcuts in your JointJS+ application.
Installation
Access Keyboard
via the ui
namespace, and simply create an instance.
import { ui } from '@joint/plus';
const keyboard = new ui.Keyboard();
There is also a UMD version available
Include joint.ui.keyboard.js
in your HTML:
<script src="joint.js"></script>
<script src="joint.ui.keyboard.js"></script>
Access Keyboard
through the joint.ui
namespace:
const keyboard = new joint.ui.Keyboard();
How does Keyboard work?
Keyboard
allows users to create custom keyboard shortcuts in their applications, and provide more ways for users to
interact with diagrams. It enables you to bind custom handlers (functions) to arbitrary keyboard events (e.g a single
keystroke, key combination).
Event shortcut description
When working with Keyboard
methods like on, a callback function will be invoked whenever a
given keyboard event is fired.
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 mvc
event methods also support an event map syntax.
keyboard.on({
'enter': addNewHandler,
'ctrl+enter' : createNewHandler,
'up down left right': moveHandler
});
Keyboard example
The following example creates an instance of Keyboard
. Click anywhere on the demo to activate, and remove the overlay.
Press a single key or key combination on your keyboard, and see the equivalent key highlighted in the example application.