Add an element palette

To create an element palette, we use the Stencil plugin of JointJS+. The plugin populates an ordinary <div> HTML element with a selection of JointJS Elements and allows the user to drag those into the Paper.

In our example, we define <div id="stencil"> to be the host HTML element for our Stencil. Note that it is our responsibility as programmers to make sure that the Stencil and Paper host HTML elements are both visible - we do that with absolute positioning specified in our example's CSS.

Let's define a Stencil that allows dragging to our paper component, uses the same shapes namespace as our Paper, and presents the element palette in a double column layout:

const stencil = new ui.Stencil({
    paper: paper,
    width: 170,
    height: '100%',
    layout: true,
    dropAnimation: true
});
stencil.render();
document.getElementById('stencil').appendChild(stencil.el);

We also need to populate the Stencil with Elements. Let's choose a few of JointJS's standard shapes, which we get via the shapes namespace:

const elements = [
    {
        type: 'standard.Rectangle',
        size: { width: 70, height: 50 },
        attrs: {
            body: {
                stroke: '#C94A46',
                rx: 2,
                ry: 2
            }
        }
    },
    {
        type: 'standard.Ellipse',
        size: { width: 70, height: 50 },
        attrs: {
            body: {
                stroke: '#C94A46',
            }
        }
    },
    {
        type: 'standard.Polygon',
        size: { width: 70, height: 50 },
        attrs: {
            body: {
                stroke: '#C94A46',
                points: 'calc(w/2),0 calc(w),calc(h/2) calc(w/2),calc(h) 0,calc(h/2)'
            }
        }
    },
    {
        type: 'standard.Cylinder',
        size: { width: 70, height: 50 },
        attrs: {
            body: {
                stroke: '#C94A46',
            },
            top: {
                fill: '#C94A46',
                stroke: '#C94A46'
            }
        }
    }
];
stencil.load(elements);

Note about imports...

Stencil is a feature of the ui module of JointJS+. We need to modify the first line of our code in order to import the module:

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

See it in action

Try dragging some Elements from the Stencil into our example Paper:

Open Sandbox

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