JointJS - Ports as Buttons

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 Banner extends joint.dia.Element {

    defaults() {
        return {
            ...super.defaults,
            type: 'Banner',
            size: { width: 80, height: 100 },
            attrs: {
                body: {
                    fill: '#ffffff',
                    stroke: '#333333',
                    strokeWidth: 2,
                    d: 'M 0 0 H calc(w) V calc(h-20) L calc(0.5 * w) calc(h) 0 calc(h-20) Z',
                },
                label: {
                    text: 'Banner',
                    textWrap: { width: -10, height: -20, ellipsis: true },
                    fontSize: 14,
                    fontFamily: 'sans-serif',
                    fill: '#333333',
                    textVerticalAnchor: 'middle',
                    textAnchor: 'middle',
                    x: 'calc(0.5*w)',
                    y: 'calc(0.5*h-10)',
                },
            }
        };
    }

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

function topPortLayout(portsArgs, elBBox, opt) {
    const step = 40;
    return portsArgs.map(function(portArgs, index) {
        return { x: (index + 0.5) * step, y: 0 };
    });
}

function bottomPortLayout(portsArgs, elBBox, opt) {
    const step = 40;
    return portsArgs.map(function(portArgs, index) {
        return { x: (index + 0.5) * step, y: elBBox.height };
    });
}


class Step extends joint.dia.Element {

    defaults() {
        return {
            ...super.defaults,
            type: 'Step',
            attrs: {
                body: {
                    fill: '#ffffff',
                    stroke: '#333333',
                    strokeWidth: 2,
                    width: 'calc(w)',
                    height: 'calc(h)',
                },
                label: {
                    text: 'Step',
                    textWrap: { width: -10,...