Custom Router For Elements With Ports

Does not take `vertices` into account .

by Roman Bruckner

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.4.4/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.4.4/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,
    defaultConnectionPoint: {
        name: 'boundary'
    },
    cellViewNamespace: joint.shapes,
    gridSize: 10,
    async: true,
    sorting: joint.dia.Paper.sorting.APPROX,
    defaultRouter: function(vertices, opt, linkView) {
        const sv = linkView.getEndView('source');
        const tv = linkView.getEndView('target');
        const sourceBBox = sv.model.getBBox();
        const targetBBox = tv.model.getBBox();
        const sa = linkView.getEndAnchor('source');
        const ta = linkView.getEndAnchor('target');
        const minGap = 40;
        let p1, p3;
        if (sourceBBox.x + sourceBBox.width < targetBBox.x) {
            // Source is Left
            if (sourceBBox.y < targetBBox.y + targetBBox.height) {
                p1 = {
                    x: sa.x + minGap + sourceBBox.height + sourceBBox.y - sa.y,
                    y: sa.y
                };
            } else {
                return [{
                    x: ta.x,
                    y: sa.y
                }];

            }
            // Target is Bottom
            p3 = {
                x: ta.x,
                y: ta.y + minGap - targetBBox.x + ta.x
            };
        } else {
            // Source is Left
            if (sa.y - minGap < ta.y) {
                p1 = {
                    x: sa.x + minGap + sourceBBox.height + sourceBBox.y - sa.y,
                    y: sa.y
                };
            } else {
                p1 = {
                    x: sa.x + minGap - sourceBBox.y + sa.y,
                    y: sa.y
                };
            }
            // Target is Bottom
            p3 = {
                x: ta.x,
                y: ta.y + minGap + targetBBox.width + (targetBBox.x - ta.x)
            };
        }
        // Based on Source and Target
   ...