- Added option bindToWindow (default true) to choose whether the keyboard binds are global or to the network div.

HISTORY.md

@@ -4,6 +4,10 @@ http://visjs.org
 
 ## not yet released, version 3.9.2-SNAPSHOT
 
+### Network
+
+- Added option bindToWindow (default true) to choose whether the keyboard binds are global or to the network div.
+
 ### DataSet
 
 - Added property `length` holding the total number of items to the `DataSet`

docs/network.html

@@ -1906,7 +1906,8 @@ var options = {
       x: 10,
       y: 10,
       zoom: 0.02
-    }
+    },
+    bindToWindow: true
   }
 }
 </pre>
@@ -1938,6 +1939,12 @@ var options = {
     <td>0.02</td>
     <td>This defines the zoomspeed when using the keyboard navigation.</td>
   </tr>
+  <tr>
+    <td>bindToWindow</td>
+    <td>Boolean</td>
+    <td>true</td>
+    <td>If this is true, global keyboard events will be used. If it is false, the keyboard events are only used when the network is active. It is activated on mouseOver automatically.</td>
+  </tr>
 </table>
 
 

lib/network/Network.js

@@ -171,7 +171,8 @@ function Network (container, data, options) {
     },
     keyboard: {
       enabled: false,
-      speed: {x: 10, y: 10, zoom: 0.02}
+      speed: {x: 10, y: 10, zoom: 0.02},
+      bindToWindow: true
     },
     dataManipulation: {
       enabled: false,
@@ -756,6 +757,7 @@ Network.prototype._create = function () {
   this.frame.className = 'vis network-frame';
   this.frame.style.position = 'relative';
   this.frame.style.overflow = 'hidden';
+  this.frame.tabIndex = 900;
 
 
 //////////////////////////////////////////////////////////////////
@@ -835,7 +837,13 @@ Network.prototype._createKeyBinds = function() {
   if (this.keycharm !== undefined) {
     this.keycharm.destroy();
   }
-  this.keycharm = keycharm();
+
+  if (this.constants.keyboard.bindToWindow == true) {
+    this.keycharm = keycharm({container: window, preventDefault: false});
+  }
+  else {
+    this.keycharm = keycharm({container: this.frame, preventDefault: false});
+  }
 
   this.keycharm.reset();
 
@@ -1280,6 +1288,11 @@ Network.prototype._onMouseMoveTitle = function (event) {
     this._checkHidePopup(pointer);
   }
 
+  // if we bind the keyboard to the div, we have to highlight it to use it. This highlights it on mouse over
+  if (this.constants.keyboard.bindToWindow == false && this.constants.keyboard.enabled == true) {
+    this.frame.focus();
+  }
+
   // start a timeout that will check if the mouse is positioned above
   // an element
   var me = this;