C

EdgeStyleBase<TVisual>
abstract

Show Usages
An abstract base class that makes it possible to easily implement a custom IEdgeStyle.
ImplementsInheritance Hierarchy

Remarks

The only method that needs to be implemented by subclasses is createVisual, however to improve rendering performance it is highly recommended to implement at least updateVisual, too.

Unlike a direct IEdgeStyle implementation, EdgeStyleBase<TVisual> does not expose a separate IEdgeStyleRenderer. The base class uses a fixed renderer and simply forwards its calls back to the style instance.

Note that if your subclass has private fields (defined with JavaScript's # name syntax), the clone method needs to be overridden for the cloning to work properly.

Type Parameters

TVisual

The optional type of the created and updated by the and methods. This type argument can be omitted, but specifying a more concrete type helps conveniently implementing with TypeScript.

See Also

Developer's Guide

Demos

Shows how to create custom styles for nodes, edges, labels, ports, and edge arrows.
Create a simple edge style using SVG
Customize which area of a edge can be hovered and clicked
Customize where edges at the node are cropped

Members

Show:

Constructors

EdgeStyleBase

()
protected
Initializes a new instance of the EdgeStyleBase<TVisual> class.

Properties

renderer

: IEdgeStyleRenderer
readonly
Gets the renderer implementation for this instance.
The private implementation will delegate all API calls back to this instance.
readonlyfinal

Methods

addArrows

(
context: IRenderContext
group: SVGGElement
edge: IEdge
edgePath: GeneralPath
sourceArrow: IArrow
targetArrow: IArrow
)
protected
Adds the arrows to a given container.
protected

Parameters

context: IRenderContext
The context for the rendering.
group: SVGGElement
The container to which the arrows should be added.
edge: IEdge
The edge that is being rendered.
edgePath: GeneralPath
The edge path.
sourceArrow: IArrow
The source arrow.
targetArrow: IArrow
The target arrow.

clone

(): Object
Creates a new object that is a copy of the current instance.

Immutable subclasses should consider returning this for the best performance.

The base class implementation creates a simple shallow clone that copies all own properties to a new instance. This will not work for classes that use private fields or properties (defined with JavaScript's # name syntax) as no constructors will be run and implementations like this cannot be accessed from outside the classes that declare them.

Classes that use private members or require special initialization must override this method and manually create a new instance or call super.clone() and then explicitly copy the private fields and properties explicitly.

Return Value

Object
A new object that is a copy of this instance using a memberwise clone.

createVisual

(context: IRenderContext, edge: IEdge): TVisual
protectedabstract
Creates the visual.
This method is called in response to a createVisual call to the instance that has been queried from the renderer.
protectedabstract

Parameters

context: IRenderContext
The render context.
edge: IEdge
The edge to which this style instance is assigned.

Return Value

TVisual
The visual as required by the createVisual interface.

See Also

API
updateVisual

cropPath

(
edge: IEdge
sourceArrow: IArrow
targetArrow: IArrow
path: GeneralPath
): GeneralPath
protected
Crops the edge's path at the nodes.
This implementation uses the IEdgePathCropper instances found in the lookup of the source and target port of the edge to perform the actual cropping.
protected

Parameters

edge: IEdge
The edge that is being rendered.
sourceArrow: IArrow
The source arrow instance.
targetArrow: IArrow
The target arrow instance.
path: GeneralPath
The path that should be cropped.

Return Value

GeneralPath
The cropped path. This can be either the same instance of the given path or a newly created instance.

getBounds

(context: ICanvasContext, edge: IEdge): Rect
protected
Gets the bounds of the visual for the edge in the given context.
This method is called in response to a getBounds call to the instance that has been queried from the renderer. This implementation simply yields a rectangle containing the locations of the sourcePort and the targetPort of the edge and the locations of all its bends.
protected

Parameters

context: ICanvasContext
The canvas context.
edge: IEdge
The edge to which this style instance is assigned.

Return Value

Rect
The visual bounds of the visual representation.

getPath

(edge: IEdge): GeneralPath
protected
Gets the path of the edge.
protected

Parameters

edge: IEdge
The edge.

Return Value

GeneralPath
The path.

See Also

Developer's Guide

getSegmentCount

(edge: IEdge): number
protected
Gets the number of segments of the edge.
protected

Parameters

edge: IEdge
The edge.

Return Value

number
The segment count.

See Also

Developer's Guide

getSourceArrowAnchor

(path: GeneralPath, arrow: IArrow): Tangent
protected
Calculates the source arrow anchor and direction for a given arrow and path.
protected

Parameters

path: GeneralPath
The path of the edge.
arrow: IArrow
The arrow.

Return Value

Tangent
The anchor and directional vector of the arrow, if any exist.

getTangent

(edge: IEdge, ratio: number): Tangent
protected
Gets the tangent to the edge at the specified ratio and the corresponding touch point.
protected

Parameters

edge: IEdge
The edge.
ratio: number
A value between 0 and 1 inclusively that indicates a ratio from the beginning to the end of the edge path.

Return Value

Tangent
The tangent, if it exists.

See Also

Developer's Guide

getTangentForSegment

(
edge: IEdge
segmentIndex: number
ratio: number
): Tangent
protected
Gets the tangent to the edge at the specified ratio of an edge segment and the corresponding touch point.
protected

Parameters

edge: IEdge
The edge.
segmentIndex: number
Index of the edge segment.
ratio: number
A value between 0 and 1 inclusively that indicates a ratio from the beginning to the end of the edge segment.

Return Value

Tangent
The tangent, if it exists.

See Also

Developer's Guide

getTargetArrowAnchor

(path: GeneralPath, arrow: IArrow): Tangent
protected
Calculates the target arrow anchor and direction for a given arrow and path.
protected

Parameters

path: GeneralPath
The path of the edge.
arrow: IArrow
The arrow.

Return Value

Tangent
The anchor and directional vector of the arrow, if any exist.

isHit

(
context: IInputModeContext
location: Point
edge: IEdge
): boolean
protected
Determines whether the visual representation of the edge has been hit at the given location.

This method is called in response to a isHit call to the instance that has been queried from the renderer.

This implementation returns the result of the hitsPolyline method of class Point with the polygonal line defined by the source port, the target port, and the bends of the edge and the hitTestRadius of the ICanvasContext.

protected

Parameters

context: IInputModeContext
The input mode context.
location: Point
The point to test.
edge: IEdge
The edge to which this style instance is assigned.

Return Value

boolean
true if the specified edge is hit; false otherwise.

See Also

API
hitsPolyline

isInBox

(
context: IInputModeContext
rectangle: Rect
edge: IEdge
): boolean
protected
Determines whether the visualization for the specified edge is included in the marquee selection.

This method is called in response to a isInBox call to the instance that has been queried from the renderer.

This implementation returns the result of the intersectsPolyline method of class Rect with the polygonal line defined by the source port, the target port, and the bends of the edge.

protected

Parameters

context: IInputModeContext
The input mode context.
rectangle: Rect
The marquee selection box.
edge: IEdge
The edge to which this style instance is assigned.

Return Value

boolean
true if the specified edge is visible and selected by the marquee rectangle; false otherwise.

isInPath

(
context: IInputModeContext
path: GeneralPath
edge: IEdge
): boolean
protected
Determines whether the visualization for the specified edge is included in the lasso selection.

This method is called in response to a isInPath call to the instance that has been queried from the renderer.

This implementation uses the results of the findLineIntersection method with the polygonal line defined by the source port, the target port, and the bends of the edge.

protected

Parameters

context: IInputModeContext
The input mode context.
path: GeneralPath
The lasso selection path.
edge: IEdge
The edge to which this style instance is assigned.

Return Value

boolean
true if the specified edge is visible and selected by the lasso path; false otherwise.

isVisible

(
context: ICanvasContext
rectangle: Rect
edge: IEdge
): boolean
protected
Determines whether the visualization for the specified edge is visible in the context.
This method is called in response to a isVisible call to the instance that has been queried from the renderer. This implementation simply tests whether the bounds intersect the clip.
protected

Parameters

context: ICanvasContext
The canvas context.
rectangle: Rect
The clipping rectangle.
edge: IEdge
The edge to which this style instance is assigned.

Return Value

boolean
true if the specified edge is visible in the clipping rectangle; false otherwise.

lookup

(edge: IEdge, type: Constructor): any
protected
Performs the lookup operation for the getContext that has been queried from the renderer.

This implementation yields null for everything but:

For these interfaces, an implementation will be returned that delegates to the methods in this instance.

protected

Parameters

edge: IEdge
The edge to use for the context lookup.
type: Constructor
The type to query.

Return Value

any
An implementation of the type or null.

updateArrows

(
context: IRenderContext
group: SVGGElement
edge: IEdge
edgePath: GeneralPath
sourceArrow: IArrow
targetArrow: IArrow
)
protected
Updates the arrows in a given container.
protected

Parameters

context: IRenderContext
The context for the rendering.
group: SVGGElement
The container to which the arrows should be added.
edge: IEdge
The edge that is being rendered.
edgePath: GeneralPath
The edge path.
sourceArrow: IArrow
The source arrow.
targetArrow: IArrow
The target arrow.

updateVisual

(
context: IRenderContext
oldVisual: TVisual
edge: IEdge
): TVisual
protected
Updates the visual previously created by createVisual.
This method is called in response to a updateVisual call to the instance that has been queried from the renderer. This implementation simply delegates to createVisual so subclasses should override to improve rendering performance.
protected

Parameters

context: IRenderContext
The render context.
oldVisual: TVisual
The visual that has been created in the call to createVisual.
edge: IEdge
The edge to which this style instance is assigned.

Return Value

TVisual
The visual as required by the createVisual interface.

See Also

API
createVisual