The model for diagram elements. It inherits from joint.dia.Cell with a few additional properties and methods specific to elements. These properties can be put into three groups:
Coordinates of an element are stored in the position
property that is an object with x
and y
keys. position
can be accessed or set directly using the regular Backbone set()
/get()
methods or through the translate method.
Rotation angle is stored in the angle
property. This angle is in degrees and the rotation origin is always considered to be the center of the element. angle
can be also accessed or set directly using the regular Backbone set()
/get()
methods or through the rotate method.
Size of an element is stored in the size
property that is an object with width
and height
keys. Again, size
can be accessed or set directly using the regular Backbone set()
/get()
methods or through the resize method.
Another important property is attrs
which is an object with keys representing selectors that match subelements and values which are SVG attributes that will be set on the subelements. One can find a list of SVG attributes and their descriptions e.g. on MDN.
It is important to note that each joint.dia.Element
defines an SVG markup which is then used by joint.dia.ElementView
to render the element to the paper. For instance, the joint.shapes.basic.Rect
element (that inherits from joint.dia.Element
) defines its markup as follows:
<g class="rotatable"><g class="scalable"><rect/></g><text/></g>
Therefore, in order to set a red fill color for the rectangle subelement, the attrs
object should contain:
rect: { fill: 'red' }
Again, it is not recommended to change the attrs
object directly. Instead, use the attr method.
The z
property specifies the stack order of the element in the SVG DOM. An element with a higher z
level is in front of an element with a lower z
level. (This also stands for links which have the exact same property.)
The last two properties of elements are embeds
and parent
. These two are related to elements that contain or are contained withing other elements forming a hierarchical structure. embeds
is a list of cell id
's that are embedded inside the element. parent
is an id
of the parent element of the embedded one. When a parent element is translated, all its children get translated too.