Built-in shapes

JointJS provides standard set of built-in shapes. In this section you will learn how to use them in your diagram.

Creating a built-in shape

To use built-in shapes, first, you need to import a corresponding namespace and then use it to specify cellNamespace and cellViewNamespace options of the Graph and Paper respectively. You can learn more about namespaces in this section.

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

const namespace = {
    ...shapes
}

const graph = new dia.Graph({}, { cellNamespace: namespace });

const paper = new dia.Paper({
    /* ... */
    cellViewNamespace: namespace
});

info

We are using term shape here, which represents all possible visual entities in JointJS, both elements and links. We use this term alongside the term cell which we are using for an abstract representation of a shape in the class hierarchy.

This will allow you to add elements declared in the shapes namespace to your Graph, which will be rendered in Paper using corresponding ElementView.

To create the built-in element you need to create an instance of the desired element from the shapes namespace. Usually, the constructor accepts options specific for the element and presentation attributes for the markup. The default values for position and size are { x: 0, y: 0} and { width: 1, height: 1 } (as it is a descendant of dia.Element), so we need to specify its position and size. Let's create a rectangle:

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

const rectangle = new shapes.standard.Rectangle({
    position: { x: 100, y: 100 },
    size: { width: 100, height: 60 },
    attrs: {
        body: {
            fill: 'red'
        },
        label: {
            text: 'Hello World!'
        }
    }
});

rectangle.addTo(graph);

Each element has its own default values. For example, standard.Rectangle element has body and label selectors specified in the markup.