# 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 });`