From ccd34ed949f97760528db2132286c47a8aeb86db Mon Sep 17 00:00:00 2001
From: sbosse <sbosse@uni-bremen.de>
Date: Mon, 21 Jul 2025 22:57:32 +0200
Subject: [PATCH] Mon 21 Jul 22:43:21 CEST 2025

---
 .../examples/network/other/navigation.html    | 135 ++++++++++++++++++
 1 file changed, 135 insertions(+)
 create mode 100644 js/dos/ext/vis/examples/network/other/navigation.html
diff --git a/js/dos/ext/vis/examples/network/other/navigation.html b/js/dos/ext/vis/examples/network/other/navigation.html
new file mode 100644
index 0000000..3d7eda2
--- /dev/null
+++ b/js/dos/ext/vis/examples/network/other/navigation.html
@@ -0,0 +1,135 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Navigation</title>
+
+  <style type="text/css">
+    body {
+      font: 10pt sans;
+    }
+    #mynetwork {
+      width: 600px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+    table.legend_table {
+      border-collapse: collapse;
+    }
+    table.legend_table td,
+    table.legend_table th {
+      border: 1px solid #d3d3d3;
+      padding: 10px;
+    }
+
+    table.legend_table td {
+      text-align: center;
+      width:110px;
+    }
+  </style>
+
+  <script type="text/javascript" src="../exampleUtil.js"></script>
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var network = null;
+
+    function destroy() {
+      if (network !== null) {
+        network.destroy();
+        network = null;
+      }
+    }
+
+    function draw() {
+      destroy();
+
+      // create an array with nodes
+      var nodes = [
+        {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: {
+          navigationButtons: true,
+          keyboard: true
+        }
+      };
+      network = new vis.Network(container, data, options);
+
+      // add event listeners
+      network.on('select', function(params) {
+        document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
+      });
+    }
+  </script>
+  <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body onload="draw();">
+<h2>Navigation controls and keyboad navigation</h2>
+<div style="width: 800px; font-size:14px; text-align: justify;">
+  This example is the same as example 2, except for the navigation controls that have been activated. The navigation controls are described below. <br /><br />
+  <table class="legend_table">
+    <tr>
+      <th>Icons: </th>
+      <td><img src="../../../dist/img/network/upArrow.png" />     </td>
+      <td><img src="../../../dist/img/network/downArrow.png" />   </td>
+      <td><img src="../../../dist/img/network/leftArrow.png" />   </td>
+      <td><img src="../../../dist/img/network/rightArrow.png" />  </td>
+      <td><img src="../../../dist/img/network/plus.png" />        </td>
+      <td><img src="../../../dist/img/network/minus.png" />       </td>
+      <td><img src="../../../dist/img/network/zoomExtends.png" /> </td>
+    </tr>
+    <tr>
+      <th>Keyboard shortcuts:</th>
+      <td><div>Up arrow</div></td>
+      <td><div>Down arrow</div></td>
+      <td><div>Left arrow</div></td>
+      <td><div>Right arrow</div></td>
+      <td><div>=<br />[<br />Page up</div></td>
+      <td><div>-<br />]<br />Page down</div></td>
+      <td><div>None</div></td>
+    </tr>
+    <tr>
+      <th>Description:</th>
+      <td>Move up</td>
+      <td>Move down</td>
+      <td>Move left</td>
+      <td>Move right</td>
+      <td>Zoom in</td>
+      <td>Zoom out</td>
+      <td>Zoom extent</td>
+    </tr>
+  </table>
+  <br />
+  Apart from clicking the icons, you can also navigate using the keyboard. The buttons are in table above.
+  Zoom Extends changes the zoom and position of the camera to encompass all visible nodes. <u>To correctly display the navigation icons, the <b>vis.css</b> file must be included.</u>
+    The user is free to alter or overload the CSS classes but without them the navigation icons are not visible.
+</div>
+
+<div id="mynetwork"></div>
+
+<p id="selection"></p>
+</body>
+</html>

Icons:
Keyboard shortcuts:	Up arrow	Down arrow	Left arrow	Right arrow	= [ Page up	- ] Page down	None
Description:	Move up	Move down	Move left	Move right	Zoom in	Zoom out	Zoom extent