Connectors
Connectors are the lines that actually join elements of the UI. They are the visual representation of edges. The Toolkit has five connector types:
The default, if you do not provide a value, is to use the Segmented
connector. In a future release of the Toolkit the Straight
connector will be removed, as the Segmented
connector behaves like a Straight
connector when it has only one segment.
Connectors can be specified in a few different places:
- in an edge definition in a view
- in the
defaults
section of the render options to a Surface - in a UI State
Bezier
Provides a cubic Bezier path between the two endpoints. It supports a single constructor argument:
curviness
- Optional; defaults to 150. This defines the distance in pixels that the Bezier's control points are situated from the anchor points. This does not mean that your Connector will pass through a point at this distance from your curve. It is a hint to how you want the curve to travel. Rather than discuss Bezier curves at length here, we refer you to Wikipedia.
Straight
Draws a straight line between the two endpoints. Two constructor arguments are supported:
stub
- Optional, defaults to 0. Any positive value for this parameter will result in a stub of that length emanating from the Endpoint before the straight segment connecting to the other end of the connection.gap
- Optional, defaults to 0. A gap between the endpoint and either the start of the stub or the segment connecting to the other endpoint.
Orthogonal
Draws a connection that consists of a series of vertical or horizontal segments - the classic flowchart look. These constructor arguments are supported:
Interface OrthogonalConnectorOptions
Members
Editing orthogonal paths
The Orthogonal
connector supports interactive path editing by the user. For information about this, see the path editing page.
Segmented
Draws a connection that consists of a series of straight line segments, with options to smooth to a curve or to round the corners between segments.
Supported constructor parameters are:
smooth
- Optional; defaults to false. When true, the path is smoothed as a set of Bezier curves.smoothing
- The amount of smoothing to apply. The default is 0.15. Values that deviate too much from the default will make your lines look weird.cornerRadius
- Optional radius to apply to corners. This does not work in conjunction withsmooth:true
- you should use one or the other.
You can set a stub
on the connector:
connector: {
type:"Segmented",
options:{
stub:25
}
}
You can supply a geometry
object for the edge that the connector represents (or use the segmented connector editor to have the Toolkit generate this) for when you want multiple segments:
edges:[
{
"source":"1",
"target":"3",
"geometry":{
source:{ curX:80, curY:110, ox:0, oy:1, x:0.5, y:1 },
target:{ curX:480, curY:360, ox:0, oy:1, x:0.5, y:1 },
segments:[
{ x: 40, y: 200 },
{ x: 40, y: 330 },
{ x: 400, y:330 }
]
}
}
]
Smoothing
You can also specify that you want to smooth the connector via the smooth
option:
connector: {
type:"Segmented",
options:{
smooth:true
}
}
If you set smooth:true
on a Segmented
connector but don't provide a a value for stub
then you won't see any curve, as the smoothing is only applied when the connector has more than one segment. If you provide a small value for stub
you will see quite a pronounced hook, as in the following example where we set stub
to 10. Smoothing works better when there are more than just a few segments in the connector, or when it does not just consist of one straight segment and stubs.
connector: {
type:"Segmented",
options:{
stub:10,
smooth:true
}
}
Rounded corners
An alternative to smoothing is rounded corners, introduced in 6.14.0:
connector: {
type:"Segmented",
options:{
cornerRadius:15
}
}
Editing segmented paths
The Segmented
connector supports interactive path editing by the user. For information about this, see the edge path editors page.
StateMachine
Draws slightly curved lines (they are actually quadratic Bezier curves), similar to the connectors you may have seen in software like GraphViz. Connections in which some element is both the source and the target ("loopback") are supported by these connectors (as they are with Orthogonal connectors); in this case you get a circle.
Supported constructor parameters are:
margin
- Optional; defaults to 5. Defines the distance from the element that the connector begins/ends.curviness
- Optional, defaults to 10. This has a similar effect to the curviness parameter on Bezier curves.proximityLimit
- Optional, defaults to 80. The minimum distance between the two ends of the connector before it paints itself as a straight line rather than a quadratic Bezier curve.