JointJS - Link Target Priority

by Roman Bruckner

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.6.2/joint.css" />
</head>
<body>
      <!-- content -->
      <div id="paper"></div>

      <!-- dependencies -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.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.2/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,
    linkPinning: false,
    defaultLink: () => new joint.shapes.standard.DoubleLink(),
    defaultRouter: {
        name: 'manhattan',
    },
    defaultAnchor: {
        name: 'perpendicular'
    },
    defaultConnectionPoint: {
        name: 'boundary'
    },
    connectionStrategy: function(end, elementView, magnet, coords, link, endType, paper) {
        if (endType === 'source') return end;
        const absEnd = joint.connectionStrategies.pinAbsolute(end, elementView, magnet, coords, link, endType, paper);
        // Optional: ignore the `x` coordinate when the user connects the target
        absEnd.anchor.args.dx = elementView.model.size().width / 2;
        // This will make sure that the anchor of target is calculated first
        // so the source anchor can align with target (using perpendicular anchor)
        absEnd.priority = true;
        return absEnd;
    }

});

// Example

var el1 = new joint.shapes.standard.Rectangle({
    position: {
        x: 10,
        y: 150
    },
    size: {
        width: 80,
        height: 200
    },
    attrs: {
        label: {
            text: 'A'
        }
    }
});
var el2 = new joint.shapes.standard.Rectangle({
    position: {
        x: 400,
        y: 150
    },
    size: {
        width: 80,
        height: 200
    },
    attrs: {
        label: {
            text: 'B'
        }
    }
});


graph.resetCells([el1, el2]);

paper.unfreeze();

const toolsView = new joint.dia.ToolsView({
    tools: [
        new joint.elementTools.Connect({
            x: 'calc(w+10)',
            y: 'calc(h / 2)'
        })
    ]
});
el1.findView(paper).addTools(toolsView);