JSFiddle - React, Tailwind, and code Playground

by AlexLvovsky

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.7.5/go.js"></script>
<body>
<div id="myDiagramDiv" style="border: solid 1px black; width:600px; height:400px"></div>
<div class="zoom-container">
  <span>Zoom:</span>
  <!--<button id="decrease" type="button" (click)="decreaseDiagram()">-</button>-->
  <button type="button" id="decrease">-</button>
  <span id="scale"></span>
  <button  type="button" id="increase">+</button>
  
  <button  type="button" id="switch">Switch model</button>
 
</div>
<div id="myOverviewDiv" style="border: solid 1px black; width:200px; height:50px"></div>
</body>

SCSS

body {
  background-color: #3c3c3c;
  
  .zoom-container{
    span{
      color: white;
    }
  }
  
  #myOverviewDiv {
    border: 1px solid #aeaeb5 !important;
  }
}

JavaScript

var myDiagram;
var $ = go.GraphObject.make;
var scale = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4, 5];
var currentScale = 1;
var twoNodes = [{
   /*  "key": 1,
    "parent": 0, */
    /* "id": "127 ", */
    "id": "0x000000760x000001687aaf60f20x020000003b78c8244b94f535a3363aae0ce02c57e2a41a3000000000000000000000000000000000000000000x000001687ab049400x000001687ab04a6c",
	"parentID": "root",
    "time": "59.36",
    "name": "Vvvveeeeerrrrryyyyy looooooooooooooooooooooong name"
}, 
/* {
    "key": 2,
    "parent": 1,
    "id": "59 ",
    "time": "59.36",
    "name": "Vvvveeeeerrrrryyyyy looooooooooooooooooooooong name2"
} */];
var oneNode = [{
    "key": 1,
    "parent": 0,
    "id": "127 ",
    "time": "59.36",
    "name": "Name"
}];
document.getElementById("scale").innerHTML = '100%';

init();

document.getElementById("decrease").onclick = function(){
	  var currentIndexScale = scale.indexOf(currentScale);
    if (currentIndexScale === 0) {
      return;
    }
    currentScale = scale[currentIndexScale - 1];
    myDiagram.scale = currentScale;
    document.getElementById("scale").innerHTML = 'currentScale*100%';
}
document.getElementById("increase").onclick = function(){
	  var currentIndexScale = scale.indexOf(currentScale);
    if (currentIndexScale === scale.length - 1) {
      return;
    }
    currentScale = scale[currentIndexScale + 1];
    myDiagram.scale = currentScale;
    document.getElementById("scale").innerHTML = `{currentScale*100}%`;
}
document.getElementById("switch").onclick = function(){
    var dataArray;
    if(myDiagram.model.nodeDataArray.length === 2) {
    dataArray = oneNode;
    } else {
    dataArray = twoNodes;
    }
   myDiagram.model = $(go.TreeModel, {
          nodeKeyProperty: 'id',
          nodeParentKeyProperty: 'parentID',
          nodeDataArray: dataArray,
        });  
}

function scrollerFor(aDiagram) {
		var hs = aDiagram.documentBounds.width > aDiagram.viewportBounds.width;
    aDiagram.allowHorizontalScroll =...