A default implementation of the IArrow interface that can render ArrowTypes.
Remarks
This is a convertible type that can be used with the following notation(s) in parameter lists, parameter objects or setters.
The strings applying to this scheme are converted to Arrows:
'[color] [scale] type'
color = CSS color strings
scale = xx-small|x-small|small|medium|large|x-large|xx-large
type = normal|none|stealth|open|diamond|cross|circle|ball|ellipse|triangle|chevron|deltoid|kiteValid color strings are the same as for Color. Square brackets mark optional declarations.
Examples
const edge = graph.createEdge(
node1,
node2,
new PolylineEdgeStyle({
// a thick red edge
stroke: new Stroke(Color.RED, 8),
targetArrow: new Arrow({
// the arrow should also be red
stroke: Stroke.RED,
// and larger, too
widthScale: 4,
lengthScale: 4,
type: ArrowType.STEALTH,
}),
}),
)Type Details
- yFiles module
- view
See Also
Constructors
Arrow
(type: ArrowType, fill?: Fill, stroke?: Stroke, lengthScale?: number, widthScale?: number, cropLength?: number, cropAtPort?: boolean)Creates a new arrow.
Remarks
stroke and fill are null or not specified, the arrow is rendered black. For filled arrows, the fill will be black. Stroked arrows like OPEN get a black stroke.Parameters
A map of options to pass to the method.
- type - ArrowType
- The ArrowType describing the shape of the arrow.
- fill - Fill
- The fill used to fill the arrow shape. The default is
null. - stroke - Stroke
- The stroke used to render the arrow outline. The default is
null. - lengthScale - number
- The scale factor for the arrow length. The default is 1.0.
- widthScale - number
- The scale factor for the arrow width. The default is 1.0.
- cropLength - number
- The additional length by which the edge is cropped. The default is 0.0.
- cropAtPort - boolean
- Whether the edge should end at the port instead of the node shape. The default is
false.
Examples
const edge = graph.createEdge(
node1,
node2,
new PolylineEdgeStyle({
// a thick red edge
stroke: new Stroke(Color.RED, 8),
targetArrow: new Arrow({
// the arrow should also be red
stroke: Stroke.RED,
// and larger, too
widthScale: 4,
lengthScale: 4,
type: ArrowType.STEALTH,
}),
}),
)Creates a new arrow in the given color.
Properties
Gets a value that tells the IEdgeStyleRenderer whether to crop the edge at the geometry of the port or rather at the shape of the owner of the port this arrow connects to, when the arrow is rendered at the end of the edge.
Remarks
false and the edge will end at the visible border of the node, pointing towards it, even if it is located inside the geometry of the owning element (typically a node). Setting this property to true indicates to the rendering process that the edge should be cropped at the port, directly. Note that this means that edges need to be rendered in front of the nodes or that nodes need to be transparent in order to not hide the arrow heads behind the node visualization.See Also
Implements
Gets the cropping length associated with this instance.
Remarks
This value is defined as the distance between the node-edge intersection and the tip of the arrow.
It is used by IEdgeStyle implementations to let the edge appear to end shortly before its actual target.
See Also
Implements
Gets the length of the arrow (the distance from the arrow's tip to the position where the visual representation of the edge's path should begin).
Gets the type of this arrow.
Methods
Create a clone of this object.
getBoundsProvider
(edge: IEdge, atSource: boolean, anchor: Point, direction: Point) : IBoundsProviderGets an IBoundsProvider implementation that can yield this arrow's bounds if rendered at the given location using the given direction for the given edge.
Parameters
A map of options to pass to the method.
- edge - IEdge
- The edge this arrow belongs to
- atSource - boolean
- Whether this will be the source arrow
- anchor - Point
- The anchor point for the tip of the arrow
- direction - Point
- The direction the arrow is pointing in
Returns
- ↪IBoundsProvider
- An implementation of the IBoundsProvider interface that can subsequently be used to query the bounds. Clients will always call this method before using the implementation and may not cache the instance returned. This allows for applying the flyweight design pattern to implementations.
See Also
Implements
Gets an IVisualCreator implementation that will render this arrow at the given location using the given direction for the given edge.
Parameters
A map of options to pass to the method.
- edge - IEdge
- The edge this arrow belongs to
- atSource - boolean
- Whether this will be the source arrow
- anchor - Point
- The anchor point for the tip of the arrow
- direction - Point
- The direction the arrow is pointing in
Returns
- ↪IVisualCreator
- An implementation of the IVisualCreator interface that can subsequently be used to perform the actual rendering. Clients will always call this method before using the implementation and may not cache the instance returned. This allows for applying the flyweight design pattern to implementations.