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 (i.e. the objects provided to link.source() and link.target() functions).

The built-in functions work by finding an intersection between the link path (the path from the link's source anchor, through its vertices, to its target anchor). However, the functions always only have access to a single path segment; the source connectionPoint is found by investigating the first segment (i.e. source anchor - first vertex, or source anchor - target anchor if there are no vertices), while the target connectionPoint is found by investigating the last segment (i.e. last vertex - target anchor, or source anchor - target anchor). This has consequences if the investigated path segment is entirely contained within the end element.

There are four built-in connection point functions in JointJS:

Example:

link.source(model, {
    connectionPoint: {
        name: 'boundary',
        args: {
            sticky: true
        }
    }
});

The default connection point is 'bbox'; this can be changed with the defaultConnectionPoint paper option. Example:

paper.options.defaultConnectionPoint = {
    name: 'boundary',
    args: {
        sticky: true
    }
};

All four of the built-in connection point functions accept the following optional argument, in addition to their own arguments:

offset number Offset the connection point from the anchor by the specified distance along the end link path segment. Default is 0.

Example:

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

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