Relative position on links

Several special attributes on links allow you to position subelements relatively to the link's connection path:

• connection - if set to true, the subelement will follow the link connection path. Applicable only to <path> subelements.
• atConnectionLength - sets the absolute distance from the beginning of the path at which the anchor of the subelement should be placed. Negative distances are counted from the end of the connection path. Rotates subelement according to link gradient at requested length.
• atConnectionRatio - sets the relative distance from the beginning of the path at which the anchor of the subelement should be placed. Accepts numbers between 0 and 1. Rotates subelement according to link gradient at requested ratio.

Usage

These attributes are ideal for adding symbols and arrowheads on the connection path and have them rotate according to path slope. Let us illustrate with a custom link type:

import { dia, util } from '@joint/core';

const CustomLink = dia.Link.define('examples.CustomLink', {
    attrs: {
        line: {
            connection: true,
            fill: 'none',
            stroke: 'orange',
            strokeWidth: 2,
            sourceMarker: {
                'type': 'circle',
                'r': 4,
                'fill': 'white',
                'stroke': 'orange',
                'stroke-width': '2'
            },
            targetMarker: {
                'type': 'circle',
                'r': 4,
                'fill': 'white',
                'stroke': 'orange',
                'stroke-width': '2'
            }
        },
        arrowhead: {
            d: 'M -20 -10 0 0 -20 10 Z',
            fill: 'orange',
            stroke: 'none'
        },
        symbol: {
            d: 'M -20 -20 20 20',
            stroke: 'black',
            targetMarker: {
                'type': 'path',
                'd': 'M 0 0 10 -5 10 5 Z',
                'fill': 'black',
                'stroke': 'none'
            }
        }
    }
}, {
    markup: util.svg`
        <path @selector="line">
        <path @selector="arrowhead">
        <path @selector="symbol">
    `
});

const link = new CustomLink();
link.attr({
    symbol: {
        atConnectionRatio: 0.25
    },
    arrowhead: {
        atConnectionRatio: 0.75,
    }
});

Open Sandbox