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:

index.html

<script src="joint.js"></script>
<script src="joint.ui.keyboard.js"></script>

Access Keyboard through the joint.ui namespace:

index.js

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.

Open Sandbox