- I
- I
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,
}),
)See Also
Developer's Guide
Members
Constructors
Properties
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.
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.
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.
const creator = style.renderer.getVisualCreator(edge, style)
const visual = creator.createVisual(context)Implements
IEdgeStyle.rendererGets or sets the thickness of the arrow shaft as a ratio of the thickness.
The value must be between 0 (inclusive) and 1 (inclusive).
The default value is 1/3.
Gets or sets the basic shape.
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
Developer's Guide
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
Developer's Guide