jointjs/docs/src/joint/api/connectionPoints/rectangle.html

JavaScript diagramming library

<p>The <code>'rectangle'</code> 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 <code>connectionPoint.args</code> property:</p>

<table>
    <tr>
        <th>offset</th>
        <td><i>number | object</i></td>
        <td>An object with <code>x</code> and <code>y</code> properties. The connection point will be moved:
            <ul>
                <li>
                    from the anchor point by <code>x</code> pixels in the direction of the corresponding link end's path segment.
                </li>
                <li>
                    by <code>y</code> pixels in the direction of the corresponding link end's path segment, rotated by 90 degrees anti-clockwise around the anchor point.
                </li>
            </ul>
            If a number is provided, it will be used as the <code>x</code> offset.
        </td>
    </tr>
    <tr>
        <th>stroke</th>
        <td><i>boolean</i></td>
        <td>Should the stroke width be included when calculating the connection point? Default is <code>false</code>.</td>
    </tr>
</table>

<p>Example:</p>

<pre><code>link.source(model, {
    connectionPoint: {
        name: 'rectangle',
        args: {
            offset: 10,
            stroke: true
        }
    }
});</code></pre>