The basic model for diagram elements. It inherits from joint.dia.Cell with a few additional properties and methods specific to elements. For a quick introduction to elements, see our tutorial.
Elements' properties may be split into several groups according to their function:
position
- coordinates of the element, provided as an object with x
and y
keys. The property may be accessed or set directly using regular Backbone set('position')
/get('position')
methods or through Element's translate()
method.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 Backbone set('angle')
/get('angle')
methods or through Element's rotate()
method.size
- size of the element, provided as an object with width
and height
keys. The property may be accessed or set directly using regular Backbone set('size')
/get('size')
methods or through Element's translate()
method.Each joint.dia.Element
defines its own SVG markup
which is then used by joint.dia.ElementView
to render the element to the paper. For instance, the joint.shapes.standard.Rectangle
element (which inherits from joint.dia.Element
) defines its markup using the JSON array notation as follows:
markup: [{
tagName: 'rect',
selector: 'body',
}, {
tagName: 'text',
selector: 'label'
}]
As we can see, the joint.shapes.standard.Rect
shape consists of two subelements
: one SVGRectElement named 'body'
and one SVGTextElement named 'label'
. The attrs
object refers to the subelements' names (selectors
) to provide SVG attributes to these constituent SVGElements.
The keys of the attrs
object are selectors that match subelements defined in the element's markup
. The values of this object are SVG attributes that will be set on the selected subelements. One can find the full list of SVG attributes and their descriptions online, e.g. on MDN.
For example, in order to set a red fill color on a subelement called 'body'
, the attrs
object would contain:
body: { fill: 'red' }
If you simply need to change a value of an attribute, it is not recommended to modify the attrs
object directly. Instead, use the element.attr()
method.
We can use the joint.shapes.standard.Rectangle
element (which inherits from joint.dia.Element
) as an example. The attrs
object in its definition is provided below:
attrs: {
body: {
refWidth: '100%',
refHeight: '100%',
strokeWidth: 2,
stroke: '#000000',
fill: '#FFFFFF'
},
label: {
textVerticalAnchor: 'middle',
textAnchor: 'middle',
refX: '50%',
refY: '50%',
fontSize: 14,
fill: '#333333'
}
}
Notice that the object makes use of special JointJS attributes (e.g. refWidth
, textVerticalAnchor
) on top of standard SVG attributes (e.g. stroke
, fill
). All of these special attributes
are listed in the attributes section of this documentation. You should also refer to our tutorial on special attributes.
The z
property specifies the stack order of the element in the SVG DOM. An element with a higher z
value will be rendered in front of an element with a lower z
value. (This also applies to Links.)
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 element ports documentation for more information.
The last two properties of elements are embeds
and parent
. These two are related to elements that contain or are contained within other elements, forming a hierarchical structure.
embeds
- a list of id
's of the 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.Elements trigger several special events, detailed in the element events documentation.
It is possible to extend the joint.dia.Element
class to create a custom element. A custom element may override Element properties to assign its own defaults. These values override builtin defaults, if provided, and are applied to all instances of the new Element type, unless an individual instance overrides them with its own values. The following Element properties are applicable in this context:
markup
- provide default element markup for all instances of this Element type, specified with a JSON array.attrs
- provide default element styling for all instances of this Element type. These allow you to change the style and size of SVG elements, identified by their selectors.Creating custom elements is explained in more detail in our tutorial.