Measurement shapes

The shapes.measurement namespace provides you with a set of measurement shapes.

Links

Measurement shapes are the special cases of links.

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 shape (element or link). There are several special presentation attributes, which further control the angle behavior: angle, angleDirection, anglePie, angleRadius and angleStart.
sourceAngle	SVGPathElement	Angle arc between the link and the source shape (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 shape (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 special presentation attributes, which further control the angle label behavior: angleTextDecimalPoints and angleTextDistance.
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.

const angle = new shapes.measurement.Angle();
angle.attr('root/title', '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);

Special attributes

angle

If specified, the angle arc is set to the given value. It will not automatically recalculate based on the position of the connected shapes.

angle.attr('sourceAngle/angle', 30);
angle.attr('angles/angle', 40);

angleDirection

Specifies the direction of the angle arc from the starting point. (see angleStart).

Available values:

• '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').

angle.attr('sourceAngle/angleDirection', 'large');
angle.attr('angles/angleDirection', 'clockwise');

anglePie

Should the angle be drawn as a pie (filled arc)? Default is false.

angle.attr('angles/anglePie', true);

angleRadius

Specifies the radius of the angle arc (in pixels). Default is 40.

angle.attr('sourceAngle/angleRadius', 20);
angle.attr('angles/angleRadius', 30);

angleStart

Specifies the starting point of the angle arc.

Available values:

• 'self' (default) - the angle arc begins at this link, then moves in the specified angleDirection, 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, 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, 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.

angle.attr('targetAngle/angleStart', 'source');

angleTextDecimalPoints

The number of digits to show after the decimal point of the angle value. This may be a value between 0 (default) and 20.

angle.attr('angleLabels/angleTextDecimalPoints', 2);

angleTextDistance

The distance from the vertex of the angle to the anchor of the angle label text element. Default is 23.

angle.attr('angleLabels/angleTextDistance', 15);

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: distanceText and labelPosition.

const distance = new shapes.measurement.Distance();
distance.attr('root/title', '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);

Special attributes

distanceText

Specifies the format of the label. It is the object with 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.

distance.attr('distanceLabel/distanceText', { unit: 'mm' });

labelPosition

Specifies the position of the label on the link. It is the object with 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.

distance.attr('distanceLabel/labelPosition', { offset: 10 });