JointJS #1665

https://github.com/clientIO/joint/issues/1665

by Roman Bruckner

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.5.4/joint.css" />
</head>
<body>
      <!-- content -->
      <div id="paper1"></div>         
      <div id="paper2"></div>

      <!-- dependencies -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.5.4/joint.js"></script>
    
    </body>
</html>

CSS

.joint-paper {
  display: inline-block;
  border: 1px solid gray;
}

#paper2 {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

JavaScript

joint.dia.Element.define('my.Element', {
      size: {
         width: 110,
         height: 110
      },
      attrs: {
        root: {
          magnetSelector: 'rect'
        },
        rect: {
          width: 'calc(w)',
          height: 'calc(h)',
          strokeWidth: 0,
          stroke: '#000000',
          fill: 'gray'
        },
        label: {
          textVerticalAnchor: 'middle',
          textAnchor: 'middle',
          textWrap: {
          	width: -10,
            height: -10
          },
          x: 'calc(.5*w)',
          y: 'calc(.5*h)',
          fontSize: '1rem',
          fill: '#333333'
        }
      }
    }, {
        markup: [
        {
          tagName: 'rect',
          selector: 'rect',
        },
        {
          tagName: 'text',
          selector: 'label'
        }
      ]
    });
//---------------------------------------------------------------------

const width = 2400;
const height = 1350;
const scale2 = 0.1;

const graph = new joint.dia.Graph();
const paperOptions = {
    width,
    height,
    model: graph,
    async: true,
    interactive: { linkMove: false },
    defaultRouter: {
        name: 'manhattan'
    },
    defaultConnector: { name: 'rounded' },
    gridSize: 10
};

const paper1 = new joint.dia.Paper({
    el: document.getElementById('paper1'),
    ...paperOptions
});

const paper2 = new joint.dia.Paper({
    el: document.getElementById('paper2'),
    ...paperOptions
});


paper2.scale(scale2);
paper2.setDimensions(width * scale2, height * scale2);

var el1 = new joint.shapes.my.Element();
el1.position(100, 100);
var brokenName1 = joint.util.breakText('Auto Deliver to END', { width: 110, height: 80 }, { 'font-size': '1rem' });
el1.attr('label/text', brokenName1);
el1.attr('label/title', 'Auto Deliver to END');

var el2 = new joint.shapes.my.Element();
el2.position(300, 300);
var brokenName2 = joint.util.breakText('Rules and pieces automatic treatment', { width: 110, height: 80 }, { 'font-size': '1rem'...