connectionStrategies

Connection strategies allows you to specify which anchor and connectionPoint properties should be assigned to end elements in response to user interaction (e.g. in response to dragging a link arrowhead onto a new element). You can find more information in the correspondent learn section.

In addition to built-in connection strategies JointJS allows to create custom connection strategies.

Built-in connection strategies

pinAbsolute()

The pinAbsolute connection strategy records the coordinates of user pointer and assigns the end anchor absolutely, by reference to the top-left corner of the view bbox of the element above which the endpoint was dropped. Absolute positioning ensures that if the element is subsequently resized, the anchor stays at the same absolute distance from the edges (e.g. staying 10 pixels away from the left side and 20 pixels away from the top side).

The end connection point is assigned according to defaultConnectionPoint paper option.

Example:

paper.options.connectionStrategy = connectionStrategies.pinAbsolute;

The end (source or target) that is being modified gets the 'topLeft' anchor assigned by this connection strategy:

end.anchor = {
    name: 'topLeft',
    args: {
    	rotate: true
        dx: (coords.x - bbox.x),
        dy: (coords.y - bbox.y)
    }
};

pinRelative()

The pinRelative connection strategy records the coordinates of user pointer and assigns the end anchor relatively, by reference to the top-left corner of the view bbox of the element above which the endpoint was dropped. Relative positioning ensures that if the element is subsequently resized, the anchor stays at the same relative distance from the edges (e.g. staying 25% of the way from the left side and 75% of the way from the top side).

The end connection point is assigned according to defaultConnectionPoint paper option.

Example:

paper.options.connectionStrategy = connectionStrategies.pinRelative;

The end (source or target) that is being modified gets the 'topLeft' anchor assigned by this connection strategy:

end.anchor = {
    name: 'topLeft',
    args: {
    	rotate: true
        dx: percentageString(coords.x - bbox.x),
        dy: percentageString(coords.y - bbox.y)
    }
};

useDefaults()

The useDefaults connection strategy is the simplest connection strategy. It ignores the coordinates of user pointer and assigns the end anchor according to the defaultAnchor paper option and the end connection point according to the defaultConnectionPoint paper option.

Thus, this connection strategy is equivalent to a connection strategy of null.

Example:

paper.options.connectionStrategy = connectionStrategies.useDefaults;