JointJS: Custom link tool position

by Roman Bruckner

HTML

<html>

  <head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
  </head>

  <body>
    <!-- content -->
    <div id="paper" style="margin: 20px;"></div>

    <!-- dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/@joint/[email protected]/dist/joint.min.js"></script>
  </body>

</html>

JavaScript

const graph = new joint.dia.Graph({}, {
    cellNamespace: joint.shapes
});

const paper = new joint.dia.Paper({
    el: document.getElementById('paper'),
    width: 800,
    height: 900,
    model: graph,
    cellViewNamespace: joint.shapes,
    gridSize: 10,
    async: true,
    sorting: joint.dia.Paper.sorting.APPROX,
    defaultRouter: {
        name: 'rightAngle',
        args: {
            sourceDirection: 'right',
            targetDirection: 'left',
        }
    }
});

// Example

const el1 = new joint.shapes.standard.Rectangle({
    position: {
        x: 10,
        y: 270
    },
    size: {
        width: 100,
        height: 90
    },
    attrs: {
        label: {
            text: 'A'
        }
    }
});
const el2 = new joint.shapes.standard.Rectangle({
    position: {
        x: 400,
        y: 170
    },
    size: {
        width: 100,
        height: 90
    },
    attrs: {
        label: {
            text: 'B'
        }
    }
});

const l1 = new joint.shapes.standard.Link({
    source: {
        id: el1.id
    },
    target: {
        id: el2.id
    },
    attrs: {
        line: {
            strokeWidth: 3
        }
    }
});

graph.addCells([el1, el2, l1]);


const MyButton = joint.linkTools.Button.extend({
    children: joint.util.svg`
        <g @selector="handle" cursor="grab">
            <rect x="-15" y="-15" width="30" height="30" stroke="black" fill="lightblue" stroke-width="2" />
        </g>
    `,
    getLinkMatrix() {
        const { relatedView: view, options } = this;
        let { offset = 0, distance = 0, rotate, scale } = options;
        if (typeof distance === 'function') distance = distance(view);
        let tangent, position, angle;
        if (joint.util.isPercentage(distance)) {
            tangent = view.getTangentAtRatio(parseFloat(distance) / 100);
        } else {
            tangent = view.getTangentAtLength(distance);
        }
        if (tangent) {
            position = tangent.start;
            angle =...