Add a toolbar

Toolbar is a JointJS+ plugin which populates an ordinary <div> HTML element with multiple tools that allow the user to interact with the diagram.

In our example, we define <div id="toolbar"> to be the host HTML element for our Toolbar. As with the Stencil, we have to make sure that the Toolbar is visible via CSS, by specifying absolute positioning and z-index.

The Toolbar consists of tools of different types. Let's create a Toolbar with two buttons, where the name identifies them as json and svg:

const toolbar = new ui.Toolbar({
    tools: [
        {
            type: 'button',
            name: 'json',
            text: 'Export JSON'
        },
        {
            type: 'button',
            name: 'svg',
            text: 'Export SVG'
        }
    ]
});
toolbar.render();
document.getElementById('toolbar').appendChild(toolbar.el);

For our buttons to actually do something, we need to tell JointJS what should happen when our user interacts with them - that our diagram should be exported, for example. We do that by listening on Toolbar events, which are identified by the name of the tool (see above). A click on our "Export JSON" button therefore triggers a json:pointerclick event:

toolbar.on('json:pointerclick', () => {
    const str = JSON.stringify(graph.toJSON());
    const bytes = new TextEncoder().encode(str);
    const blob = new Blob([bytes], { type: 'application/json;charset=utf-8' });
    util.downloadBlob(blob, 'joint-plus.json');
});

toolbar.on('svg:pointerclick', () => {
    format.toSVG(
        paper,
        (svg) => {
            util.downloadDataUri(
                `data:image/svg+xml,${encodeURIComponent(svg)}`,
                'joint-plus.svg'
            );
        },
        { useComputedStyles: false }
    );
});

Note about imports...

Our Toolbar buttons use features from the format and util modules of JointJS+. We need to modify the first line of our code in order to import the two modules:

import { dia, shapes, ui, format, util } from '@joint/plus';

See it in action

Try clicking one of our Toolbar buttons in the example below:

Open Sandbox

💡 Would you prefer to learn more about Toolbar? We have many demos illustrating it on our Demos & examples page.