RubyGems - visjs-rails - Versions diffs - 4.16.1.0 → 4.21.0.0 - Mend

visjs-rails 4.16.1.0 → 4.21.0.0

Files changed (388) hide show

data/examples_for_vis/network/other/cursorChange.html ADDED

@@ -0,0 +1,140 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Cursor Change</title>
+  <script type="text/javascript" src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/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>

data/examples_for_vis/network/other/manipulation.html ADDED

@@ -0,0 +1,193 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>Network | Manipulation</title>
+  <style type="text/css">
+    body, select {
+      font: 10pt sans;
+    }
+    #mynetwork {
+      position:relative;
+      width: 800px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+    table.legend_table {
+      font-size: 11px;
+      border-width:1px;
+      border-color:#d3d3d3;
+      border-style:solid;
+    }
+    table.legend_table,td {
+      border-width:1px;
+      border-color:#d3d3d3;
+      border-style:solid;
+      padding: 2px;
+    }
+    div.table_content {
+      width:80px;
+      text-align:center;
+    }
+    div.table_description {
+      width:100px;
+    }
+    #operation {
+      font-size:28px;
+    }
+    #network-popUp {
+      display:none;
+      position:absolute;
+      top:350px;
+      left:170px;
+      z-index:299;
+      width:250px;
+      height:120px;
+      background-color: #f9f9f9;
+      border-style:solid;
+      border-width:3px;
+      border-color: #5394ed;
+      padding:10px;
+      text-align: center;
+    }
+  </style>
+  <script type="text/javascript" src="../exampleUtil.js"></script>
+  <script type="text/javascript" src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-network.min.css" rel="stylesheet" type="text/css" />
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var network = null;
+    // randomly create some nodes and edges
+    var data = getScaleFreeNetwork(25);
+    var seed = 2;
+    function setDefaultLocale() {
+      var defaultLocal = navigator.language;
+      var select = document.getElementById('locale');
+      select.selectedIndex = 0; // set fallback value
+      for (var i = 0, j = select.options.length; i < j; ++i) {
+        if (select.options[i].getAttribute('value') === defaultLocal) {
+          select.selectedIndex = i;
+          break;
+        }
+      }
+    }
+    function destroy() {
+      if (network !== null) {
+        network.destroy();
+        network = null;
+      }
+    }
+    function draw() {
+      destroy();
+      nodes = [];
+      edges = [];
+      // create a network
+      var container = document.getElementById('mynetwork');
+      var options = {
+        layout: {randomSeed:seed}, // just to make sure the layout is the same when the locale is changed
+        locale: document.getElementById('locale').value,
+        manipulation: {
+          addNode: function (data, callback) {
+            // filling in the popup DOM elements
+            document.getElementById('operation').innerHTML = "Add Node";
+            document.getElementById('node-id').value = data.id;
+            document.getElementById('node-label').value = data.label;
+            document.getElementById('saveButton').onclick = saveData.bind(this, data, callback);
+            document.getElementById('cancelButton').onclick = clearPopUp.bind();
+            document.getElementById('network-popUp').style.display = 'block';
+          },
+          editNode: function (data, callback) {
+            // filling in the popup DOM elements
+            document.getElementById('operation').innerHTML = "Edit Node";
+            document.getElementById('node-id').value = data.id;
+            document.getElementById('node-label').value = data.label;
+            document.getElementById('saveButton').onclick = saveData.bind(this, data, callback);
+            document.getElementById('cancelButton').onclick = cancelEdit.bind(this,callback);
+            document.getElementById('network-popUp').style.display = 'block';
+          },
+          addEdge: function (data, callback) {
+            if (data.from == data.to) {
+              var r = confirm("Do you want to connect the node to itself?");
+              if (r == true) {
+                callback(data);
+              }
+            }
+            else {
+              callback(data);
+            }
+          }
+        }
+      };
+      network = new vis.Network(container, data, options);
+    }
+    function clearPopUp() {
+      document.getElementById('saveButton').onclick = null;
+      document.getElementById('cancelButton').onclick = null;
+      document.getElementById('network-popUp').style.display = 'none';
+    }
+    function cancelEdit(callback) {
+      clearPopUp();
+      callback(null);
+    }
+    function saveData(data,callback) {
+      data.id = document.getElementById('node-id').value;
+      data.label = document.getElementById('node-label').value;
+      clearPopUp();
+      callback(data);
+    }
+    function init() {
+      setDefaultLocale();
+      draw();
+    }
+  </script>
+</head>
+<body onload="init();">
+<h2>Editing the nodes and edges (localized)</h2>
+<p style="width: 700px; font-size:14px; text-align: justify;">
+  The localization is only relevant to the manipulation buttons.
+</p>
+<p>
+  <label for="locale">Select a locale:</label>
+  <select id="locale" onchange="draw();">
+    <option value="en">en</option>
+    <option value="de">de</option>
+    <option value="es">es</option>
+    <option value="it">it</option>
+    <option value="nl">nl</option>
+    <option value="pt-br">pt</option>
+    <option value="ru">ru</option>
+  </select>
+</p>
+<div id="network-popUp">
+  <span id="operation">node</span> <br>
+  <table style="margin:auto;"><tr>
+    <td>id</td><td><input id="node-id" value="new value" /></td>
+  </tr>
+    <tr>
+      <td>label</td><td><input id="node-label" value="new value" /></td>
+    </tr></table>
+  <input type="button" value="save" id="saveButton" />
+  <input type="button" value="cancel" id="cancelButton" />
+</div>
+<br />
+<div id="mynetwork"></div>
+</body>
+</html>

data/examples_for_vis/network/other/manipulationEditEdgeNoDrag.html ADDED

@@ -0,0 +1,255 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>Network | Manipulation | Edit Edge Without Drag</title>
+  <style type="text/css">
+    body, select {
+      font: 10pt sans;
+    }
+    #mynetwork {
+      position:relative;
+      width: 800px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+    table.legend_table {
+      font-size: 11px;
+      border-width:1px;
+      border-color:#d3d3d3;
+      border-style:solid;
+    }
+    table.legend_table,td {
+      border-width:1px;
+      border-color:#d3d3d3;
+      border-style:solid;
+      padding: 2px;
+    }
+    div.table_content {
+      width:80px;
+      text-align:center;
+    }
+    div.table_description {
+      width:100px;
+    }
+    #operation {
+      font-size:28px;
+    }
+    #node-popUp {
+      display:none;
+      position:absolute;
+      top:350px;
+      left:170px;
+      z-index:299;
+      width:250px;
+      height:120px;
+      background-color: #f9f9f9;
+      border-style:solid;
+      border-width:3px;
+      border-color: #5394ed;
+      padding:10px;
+      text-align: center;
+    }
+    #edge-popUp {
+      display:none;
+      position:absolute;
+      top:350px;
+      left:170px;
+      z-index:299;
+      width:250px;
+      height:90px;
+      background-color: #f9f9f9;
+      border-style:solid;
+      border-width:3px;
+      border-color: #5394ed;
+      padding:10px;
+      text-align: center;
+    }
+  </style>
+  <script type="text/javascript" src="../exampleUtil.js"></script>
+  <script type="text/javascript" src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-network.min.css" rel="stylesheet" type="text/css" />
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var network = null;
+    // randomly create some nodes and edges
+    var data = getScaleFreeNetwork(25);
+    var seed = 2;
+    function setDefaultLocale() {
+      var defaultLocal = navigator.language;
+      var select = document.getElementById('locale');
+      select.selectedIndex = 0; // set fallback value
+      for (var i = 0, j = select.options.length; i < j; ++i) {
+        if (select.options[i].getAttribute('value') === defaultLocal) {
+          select.selectedIndex = i;
+          break;
+        }
+      }
+    }
+    function destroy() {
+      if (network !== null) {
+        network.destroy();
+        network = null;
+      }
+    }
+    function draw() {
+      destroy();
+      nodes = [];
+      edges = [];
+      // create a network
+      var container = document.getElementById('mynetwork');
+      var options = {
+        layout: {randomSeed:seed}, // just to make sure the layout is the same when the locale is changed
+        locale: document.getElementById('locale').value,
+        manipulation: {
+          addNode: function (data, callback) {
+            // filling in the popup DOM elements
+            document.getElementById('node-operation').innerHTML = "Add Node";
+            editNode(data, clearNodePopUp, callback);
+          },
+          editNode: function (data, callback) {
+            // filling in the popup DOM elements
+            document.getElementById('node-operation').innerHTML = "Edit Node";
+            editNode(data, cancelNodeEdit, callback);
+          },
+          addEdge: function (data, callback) {
+            if (data.from == data.to) {
+              var r = confirm("Do you want to connect the node to itself?");
+              if (r != true) {
+                callback(null);
+                return;
+              }
+            }
+            document.getElementById('edge-operation').innerHTML = "Add Edge";
+            editEdgeWithoutDrag(data, callback);
+          },
+          editEdge: {
+            editWithoutDrag: function(data, callback) {
+              document.getElementById('edge-operation').innerHTML = "Edit Edge";
+              editEdgeWithoutDrag(data,callback);
+            }
+          }
+        }
+      };
+      network = new vis.Network(container, data, options);
+    }
+    function editNode(data, cancelAction, callback) {
+      document.getElementById('node-label').value = data.label;
+      document.getElementById('node-saveButton').onclick = saveNodeData.bind(this, data, callback);
+      document.getElementById('node-cancelButton').onclick = cancelAction.bind(this, callback);
+      document.getElementById('node-popUp').style.display = 'block';
+    }
+    // Callback passed as parameter is ignored
+    function clearNodePopUp() {
+      document.getElementById('node-saveButton').onclick = null;
+      document.getElementById('node-cancelButton').onclick = null;
+      document.getElementById('node-popUp').style.display = 'none';
+    }
+    function cancelNodeEdit(callback) {
+      clearNodePopUp();
+      callback(null);
+    }
+    function saveNodeData(data, callback) {
+      data.label = document.getElementById('node-label').value;
+      clearNodePopUp();
+      callback(data);
+    }
+    function editEdgeWithoutDrag(data, callback) {
+      // filling in the popup DOM elements
+      document.getElementById('edge-label').value = data.label;
+      document.getElementById('edge-saveButton').onclick = saveEdgeData.bind(this, data, callback);
+      document.getElementById('edge-cancelButton').onclick = cancelEdgeEdit.bind(this,callback);
+      document.getElementById('edge-popUp').style.display = 'block';
+    }
+    function clearEdgePopUp() {
+      document.getElementById('edge-saveButton').onclick = null;
+      document.getElementById('edge-cancelButton').onclick = null;
+      document.getElementById('edge-popUp').style.display = 'none';
+    }
+    function cancelEdgeEdit(callback) {
+      clearEdgePopUp();
+      callback(null);
+    }
+    function saveEdgeData(data, callback) {
+      if (typeof data.to === 'object')
+        data.to = data.to.id
+      if (typeof data.from === 'object')
+        data.from = data.from.id
+      data.label = document.getElementById('edge-label').value;
+      clearEdgePopUp();
+      callback(data);
+    }
+    function init() {
+      setDefaultLocale();
+      draw();
+    }
+  </script>
+</head>
+<body onload="init();">
+<h2>Editing the nodes and edges-without-drag (localized)</h2>
+<p style="width: 700px; font-size:14px; text-align: justify;">
+  The localization is only relevant to the manipulation buttons.
+</p>
+<p>
+  <label for="locale">Select a locale:</label>
+  <select id="locale" onchange="draw();">
+    <option value="en">en</option>
+    <option value="de">de</option>
+    <option value="es">es</option>
+    <option value="it">it</option>
+    <option value="nl">nl</option>
+    <option value="pt-br">pt</option>
+    <option value="ru">ru</option>
+  </select>
+</p>
+<div id="node-popUp">
+  <span id="node-operation">node</span> <br>
+  <table style="margin:auto;">
+    <tr>
+      <td>id</td><td><input id="node-id" value="new value" /></td>
+    </tr>
+    <tr>
+      <td>label</td><td><input id="node-label" value="new value" /></td>
+    </tr>
+  </table>
+  <input type="button" value="save" id="node-saveButton" />
+  <input type="button" value="cancel" id="node-cancelButton" />
+</div>
+<div id="edge-popUp">
+  <span id="edge-operation">edge</span> <br>
+  <table style="margin:auto;">
+    <tr>
+      <td>label</td><td><input id="edge-label" value="new value" /></td>
+    </tr></table>
+  <input type="button" value="save" id="edge-saveButton" />
+  <input type="button" value="cancel" id="edge-cancelButton" />
+</div>
+<br />
+<div id="mynetwork"></div>
+</body>
+</html>