JointJS - Github discussion #2543

https://github.com/clientIO/joint/discussions/2543

by Roman Bruckner

HTML

<script src="https://cdn.jsdelivr.net/npm/@joint/[email protected]/dist/joint.min.js"></script>
 <div id="paper"></div>

CSS

body {
  background: #cad8e3;
}

JavaScript

const namespace = {
  ...joint.shapes,
};

const graph = new joint.dia.Graph({}, {
  cellNamespace: namespace
});

const paper = new joint.dia.Paper({
  el: document.getElementById('paper'),
  overflow: true,
  model: graph,
  async: true,
  sorting: joint.dia.Paper.sorting.APPROX,
  cellViewNamespace: namespace,
  background: {
    color: 'transparent'
  }
});

graph.fromJSON({
  cells: [{
      "type": "standard.Path",
      "position": {
        "x": 10,
        "y": 10
      },
      "size": {
        "width": 120,
        "height": 60
      },
      "angle": 0,
      "fill": "white",
      "ports": {
        "groups": {
          "left": {
            "attrs": {
              "portBody": {
                "magnet": true,
                "stroke": "black",
                "fill": "white",
                "strokeWidth": 2,
                "opacity": 0
              }
            },
            "position": {
              "name": "left"
            },
            "markup": [{
              "tagName": "rect",
              "selector": "portBody",
              "attributes": {
                "width": 10,
                "height": 10,
                "x": -5,
                "y": -5
              }
            }]
          },
          "right": {
            "attrs": {
              "portBody": {
                "magnet": true,
                "stroke": "black",
                "fill": "white",
                "strokeWidth": 2,
                "opacity": 0
              }
            },
            "position": {
              "name": "right"
            },
            "markup": [{
              "tagName": "rect",
              "selector": "portBody",
              "attributes": {
                "width": 10,
                "height": 10,
                "x": -5,
                "y": -5
              }
            }]
          },
          "bottom": {
            "attrs": {
              "portBody": {
                "magnet": true,
                "stroke":...