JSFiddle - React, Tailwind, and code Playground

by ramesh valasa

HTML

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

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 refs = [['ref-x', 'ref-dx'] , ['ref-y', 'ref-dx'], ['ref-x', 'ref-dy'] , ['ref-y', 'ref-dy']];

       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 } };

		var...