Connectors
Introduction
Connectors are the lines that actually join elements of the UI. The Toolkit has four connector types:
The default, if you do not provide a value, is to use the Straight connector.
Connectors can be specified in a few different places:
- in an edge definition in a view
- in the
defaultssection of the render options to a Surface - in a UI State
Bezier
Note This connector ships in the package @jsplumb/connector-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
This connector ships in the package @jsplumb/core, which is imported by @jsplumbtoolkit/core.
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
Note This connector ships in the package @jsplumbtoolkit/connector-orthogonal.
Draws a connection that consists of a series of vertical or horizontal segments - the classic flowchart look. These constructor arguments are supported:
Home > @jsplumbtoolkit/connector-orthogonal > OrthogonalConnectorOptions
OrthogonalConnectorOptions interface
Options for an orthogonal connector.
Signature:
export interface OrthogonalConnectorOptions extends ConnectorOptions
Extends: ConnectorOptions
Properties
| Property | Modifiers | Type | Description |
|---|---|---|---|
| alwaysRespectStubs? | boolean | (Optional) If true, always draw a stub of the desired length, even when the source and target elements are very close together. | |
| cornerRadius? | number | (Optional) Optional curvature of the corners in the connector. Defaults to 0. | |
| loopbackRadius? | number | (Optional) For a loopback connection, the size of the loop. | |
| midpoint? | number | (Optional) The point to use as the halfway point between the source and target. Defaults to 0.5. | |
| slightlyWonky? | boolean | (Optional) If true, and a cornerRadius is set, the lines are drawn in such a way that they look slightly hand drawn. This effect was something we stumbled across, ie. a mistake, but it was charming in its own way so we decided to leave it in as an option. | |
| stub? | number | (Optional) Optional number of pixels to travel from each endpoint before the connector's path commenced/after the path ends. | |
| supportLegacyConnectorData? | boolean | (Optional) Defaults to false. Use this flag if you are migrating from 2.x to 5.x and you have connector data stored in the 2.x format that you wish to load. |
StateMachine
Note This connector ships in the package @jsplumb/connector-bezier.
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.