ContextToolbar

JointJS+ provides a ContextToolbar plugin that enables the ability to display context toolbars (usually a set of buttons) below a certain target element (HTML or SVG).

Installation

Access ContextToolbar via the ui namespace, and create an instance. Then, add tool buttons, and call the render() method in order to open the context toolbar.

import { ui } from '@joint/plus';

const ct = new ui.ContextToolbar({
    tools: [
        { action: 'yes', content: 'Yes' },
        { action: 'no', content: 'No' },
        { action: 'maybe', content: 'Maybe' },
        { action: 'sure', content: 'Sure' }
    ],
    target: document.getElementById('my-element')
});

ct.on('action:yes', () => alert('Yes'));
ct.on('action:no', () => alert('No'));
ct.on('action:maybe', () => alert('Maybe'));
ct.on('action:sure', () => alert('Sure'));

ct.render();

There is also a UMD version available

Include joint.ui.contextToolbar.js and joint.ui.contextToolbar.css in your HTML:

index.html

<link rel="stylesheet" type="text/css" href="joint.ui.contextToolbar.css">
<script src="joint.js"></script>
<script src="joint.ui.contextToolbar.js"></script>

Access ContextToolbar through the joint.ui namespace:

index.js

const ct = new joint.ui.ContextToolbar({
    tools: [
        { action: 'yes', content: 'Yes' },
        { action: 'no', content: 'No' },
        { action: 'maybe', content: 'Maybe' },
        { action: 'sure', content: 'Sure' }
    ],
    target: this
});

ct.on('action:yes', function() { alert('Yes') });
ct.on('action:no', function() { alert('No') });
ct.on('action:maybe', function() { alert('Maybe') });
ct.on('action:sure', function() { alert('Sure') });

ct.render();

How does ContextToolbar work?

There can always be only one context toolbar opened at a time. This is automatically handled by the ui.ContextToolbar component which simplifies the process and makes sure you don't have to keep track of opened context toolbars yourself.

Common ContextToolbar usage

The following example creates a context toolbar upon user interaction. When the user clicks, a context toolbar is created, and the render() method is called on it.

The user can click on the link or SVG circle, and also right-click on the blank canvas.

Open Sandbox