JointJS Table Shape

A table-like shape. Arbitrary table cells as ports/magnets.

HTML

<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.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;
}

[magnet="true"] {
  fill: lightblue;
}

.highlighted {
  fill: yellow;
  outline: none;
}

JavaScript

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
  el: $('#paper'),
  width: 600,
  height: 600,
  gridSize: 20,
  model: graph,
  linkPinning: false,
  defaultLink: new joint.dia.Link({
    z: 2
  }),
  validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
    var connectedView = end === 'target' ? cellViewT : cellViewS;
    if (connectedView instanceof joint.dia.LinkView) return false;
    if (cellViewT === cellViewS || magnetS === magnetT) return false;
    return true;
  }
});

joint.shapes.basic.Table = joint.shapes.basic.Generic.extend({

  markup: [
    '<g class="rotatable"><g class="scalable"><rect class="body"/></g>',
    '<g class="ports">',
    '<circle class="circ"/>',
    '<rect class="port11" port="11"/><rect class="port12" port="12"/><rect class="port13" port="13"/>',
    '<rect class="port21" port="21"/><rect class="port22" port="22"/><rect class="port23" port="23"/>',
    '<rect class="port31" port="31"/><rect class="port32" port="32"/><rect class="port33" port="33"/>',
    '</g>',
    '</g>'
  ].join(''),


  defaults: joint.util.deepSupplement({

    type: 'basic.Table',
    z: 2,
    attrs: {
      '.body': {
        width: 100,
        height: 100,
        stroke: 'blue',
        fill: 'lightblue'
      },
      '.ports > rect': {
        'ref-width': '33%',
        'ref-height': '33%',
        stroke: 'lightgray'
      },
      '.circ': {
        'cx':50,
        'cy':50,
        'r':50,
      },
      '.port11': {
        'ref-x': 0,
        'ref-y': 0,
        magnet: 'passive'
      },
      '.port12': {
        'ref-x': 0.33,
        'ref-y': 0,
        magnet: 'passive'

      },
      '.port13': {
        'ref-x': 0.66,
        'ref-y': 0,
        magnet: 'passive'
      },
      '.port21': {
        'ref-x': 0,
        'ref-y': 0.33,
        magnet: 'passive'

      },
      '.port22': {
        'ref-x': 0.33,
        'ref-y': 0.33,
        magnet: 'passive'

      },
      '.port23':...