Example Shapes

by Roman Bruckner

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.4.1/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.4.1/joint.js"></script>
    
    </body>
</html>

JavaScript

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

class Shape extends joint.dia.Element {

  defaults() {
    return {
      ...super.defaults,
      type: 'Shape',
      size: {
        width: 100,
        height: 50
      },
      attrs: {
        body: {
          strokeWidth: 2,
          stroke: '#333333',
          fill: '#EEEEEE',
          d: 'M 0 0 h calc(w) v calc(h-10) C calc(0.6*w) calc(h-10) calc(0.3*w) calc(h+5) 0 calc(h-5) z'
        },
        label: {
          text: 'Input',
          textVerticalAnchor: 'middle',
          textAnchor: 'middle',
          y: 'calc(0.5*h - 5)',
          x: 'calc(0.5*w)',
          fontSize: 14,
          fill: '#333333'
        }
      }
    }
  }

  markup = [{
    tagName: 'path',
    selector: 'body'
  }, {
    tagName: 'text',
    selector: 'label'
  }];
}

const shape = new Shape();
shape.position(10, 10).addTo(graph);


class Shape2 extends joint.dia.Element {

  defaults() {
    return {
      ...super.defaults,
      type: 'Shape2',
      size: {
        width: 120,
        height: 50
      },
      attrs: {
        body: {
          strokeWidth: 2,
          stroke: '#333333',
          fill: '#EEEEEE',
          x: 0,
          y: 0,
          width: 'calc(w)',
          height: 'calc(h)'
        },
        label: {
          text: 'Linked Process',
          textVerticalAnchor: 'middle',
          textAnchor: 'middle',
          textWrap: {
            width: -20
          },
          transform: 'translate(calc(0.5*w),calc(0.5*h))',
          fontSize: 14,
          fill: '#333333'
        },
        lines: {
          stroke: '#333333',
          strokeWidth: 2,
          targetMarker: {
            'type': 'path',
            'd': 'M 6 -3 0 0 6 3 z'
          }
        },
        line1: {
          d: 'M 10 0 v calc(h)',
       ...