JointJS: Anchor - Side Nearest To Point

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.Ellipse';
    }
});

const backLayer = paper.getLayerNode('back');
V('line', { x1: 0, y1: 0, x2: 1000, y2: 1000, stroke: 'red' }).appendTo(backLayer);
V('line', { x1: 1000, y1: 0, x2: 0, y2: 1000, stroke: 'red' }).appendTo(backLayer);

var el1 = new joint.shapes.standard.Ellipse({
    position: {
        x: 10,
        y: 270
    },
    z: 2,
    size: {
        width: 40,
        height: 40
    },
    attrs: {
        body: {
            fillOpacity: 0.5
        },
        label: {
            text: '•'
        }
    }
});
var el2 = new joint.shapes.standard.Rectangle({
    position: {
        x: 500 - 50,
        y: 500 - 50
    },
    z: 1,
    size: {
        width: 100,
        height: 100
    }
});

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

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

paper.scale(0.6);