Edge Styles
Edges are rendered using IEdgeStyle implementations. yFiles for HTML provides a choice of predefined edge styles:
- PolylineEdgeStyle
- A polygonal edge style where straight line segments are used to connect the bends. This style supports arrows and bridges. It is discussed in more detail in section PolylineEdgeStyle.
- BezierEdgeStyle
- Provides an edge representation as a cubic bezier path. Bends are interpreted as control points. This style supports arrows. It is discussed in more detail in section BezierEdgeStyle.
- ArcEdgeStyle
- Provides an arc representation for an edge. Bends are ignored. This style supports arrows. It is discussed in more detail in section ArcEdgeStyle.
- BridgeEdgeStyle
- Provides a 3-segment bridge representation for an edge. Bends are ignored. This style supports arrows and bridges. It is discussed in more detail in section BridgeEdgeStyle.
- ArrowEdgeStyle
- Provides a single-segment arrow shape representation for an edge. Bends are ignored. It is discussed in more detail in section ArrowEdgeStyle.
PolylineEdgeStyle
The PolylineEdgeStyle connects the ports and bends of an edge with straight line segments.
Like most edge styles, PolylineEdgeStyle allows for setting the edge’s color and line width. It also supports arrows, allowing for setting a sourceArrow and targetArrow. More details about arrows can be found below.
PolylineEdgeStyle also supports smoothed bends by setting a value > 0 as smoothingLength.
// default: black line, no arrows
const node1 = graph.createNodeAt([0, 0])
const node2 = graph.createNodeAt([300, 0])
const edge = graph.createEdge(node1, node2, new PolylineEdgeStyle())
graph.addBend(edge, [100, -40])
graph.addBend(edge, [200, 40])
// default pen, source and target arrows, smoothing length 30
const node1 = graph.createNodeAt([0, 100])
const node2 = graph.createNodeAt([300, 100])
const edge = graph.createEdge(
node1,
node2,
new PolylineEdgeStyle({
sourceArrow: 'circle',
targetArrow: 'simple',
smoothingLength: 30
})
)
graph.addBend(edge, [100, 60])
graph.addBend(edge, [200, 140])
// thick red pen with matching arrow
const node1 = graph.createNodeAt([0, 200])
const node2 = graph.createNodeAt([300, 200])
const edge = graph.createEdge(
node1,
node2,
new PolylineEdgeStyle({
stroke: '4px solid orangered',
targetArrow: new Arrow({ fill: 'orangered', scale: 2, type: 'default' })
})
)
graph.addBend(edge, [100, 160])
graph.addBend(edge, [200, 240])
PolylineEdgeStyle handles self-loops, i.e. edges which start and end at the same node. Self-loops without bends are rendered in an orthogonal path which exits and enters the node. For self-loops with one bend the same applies, but the path is chosen such that the bend lies on one of the path’s corners. Self-loops with two or more bends are rendered normally.
BezierEdgeStyle
The BezierEdgeStyle draws an edge as a cubic bezier path. The bends together with the source and target port locations of the edge serve as control points for this path.
const node1 = graph.createNodeAt([0, 0])
const node2 = graph.createNodeAt([300, 0])
const edge = graph.createEdge(node1, node2, new BezierEdgeStyle({ targetArrow: 'default' }))
graph.addBend(edge, [100, -40])
graph.addBend(edge, [130, -20])
graph.addBend(edge, [150, 0])
graph.addBend(edge, [170, 20])
graph.addBend(edge, [200, 40])
Like most edge styles, BezierEdgeStyle allows for setting the edge’s color and line width. It also supports arrows, allowing for setting a sourceArrow and targetArrow. More details about arrows can be found below.
BezierEdgeStyle does not handle self-loops on its own. Developers have to add at least two bends if they want to visualize self-loop edges with this style.
This style disables interactive bend creation and orthogonal editing and does not add bridges to its path. The BezierEdgeStyle demo demonstrates how to support interactive edge editing for BezierEdgeStyle.
ArcEdgeStyle
The ArcEdgeStyle renders an edge as an arc with a given height between the edge’s source and target port locations. The arc extends to the left of the edge flow with a positive height value. The bends of the edge are completely ignored.
const node1 = graph.createNodeAt([0, 0])
const node2 = graph.createNodeAt([300, 0])
const edge = graph.createEdge(node1, node2, new ArcEdgeStyle({ height: 50, targetArrow: 'default' }))
Like most edge styles, ArcEdgeStyle allows for setting the edge’s color and line width. It also supports arrows, allowing for setting a sourceArrow and targetArrow. More details about arrows can be found below.
The height can be specified either in absolute or in relative coordinates, depending on the fixedHeight property. If fixedHeight is disabled, the height is interpreted as factor to multiply the length of the line between source and target port with.
ArcEdgeStyle cannot visualize self-loops.
By default, the ArcEdgeStyle provides a handle which supports interactive reshaping of the arc.
This can be turned off by setting provideHeightHandle to false.
BridgeEdgeStyle
The BridgeEdgeStyle renders an edge as a 3-segment bridge with a given height between the edge’s source and target port locations. The bridge extends to the left of the edge flow with a positive height value. The bends of the edge are completely ignored.
const node1 = graph.createNodeAt([0, 0])
const node2 = graph.createNodeAt([300, 0])
const edge1 = graph.createEdge(node1, node2, new BridgeEdgeStyle({ targetArrow: 'default', height: 50 }))
const edge2 = graph.createEdge(node1, node2, new BridgeEdgeStyle({ targetArrow: 'default', height: -50 }))
Like most edge styles, BridgeEdgeStyle allows for setting the edge’s color and line width. It also supports arrows, allowing for setting a sourceArrow and targetArrow. More details about arrows can be found below.
The height property determines the height of the bridge over the base line in absolute coordinates.
The fanLength property determines the length of the fan or slope segment in relation to the base line distance. Values from 0 to 1 denote a length that is relative to half of the distance between source and target ports, i.e. a value of 1 signifies that the fan will cover the whole distance up to the midpoint. All other values are interpreted as absolute coordinates. Values that extend over half of the distance between the source and target ports or are smaller than 0 are capped to avoid visual artifacts.
BridgeEdgeStyle cannot visualize self-loops.
By default, the BridgeEdgeStyle provides a handle which supports interactive changing of the bridge height.
This can be turned off by setting provideHeightHandle to false.
ArrowEdgeStyle
The ArrowEdgeStyle renders an edge as a single-segment bridge arrow shapes with configurable arrow tip angle and arrow shaft thickness. The bends of the edge are ignored for this style.
graph.createEdge(
source,
target,
new ArrowEdgeStyle({
shape: 'arrow',
thickness: 10,
sourceCropping: 5,
targetCropping: 1,
fill: 'white',
stroke: 'dark-blue'
})
)
Arrow Shape
The basic shape is determined by the same properties as for the Arrow Shapes of ArrowNodeStyle.
graph.createEdge(
source,
target,
new ArrowEdgeStyle({
shape: 'notched-arrow',
angle: Math.PI / 8,
thickness: 10,
shaftRatio: 1,
sourceCropping: 10,
targetCropping: 10,
stroke: 'black',
fill: null
})
)
Thickness and Cropping
In addition to those shape properties, ArrowEdgeStyle also provides further properties that determine how the shape is arranged along the edge segment:
- thickness
- Defines the thickness of the arrow shape at its widest point.
- sourceCropping
- targetCropping
- Defines the amount of space to crop from the imaginary line between the source resp. target node intersection point. This shortens the arrow and leaves room at the arrow’s end resp. tip.
Custom Styles
yFiles for HTML offers an abstract style implementation, the EdgeStyleBase<TVisual>. Creating custom styles using this class as base class is discussed in detail in section Customizing Styles.
Invisible Edges
The VoidEdgeStyle can be used to render an edge invisible, while the edge is still in the graph. Additionally, the edge is not visible to any interactions like mouse clicks.
VoidEdgeStyle.INSTANCE provides a singleton of the VoidEdgeStyle.
graph.setStyle(invisibleEdge, VoidEdgeStyle.INSTANCE)
Decorations: Arrows
Arrows are visual decorations that can be placed at an edge’s ends. Normally, this decoration is some kind of arrowhead that is used to indicate the edge’s direction.
Arrows do not define the direction of an edge. They only indicate it. The difference is that in the graph model, an edge has a defined source and target end, and arrows may appear on either end. Also some graph analysis and layout algorithms may assume an edge direction that is consistent with the graph model, but deviates from the visualization.
As visual decorations they are used with IEdgeStyle implementations which support arrows. In yFiles for HTML, these are PolylineEdgeStyle, BezierEdgeStyle, ArcEdgeStyle and BridgeEdgeStyle.
The IArrow interface provides a number of predefined arrowhead renderings which can be directly used with the sourceArrow and targetArrow properties of these styles.
const edgeStyle = new PolylineEdgeStyle({
sourceArrow: 'circle',
targetArrow: 'diamond'
})
An arrow’s size and color are independent of the edge. Using an edge stroke other than the default most likely requires to use a non-default arrow configuration, too.
const edge = graph.createEdge(
node1,
node2,
new PolylineEdgeStyle({
stroke: '8px solid red',
targetArrow: new Arrow({
fill: 'red',
scale: 4,
type: 'default'
})
})
)
The distance between the node-edge intersection and the tip of the arrow, the anchor point, is referred to as crop length. This value can be set using property cropLength. A non-zero crop length can be set if a custom port visualization sticks outside the node bounds, for example, or if one simply wants to display a gap between the arrow and the node.
Developers can implement interface IArrow to create custom arrow visualizations. This is described in detail in section Customizing Arrows.
Decorations: Bridges
When there are a lot of crossing edges, especially when they are orthogonal, it can be hard to determine where an edge actually leads. Bridges, or line jumps, are a means to resolve the visual ambiguity induced by intersecting edge paths. Each segment of an edge path that intersects with at least one other segment (from either the same or another edge path) can be augmented with a bridge in one of a variety of different styles like gap, arc, and rectangle.
Bridge rendering is handled by the BridgeManager class. It can be enabled on a GraphComponent’s graph by setting the GraphComponent to BridgeManager’s canvasComponent property:
const bridgeManager = new BridgeManager()
bridgeManager.canvasComponent = graphComponent
bridgeManager.addObstacleProvider(new GraphObstacleProvider())
To determine “obstacles” to render a bridge around the BridgeManager instance uses an implementation of the IObstacleProvider interface. The interface’s single method is used to get a GeneralPath that defines an actual obstacle.
The GraphObstacleProvider class, which is used in the above example code, is a convenience implementation that by default incorporates the obstacle definitions returned by all edges from the current graph in the BridgeManager’s GraphComponent.
By default, you can find an appropriate IObstacleProvider implementation in the lookup of each edge that uses a style with a PathBasedEdgeStyleRenderer<TStyle>-based style renderer. In yFiles for HTML these are styles PolylineEdgeStyle, ArcEdgeStyle and BridgeEdgeStyle.