Moved images to src/graph/img, adjusted build script to copy them to dist, and some more variable renaming in the code

Jakefile.js

@@ -94,6 +94,8 @@ task('build', {async: true}, function () {
     separator: '\n'
   });
 
+  // copy images
+  jake.cpR('./src/graph/img', DIST+ '/img');
 
   var timeStart = Date.now();
   // bundle the concatenated script and dependencies into one file

docs/graph.html

@@ -1145,7 +1145,6 @@ var nodes = [
 // If a variable is not supplied, the default value is used.
 var options = {
     clustering: {
-      enabled: false,
       initialMaxNodes: 100,
       clusterThreshold:500,
       reduceToNodes:300,
@@ -1177,12 +1176,6 @@ var options: {
     <th>Description</th>
   </tr>
 
-  <tr>
-    <td>enabled</td>
-    <td>Boolean</td>
-    <td>false</td>
-    <td>On/off switch for clustering. It is assumed clustering is enabled in the descriptions below.</td>
-  </tr>
   <tr>
     <td>initialMaxNodes</td>
     <td>Number</td>
@@ -1289,7 +1282,7 @@ var options: {
   </tr>
 </table>
 
-<h2 id="Navigation_controls">Navigation controls</h2>
+<h3 id="Navigation_controls">Navigation controls</h3>
 <p>
   Graph has a menu with navigation controls, which is disabled by default.
   It can be configured with the following settings.
@@ -1358,12 +1351,6 @@ var options: {
     <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>speed.x</td>
     <td>Number</td>

examples/graph/20_navigation.html

@@ -131,13 +131,13 @@
   <table class="legend_table">
     <tr>
       <td>Icons: </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>
+      <td><div class="table_content"><img src="../../dist/img/uparrow.png" />     </div></td>
+      <td><div class="table_content"><img src="../../dist/img/downarrow.png" />   </div></td>
+      <td><div class="table_content"><img src="../../dist/img/leftarrow.png" />   </div></td>
+      <td><div class="table_content"><img src="../../dist/img/rightarrow.png" />  </div></td>
+      <td><div class="table_content"><img src="../../dist/img/plus.png" />        </div></td>
+      <td><div class="table_content"><img src="../../dist/img/minus.png" />       </div></td>
+      <td><div class="table_content"><img src="../../dist/img/zoomExtends.png" /> </div></td>
     </tr>
     <tr>
       <td><div class="table_description">Keyboard shortcuts:</div></td>

examples/graph/index.html

@@ -31,7 +31,7 @@
   <p><a href="17_network_info.html">17_network_info.html</a></p>
   <p><a href="18_fully_random_nodes_clustering.html">18_fully_random_nodes_clustering.html</a></p>
   <p><a href="19_scale_free_graph_clustering.html">19_scale_free_graph_clustering.html</a></p>
-  <p><a href="20_navigation.html">20_UI_example.html</a></p>
+  <p><a href="20_navigation.html">20_navigation.html</a></p>
   <p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
 
 </div>

src/graph/Graph.js

@@ -195,7 +195,7 @@ function Graph (container, data, options) {
 }
 
 /**
- * get the URL where the UI icons are located
+ * get the URL where the navigation icons are located
  *
  * @returns {string}
  * @private
@@ -206,14 +206,16 @@ Graph.prototype._getIconURL = function() {
   for (var i = 0; i < scripts.length; i++) {
     srcPosition = scripts[i].outerHTML.search("src");
     if (srcPosition != -1) {
-      scriptNamePosition = util._getLowestPositiveNumber(scripts[i].outerHTML.search("vis.js"),
+      scriptNamePosition = util.getLowestPositiveNumber(scripts[i].outerHTML.search("vis.js"),
                                                   scripts[i].outerHTML.search("vis.min.js"));
       if (scriptNamePosition != -1) {
-        imagePath = scripts[i].outerHTML.substring(srcPosition+5,scriptNamePosition).concat("UI_icons/");
+        imagePath = scripts[i].outerHTML.substring(srcPosition+5,scriptNamePosition).concat("img/");
         return imagePath;
       }
     }
   }
+
+  return null;
 };
 
 
@@ -1094,7 +1096,7 @@ Graph.prototype.setSize = function(width, height) {
   this.frame.canvas.height = this.frame.canvas.clientHeight;
 
   if (this.constants.navigation.enabled == true) {
-    this._relocateUI();
+    this._relocateNavigation();
   }
 };
 
@@ -1443,7 +1445,7 @@ Graph.prototype._redraw = function() {
   ctx.restore();
 
   if (this.constants.navigation.enabled == true) {
-    this._doInUISector("_drawNodes",ctx,true);
+    this._doInNavigationSector("_drawNodes",ctx,true);
   }
 };
 
@@ -2033,14 +2035,14 @@ Graph.prototype._loadNavigationControls = function() {
   }
 
   if (this.constants.navigation.enabled == true) {
-    this._loadUIElements();
+    this._loadNavigationElements();
   }
 }
 
 /**
  * this function exists to avoid errors when not loading the navigation system
  */
-Graph.prototype._relocateUI = function() {
+Graph.prototype._relocateNavigation = function() {
   // empty, is overloaded by navigation system
 }
 

src/graph/NavigationMixin.js

@@ -10,12 +10,12 @@ var NavigationMixin = {
    *
    * @private
    */
-  _relocateUI : function() {
+  _relocateNavigation : function() {
     if (this.sectors !== undefined) {
-      var xOffset = this.UIclientWidth - this.frame.canvas.clientWidth;
-      var yOffset = this.UIclientHeight - this.frame.canvas.clientHeight;
-      this.UIclientWidth = this.frame.canvas.clientWidth;
-      this.UIclientHeight = this.frame.canvas.clientHeight;
+      var xOffset = this.navigationClientWidth - this.frame.canvas.clientWidth;
+      var yOffset = this.navigationClientHeight - this.frame.canvas.clientHeight;
+      this.navigationClientWidth = this.frame.canvas.clientWidth;
+      this.navigationClientHeight = this.frame.canvas.clientHeight;
       var node = null;
 
       for (var nodeId in this.sectors["navigation"]["nodes"]) {
@@ -37,45 +37,45 @@ var NavigationMixin = {
    * Creation of the navigation controls nodes. They are drawn over the rest of the nodes and are not affected by scale and translation
    * they have a triggerFunction which is called on click. If the position of the navigation controls is dependent
    * on this.frame.canvas.clientWidth or this.frame.canvas.clientHeight, we flag horizontalAlignLeft and verticalAlignTop false.
-   * This means that the location will be corrected by the _relocateUI function on a size change of the canvas.
+   * This means that the location will be corrected by the _relocateNavigation function on a size change of the canvas.
    *
    * @private
    */
-  _loadUIElements : function() {
+  _loadNavigationElements : function() {
     var DIR = this.constants.navigation.iconPath;
-    this.UIclientWidth = this.frame.canvas.clientWidth;
-    this.UIclientHeight = this.frame.canvas.clientHeight;
-    if (this.UIclientWidth === undefined) {
-      this.UIclientWidth = 0;
-      this.UIclientHeight = 0;
+    this.navigationClientWidth = this.frame.canvas.clientWidth;
+    this.navigationClientHeight = this.frame.canvas.clientHeight;
+    if (this.navigationClientWidth === undefined) {
+      this.navigationClientWidth = 0;
+      this.navigationClientHeight = 0;
     }
     var offset = 15;
     var intermediateOffset = 7;
-    var UINodes = [
-      {id: 'UI_up',    shape: 'image', image: DIR + 'uparrow.png',   triggerFunction: "_moveUp",
-        verticalAlignTop: false,  x: 45 + offset + intermediateOffset,  y: this.UIclientHeight - 45 - offset - intermediateOffset},
-      {id: 'UI_down',  shape: 'image', image: DIR + 'downarrow.png', triggerFunction: "_moveDown",
-        verticalAlignTop: false,  x: 45 + offset + intermediateOffset,  y: this.UIclientHeight - 15 - offset},
-      {id: 'UI_left',  shape: 'image', image: DIR + 'leftarrow.png', triggerFunction: "_moveLeft",
-        verticalAlignTop: false,  x: 15 + offset,  y: this.UIclientHeight - 15 - offset},
-      {id: 'UI_right', shape: 'image', image: DIR + 'rightarrow.png',triggerFunction: "_moveRight",
-        verticalAlignTop: false,  x: 75 + offset + 2 * intermediateOffset,  y: this.UIclientHeight - 15 - offset},
-
-      {id: 'UI_plus',  shape: 'image', image: DIR + 'plus.png',      triggerFunction: "_zoomIn",
+    var navigationNodes = [
+      {id: 'navigation_up',    shape: 'image', image: DIR + 'uparrow.png',   triggerFunction: "_moveUp",
+        verticalAlignTop: false,  x: 45 + offset + intermediateOffset,  y: this.navigationClientHeight - 45 - offset - intermediateOffset},
+      {id: 'navigation_down',  shape: 'image', image: DIR + 'downarrow.png', triggerFunction: "_moveDown",
+        verticalAlignTop: false,  x: 45 + offset + intermediateOffset,  y: this.navigationClientHeight - 15 - offset},
+      {id: 'navigation_left',  shape: 'image', image: DIR + 'leftarrow.png', triggerFunction: "_moveLeft",
+        verticalAlignTop: false,  x: 15 + offset,  y: this.navigationClientHeight - 15 - offset},
+      {id: 'navigation_right', shape: 'image', image: DIR + 'rightarrow.png',triggerFunction: "_moveRight",
+        verticalAlignTop: false,  x: 75 + offset + 2 * intermediateOffset,  y: this.navigationClientHeight - 15 - offset},
+
+      {id: 'navigation_plus',  shape: 'image', image: DIR + 'plus.png',      triggerFunction: "_zoomIn",
         verticalAlignTop: false, horizontalAlignLeft: false,
-        x: this.UIclientWidth - 45 - offset - intermediateOffset, y: this.UIclientHeight - 15 - offset},
-      {id: 'UI_min', shape: 'image', image: DIR + 'minus.png',       triggerFunction: "_zoomOut",
+        x: this.navigationClientWidth - 45 - offset - intermediateOffset, y: this.navigationClientHeight - 15 - offset},
+      {id: 'navigation_min', shape: 'image', image: DIR + 'minus.png',       triggerFunction: "_zoomOut",
         verticalAlignTop: false, horizontalAlignLeft: false,
-        x: this.UIclientWidth - 15 - offset, y: this.UIclientHeight - 15 - offset},
-      {id: 'UI_zoomExtends', shape: 'image', image: DIR + 'zoomExtends.png', triggerFunction: "zoomToFit",
+        x: this.navigationClientWidth - 15 - offset, y: this.navigationClientHeight - 15 - offset},
+      {id: 'navigation_zoomExtends', shape: 'image', image: DIR + 'zoomExtends.png', triggerFunction: "zoomToFit",
         verticalAlignTop: false, horizontalAlignLeft: false,
-        x: this.UIclientWidth - 15 - offset, y: this.UIclientHeight - 45 - offset - intermediateOffset}
+        x: this.navigationClientWidth - 15 - offset, y: this.navigationClientHeight - 45 - offset - intermediateOffset}
     ];
 
     var nodeObj = null;
-    for (var i = 0; i < UINodes.length; i++) {
+    for (var i = 0; i < navigationNodes.length; i++) {
       nodeObj = this.sectors["navigation"]['nodes'];
-      nodeObj[UINodes[i]['id']] = new Node(UINodes[i], this.images, this.groups, this.constants);
+      nodeObj[navigationNodes[i]['id']] = new Node(navigationNodes[i], this.images, this.groups, this.constants);
     }
   },
 
@@ -87,7 +87,7 @@ var NavigationMixin = {
    * @param {String} elementId
    * @private
    */
-  _highlightUIElement : function(elementId) {
+  _highlightNavigationElement : function(elementId) {
     if (this.sectors["navigation"]["nodes"].hasOwnProperty(elementId)) {
       this.sectors["navigation"]["nodes"][elementId].clusterSize = 2;
     }
@@ -100,7 +100,7 @@ var NavigationMixin = {
    * @param {String} elementId
    * @private
    */
-  _unHighlightUIElement : function(elementId) {
+  _unHighlightNavigationElement : function(elementId) {
     if (this.sectors["navigation"]["nodes"].hasOwnProperty(elementId)) {
       this.sectors["navigation"]["nodes"][elementId].clusterSize = 1;
     }
@@ -113,7 +113,7 @@ var NavigationMixin = {
   _unHighlightAll : function() {
     for (var nodeId in this.sectors['navigation']['nodes']) {
       if (this.sectors['navigation']['nodes'].hasOwnProperty(nodeId)) {
-        this._unHighlightUIElement(nodeId);
+        this._unHighlightNavigationElement(nodeId);
       }
     }
   },
@@ -139,7 +139,7 @@ var NavigationMixin = {
    * @private
    */
   _moveUp : function(event) {
-    this._highlightUIElement("UI_up");
+    this._highlightNavigationElement("navigation_up");
     this.yIncrement = this.constants.keyboard.speed.y;
     this.start(); // if there is no node movement, the calculation wont be done
     this._preventDefault(event);
@@ -151,7 +151,7 @@ var NavigationMixin = {
    * @private
    */
   _moveDown : function(event) {
-    this._highlightUIElement("UI_down");
+    this._highlightNavigationElement("navigation_down");
     this.yIncrement = -this.constants.keyboard.speed.y;
     this.start(); // if there is no node movement, the calculation wont be done
     this._preventDefault(event);
@@ -163,7 +163,7 @@ var NavigationMixin = {
    * @private
    */
   _moveLeft : function(event) {
-    this._highlightUIElement("UI_left");
+    this._highlightNavigationElement("navigation_left");
     this.xIncrement = this.constants.keyboard.speed.x;
     this.start(); // if there is no node movement, the calculation wont be done
     this._preventDefault(event);
@@ -175,7 +175,7 @@ var NavigationMixin = {
    * @private
    */
   _moveRight : function(event) {
-    this._highlightUIElement("UI_right");
+    this._highlightNavigationElement("navigation_right");
     this.xIncrement = -this.constants.keyboard.speed.y;
     this.start(); // if there is no node movement, the calculation wont be done
     this._preventDefault(event);
@@ -187,7 +187,7 @@ var NavigationMixin = {
    * @private
    */
   _zoomIn : function(event) {
-    this._highlightUIElement("UI_plus");
+    this._highlightNavigationElement("navigation_plus");
     this.zoomIncrement = this.constants.keyboard.speed.zoom;
     this.start(); // if there is no node movement, the calculation wont be done
     this._preventDefault(event);
@@ -199,7 +199,7 @@ var NavigationMixin = {
    * @private
    */
   _zoomOut : function() {
-    this._highlightUIElement("UI_min");
+    this._highlightNavigationElement("navigation_min");
     this.zoomIncrement = -this.constants.keyboard.speed.zoom;
     this.start(); // if there is no node movement, the calculation wont be done
     this._preventDefault(event);
@@ -211,8 +211,8 @@ var NavigationMixin = {
    * @private
    */
   _stopZoom : function() {
-    this._unHighlightUIElement("UI_plus");
-    this._unHighlightUIElement("UI_min");
+    this._unHighlightNavigationElement("navigation_plus");
+    this._unHighlightNavigationElement("navigation_min");
 
     this.zoomIncrement = 0;
   },
@@ -223,8 +223,8 @@ var NavigationMixin = {
    * @private
    */
   _yStopMoving : function() {
-    this._unHighlightUIElement("UI_up");
-    this._unHighlightUIElement("UI_down");
+    this._unHighlightNavigationElement("navigation_up");
+    this._unHighlightNavigationElement("navigation_down");
 
     this.yIncrement = 0;
   },
@@ -235,8 +235,8 @@ var NavigationMixin = {
    * @private
    */
   _xStopMoving : function() {
-    this._unHighlightUIElement("UI_left");
-    this._unHighlightUIElement("UI_right");
+    this._unHighlightNavigationElement("navigation_left");
+    this._unHighlightNavigationElement("navigation_right");
 
     this.xIncrement = 0;
   }

src/graph/SectorsMixin.js

@@ -76,7 +76,7 @@ var SectorMixin = {
    *
    * @private
    */
-  _switchToUISector : function() {
+  _switchToNavigationSector : function() {
     this.nodeIndices = this.sectors["navigation"]["nodeIndices"];
     this.nodes       = this.sectors["navigation"]["nodes"];
     this.edges       = this.sectors["navigation"]["edges"];
@@ -440,8 +440,8 @@ var SectorMixin = {
    * @param {*} [argument]            |   Optional: arguments to pass to the runFunction
    * @private
    */
-  _doInUISector : function(runFunction,argument) {
-    this._switchToUISector();
+  _doInNavigationSector : function(runFunction,argument) {
+    this._switchToNavigationSector();
     if (argument === undefined) {
       this[runFunction]();
     }

src/graph/SelectionMixin.js

@@ -38,9 +38,9 @@ var SelectionMixin = {
    * @return {Number[]}   An array with id's of the overlapping nodes
    * @private
    */
-  _getAllUINodesOverlappingWith : function (object) {
+  _getAllNavigationNodesOverlappingWith : function (object) {
     var overlappingNodes = [];
-    this._doInUISector("_getNodesOverlappingWith",object,overlappingNodes);
+    this._doInNavigationSector("_getNodesOverlappingWith",object,overlappingNodes);
     return overlappingNodes;
   },
 
@@ -86,9 +86,9 @@ var SelectionMixin = {
    * @return {Node | null} node
    * @private
    */
-  _getUINodeAt : function (pointer) {
+  _getNavigationNodeAt : function (pointer) {
     var screenPositionObject = this._pointerToScreenPositionObject(pointer);
-    var overlappingNodes = this._getAllUINodesOverlappingWith(screenPositionObject);
+    var overlappingNodes = this._getAllNavigationNodesOverlappingWith(screenPositionObject);
     if (overlappingNodes.length > 0) {
       return this.sectors["navigation"]["nodes"][overlappingNodes[overlappingNodes.length - 1]];
     }
@@ -247,7 +247,7 @@ var SelectionMixin = {
    */
   _handleTouch : function(pointer) {
     if (this.constants.navigation.enabled == true) {
-      var node = this._getUINodeAt(pointer);
+      var node = this._getNavigationNodeAt(pointer);
       if (node != null) {
         if (this[node.triggerFunction] !== undefined) {
           this[node.triggerFunction]();

src/util.js

@@ -679,9 +679,8 @@ util.option.asElement = function (value, defaultValue) {
  * @param {number} number1
  * @param {number} number2
  * @returns {number}        | number1 or number2, the lowest positive number. If both negative, return -1
- * @private
  */
-util._getLowestPositiveNumber = function(number1,number2) {
+util.getLowestPositiveNumber = function(number1,number2) {
   if (number1 >= 0) {
     if (number2 >= 0) {
       return (number1 < number2) ? number1 : number2;