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.


paper.options.connectionStrategy = joint.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)