finalized UI and keyboard navigation. Finished docs, updated history.MD

HISTORY.md

@@ -1,13 +1,16 @@
 vis.js history
 http://visjs.org
 
-## 2014-01-21, version 0.4.0
+## 2014-01-27, version 0.4.0
 
+- Fixed longstanding bug in the force calculation, increasing simulation stability and fluidity.
 - Reworked the calculation of the Graph, increasing performance for larger datasets (up to 10x!).
 - Support for automatic clustering in Graph to handle large (>50000) datasets without losing performance.
 - Added automatic intial zooming to Graph, to more easily view large amounts of data.
 - Added local declustering to Graph, freezing the simulation of nodes outside of the cluster.
 - Added support for key-bindings by including mouseTrap in Graph.
+- Added node-based navigation GUI.
+- Added keyboard navigation option.
 
 ## 2014-01-14, version 0.3.0
 

dist/vis.js

@@ -12803,7 +12803,7 @@ var UIMixin = {
    */
   _moveUp : function(event) {
     this._highlightUIElement("UI_up");
-    this.yIncrement = this.constants.navigationUI.yMovementSpeed;
+    this.yIncrement = this.constants.keyboardNavigation.yMovementSpeed;
     this.start(); // if there is no node movement, the calculation wont be done
     this._preventDefault(event);
   },
@@ -12815,7 +12815,7 @@ var UIMixin = {
    */
   _moveDown : function(event) {
     this._highlightUIElement("UI_down");
-    this.yIncrement = -this.constants.navigationUI.yMovementSpeed;
+    this.yIncrement = -this.constants.keyboardNavigation.yMovementSpeed;
     this.start(); // if there is no node movement, the calculation wont be done
     this._preventDefault(event);
   },
@@ -12827,7 +12827,7 @@ var UIMixin = {
    */
   _moveLeft : function(event) {
     this._highlightUIElement("UI_left");
-    this.xIncrement = this.constants.navigationUI.xMovementSpeed;
+    this.xIncrement = this.constants.keyboardNavigation.xMovementSpeed;
     this.start(); // if there is no node movement, the calculation wont be done
     this._preventDefault(event);
   },
@@ -12839,7 +12839,7 @@ var UIMixin = {
    */
   _moveRight : function(event) {
     this._highlightUIElement("UI_right");
-    this.xIncrement = -this.constants.navigationUI.xMovementSpeed;
+    this.xIncrement = -this.constants.keyboardNavigation.xMovementSpeed;
     this.start(); // if there is no node movement, the calculation wont be done
     this._preventDefault(event);
   },
@@ -12851,7 +12851,7 @@ var UIMixin = {
    */
   _zoomIn : function(event) {
     this._highlightUIElement("UI_plus");
-    this.zoomIncrement = this.constants.navigationUI.zoomMovementSpeed;
+    this.zoomIncrement = this.constants.keyboardNavigation.zoomMovementSpeed;
     this.start(); // if there is no node movement, the calculation wont be done
     this._preventDefault(event);
   },
@@ -12863,7 +12863,7 @@ var UIMixin = {
    */
   _zoomOut : function() {
     this._highlightUIElement("UI_min");
-    this.zoomIncrement = -this.constants.navigationUI.zoomMovementSpeed;
+    this.zoomIncrement = -this.constants.keyboardNavigation.zoomMovementSpeed;
     this.start(); // if there is no node movement, the calculation wont be done
     this._preventDefault(event);
   },
@@ -12999,13 +12999,13 @@ function Graph (container, data, options) {
       enabled: false,
       initiallyVisible: true,
       enableToggling: true,
-      xMovementSpeed: 10,
-      yMovementSpeed: 10,
-      zoomMovementSpeed: 0.02,
       iconPath: this._getIconURL()
     },
     keyboardNavigation: {
-      enabled: false
+      enabled: false,
+      xMovementSpeed: 10,
+      yMovementSpeed: 10,
+      zoomMovementSpeed: 0.02
     },
     minVelocity: 1.0,   // px/s
     maxIterations: 1000  // maximum number of iteration to stabilize
@@ -13315,6 +13315,15 @@ Graph.prototype.setOptions = function (options) {
       }
     }
 
+    if (options.keyboardNavigation) {
+      for (var prop in options.keyboardNavigation) {
+        if (options.keyboardNavigation.hasOwnProperty(prop)) {
+          this.constants.keyboardNavigation[prop] = options.keyboardNavigation[prop];
+        }
+      }
+    }
+
+
     // TODO: work out these options and document them
     if (options.edges) {
       for (prop in options.edges) {

docs/graph.html

@@ -29,7 +29,9 @@
     </ul>
   </li>
   <li><a href="#Configuration_Options">Configuration Options</a></li>
-  <li><a href="#Clustering">Clustering Options</a></li>
+  <li><a href="#Clustering">Clustering</a></li>
+  <li><a href="#NavigationUI">Navigation GUI</a></li>
+  <li><a href="#Keyboard">Keyboard Navigation</a></li>
   <li><a href="#Methods">Methods</a></li>
   <li><a href="#Events">Events</a></li>
   <li><a href="#Data_Policy">Data Policy</a></li>
@@ -1014,6 +1016,10 @@ var nodes = [
     The default state for clustering is <b>off</b>.
 </p>
 
+<pre class="prettyprint">
+// These variables must be defined in an options object named clustering.
+</pre>
+
 <table>
     <tr>
         <th>Name</th>
@@ -1134,6 +1140,117 @@ var nodes = [
     </tr>
 </table>
 
+<h2 id="NavigationUI">Navigation GUI Elements</h2>
+<p>
+    As of 0.4.0, a node-based navigation GUI system has been added to vis.js.
+    It can be configured with the following user-configurable settings.
+    The default state for the GUI navigation elements is <b>off</b>.
+</p>
+
+<pre class="prettyprint">
+// These variables must be defined in an options object named navigationUI.
+// If a variable is not supplied, the default value is used.
+options: {
+    navigationUI: {
+      enabled: false,
+      initiallyVisible: true,
+      enableToggling: true,
+      iconPath: this._getIconURL() // automatic loading of the default icons
+    },
+}
+</pre>
+
+<table>
+    <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Default</th>
+        <th>Description</th>
+    </tr>
+
+    <tr>
+        <td>enabled</td>
+        <td>Boolean</td>
+        <td>false</td>
+        <td>On/off switch for the navigation UI elements.</td>
+    </tr>
+    <tr>
+        <td>initiallyVisible</td>
+        <td>Boolean</td>
+        <td>true</td>
+        <td>The UI elements can be toggled by pressing the "u" key. If <code>initiallyVisible</code> is false, the UI is hidden
+            until "u" is pressed on the keyboard.
+        </td>
+    </tr>
+    <tr>
+        <td>enableToggling</td>
+        <td>Boolean</td>
+        <td>true</td>
+        <td>Enable or disable the option to press "u" to toggle the UI elements. If the UI is initially hidden and the toggling is off, the UI cannot be used!</td>
+    </tr>
+    <tr>
+        <td>iconPath</td>
+        <td>string</td>
+        <td>[path to vis.js]/UI_icons/</td>
+        <td>The path to the icon images can be defined here. If custom icons are used, they have to have the same filename as the ones originally packaged with vis.js.</td>
+    </tr>
+</table>
+
+<h2 id="Keyboard">Keyboard Navigation</h2>
+<p>
+    As of 0.4.0, keyboard navigation has been added to vis.js.
+    It can be configured with the following user-configurable settings.
+    The default state for the keyboard navigation is <b>off</b>. The predefined keys can be found in the <a href="../examples/graph/20_UI_example.html">UI example.</a>
+</p>
+
+<pre class="prettyprint">
+// These variables must be defined in an options object named keyboardNavigation.
+// If a variable is not supplied, the default value is used
+options: {
+    keyboardNavigation: {
+      enabled: false,
+      xMovementSpeed: 10,
+      yMovementSpeed: 10,
+      zoomMovementSpeed: 0.02
+    }
+}
+</pre>
+
+<table>
+    <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Default</th>
+        <th>Description</th>
+    </tr>
+
+    <tr>
+        <td>enabled</td>
+        <td>Boolean</td>
+        <td>false</td>
+        <td>On/off switch for the keyboard navigation.</td>
+    </tr>
+    <tr>
+        <td>xMovementSpeed</td>
+        <td>Number</td>
+        <td>10</td>
+        <td>This defines the speed of the camera movement in the x direction when using the keyboard navigation.
+        </td>
+    </tr>
+    <tr>
+        <td>yMovementSpeed</td>
+        <td>Boolean</td>
+        <td>10</td>
+        <td>This defines the speed of the camera movement in the y direction when using the keyboard navigation.</td>
+    </tr>
+    <tr>
+        <td>zoomMovementSpeed</td>
+        <td>string</td>
+        <td>0.02</td>
+        <td>This defines the zoomspeed when using the keyboard navigation.</td>
+    </tr>
+</table>
+
 <h2 id="Methods">Methods</h2>
 <p>
   Graph supports the following methods.

examples/graph/20_UI_example.html

@@ -110,7 +110,10 @@
         length: 50
     },
     stabilize: false,
-    UI: {
+    navigationUI: {
+        enabled: true
+    },
+    keyboardNavigation: {
         enabled: true
     }
     };
@@ -132,13 +135,13 @@
     <table class="legend_table">
         <tr>
             <td>Icons: </td>
-            <td><div class="table_content"><img src="img/UI/uparrow.png" />     </div></td>
-            <td><div class="table_content"><img src="img/UI/downarrow.png" />   </div></td>
-            <td><div class="table_content"><img src="img/UI/leftarrow.png" />   </div></td>
-            <td><div class="table_content"><img src="img/UI/rightarrow.png" />  </div></td>
-            <td><div class="table_content"><img src="img/UI/plus.png" />        </div></td>
-            <td><div class="table_content"><img src="img/UI/minus.png" />       </div></td>
-            <td><div class="table_content"><img src="img/UI/zoomExtends.png" /> </div></td>
+            <td><div class="table_content"><img src="img/UI_icons/uparrow.png" />     </div></td>
+            <td><div class="table_content"><img src="img/UI_icons/downarrow.png" />   </div></td>
+            <td><div class="table_content"><img src="img/UI_icons/leftarrow.png" />   </div></td>
+            <td><div class="table_content"><img src="img/UI_icons/rightarrow.png" />  </div></td>
+            <td><div class="table_content"><img src="img/UI_icons/plus.png" />        </div></td>
+            <td><div class="table_content"><img src="img/UI_icons/minus.png" />       </div></td>
+            <td><div class="table_content"><img src="img/UI_icons/zoomExtends.png" /> </div></td>
         </tr>
         <tr>
             <td><div class="table_description">Keyboard shortcuts:</div></td>

src/graph/Graph.js

@@ -90,13 +90,13 @@ function Graph (container, data, options) {
       enabled: false,
       initiallyVisible: true,
       enableToggling: true,
-      xMovementSpeed: 10,
-      yMovementSpeed: 10,
-      zoomMovementSpeed: 0.02,
       iconPath: this._getIconURL()
     },
     keyboardNavigation: {
-      enabled: false
+      enabled: false,
+      xMovementSpeed: 10,
+      yMovementSpeed: 10,
+      zoomMovementSpeed: 0.02
     },
     minVelocity: 1.0,   // px/s
     maxIterations: 1000  // maximum number of iteration to stabilize
@@ -406,6 +406,15 @@ Graph.prototype.setOptions = function (options) {
       }
     }
 
+    if (options.keyboardNavigation) {
+      for (var prop in options.keyboardNavigation) {
+        if (options.keyboardNavigation.hasOwnProperty(prop)) {
+          this.constants.keyboardNavigation[prop] = options.keyboardNavigation[prop];
+        }
+      }
+    }
+
+
     // TODO: work out these options and document them
     if (options.edges) {
       for (prop in options.edges) {

src/graph/UIMixin.js

@@ -153,7 +153,7 @@ var UIMixin = {
    */
   _moveUp : function(event) {
     this._highlightUIElement("UI_up");
-    this.yIncrement = this.constants.navigationUI.yMovementSpeed;
+    this.yIncrement = this.constants.keyboardNavigation.yMovementSpeed;
     this.start(); // if there is no node movement, the calculation wont be done
     this._preventDefault(event);
   },
@@ -165,7 +165,7 @@ var UIMixin = {
    */
   _moveDown : function(event) {
     this._highlightUIElement("UI_down");
-    this.yIncrement = -this.constants.navigationUI.yMovementSpeed;
+    this.yIncrement = -this.constants.keyboardNavigation.yMovementSpeed;
     this.start(); // if there is no node movement, the calculation wont be done
     this._preventDefault(event);
   },
@@ -177,7 +177,7 @@ var UIMixin = {
    */
   _moveLeft : function(event) {
     this._highlightUIElement("UI_left");
-    this.xIncrement = this.constants.navigationUI.xMovementSpeed;
+    this.xIncrement = this.constants.keyboardNavigation.xMovementSpeed;
     this.start(); // if there is no node movement, the calculation wont be done
     this._preventDefault(event);
   },
@@ -189,7 +189,7 @@ var UIMixin = {
    */
   _moveRight : function(event) {
     this._highlightUIElement("UI_right");
-    this.xIncrement = -this.constants.navigationUI.xMovementSpeed;
+    this.xIncrement = -this.constants.keyboardNavigation.xMovementSpeed;
     this.start(); // if there is no node movement, the calculation wont be done
     this._preventDefault(event);
   },
@@ -201,7 +201,7 @@ var UIMixin = {
    */
   _zoomIn : function(event) {
     this._highlightUIElement("UI_plus");
-    this.zoomIncrement = this.constants.navigationUI.zoomMovementSpeed;
+    this.zoomIncrement = this.constants.keyboardNavigation.zoomMovementSpeed;
     this.start(); // if there is no node movement, the calculation wont be done
     this._preventDefault(event);
   },
@@ -213,7 +213,7 @@ var UIMixin = {
    */
   _zoomOut : function() {
     this._highlightUIElement("UI_min");
-    this.zoomIncrement = -this.constants.navigationUI.zoomMovementSpeed;
+    this.zoomIncrement = -this.constants.keyboardNavigation.zoomMovementSpeed;
     this.start(); // if there is no node movement, the calculation wont be done
     this._preventDefault(event);
   },