Elements

Elements are the main building blocks of your diagram. JointJS provides extensive capabilities of using elements provided by the library or building your own shapes with any complexity you want.

dia.Element

dia.Element is a base model for diagram elements. It inherits from dia.Cell with a few additional model attributes and methods specific to elements.

Model attributes specific to elements are described below.

dia.ElementView

The view for the dia.Element model. It inherits from dia.CellView and is responsible for:

• rendering an element inside of a paper,
• handling the element's pointer events,
• providing various methods for working with the element (visually).

To find the view associated with a specific element model, use the findViewByModel() method of paper.

const elementView = paper.findViewByModel(element);

Features

Elements provide additional features for diagramming.

Ports

Ports allow elements to create connection points for links. You can find more information in the ports section of our documentation.

Nesting

To provide functionality for embedding and nesting elements into one another, JointJS gives access to several methods and model attributes.

Model attributes

Beside the model attributes which are common for all shapes, elements have their own set of unique model attributes.

Geometry attributes

• position - coordinates of the element, provided as an object with x and y keys. The property may be accessed or set directly using regular mvc.Model set('position')/get('position') methods or through Element's own translate()/position() methods.
• angle - angle of rotation of the element in degrees. The rotation origin is always the center of the element. The property may be accessed or set directly using regular mvc.Model set('angle')/get('angle') methods or through Element's own rotate()/angle() methods.
• size - size of the element, provided as an object with width and height keys. The property may be accessed or set directly using regular mvc.Model set('size')/get('size') methods or through Element's own resize()/size() methods.

Ports

You may define and group ports on the element with the ports attribute. Each can have its own markup and attrs, and its own label. Grouped ports may share properties and behaviors. See the ports documentation for more information.

Nesting

Two other model attributes on elements are embeds and parent. These allow you to specify which elements are contained within other elements, forming a hierarchical structure.

• embeds - a list of id's of the shapes (cells) that are embedded inside this element.
• parent - the id of the element that is the parent of this element. When a parent element is translated, all its children get translated too.