connectionPoints

A link connection point is an endpoint of the link route. This point is (usually) different from the link anchor point, as it takes into account the presence of the end element. Connection points are set via an connectionPoint property provided within link end definitions. You can find more information in our learn section.

JointJS also contains mechanisms to define one's own custom connection point functions.

Built-in connection points

anchor()

The 'anchor' places the connection point so that it coincides with the link end's anchor point (determined either by the anchor function or by the defaultAnchor paper option). The position of the connection point may be modified by several additional arguments, which may be passed within the connectionPoint.args property:

offset	number | object	An object with x and y properties. The connection point will be moved: from the anchor point by x pixels in the direction of the corresponding link end's path segment. by y pixels in the direction of the corresponding link end's path segment, rotated by 90 degrees anti-clockwise around the anchor point. If a number is provided, it will be used as the x offset.
align	'top' | 'left' | 'bottom' | 'right'	Offset the connection point to the point given by projecting the first vertex onto the vector which points from the anchor point in the direction specified. (If there are no vertices, use the projection of the other anchor point instead.) Notably, if the reference point is not the direction-most point of the two, the connection point is set to be the same as the anchor point. Let us illustrate that outcome and the other possible outcome on the 'top' direction: The reference point lies below the anchor point. The anchor point is the topmost point of the two, so the connection point receives both the x and y coordinates from the anchor point. The connection point is set to be coincident with the anchor point. The reference point lies above the anchor point. In this case, the reference point is the topmost point of the two, so the connection point receives the y coordinate from the reference point. The connection point still receives the x coordinate from the anchor point. This means that the connection point is offset from the anchor point in the 'top' direction. The three points create a right-angled triangle, with the right angle at the connection point.
alignOffset	number	After having determined the position of the connection point according to the align algorithm (see above), additionally offset the connection point by the specified amount in the direction specified by align.

Example:

link.source(model, {
    connectionPoint: {
        name: 'anchor',
        args: {
            offset: 10
        }
    }
});

bbox()

The 'bbox' connection point function is the default connection point function. It places the connection point at the intersection between the link path end segment and the end element bbox. The position of the connection point may be modified by several additional arguments, which may be passed within the connectionPoint.args property:

useModelGeometry	boolean	Should the connection point calculation use the model geometry of the reference element, instead of measuring its view (how the element is rendered on the paper)? The default is false. (Note that measuring the rendered view is slower so setting true may provide a performance improvement.)
offset	number | object	An object with x and y properties. The connection point will be moved: from the anchor point by x pixels in the direction of the corresponding link end's path segment. by y pixels in the direction of the corresponding link end's path segment, rotated by 90 degrees anti-clockwise around the anchor point. If a number is provided, it will be used as the x offset.
stroke	boolean	Should the stroke width be included when calculating the connection point? Default is false.

Example:

link.source(model, {
    connectionPoint: {
        name: 'bbox',
        args: {
            useModelGeometry: true,
            offset: 10,
            stroke: true
        }
    }
});

boundary()

The 'boundary' connection point function places the connection point at the intersection between the link path end segment and the actual shape of the end element. (If JointJS is unable to determine the actual shape - e.g. for text - the element bbox is used instead, just as in the 'bbox' connection point function.) The position of the connection point may be modified by several additional arguments, which may be passed within the connectionPoint.args property:

offset	number | object	An object with x and y properties. The connection point will be moved: from the anchor point by x pixels in the direction of the corresponding link end's path segment. by y pixels in the direction of the corresponding link end's path segment, rotated by 90 degrees anti-clockwise around the anchor point. If a number is provided, it will be used as the x offset.
insideout	boolean	What happens if the link path never leaves the interior area of the end element (e.g. because the other end anchor lies within the first end element)? Should the path line be extended until an intersection with the boundary is found? Default is true.
extrapolate	boolean	What happens if the link path never enters the interior area of the end element (e.g. because the anchor lies outside the end element)? Should the path line be extended to try and find the boundary? Default is false. Note that even if this option is true, an intersection is still not guaranteed. This option takes precedence over connectionPoint.args.sticky.
sticky	boolean	What happens if the link path never enters the interior area of the end element (e.g. because the anchor lies outside the end element)? Should the closest point on the end element boundary be used instead? Default is false. Note that setting this option to true guarantees that a connection point will be found on the shape boundary.
precision	number	The precision of the path intersection algorithm. Uses a logarithmic scale; increasing the number by 1 reduces the maximum observed error by a factor of ten. Default is 2, corresponding to 1% error.
selector	string	A selector to identify subelement/magnet of the end element at whose boundary we want the connection point to be found. Default is undefined, meaning that the first non-group descendant of the end element's node will be considered. (An example of another setting that may be useful is 'root', which forces the usage of the root group bbox instead.). If set to false, the magnet is used as is, even if it is an SVGGroup (it's the most suitable for use in conjunction with magnetSelector).
stroke	boolean	Should the stroke width be included when calculating the connection point? Default is false.

Example:

link.source(model, {
    connectionPoint: {
        name: 'boundary',
        args: {
            offset: 10,
            insideout: false,
            extrapolate: true,
            sticky: true,
            precision: 3,
            stroke: true
        }
    }
});

rectangle()

The 'rectangle' connection point function places the connection point at the intersection between the link path end segment and the element's unrotated bbox. The position of the connection point may be modified by several additional arguments, which may be passed within the connectionPoint.args property:

useModelGeometry	boolean	Should the connection point calculation use the model geometry of the reference element, instead of measuring its view (how the element is rendered on the paper)? The default is false. (Note that measuring the rendered view is slower so setting true may provide a performance improvement.)
offset	number | object	An object with x and y properties. The connection point will be moved: from the anchor point by x pixels in the direction of the corresponding link end's path segment. by y pixels in the direction of the corresponding link end's path segment, rotated by 90 degrees anti-clockwise around the anchor point. If a number is provided, it will be used as the x offset.
stroke	boolean	Should the stroke width be included when calculating the connection point? Default is false.

Example:

link.source(model, {
    connectionPoint: {
        name: 'rectangle',
        args: {
            useModelGeometry: true,
            offset: 10,
            stroke: true
        }
    }
});