ArrowNodeStyle

Show usages

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

Inheritance Hierarchy

ArrowNodeStyle

Implemented Interfaces

INodeStyle

ICloneable

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.

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: view

Constructors

ArrowNodeStyle

()

ParametersOptions Overload

options - Object
A map of options to pass to the method.

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 a ratio of the node size. This option sets the shaftRatio property on the created object.
stroke - Stroke: The Stroke used for drawing the outline of the shape. This option sets the stroke property on the created object.
fill - Fill: The Fill for filling the interior of the shape. This option sets the fill property on the created object.
cssClass - string: A CSS class that will be applied to the visualization. This option sets the cssClass property on the created object.

Properties

angle

: number

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.

cssClass

: string

Gets or sets a CSS class that will be applied to the visualization.

Remarks

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.

direction

: ArrowNodeDirection

Gets or sets the direction the shape points to.

Remarks

The default value is RIGHT.

fill

: Fill?

Gets or sets the Fill for filling the interior of the shape.

Remarks

The default value is WHITE.

renderer

: INodeStyleRenderer

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

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)

Implements

INodeStyle

shaftRatio

: number

Gets or sets the thickness of the arrow shaft as a 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.

shape

: ArrowStyleShape

Gets or sets the basic shape.

Remarks

The default value is ARROW.

stroke

: Stroke?

Gets or sets the Stroke used for drawing the outline of the shape.

Remarks

The default value is BLACK.

Methods

clone

() : Object

Create a clone of this object.

Returns

↪Object: A clone of this object.

Implements

ICloneable