JointJS: Show overlapped element borders

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: 800,
    height: 600,
    model: graph,
    cellViewNamespace: joint.shapes,
});

const el1 = new joint.shapes.standard.Rectangle({
    position: { x: 100, y: 100 },
    size: { width: 100, height: 150 },
    attrs: { body: { fill: 'blue' }, label: { text: 'Element 1' }}
});

const el2 = new joint.shapes.standard.Rectangle({
    position: { x: 400, y: 100 },
    size: { width: 100, height: 100 },
    attrs: { body: { fill: 'red' }, label: { text: 'Element 2' }}
});

const el3 = new joint.shapes.standard.Rectangle({
    position: { x: 200, y: 300 },
    size: { width: 200, height: 200 },
    attrs: { body: { fill: 'green' }, label: { text: 'Element 3' }}
});

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

paper.on('element:pointerdown', elementView => {
    const element = elementView.model;
    element.toFront();
});

paper.on('element:pointermove', elementView => {
    const element = elementView.model;
    joint.highlighters.stroke.removeAll(paper, 'border');
    graph.findModelsUnderElement(element).forEach(el => {
        joint.highlighters.stroke.add(el.findView(paper), 'body', 'border', {
            layer: joint.dia.Paper.Layers.FRONT,
            padding: 4,
            attrs: {
                stroke: 'white',
                strokeWidth: 2,
                strokeDasharray: '5 5'
            }
        });
    });
});