jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git

<!doctype html><html><head>  <title>Network | Cursor Change</title>
  <script type="text/javascript" src="../../../dist/vis.js"></script>  <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
  <style type="text/css">    #mynetwork {      width: 600px;      height: 400px;      border: 1px solid lightgray;    }  </style></head><body>
<p>Here is a simple network with nodes and edges that demonstrates how to change the cursor on hover for nodes and edges.</p><p>Use the dropdowns and button below to change the cursor type bound to an event.</p><div>Event Type -<select id="eventType">	<option value="hoverNode">hoverNode</option>	<option value="blurNode">blurNode</option>	<option value="hoverEdge">hoverEdge</option>	<option value="blurEdge">blurEdge</option>	<option value="dragStart">dragStart</option>	<option value="dragging">dragging</option>	<option value="dragEnd">dragEnd</option></select>&nbsp;Cursor Type -<select id="cursorType">	<option value="auto">auto</option>	<option value="default">default</option>	<option value="context-menu">context-menu</option>	<option value="help">help</option>	<option value="pointer">pointer</option>	<option value="progress">progress</option>	<option value="wait">wait</option>	<option value="cell">cell</option>	<option value="crosshair">crosshair</option>	<option value="text">text</option>	<option value="vertical-text">vertical-text</option>	<option value="alias">alias</option>	<option value="copy">copy</option>	<option value="move">move</option>	<option value="no-drop">no-drop</option>	<option value="not-allowed">not-allowed</option>	<option value="all-scroll">all-scroll</option>	<option value="col-resize">col-resize</option>	<option value="row-resize">row-resize</option>	<option value="n-resize">n-resize</option>	<option value="e-resize">e-resize</option>	<option value="w-resize">w-resize</option>	<option value="s-resize">s-resize</option>	<option value="ne-resize">ne-resize</option>	<option value="nw-resize">nw-resize</option>	<option value="se-resize">se-resize</option>	<option value="sw-resize">sw-resize</option>	<option value="ew-resize">ew-resize</option>	<option value="ns-resize">ns-resize</option>	<option value="nesw-resize">nesw-resize</option>	<option value="nwse-resize">nwse-resize</option>	<option value="zoom-in">zoom-in</option>	<option value="zoom-out">zoom-out</option>	<option value="grab">grab</option>	<option value="grabbing">grabbing</option></select>&nbsp;
<button onClick="changeEventCursor(document.getElementById('eventType').value,document.getElementById('cursorType').value);">Change Cursor for Event</button></div><div id="mynetwork"></div>
<script type="text/javascript">  // create an array with nodes  var nodes = new vis.DataSet([    {id: 1, label: 'Node 1'},    {id: 2, label: 'Node 2'},    {id: 3, label: 'Node 3'},    {id: 4, label: 'Node 4'},    {id: 5, label: 'Node 5'}  ]);
  // create an array with edges  var edges = new vis.DataSet([    {from: 1, to: 3},    {from: 1, to: 2},    {from: 2, to: 4},    {from: 2, to: 5}  ]);
  // create a network  var container = document.getElementById('mynetwork');  var data = {    nodes: nodes,    edges: edges  };  var options = {interaction:{hover:true}};  var network = new vis.Network(container, data, options);
  //Get the canvas HTML element  var networkCanvas = document.getElementById("mynetwork").getElementsByTagName("canvas")[0]  function changeCursor(newCursorStyle){	networkCanvas.style.cursor = newCursorStyle;  }  function changeEventCursor(eventName,cursorType){     network.on(eventName, function() {      changeCursor(cursorType);    });  }  network.on('hoverNode', function () {	changeCursor('grab');  });  network.on('blurNode', function () {	changeCursor('default');  });  network.on('hoverEdge', function () {	changeCursor('grab');  });  network.on('blurEdge', function () {	changeCursor('default');  });  network.on('dragStart', function () {	changeCursor('grabbing');  });  network.on('dragging', function () {	changeCursor('grabbing');  });  network.on('dragEnd', function () {	changeCursor('grab');  });
</script>
</body></html>