Edge style that renders like different single-segment arrow shapes with configurable arrow tip angle and arrow shaft thickness.
Remarks
The visualization is similar to ArrowNodeStyle.
The arrow will be rendered between the two intersection points with the node shapes, as if a line were drawn directly between the two ports.
The thickness property determines the size of the arrow.
The other settings are the same as for ArrowNodeStyle.
The final shape is defined by:
- shape – The basic shape of the arrow, e.g. ARROW or NOTCHED_ARROW.
- angle – The tip angle.
- thickness – The thickness of the shape at its widest point.
- shaftRatio – The thickness of the shaft relative to thickness.
- sourceCropping – The amount of space to crop from the imaginary line between the source node intersection point. This shortens the arrow and leaves room at the arrow's end.
- targetCropping – The amount of space to crop from the imaginary line between the target node intersection point. This shortens the arrow and leaves room at the end of the arrow's tip.
Examples
The following example shows a simple ArrowEdgeStyle.
graph.createEdge(
source,
target,
new ArrowEdgeStyle({
shape: 'arrow',
thickness: 10,
sourceCropping: 5,
targetCropping: 1,
fill: 'white',
stroke: 'dark-blue'
})
)The following example shows a ArrowEdgeStyle with a thick notched shaft and a short head
graph.createEdge(
source,
target,
new ArrowEdgeStyle({
shape: 'notched-arrow',
angle: Math.PI / 8,
thickness: 10,
shaftRatio: 1,
sourceCropping: 10,
targetCropping: 10,
fill: 'black',
stroke: null
})
)Type Details
- yfiles module
- styles-other
- yfiles-umd modules
- All view modules
- Legacy UMD name
- yfiles.styles.ArrowEdgeStyle
See Also
Constructors
Creates a new instance with default properties.
Parameters
A map of options to pass to the method.
- sourceCropping - number
The distance that the end of the arrow shape should stay away from the intersection with its source shape. This option sets the sourceCropping property on the created object.
- targetCropping - number
The distance that the tip of the arrow shape should stay away from the intersection with its target shape. This option sets the targetCropping property on the created object.
- shape - ArrowStyleShape
The basic shape. This option sets the shape 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 thickness. This option sets the shaftRatio property on the created object.
- thickness - number
The width of the arrow that is drawn. This option sets the thickness 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.
Gets the renderer implementation that can be queried for implementations that provide details about the visual appearance and visual behavior for a given edge and this style instance.
Remarks
const creator = style.renderer.getVisualCreator(edge, style)
const visual = creator.createVisual(context)Implements
Gets or sets the thickness of the arrow shaft as ratio of the thickness.
Remarks
The value must be between 0 (inclusive) and 1 (inclusive).
The default value is 1/3.
Gets or sets the basic shape.
Remarks
Gets or sets the distance that the end of the arrow shape should stay away from the intersection with its source shape.
Remarks
A value of 0 will make the end touch the shape and thus may cause an overlap when it is not perpendicular to the surface.
A value that corresponds to about half the thickness typically prevents overlaps, but this depends on the shape and shaftRatio.
The default value is 3.
See Also
Gets or sets the distance that the tip of the arrow shape should stay away from the intersection with its target shape.
Remarks
A value of 0 will make the tip touch the shape and thus may cause an overlap when it is not perpendicular to the surface.
A value that corresponds to about half the thickness typically prevents overlaps, but this depends on the shape and shaftRatio.
The default value is 3.
See Also
Gets or sets the width of the arrow that is drawn.
Methods
Create a clone of this object.