Shapes overview
Shapes are the primary building blocks for any JointJS diagram. In our API, shapes are also known as cells, and we use this term interchangeably with the term shapes. These terms combine all elements and links that you can create and add to your diagram. All shapes are represented by their model and view. The base classes for model and view are dia.Cell and dia.CellView respectively.
dia.Cell
All shapes are descendants of the dia.Cell class. It's an mvc.Model descendant with a few additional properties and methods. Most importantly, every cell has a unique ID that is stored in the id property.
JointJS shapes have several model attributes which are used to specify rendering of the shape and other properties. Here is the description of such attributes. To set the default value of model attributes, as every descendant of mvc.Model, dia.Cell classes have a special defaults property, which specifies default model attributes values.
Shapes also have a special markup property, which specifies which SVG elements to render for every type of shape. Markup is one of the most important parts of a shape declaration. We discuss it in details in the following section. Additionally, JointJS presents a set of special SVG presentation attributes that you can use in your markup declaration.
dia.CellView
The view for the dia.Cell model. It inherits from mvc.View and is responsible for:
- Rendering a shape inside of a paper.
- Handling the shape's pointer events.
- Provides various methods for working with the shape (visually).
To find the view associated with a specific shape (model), use the findViewByModel() method of the paper. For example:
const cellView = paper.findViewByModel(cell);