JointJS+ ContextToolbar

ui.ContextToolbar is a UI widget for displaying context toolbars (usually a set of buttons) below a certain target element (HTML or SVG). 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.

Installation

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

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

Usage

Create an object of joint.ui.ContextToolbar type, add tool buttons and call the render() method in order to open the context toolbar.

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();

A common usage is to open the context toolbar on click on a certain element (either HTML or SVG):

document.querySelector('circle').addEventListener('click', function(evt) {

    const circle = evt.target;

    const ct = new joint.ui.ContextToolbar({
	tools: [
	    { action: 'hide', content: 'Hide' },
	    { action: 'info', content: 'Info' },
	    { action: 'remove', content: 'Remove' }
	],
        target: circle
    });

    ct.on('action:hide', ct.remove, ct);
    ct.on('action:remove', function() {
        V(circle).remove();
    });
    ct.on('action:info', function() {
        alert('This is an SVG circle');
    });

    ct.render();
});

Configuration

The following table lists options that you can pass to the ui.ContextToolbar constructor function:

tools	An array of tools. Each tool is an object that can have the following properties: action The name of the action. This action is then triggered on the context toolbar object so that you can react to it later. content The content of the button. It can be a text or an arbitrary HTML. icon Optionally, instead of passing content, you can just pass a path to an image. attrs An object with attributes that will be applied on the generated button. Useful for adding your own custom attributes such as { 'data-tooltip': 'My Tooltip'}.
target	The target element (either HTML or SVG) or an object representing a point with properties x and y representing client coordinates.
padding	The gap between the anchor of the target element and the context toolbar. The default is 20.
position	The name of the position on the target element to which the toolbar is attached. The default is 'bottom'.
anchor	The name of the position on the toolbar, where it is attached to the target. The default is 'top'.
autoClose	Determines if the context toolbar should be closed if the user clicked outside of the area of the context toolbar. The default is true.
vertical	When set to true the toolbar arranges tools from top to bottom instead of left to right. The default is false.
scale	Optional parameter that sets the scale of the context toolbar.

API

render()	Render the context toolbar onto the screen.
remove()	Remove the context toolbar. Usually, you don't have to call this method as the context toolbar is closed automatically if the user clicked outside of the area of the context toolbar (unless you set the autoClose option to false).
on(event, handler [, context])	Register a handler function that will be called whenever event is triggered. The optional context is an object that will be the context of the handler function (the this).
joint.ui.ContextToolbar.close()	This is a static method that closes any context toolbar that is currently open.
joint.ui.ContextToolbar.update()	This is a static method that updates the position of the opened context toolbar (if any). Call this method if your target element changes its position while you still want to keep the context toolbar opened.

Events

The ui.ContextToolbar object triggers events that correspond to the actions that you defined in the tools array. Events can be handled by using the on() method (see above).

action:[action]	Triggered when the user clicks on one of the buttons in the context toolbar.
close	Triggered when the context toolbar gets closed.