Connectors take an array of link route points and generate SVG path commands so that the link can be rendered. You can learn more about connectors in the learn section.
JointJS also contains mechanisms to define one's own custom connectors.
Built-in connectors
jumpover()
The 'jumpover' connector draws straight lines with small arcs in place of link-link intersections. (For the time being, it cannot detect intersections with 'smooth' router links). It accepts the following additional arguments, which can be passed as the connector.args property:
| size | number | The size of the jump (the diameter of the arc, or the length of the empty spot on the line). Defaults to 5. |
|---|---|---|
| jump | string | The style of the jump. Either 'arc' (using an Arcto SVG path command), 'cubic' (using a Curveto path command as a normalized approximation to Arcto), or 'gap' (leaving a blank space). Defaults to 'arc'. |
| radius | number | The curve radius of the rounded corners. Default is 0. |
Example:
link.connector('jumpover', {
type: 'gap'
});
normal()
Deprecated. Use the 'straight' connector instead.
Example:
link.connector('straight');
The 'normal' connector is the default connector for links and it is the simplest connector. It simply connects provided route points with straight-line segments.
Example:
// deprecated
link.connector('normal');
rounded()
Deprecated. Use the 'straight' connector with cornerType: 'cubic' instead. (To exactly replicate the 'rounded' connector functionality, you should also pass precision: 0.)
Example:
link.connector('straight', {
cornerType: 'cubic',
precision: 0,
cornerRadius: 20
});
The 'rounded' connector connects provided route points with straight lines while smoothing all corners on the route. It accepts one additional argument, which can be passed within the connector.args property:
| radius | number | The curve radius of the rounded corners. Default is 10. |
|---|
Example:
// deprecated
link.connector('rounded', {
radius: 20
});
smooth()
The 'smooth' connector interpolates route points using a cubic bezier curve.
Example:
link.connector('smooth');
straight()
The 'straight' connector connects provided route points with straight lines while handling corners on the route in different ways depending on provided arguments (point, rounded, bevelled, gap). It accepts four additional arguments, which can be passed within the connector.args property:
| cornerType | string | (Optional) How should corners on the route be handled? The default is 'point'. The available values are the following:
| ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| cornerRadius | number | (Optional) The distance of endpoints of line segments around corner points (e.g. curve radius for 'cubic' corner type). Default is 10. This argument is ignored for cornerType: 'point'. | ||||||||
| cornerPreserveAspectRatio | boolean | (Optional) Should distance of both endpoints be adjusted if one of them needs to be placed closer to a corner point than specified by the cornerRadius argument; or are the two allowed to be independent? (This situation happens when the distance between two consecutive route points is lower than cornerRadius * 2.) Default is false. This argument is ignored for cornerType: 'point' | ||||||||
| precision | number | (Optional) To how many decimal places should the returned point coordinates be rounded? Default is 1. This argument is ignored for cornerType: 'point'. |
Example of a bevelled connector:
link.connector('straight', {
cornerType: 'line',
cornerPreserveAspectRatio: true
});
Example of a rounded connector:
link.connector('straight', {
cornerType: 'cubic',
cornerRadius: 20
});
Example of a connector with gaps at corners:
link.connector('straight', {
cornerType: 'gap',
cornerRadius: 2
});
Example of a connector with simple angled lines connecting route points:
link.connector('straight');
curve()
The 'curve' connector interpolates route points using a catmull-rom curve converted into cubic bezier curve. Tangents at endings of a curve can be defined using several options.
Available options:
| direction | curve.Directions | The overall direction of the curve. The default is curve.Directions.AUTO. |
|---|---|---|
| sourceDirection | curve.TangentDirections|object|number | The unit vector direction of the tangent at the source point. If the option is an object it must have x and y properties. If the option is a number, it represents an angle relative to the x-axis in the positive direction (counterclockwise). |
| targetDirection | curve.TangentDirections|object|number | The unit vector direction of the tangent at the target point. If the option is an object it must have x and y properties. If the option is a number, it represents an angle relative to the x-axis in the positive direction (counterclockwise). |
| sourceTangent | object | Vector of the tangent to the curve at the source point. Has priority over the sourceDirection and direction. Object must have x and y properties. |
| targetTangent | object | Vector of the tangent to the curve at the target point. Has priority over the targetDirection and direction. Object must have x and y properties. |
| distanceCoefficient | number | Coefficient of the tangent vector length relative to the distance between points. The default is 0.6. |
| rotate | boolean | Whether the rotation of the source or target element should be taken into account. Only works for AUTO, HORIZONTAL and VERTICAL directions. The default is false. |
The example of how to make the source point tangent always horizontal and target point tangent always go upwards:
link.connector('curve', {
direction: curve.Directions.HORIZONTAL,
targetDirection: curve.TangentDirections.UP
});
Options
Directions
Available values for the direction option.
| curve.Directions.AUTO | Determines the tangent direction depending on the side of the element where the end point is located. |
|---|---|
| curve.Directions.HORIZONTAL | Limits tangents to horizontal directions (left and right) only. |
| curve.Directions.VERTICAL | Limits tangents to vertical directions (up and down) only. |
| curve.Directions.CLOSEST_POINT | Defines the direction tangent as a vector in the direction of the closest point. |
| curve.Directions.OUTWARDS | Defines the direction tangent as a vector in from the center of the element to the end point. |
TangentDirections
Available values for sourceDirection and targetDirection options.
| curve.TangentDirections.AUTO | Determines the tangent direction depending on the side of the element where the end point is located. |
|---|---|
| curve.TangentDirections.UP | Sets the direction of the tangent upwards. |
| curve.TangentDirections.DOWN | Sets the direction of the tangent downwards. |
| curve.TangentDirections.LEFT | Sets the direction of the tangent to the left. |
| curve.TangentDirections.RIGHT | Sets the direction of the tangent to the right. |
| curve.TangentDirections.CLOSEST_POINT | Defines the direction tangent as a vector in the direction of the closest point. |
| curve.TangentDirections.OUTWARDS | Defines the direction tangent as a vector from the center of the element to the corresponding end point. |
