connectors

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: 'point' Route segments meet at corner point with no special behavior. 'cubic' A cubic curve segment is inserted to smooth the corner. The curve radius of the smoothed corner is determined by cornerRadius argument. 'line' A straight line segment is inserted at the corner to form a bevel. The distance of the two endpoints of the bevel from the corner point is determined by cornerRadius argument. 'gap' A gap is created at the corner. The distance of the two endpoints of the gap from the corner point is determined by the cornerRadius argument.
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.