jointjs/docs/src/joint/api/connectionStrategies/intro.html

JavaScript diagramming library

<p>Connection strategies come into play when the user modifies the position of link endpoints. There are two situations in which this is relevant:</p>

<ul>
	<li>When the user drags a link endpoint and connects it to an element or its port. The connection strategy determines the end anchor after the user is finished dragging the link endpoint. (Note that any individual <code>anchor</code> property that might have been assigned on the dragged link endpoint will be overridden by the connection strategy. If necessary, have a look at the <a href="#connectionStrategies.custom">custom connectionStrategy documentation</a> for information on replicating the functionality of <a href="#anchors">anchor</a> functions.)</li>
	<li>When a user creates a link, for example by clicking a port. The connection strategy determines the new link's source anchor.</li>
</ul>

<p>Both the <code>anchor</code> and <code>connectionPoint</code> properties are rewritten in response to user interaction. None of the built-in connection strategies preserve the originally assigned anchor and connection point functions. To assign precisely what you need as the anchor and connection point functions, you may need to define your own <a href="#connectionStrategies.custom">custom connection strategy</a>.</p>

<p>Connection strategies are not assigned on a link-by-link basis. They are set with the <code>connectionStrategy</code> <a href="#dia.Paper.prototype.options.connectionStrategy">option on a paper</a>.</p>

<p>There are three built-in connection strategies in JointJS:</p>

<ul>
    <li><code>useDefaults</code> - <a href="#connectionStrategies.useDefaults">default strategy; ignore user pointer and use default anchor and connectionPoint functions</a></li>
    <li><code>pinAbsolute</code> - <a href="#connectionStrategies.pinAbsolute">use user pointer coordinates to position anchor absolutely within end element; use default connectionPoint</a></li>
    <li><code>pinRelative</code> - <a href="#connectionStrategies.pinRelative">use user pointer coordinates to position anchor relatively within end element; use default connectionPoint</a></li>
</ul>

<p>The default connection strategy is specified as <code>null</code> in <a href="#dia.Paper.prototype.options.connectionStrategy">paper settings</a>, which is equivalent to <code>joint.connectionStrategies.useDefaults</code>.</p>

</p>Built-in connection strategies are specified by reference to their their name in the <code>joint.connectionStrategies</code> namespace. Example:</p>

<pre><code>paper.options.connectionStrategy = joint.connectionStrategies.pinAbsolute;</code></pre>