🎉 JointJS has new documentation! ðŸ¥³

- - -
JointJS+ v2.4
JointJS+ v3.0
JointJS+ v3.1
JointJS+ v3.2
JointJS+ v3.3
JointJS+ v3.4
JointJS+ v3.5
JointJS+ v3.6
JointJS+ v3.7
JointJS+ v4.0
Tutorials JointJS JointJS+ Vectorizer Geometry

JointJS+ measurement

shapes.measurement

Set of shapes for displaying dimensions of objects, the distances between them, and their relative angles.

source code

shapes.measurement.Angle

A line with angle arcs drawn at its ends.

Supported attrs properties

Selector Node Description
root SVGGElement Container of all nodes
line SVGPathElement Visible connection of the link
wrapper SVGPathElement Invisible wrapper around the connection to make the line thicker, so the user can interact with the link more easily.
angles group of SVGPathElements Group of both angle arcs (sourceAngle and targetAngle). Each angle is an arc between this link and another cell (element or link).
There are several custom presentation attributes, which further control the angle behavior.

Property Type Description
angleRadius number Specifies the radius of the angle arc (in pixels). Default is 40.
angleStart string enum Specifies the starting point of the angle arc.
  • "self" (default) - The angle arc begins at this link, then moves in the specified angleDirection (see below), and finally ends at the first encountered side of the end element (or the first encountered segment of the end link).
  • "source" (applicable only when connected to a link) - The angle arc begins at the segment of the connected link that is closest to the connected link's source, then moves in the specified angleDirection (see below), and finally ends at this link. Depending on angleDirection, this may mean that the angle arc crosses through the other ray of the connected link on its way to this link.
  • "target" (applicable only when connected to a link) - The angle arc begins at the segment of the connected link that is closest to the connected link's target, then moves in the specified angleDirection (see below), and finally ends at this link. Depending on angleDirection, this may mean that the angle arc crosses through the other segment of the connected link on its way to this link.
angleDirection string enum Specifies the direction of the angle arc from the starting point (see angleStart above).
  • "clockwise" - Draw the angle arc in the direction that is clockwise from angleStart.
  • "anticlockwise" - Draw the angle arc in the direction that is anticlockwise from angleStart.
  • "small" (default) - Draw the angle arc with the smaller angle of the two options ("clockwise" and "anticlockwise").
  • "large" - Draw the angle arc with the larger angle of the two options ("clockwise" and "anticlockwise").
anglePie boolean Should the angle be drawn as a pie (filled arc)? Default is false.
angle number If specified, the angle arc is set to the given value. It will not automatically recalculate based on the position of the connected cells.
sourceAngle SVGPathElement Angle arc between the link and the source cell (element or link). The node can specify all angles custom presentation attributes; the values set here will overwrite the more generic values from angles.
targetAngle SVGPathElement Angle arc between the link and the target cell (element or link). The node can specify all angles custom presentation attributes; the values set here will overwrite the more generic values from angles.
angleLabels group of SVGTextElements Group of both angle labels (sourceAngleLabel and targetAngleLabel). Each label is a text element positioned within the angle arc; it shows the current angle value, in degrees.
There are several custom presentation attributes, which further control the angle label behavior.

Property Type Description
angleTextDecimalPoints object The number of digits to show after the decimal point of the angle value. This may be a value between 0 (default) and 20.
angleTextDistance number The distance from the vertex of the angle to the anchor of the angle label text element. Default is 23.
targetAngleLabel SVGTextElement Label of the source angle; it shows the current angle value, in degrees. The node can specify all angleLabels custom presentation attributes; the values set here will overwrite the more generic values from angleLabels.
sourceAngleLabel SVGTextElement Label of the target angle; it shows the current angle value, in degrees. The node can specify all angleLabels custom presentation attributes; the values set here will overwrite the more generic values from angleLabels. 
var angle = new joint.shapes.measurement.Angle();
angle.attr('root/title', 'joint.shapes.measurement.Angle');
angle.attr('line/stroke', '#fe854f');
angle.attr('angleLabels/stroke', '#fe854f');
// Source Connected To An Element
angle.source(element, {
    anchor: { name: 'left' },
    connectionPoint: { name: 'anchor' }
});
angle.attr('sourceAngle/fill', 'lightgray');
angle.attr('sourceAngle/anglePie', true);
angle.attr('sourceAngleLabel/fill', '#333333');
// Target Connected To A Link
angle.target(link, {
    anchor: { name: 'connectionRatio', { args: { ratio: 0.2 }}},
});
angle.attr('targetAngle/angleStart', 'source');
angle.attr('targetAngle/angleDirection', 'anticlockwise');
angled.addTo(graph);

shapes.measurement.Distance

A line with a label that shows the distance between the source and the target of the link (the length of the connection path).

Supported attrs properties

Selector Node Description
root SVGGElement Container of all nodes
line SVGPathElement Visible connection of the link
wrapper SVGPathElement Invisible wrapper around the connection to make the line thicker, so the user can interact with the link more easily.
anchorLines group of SVGPathElements Lines between anchor points and connection points of this link.
sourceAnchorLine SVGPathElement Line between the source anchor and the source connection point of this link.
targetAnchorLine SVGPathElement Line between the target anchor and the target connection point of this link.
distanceLabel SVGTextElement Label with the distance between the source and target connection point.
There are several custom presentation attributes, which further control the label behavior.

Property Type Description
distanceText object Specifies the format of the label. It may have two properties:
  • unit (string) - The unit to show after the number. It defaults to "px".
  • fixed (number) - The number of digits to show after the decimal point. This may be a value between 0 (default) and 20.
labelPosition object Specifies the position of the label on the link. It may have two properties:
  • ratio (number) - Move and auto-orient the label to the point at the given ratio of the link's total length.
  • offset (number) - If the offset is a positive number, displace the label perpendicularly to the right (in the direction of the line path) in the paper local coordinate system. (An offset of 0 is the default; it means no offset in either direction.)
    - If the offset is a negative number, displace the label perpendicularly to the left (in the direction of the line path) in the paper local coordinate system. 
var distance = new joint.shapes.measurement.Distance();
distance.attr('root/title', 'joint.shapes.measurement.Distance');
distance.attr('line/stroke', '#fe854f');
distance.attr('distanceLabel/stroke', '#fe854f');
distance.attr('anchorLines/strokeDasharray', '1,1');
distance.source(el2, {
    anchor: { name: 'bottomRight' },
    connectionPoint: { name: 'anchor', args: { align: 'right', alignOffset: 30 }}
});
distance.target(el1, {
    anchor: { name: 'topRight' },
    connectionPoint: { name: 'anchor', args: { align: 'right', alignOffset: 30 }}
});
distance.addTo(graph);