JointJS - devs.TopBottomModel

an element with ports located at the top and bottom.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.1/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.7/joint.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.7/joint.css">
<!-- JointJS Fiddle -->
<div id="paper"></div>

CSS

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

JavaScript

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
    el: $('#paper'),
    width: 600,
    height: 600,
    gridSize: 20,
    model: graph
});

joint.shapes.devs.TopBottomModel = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {

   markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
   portMarkup: '<g class="port port<%= id %>"><circle class="port-body"/><text class="port-label"/></g>',

   defaults: joint.util.deepSupplement({

       type: 'devs.TopBottomModel',
       size: { width: 1, height: 1 },

       inPorts: [],
       outPorts: [],

       attrs: {
            '.': { magnet: false },
           '.body': {
               width: 150, height: 250,
               stroke: 'black'
           },
           '.port-body': {
               r: 10,
               magnet: true,
               stroke: 'black'
           },
           text: {
               fill: 'black',
               'pointer-events': 'none'
           },
           '.label': { text: 'Top\nBottom\nModel', 'ref-x': 10, 'ref-y': .2, 'ref': '.body' },

           // CHANGED: find better positions for port labels 
           '.inPorts .port-label': { y:-15, x: 4 },
           '.outPorts .port-label':{ y: 25, x: 4 }
           //
       }

   }, joint.shapes.basic.Generic.prototype.defaults),

   getPortAttrs: function(portName, index, total, selector, type) {

       var attrs = {};

       var portClass = 'port' + index;
       var portSelector = selector + '>.' + portClass;
       var portLabelSelector = portSelector + '>.port-label';
       var portBodySelector = portSelector + '>.port-body';

       attrs[portLabelSelector] = { text: portName };
       attrs[portBodySelector] = { port: { id: portName || _.uniqueId(type) , type: type } };

       // CHANGED: swap x and y ports coordinates ('ref-y' => 'ref-x')
       attrs[portSelector] = { ref: '.body',...