C

ArrowNodeStyle

Node style that supports different kinds of arrow shapes with configurable arrow tip angle and arrow shaft thickness.
ImplementsInheritance Hierarchy

Remarks

The final shape is defined by:

Examples

The following example shows an ArrowNodeStyle pointing upwards.

graph.createNode(
  new Rect(0, 0, 60, 80),
  new ArrowNodeStyle({
    direction: 'up',
  }),
)

The following example shows a ArrowNodeStyle with a thick notched shaft and a short head

graph.createNode(
  new Rect(0, 100, 80, 60),
  new ArrowNodeStyle({
    shape: 'notched-arrow',
    shaftRatio: 0.8,
    angle: 0.15 * Math.PI,
  }),
)

See Also

Developer's Guide

Members

No filters for this type

Constructors

Parameters

Properties

Gets or sets the angle of the angled sides in radians.

The exterior angle between one side of the arrow and the perpendicular to the direction of the arrow.

Negative values are only supported with a shaftRatio = 1 or the shape set to PARALLELOGRAM or TRAPEZOID.

If the arrow head cannot be properly displayed with the given value, the actual angle is capped.

The default value is π / 4.

final

See Also

Developer's Guide
Gets or sets a CSS class that will be applied to the visualization.

The default value is an empty string, in which case no class is set for the visualization.

Multiple classes can be set by separating them with spaces, just like with the SVG class attribute.

final
Gets or sets the direction the shape points to.
The default value is RIGHT.
conversionfinal

See Also

Developer's Guide
Gets or sets the Fill for filling the interior of the shape.
The default value is WHITE.
conversionfinal

See Also

Developer's Guide
Gets the renderer implementation that can be queried for implementations that provide details about the visual appearance and visual behavior for a given node and this style instance.
The idiom for retrieving, e.g. an IVisualCreator implementation for a given style is:
const creator = style.renderer.getVisualCreator(node, style)
const visual = creator.createVisual(context)
readonlyfinal
Gets or sets the thickness of the arrow shaft as a ratio of the node size.

For direction LEFT and RIGHT, the shaftRatio relates to the height of the node. For direction UP and DOWN, it relates to the width of the node.

The value needs to lie within [0,1].

The default value is 1/3.

final

See Also

Developer's Guide
Gets or sets the basic shape.
The default value is ARROW.
conversionfinal

See Also

Developer's Guide
Gets or sets the Stroke used for drawing the outline of the shape.
The default value is BLACK.
conversionfinal

See Also

Developer's Guide

Methods

Create a clone of this object.
final

Return Value

Object
A clone of this object.