Node style that supports different kinds of arrow shapes with configurable arrow tip angle and arrow shaft thickness.
Remarks
The final shape is defined by:
- shape – The basic shape of the arrow, e.g. DOUBLE_ARROW or NOTCHED_ARROW.
- angle – The tip angle.
- shaftRatio – The relative shaft thickness.
This style can be used together with ArrowNodeStyleRenderer instances.
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
})
)Type Details
- yfiles module
- styles-other
- yfiles-umd modules
- All view modules
- Legacy UMD name
- yfiles.styles.ArrowNodeStyle
See Also
Constructors
Creates a new instance.
Parameters
A map of options to pass to the method.
- renderer - ArrowNodeStyleRenderer
- An optional custom renderer instance for this style. The default is ArrowNodeStyleRenderer.
- shape - ArrowStyleShape
The basic shape. This option sets the shape property on the created object.
- direction - ArrowNodeDirection
The direction the shape points to. This option sets the direction property on the created object.
- angle - number
The angle of the angled sides in radians. This option sets the angle property on the created object.
- shaftRatio - number
The thickness of the arrow shaft as ratio of the node size. This option sets the shaftRatio property on the created object.
- stroke - Stroke
- fill - Fill
- cssClass - string
A CSS class that will be applied to the visualization. This option sets the cssClass property on the created object.
Properties
Gets or sets the angle of the angled sides in radians.
Remarks
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.
See Also
Gets or sets the direction the shape points to.
Gets or sets the Fill for filling the interior of the shape.
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.
Remarks
const creator = style.renderer.getVisualCreator(node, style)
const visual = creator.createVisual(context)See Also
Implements
Gets or sets the thickness of the arrow shaft as ratio of the node size.
Remarks
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.
See Also
Gets or sets the basic shape.
Gets or sets the Stroke used for drawing the outline of the shape.
Methods
Create a clone of this object.