JointJS: Anchor - Horizontal Preference

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: 1000,
    height: 1000,
    model: graph,
    cellViewNamespace: joint.shapes,
    async: true,
    interactive: function(view) {
        return view.model.get('type') === 'standard.Path';
    },
    defaultConnectionPoint: {
        name: 'anchor'
    },
    defaultRouter: {
        name: 'rightAngle'
    },
    anchorNamespace: {
        ...joint.anchors,
        // An equivalent of the 'midSide' anchor from the joint/packages/joint-core/src/anchors/index.mjs
        midSide: function(view, magnet, ref, opt, endType) {
            let refPoint;
            if (ref instanceof Element) {
                refPoint = view.getNodeBBox(ref).center();
            } else {
                refPoint = ref;
            }
            let shortestLength = Number.MAX_VALUE;
            let shortestPoint;
            let currentLength;
            const topMiddle = view.model.getBBox().topMiddle();
            currentLength = refPoint.squaredDistance(topMiddle);
            if (currentLength < shortestLength) {
                shortestLength = currentLength;
                shortestPoint = topMiddle;
            }
            const bottomMiddle = view.model.getBBox().bottomMiddle();
            currentLength = refPoint.squaredDistance(bottomMiddle);
            if (currentLength < shortestLength) {
                shortestLength = currentLength;
                shortestPoint = bottomMiddle;
            }
            const leftMiddle = view.model.getBBox().leftMiddle();
            currentLength = refPoint.squaredDistance(leftMiddle);
            if (currentLength < shortestLength) {
                shortestLength = currentLength;
                shortestPoint = leftMiddle;
            }
            const rightMiddle = view.model.getBBox().rightMiddle();
            currentLength =...