EdgeStyleBase<TVisualextends Visual>
An abstract base class that makes it possible to easily implement a custom IEdgeStyle.
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.
This implementation differs from the straightforward IEdgeStyle implementation in that there is no visible separation between the style and its IEdgeStyleRenderer. Instead the renderer used by the base class is fixed and delegates all calls back to the style instance.
Related Programming Samples
- Custom Styles
- Shows how to create custom styles for nodes, edges, labels, ports, and edge arrows.
- 01 Create a Polyline
- Create a simple edge style using SVG
- 07 Hit-Testing
- Customize which area of a edge can be hovered and clicked
- 08 Edge Cropping
- Customize where edges at the node are cropped
Type Parameters
- TVisual: Visual
- The optional type of the
created and updated by the and methods. This type argument can be omit, but specifying a more concrete type helps conveniently implementing with TypeScript.
Type Details
- yfiles module
- view-component
- yfiles-umd modules
- All view modules
- Legacy UMD name
- yfiles.styles.EdgeStyleBase
See Also
Constructors
Initializes a new instance of the EdgeStyleBase<TVisual> class.
Properties
Gets the renderer implementation for this instance.
Remarks
Implements
Methods
addArrows
(context: IRenderContext, group: SVGGElement, edge: IEdge, edgePath: GeneralPath, sourceArrow: IArrow, targetArrow: IArrow)Adds the arrows to a given container.
Parameters
A map of options to pass to the method.
- 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.
Creates a new object that is a copy of the current instance.
Remarks
this.Returns
- ↪Object
- A new object that is a copy of this instance using memberwiseClone.
Implements
Creates the visual.
Remarks
Parameters
A map of options to pass to the method.
- context - IRenderContext
- The render context.
- edge - IEdge
- The edge to which this style instance is assigned.
Returns
- ↪TVisual
- The visual as required by the createVisual interface.
See Also
Crops the edge's path at the nodes.
Remarks
Parameters
A map of options to pass to the method.
- 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.
Returns
- ↪GeneralPath
- The cropped path. This is can be either the same instance of the given path or a newly created instance.
Gets the bounds of the visual for the edge in the given context.
Remarks
Parameters
A map of options to pass to the method.
- context - ICanvasContext
- The canvas context.
- edge - IEdge
- The edge to which this style instance is assigned.
Returns
- ↪Rect
- The visual bounds of the visual representation.
Gets the path of the edge.
Parameters
A map of options to pass to the method.
- edge - IEdge
- The edge.
Returns
- ↪GeneralPath
- The path.
See Also
Gets the number of segments of the edge.
Parameters
A map of options to pass to the method.
- edge - IEdge
- The edge.
Returns
- ↪number
- The segment count.
See Also
Calculates the source arrow anchor and direction for a a given arrow and path.
Parameters
A map of options to pass to the method.
- path - GeneralPath
- The path of the edge.
- arrow - IArrow
- The arrow.
Returns
- ↪Tangent
- The anchor and directional vector of the arrow, if any exist.
Gets the tangent to the edge at the specified ratio and the corresponding touch point.
Gets the tangent to the edge at the specified ratio of a segment of the edge and the corresponding touch point.
Parameters
A map of options to pass to the method.
- edge - IEdge
- The edge.
- segmentIndex - number
- Index of the segment of the edge.
- ratio - number
- A value between 0 and 1 inclusively that indicates a ratio from the beginning to the end of the segment of the edge.
Returns
- ↪Tangent
- The tangent, if any exists.
See Also
Calculates the target arrow anchor and direction for a a given arrow and path.
Parameters
A map of options to pass to the method.
- path - GeneralPath
- The path of the edge.
- arrow - IArrow
- The arrow.
Returns
- ↪Tangent
- The anchor and directional vector of the arrow, if any exist.
Determines whether the visual representation of the edge has been hit at the given location.
Remarks
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 canvas context.
Parameters
A map of options to pass to the method.
- context - IInputModeContext
- The input mode context.
- location - Point
- The point to test.
- edge - IEdge
- The edge to which this style instance is assigned.
Returns
- ↪boolean
trueif the specified edge representation is hit;falseotherwise.
See Also
Determines whether the visualization for the specified edge is included in the marquee selection.
Remarks
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.
Parameters
A map of options to pass to the method.
- context - IInputModeContext
- The input mode context.
- rectangle - Rect
- The marquee selection box.
- edge - IEdge
- The edge to which this style instance is assigned.
Returns
- ↪boolean
trueif the specified edge is visible is selected by the marquee rectangle;falseotherwise.
Determines whether the visualization for the specified edge is included in the lasso selection.
Remarks
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.
Parameters
A map of options to pass to the method.
- context - IInputModeContext
- The input mode context.
- path - GeneralPath
- The lasso selection path.
- edge - IEdge
- The edge to which this style instance is assigned.
Returns
- ↪boolean
trueif the specified edge is visible is selected by the lasso path;falseotherwise.
Determines whether the visualization for the specified edge is visible in the context.
Remarks
Parameters
A map of options to pass to the method.
- context - ICanvasContext
- The canvas context.
- rectangle - Rect
- The clipping rectangle.
- edge - IEdge
- The edge to which this style instance is assigned.
Returns
- ↪boolean
trueif the specified edge is visible in the clipping rectangle;falseotherwise.
Performs the lookup operation for the getContext that has been queried from the renderer.
Remarks
This implementation yields null for everything but:
For these interfaces an implementation will be returned that delegates to the methods in this instance.
Parameters
A map of options to pass to the method.
Returns
- ↪any
- An implementation of the
typeornull.
updateArrows
(context: IRenderContext, group: SVGGElement, edge: IEdge, edgePath: GeneralPath, sourceArrow: IArrow, targetArrow: IArrow)Updates the arrows in a given container.
Parameters
A map of options to pass to the method.
- 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.
Updates the visual previously created by createVisual.
Remarks
Parameters
A map of options to pass to the method.
- 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.
Returns
- ↪TVisual
- The visual as required by the createVisual interface.