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);