JointJS - ES6 Class Shapes

by Roman Bruckner

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.6.2/joint.css" />
</head>
<body>
      <!-- content -->
      <div id="paper"></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.6.2/joint.js"></script>
    
    </body>
</html>

CSS

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

JavaScript

class MyShape1 extends joint.dia.Element {

  defaults() {
    return {
      ...super.defaults,
      type: 'MyShape1',
      size: {
        width: 100,
        height: 80
      },
      attrs: {
        body: {
          width: 'calc(w)',
          height: 'calc(h)',
          fill: '#ffffff',
          stroke: '#333333',
          strokeWidth: 2
        },
        line: {
          d: 'M 0 calc(0.5*h) H calc(w)',
          stroke: '#333333',
          strokeWidth: 2
        },
        labels: {
          fontSize: 14,
          fontFamily: 'sans-serif',
          fill: '#333333',
          textVerticalAnchor: 'middle',
          textAnchor: 'middle',
          x: 'calc(0.5*w)',
        },
        label1: {
          text: 'Label 1',
          y: 'calc(0.25*h)',
        },
        label2: {
          text: 'Label 2',
          y: 'calc(0.75*h)',
        }
      }
    };
  }

  preinitialize() {
    this.markup = [{
      tagName: 'rect',
      selector: 'body'
    }, {
      tagName: 'path',
      selector: 'line',
    }, {
      tagName: 'text',
      selector: 'label1',
      groupSelector: 'labels'
    }, {
      tagName: 'text',
      selector: 'label2',
      groupSelector: 'labels'
    }];
  }
}

class MyShape2 extends joint.dia.Element {

  defaults() {
    return {
      ...super.defaults,
      type: 'MyShape2',
      size: {
        width: 120,
        height: 40
      },
      attrs: {
        body: {
          fill: '#ffffff',
          stroke: '#333333',
          strokeWidth: 2,
          d: 'M 0 calc(0.5*h) calc(0.5*h) 0 H calc(w) V calc(h) H calc(0.5*h) Z',
        },
        label: {
          text: 'Label',
          fontSize: 14,
          fontFamily: 'sans-serif',
          fill: '#333333',
          textVerticalAnchor: 'middle',
          textAnchor: 'middle',
          x: 'calc(0.5*w)',
          y: 'calc(0.5*h)',
        },
      }
    };
  }

  preinitialize() {
    this.markup = [{
      tagName: 'path',
      selector: 'body'
    },...