C

Arrow

Show Usages
A default implementation of the IArrow interface that can render ArrowTypes.
ImplementsInheritance Hierarchy

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|kite

Valid color strings are the same as for Color. Square brackets mark optional declarations.

Examples

Creating an arrow with custom color and size
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,
    }),
  }),
)

See Also

Developer's Guide

Members

No filters for this type

Constructors

Arrow

(type: ArrowType, color: Color)
Creates a new arrow in the given color.
For filled arrows, the fill will be the color. Stroked arrows like OPEN get it as the stroke.

Parameters

type: ArrowType
The ArrowType describing the shape of the arrow.
color: Color
The Color used to render the arrow.

Arrow

(
type: ArrowType
fill?: Fill
stroke?: Stroke
lengthScale?: number
widthScale?: number
cropLength?: number
cropAtPort?: boolean
)
Creates a new arrow.
If both, 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

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

Creating an arrow with custom color and size
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,
    }),
  }),
)

Properties

cropAtPort

: boolean
readonly
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.
For most cases, this property will be 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.
readonlyfinal

cropLength

: number
readonly
Gets the cropping length associated with this instance.

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.

readonlyfinal

See Also

Developer's Guide

fill

: Fill
readonly
Gets the fill to fill this arrow.
readonlyfinal

length

: number
readonly
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).
readonlyfinal

Implements

IArrow.length

lengthScale

: number
readonly
Gets the scale factor for the length of this arrow.
readonlyfinal

stroke

: Stroke
readonly
Gets the stroke to render the outline of this arrow.
readonlyfinal

type

: ArrowType
readonly
Gets the type of this arrow.
readonlyfinal

widthScale

: number
readonly
Gets the scale factor for the width of this arrow.
readonlyfinal

Methods

clone

(): Object
Create a clone of this object.
final

Return Value

Object
A clone of this object.

getBoundsProvider

(
edge: IEdge
atSource: boolean
anchor: Point
direction: Point
): IBoundsProvider
Gets an IBoundsProvider implementation that can yield this arrow's bounds if rendered at the given location using the given direction for the given edge.
final

Parameters

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

Return Value

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.

getVisualCreator

(
edge: IEdge
atSource: boolean
anchor: Point
direction: Point
): IVisualCreator
Gets an IVisualCreator implementation that will render this arrow at the given location using the given direction for the given edge.
final

Parameters

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

Return Value

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.

toString

(): string
Returns a string representation for this object.
final

Return Value

string
a string describing this object