JointJS: Resize element and make space

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,
    overflow: true,
    cellViewNamespace: joint.shapes,
});

const el1 = new joint.shapes.standard.TextBlock({
    position: { x: 50, y: 50 },
    size: { width: 150, height: 150 },
    attrs: {
        label: {
            fontFamily: 'sans-serif',
            html: `
                <ul style="list-style: none; padding: 0;">
                    <li><b style="color:red;">Key1:</b>Hello, World!</li>
                    <li><b style="color:red;">Key2:</b>Hello, World!</li>
                    <li><b style="color:red;">Key3:</b>Hello, World!</li>
                </ul>
            `
        }
    }
});

const el2 = el1.clone().resize(100, 150).translate(200, 0);

graph.addCells(el1, el2);