JSFiddle - React, Tailwind, and code Playground

by hello_help

HTML

<script src="http://sigmajs.org/assets/js/sigma.min.js"></script>
<div id="main">
    
    <div class="sigma-container">
        <div id="container"></div>
    </div>
    
    <div class="control-panel">
        <div class="move-up">
            <button type="button">&#8593;</button>
        </div>
        <div class="move-down">
            <button type="button">&#8595;</button>
        </div>
        <div class="move-left">
            <button type="button">&#8592;</button>
        </div>
        <div class="move-right">
            <button type="button">&#8594;</button>
        </div>
</div>

CSS

body {
    margin: 0;
}
#container {
    position: relative;
    height: 500px;
}

/* Control panel: */
.control-panel {
  color: #666;
  border-top: 1px #ccc dashed;
  background: #fff;
  position: relative;
  height: 84px;
}
.move-up {
  position: absolute;
  width: 72px;
  height: 72px;
  top: 0;
  right: 60px;
  margin: 5px;
}
.move-down {
  position: absolute;
  width: 72px;
  height: 72px;
  top: 20px;
  right: 60px;
  margin: 5px;
}
.move-left {
  position: absolute;
  width: 72px;
  height: 72px;
  top: 10px;
  right: 90px;
  margin: 5px;
}
.move-right {
  position: absolute;
  width: 72px;
  height: 72px;
  top: 10px;
  right: 35px;
  margin: 5px;
}

JavaScript

// Let's first initialize sigma:
var s = new sigma('container');

// Then, let's add some data to display:
s.graph.addNode({
    // Main attributes:
    id: 'n0',
    label: 'Hello',
    // Display attributes:
    x: 0,
    y: 0,
    size: 1,
    color: '#f00'
}).addNode({
    // Main attributes:
    id: 'n1',
    label: 'World !',
    // Display attributes:
    x: 1,
    y: 1,
    size: 1,
    color: '#00f'
}).addEdge({
    id: 'e0',
    // Reference extremities:
    source: 'n0',
    target: 'n1'
});
var c = s.camera; 

// move right example 

$(document).ready(function(){ 
    $(".move-right").bind("click",function(){ 
     c.goTo({ 
     x:c.x - 50, y:c.y 
     });  
    }); 
}); 

// zoom in example 

$(document).ready(function(){ 
    $(".zoom-in").bind("click",function(){ 
     c.goTo({ 
      ratio: c.ratio/c.settings('zoomingRatio') 
     }); 
    }); 
}); 

// Finally, let's ask our sigma instance to refresh:
s.refresh();

/* Button responds as expected

$(document).ready(function(){
  $("button").bind("click",function(){
    alert("The button was clicked.");
  });
});
*/


/* Try moving the sigma instance: it doesn't work 

$(document).ready(function(){
  $("button").bind("click",function(e){
  
      // With "inst" our sigma instance:
      var newPos = s.position();

      newPos.stageY += 80;
      s.goTo(newPos.stageX, newPos.stageY);

      e.stopPropagation();
      return false;
 
  });
});
*/