JointJS - Workflows

by Roman Bruckner

HTML

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

CSS

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

JavaScript

class Workflow extends joint.dia.Element {

    defaults() {
        return {
            ...super.defaults,
            type: 'Workspace',
            size: { width: 400, height: 200 },
            attrs: {
                body: {
                    width: 'calc(w)',
                    height: 'calc(h)',
                    fill: 'none',
                    stroke: '#444B57',
                    strokeWidth: 2,
                    strokeDasharray: '5 5',
                },
                labelBackground: {
                    fill: '#142238',
                    d: 'M 0 0 L 200 0 200 -10 A 10 10 1 0 0 190 -20 L 10 -20 A 10 10 0 0 0 0 -10 Z',
                },
                label: {
                    text: 'Workflow',
                    textWrap: { width: 180, maxLineCount: 1, ellipsis: true },
                    fontSize: 14,
                    fontFamily: 'sans-serif',
                    fill: '#FFFFFF',
                    textVerticalAnchor: 'middle',
                    textAnchor: 'middle',
                    x: 100,
                    y: -10,
                },
            }
        };
    }

    preinitialize() {
        this.markup = [{
            tagName: 'rect',
            selector: 'body'
        }, {
            tagName: 'path',
            selector: 'labelBackground'
        }, {
            tagName: 'text',
            selector: 'label'
        }];
    }
}

class Step extends joint.dia.Element {

    defaults() {
        return {
            ...super.defaults,
            type: 'Step',
            size: { width: 80, height: 60 },
            attrs: {
                body: {
                    fill: '#ffffff',
                    stroke: 'none',
                    width: 'calc(w)',
                    height: 'calc(h)',
                },
                label: {
                    text: 'Step',
                    textWrap: { width: -10, height: -10, ellipsis: true },
                    fontSize: 14,
                   ...