Skip to main content

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:

Bezier​

Provides a cubic Bezier path between the two endpoints.

This connector type 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.

Bezier connector with default curviness of 150
Bezier connector with curviness of 50

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.
Straight connector with default values
Straight connector with 25px stub

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

NameTypeDescription
alwaysRespectStubs?booleanDefaults to true, meaning always draw a stub of the desired length, even when the source and target elements are very close together.
cornerRadius?numberOptional curvature of the corners in the connector. Defaults to 0.
cssClass?stringOptional class to set on the element used to render the connector.
gap?numberDefines a number of pixels between the end of the connector and its anchor point. Defaults to zero.
hoverClass?stringOptional class to set on the element used to render the connector when the mouse is hovering over the connector.
loopbackRadius?numberFor a loopback connection, the size of the loop.
midpoint?numberThe point to use as the halfway point between the source and target. Defaults to 0.5.
recalcStrategy?OrthogonalRecalcStrategyThe strategy to use when recalculating the path of an orthogonal connector in response to a drag.
slightlyWonky?booleanIf 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?numberStub defines a number of pixels that the connector travels away from its element before the connector's actual path begins.
supportLegacyConnectorData?booleanDefaults 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.
vertexAvoidance?booleanWhether or not to avoid vertices during path edits and, when using legacy recalc mode, when dragging vertices connected to an edited path. Defaults to true.

This connector supports connections that start and end on the same element ("loopback" connections).

Orthogonal connector with default values
Orthogonal connector with 5px cornerRadius
Orthogonal connector with loopback

At some point during the development of the Orthogonal connector we had a slight error in the maths which resulted in a path whose segments were not strictly either horizontal or vertical. Although the output was not what we were aiming for, and we fixed the issue, we felt it had a certain hand-drawn charm so we put it on a flag: slightlyWonky. Here's what it looks like:

Slightly wonky Orthogonal connector

Note that you need to also have cornerRadius set in order for this to take effect.

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 with smooth:true - you should use one or the other.
Segmented connector with default values

By default, the segmented connector mimics the behaviour of the Straight connector.

You can set a stub on the connector:

connector: { 
    type:"Segmented", 
    options:{
      stub:25
    }
}
Segmented connector with 25px stub

You can supply a geometry object for the edge that the connector represents (or use the segmented connector editor to have JsPlumb 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 }
        ]
    }
 }
]
Segmented connector with multiple segments

Smoothing​

You can also specify that you want to smooth the connector via the smooth option:

 connector: { 
     type:"Segmented", 
     options:{
        smooth:true
     }
 }
Segmented connector with multiple segments and smoothing
note

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
     }
 }
Segmented connector with small stub and smoothing

Rounded corners​

An alternative to smoothing is rounded corners, introduced in 6.14.0:

 connector: { 
     type:"Segmented", 
     options:{
        cornerRadius:15
     }
 }
Segmented connector with rounded corners

Editing segmented paths​

The Segmented connector supports interactive path editing by the user. For information about this, see the path editing page.

StateMachine​

Draws slightly curved lines, 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 CubicBezier 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.
QuadraticBezier connector with default values
QuadraticBezier connector with loopback