Link embedded in container

If links are not embedded in the container, the vertices are not translated when the container is moved.

by Roman Bruckner

HTML

<html>

  <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 shapes = {
    ...joint.shapes,
    app: { Link: joint.shapes.standard.Link.define('app.Link') }
}

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

// Insert a text directly into the Paper

graph.fromJSON({
    "cells": [
      {
          "type": "standard.TextBlock",
          "position": {
              "x": 40,
              "y": 160
          },
          "size": {
              "width": 330,
              "height": 300
          },
          "angle": 0,
          "id": "1531961",
          "ProductionItemId": "1531961",
          "ElemId": "1531961",
          "Level": 0,
          "embeds": [
            "3490026",
            "3490029",
            "3490028",
            "3490027"
          ],
          "z": 1,
          "originalSize": {
              "width": 410,
              "height": 240
          },
          "originalPosition": {
              "x": 40,
              "y": 160
          },
          "attrs": {
              "body": {
                  "stroke": "#31d0c6",
                  "fill": "#E2F1FB",
                  "strokeWidth": "0.5",
                  "rx": "5",
                  "ry": 10
              },
              "label": {
                  "style": {
                      "alignItems": "baseline",
                      "color": "#31d0c6",
                      "font-size": "14px",
                      "font-weight": "bold"
                  },
                  "text": "Front Impact Airbag System",
                  "stroke-width": 2
              },
              "rect": {
                  "stroke-width": 0.15,
                  "fill": "#E2F1FB"
              }
          }
      },
      {
          "type": "standard.TextBlock",
          "position": {
              "x": 162.5,
              "y": 185
          },
          "size": {
 ...