JSFiddle - React, Tailwind, and code Playground

by johnecon

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script src="http://d3js.org/d3.v2.js"></script>
<script src="http://fleetagentdev.blackhawktracking.com/Libs/GoJS/go.js"></script>
<button id="zoomIn">+</button>
<button id="zoomOut">-</button>
    <div id="sample">
        <div style="width:100%; white-space:nowrap;">
	    <span style="display: inline-block; vertical-align: top; padding: 5px; width:100px">
	    </span>

	    <span style="display: inline-block; vertical-align: top; padding: 5px; width:80%">
                        <div style="position: relative;">

	      <div id="myDiagram" style="border: solid 1px gray; height: 440px"></div>
          <div id="infoBoxHolder"></div>
            </div>
	    </span>
        </div>

CSS

.chart {
    font-family: Arial, sans-serif;
    font-size: 10px;
  }

  .axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
#infoBoxHolder {
    z-index: 300;
    position: absolute;
    left: 5px;
  }
#infoBox {
    border: 1px solid #999;
    padding: 8px;
    background-color: whitesmoke;
    opacity:0.9;
    position: relative;
    width: 200px;
    //height: 60px;
    font-family: arial, helvetica, sans-serif;
    font-weight: bold;
    font-size: 11px;
  }
  /* this is known as the "clearfix" hack to allow
     floated objects to add to the height of a div */
  #infoBox:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
  div.infoTitle {
    width: 100px;
    font-weight: normal;
    color:  #787878;
    float: left;
    margin-left: 4px;
  }
  div.infoValues {
    width: 60px;
    text-align: right;
    float: right;
  }
  label:hover, label:focus { background: #CEDFF2; }

JavaScript

$(document).ready(function()
{
    var MINLENGTH = 200;
    var MINBREADTH = 100;
    var lastStroked = null;

    function computeMinPlaceholderSize(diagram) {
        var len = MINLENGTH;
        diagram.nodes.each(function (group) {
            if (group.category == "SwimLane") {
                var holder = group.placeholder;
                if (holder !== null) {
                    var sz = holder.actualBounds;
                    len = Math.max(len, sz.height);
                }
            }
        });
        return new go.Size(NaN, len);
    }

    function computePlaceholderSize(group) {
        if (group instanceof go.Group) {
            var holder = group.placeholder;
            if (holder !== null) {
                return holder.actualBounds.size;
            }
        }
        return new go.Size(MINBREADTH, MINLENGTH);
    }

    function computeBoundarySize() {
        var width = 0;
        var height = 0;
        myDiagram.nodes.each(function (n) {
            if (n.category == "SwimLane") {
                width += n.actualBounds.width;
                height = Math.max(n.actualBounds.height, height);
            }
        });
        return width > 0 ? new go.Size(width + 200, height + 100) : new go.Size(MINBREADTH + 100, MINLENGTH + 200);
    }

    function StackLayout() {
        go.GridLayout.call(this);
    }

    go.Diagram.inherit(StackLayout, go.GridLayout);

    StackLayout.prototype.doLayout = function (coll) {
        var diagram = this.diagram;
        if (diagram === null) return;
        diagram.startTransaction("StackLayout");
        var minsize = computeMinPlaceholderSize(diagram);
        diagram.nodes.each(function (group) {
            if (!(group instanceof go.Group)) return;                
            var shape = group.findObject("SHAPE");
            if (shape !== null) {
                if (group.category == "Boundary") {
                    var sz = computeBoundarySize();
                    shape.width =...