GitHub Discussion #2251

https://github.com/clientIO/joint/discussions/2251

by Roman Bruckner

HTML

<html>

  <head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.6.3/joint.css" />
  </head>

  <body>
    <!-- content -->
    <div id="paper"></div>

    <!-- dependencies -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.6.3/joint.js"></script>

  </body>

</html>

JavaScript

var 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,
    snapLinks: true,
    linkPinning: false,
    magnetThreshold: 'onleave',
    defaultLink: () => new joint.shapes.standard.Link(),
    anchorNamespace: {
        ...joint.anchors,
        customAnchor,
    }
});


function customAnchor(view, magnet, ref, opt, endType, linkView) {
    const elBBox = view.model.getBBox();
    const magnetCenter = view.getNodeBBox(magnet).center();
    const side = elBBox.sideNearestToPoint(magnetCenter);
    let dx = 0;
    let dy = 0;
    const length = ('length' in opt) ? opt.length : 100;
    switch (side) {
        case 'left':
        dx = -length;
        break;
    case 'right':
        dx = length;
        break;
    case 'top':
        dy = -length;
        break;
    case 'bottom':
        dy = length;
        break;

    }
    return joint.anchors.center.call(this, view, magnet, ref, {
      ...opt,
      dx,
      dy
    }, endType, linkView);
}

// Example

var port_group = {};
port_group['top'] = {
    position: {
        name: 'line',
        args: {
            start: { x: 0, y: 0 },
            end: { x: ('calc(w)'), y: 0 }
        },
    },
    attrs: {
        portBody: {
            magnet: true,
            r: 2,
            fill: '#FFFFFF',
            stroke:'#023047',
        },
    },
    label: {
        position: {
            args: {
                x: 0,
                y: 0,
                angle: 0,
            }, // Can't use inside/outside in combination
            //name: 'inside'
        },
        markup: [{
            tagName: 'text',
            selector: 'label',
            className: 'label-text'
        }]
    },
    markup: [{
        tagName: 'circle',
       ...