JointJS: Resize element and make space

by Roman Bruckner

HTML

<html>

  <head>
  </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 { dia, shapes } = joint;


const cellNamespace = {
    ...shapes,
};
const graph = new dia.Graph({}, { cellNamespace });
const paper = new dia.Paper({
    el: document.getElementById('paper'),
    width: 800,
    height: 600,
    model: graph,
    cellViewNamespace: cellNamespace,
    overflow: true,


});

const json = {
    'cells': [
        {
            'type': 'standard.Rectangle',
            'position': {
                'x': 350,
                'y': 30
            },
            'size': {
                'width': 90,
                'height': 54
            },
            'angle': 0,
            'id': '08e75da6-3cc8-4b0e-8875-66b367e0f306',
            'z': 1,
            'attrs': {
                'body': {
                    'stroke': '#31d0c6',
                    'fill': 'transparent',
                    'rx': 2,
                    'ry': 2,
                    'strokeDasharray': '0'
                },
                'label': {
                    'fill': '#c6c7e2',
                    'text': 'a',
                },
                'root': {
                    'dataTooltipPosition': 'left',
                    'dataTooltipPositionSelector': '.joint-stencil'
                }
            }
        },
        {
            'type': 'standard.Rectangle',
            'position': {
                'x': 340,
                'y': 160
            },
            'size': {
                'width': 90,
                'height': 54
            },
            'angle': 0,
            'id': 'ea4c9fbe-dc3d-45d3-9965-39dee17fa5d1',
            'z': 2,
            'attrs': {
                'body': {
                    'stroke': '#31d0c6',
                    'fill': 'transparent',
                    'rx': 2,
                    'ry': 2,
                    'strokeDasharray': '0'
                },
                'label': {
                    'fill': '#c6c7e2',
                    'text': 'b',
                },
                'root': {
               ...