Updated vis overview image

docs/css/style.css

@@ -39,13 +39,19 @@ h3 {
     font-size: 140%;
 }
 
+a > img {
+    border: none;
+}
+
 a {
     color: #2B7CE9;
     text-decoration: none;
 }
+
 a:visited {
     color: #2E60A4;
 }
+
 a:hover {
     color: red;
     text-decoration: underline;

docs/index.html

@@ -55,6 +55,13 @@
         </li>
     </ul>
 
+    <div style="text-align: center;">
+        <a href="img/vis_overview.png" target="_blank">
+            <img src="img/vis_overview.png" style="width: 250px; "/><br>
+            (click for a larger view)
+        </a>
+    </div>
+
 
     <h2 id="Install">Install</h2>
 

src/graph/Graph.js

@@ -163,7 +163,6 @@ Graph.prototype.setData = function(data) {
         this._setEdges(data && data.edges);
     }
 
-
     // find a stable position or start animating to a stable position
     if (this.stabilize) {
         this._doStabilize();
@@ -251,7 +250,7 @@ Graph.prototype.setOptions = function (options) {
 
 /**
  * fire an event
- * @param {String} event   The name of an event, for example "select"
+ * @param {String} event   The name of an event, for example 'select'
  * @param {Object} params  Optional object with event parameters
  * @private
  */
@@ -273,21 +272,21 @@ Graph.prototype._create = function () {
         this.containerElement.removeChild(this.containerElement.firstChild);
     }
 
-    this.frame = document.createElement("div");
-    this.frame.className = "graph-frame";
-    this.frame.style.position = "relative";
-    this.frame.style.overflow = "hidden";
+    this.frame = document.createElement('div');
+    this.frame.className = 'graph-frame';
+    this.frame.style.position = 'relative';
+    this.frame.style.overflow = 'hidden';
 
     // create the graph canvas (HTML canvas element)
-    this.frame.canvas = document.createElement( "canvas" );
-    this.frame.canvas.style.position = "relative";
+    this.frame.canvas = document.createElement( 'canvas' );
+    this.frame.canvas.style.position = 'relative';
     this.frame.appendChild(this.frame.canvas);
     if (!this.frame.canvas.getContext) {
-        var noCanvas = document.createElement( "DIV" );
-        noCanvas.style.color = "red";
-        noCanvas.style.fontWeight =  "bold" ;
-        noCanvas.style.padding =  "10px";
-        noCanvas.innerHTML =  "Error: your browser does not support HTML canvas";
+        var noCanvas = document.createElement( 'DIV' );
+        noCanvas.style.color = 'red';
+        noCanvas.style.fontWeight =  'bold' ;
+        noCanvas.style.padding =  '10px';
+        noCanvas.innerHTML =  'Error: your browser does not support HTML canvas';
         this.frame.canvas.appendChild(noCanvas);
     }
 
@@ -877,7 +876,7 @@ Graph.prototype.setSelection = function(selection) {
     var i, iMax, id;
 
     if (!selection || (selection.length == undefined))
-        throw "Selection must be an array with ids";
+        throw 'Selection must be an array with ids';
 
     // first unselect any selected node
     for (i = 0, iMax = this.selection.length; i < iMax; i++) {
@@ -1000,17 +999,17 @@ Graph.prototype._getConnectionCount = function(level) {
 
 /**
  * Set a new size for the graph
- * @param {string} width   Width in pixels or percentage (for example "800px"
- *                         or "50%")
- * @param {string} height  Height in pixels or percentage  (for example "400px"
- *                         or "30%")
+ * @param {string} width   Width in pixels or percentage (for example '800px'
+ *                         or '50%')
+ * @param {string} height  Height in pixels or percentage  (for example '400px'
+ *                         or '30%')
  */
 Graph.prototype.setSize = function(width, height) {
     this.frame.style.width = width;
     this.frame.style.height = height;
 
-    this.frame.canvas.style.width = "100%";
-    this.frame.canvas.style.height = "100%";
+    this.frame.canvas.style.width = '100%';
+    this.frame.canvas.style.height = '100%';
 
     this.frame.canvas.width = this.frame.canvas.clientWidth;
     this.frame.canvas.height = this.frame.canvas.clientHeight;
@@ -1337,7 +1336,7 @@ Graph.prototype.redraw = function() {
  * @private
  */
 Graph.prototype._redraw = function() {
-    var ctx = this.frame.canvas.getContext("2d");
+    var ctx = this.frame.canvas.getContext('2d');
 
     // clear the canvas
     var w = this.frame.canvas.width;
@@ -1365,8 +1364,8 @@ Graph.prototype._redraw = function() {
 Graph.prototype._setTranslation = function(offsetX, offsetY) {
     if (this.translation === undefined) {
         this.translation = {
-            "x": 0,
-            "y": 0
+            x: 0,
+            y: 0
         };
     }
 
@@ -1385,8 +1384,8 @@ Graph.prototype._setTranslation = function(offsetX, offsetY) {
  */
 Graph.prototype._getTranslation = function() {
     return {
-        "x": this.translation.x,
-        "y": this.translation.y
+        x: this.translation.x,
+        y: this.translation.y
     };
 };
 
@@ -1449,7 +1448,7 @@ Graph.prototype._yToCanvas = function(y) {
 
 /**
  * Redraw all nodes
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
  * @param {CanvasRenderingContext2D}   ctx
  * @private
  */
@@ -1476,7 +1475,7 @@ Graph.prototype._drawNodes = function(ctx) {
 
 /**
  * Redraw all edges
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
  * @param {CanvasRenderingContext2D}   ctx
  * @private
  */
@@ -1512,7 +1511,7 @@ Graph.prototype._doStabilize = function() {
 
     var end = new Date();
 
-    // console.log("Stabilized in " + (end-start) + " ms, " + count + " iterations" ); // TODO: cleanup
+    // console.log('Stabilized in ' + (end-start) + ' ms, ' + count + ' iterations' ); // TODO: cleanup
 };
 
 /**
@@ -1669,7 +1668,7 @@ Graph.prototype._calculateForces = function() {
 
 /**
  * Check if any of the nodes is still moving
- * @param {number} vmin   the minimum velocity considered as "moving"
+ * @param {number} vmin   the minimum velocity considered as 'moving'
  * @return {boolean}      true if moving, false if non of the nodes is moving
  * @private
  */

vis.js

@@ -13016,7 +13016,6 @@ Graph.prototype.setData = function(data) {
         this._setEdges(data && data.edges);
     }
 
-
     // find a stable position or start animating to a stable position
     if (this.stabilize) {
         this._doStabilize();
@@ -13104,7 +13103,7 @@ Graph.prototype.setOptions = function (options) {
 
 /**
  * fire an event
- * @param {String} event   The name of an event, for example "select"
+ * @param {String} event   The name of an event, for example 'select'
  * @param {Object} params  Optional object with event parameters
  * @private
  */
@@ -13126,21 +13125,21 @@ Graph.prototype._create = function () {
         this.containerElement.removeChild(this.containerElement.firstChild);
     }
 
-    this.frame = document.createElement("div");
-    this.frame.className = "graph-frame";
-    this.frame.style.position = "relative";
-    this.frame.style.overflow = "hidden";
+    this.frame = document.createElement('div');
+    this.frame.className = 'graph-frame';
+    this.frame.style.position = 'relative';
+    this.frame.style.overflow = 'hidden';
 
     // create the graph canvas (HTML canvas element)
-    this.frame.canvas = document.createElement( "canvas" );
-    this.frame.canvas.style.position = "relative";
+    this.frame.canvas = document.createElement( 'canvas' );
+    this.frame.canvas.style.position = 'relative';
     this.frame.appendChild(this.frame.canvas);
     if (!this.frame.canvas.getContext) {
-        var noCanvas = document.createElement( "DIV" );
-        noCanvas.style.color = "red";
-        noCanvas.style.fontWeight =  "bold" ;
-        noCanvas.style.padding =  "10px";
-        noCanvas.innerHTML =  "Error: your browser does not support HTML canvas";
+        var noCanvas = document.createElement( 'DIV' );
+        noCanvas.style.color = 'red';
+        noCanvas.style.fontWeight =  'bold' ;
+        noCanvas.style.padding =  '10px';
+        noCanvas.innerHTML =  'Error: your browser does not support HTML canvas';
         this.frame.canvas.appendChild(noCanvas);
     }
 
@@ -13171,8 +13170,8 @@ Graph.prototype._create = function () {
  * @private
  */
 Graph.prototype._getNodeAt = function (pointer) {
-    var x = this._xToCanvas(pointer.x);
-    var y = this._yToCanvas(pointer.y);
+    var x = this._canvasToX(pointer.x);
+    var y = this._canvasToY(pointer.y);
 
     var obj = {
         left:   x,
@@ -13281,11 +13280,11 @@ Graph.prototype._onDrag = function (event) {
             var node = s.node;
 
             if (!s.xFixed) {
-                node.x = me._xToCanvas(me._canvasToX(s.x) + deltaX);
+                node.x = me._canvasToX(me._xToCanvas(s.x) + deltaX);
             }
 
             if (!s.yFixed) {
-                node.y = me._yToCanvas(me._canvasToY(s.y) + deltaY);
+                node.y = me._canvasToY(me._yToCanvas(s.y) + deltaY);
             }
         });
 
@@ -13509,10 +13508,10 @@ Graph.prototype._onMouseMoveTitle = function (event) {
  */
 Graph.prototype._checkShowPopup = function (pointer) {
     var obj = {
-        left:   this._xToCanvas(pointer.x),
-        top:    this._yToCanvas(pointer.y),
-        right:  this._xToCanvas(pointer.x),
-        bottom: this._yToCanvas(pointer.y)
+        left:   this._canvasToX(pointer.x),
+        top:    this._canvasToY(pointer.y),
+        right:  this._canvasToX(pointer.x),
+        bottom: this._canvasToY(pointer.y)
     };
 
     var id;
@@ -13730,7 +13729,7 @@ Graph.prototype.setSelection = function(selection) {
     var i, iMax, id;
 
     if (!selection || (selection.length == undefined))
-        throw "Selection must be an array with ids";
+        throw 'Selection must be an array with ids';
 
     // first unselect any selected node
     for (i = 0, iMax = this.selection.length; i < iMax; i++) {
@@ -13853,17 +13852,17 @@ Graph.prototype._getConnectionCount = function(level) {
 
 /**
  * Set a new size for the graph
- * @param {string} width   Width in pixels or percentage (for example "800px"
- *                         or "50%")
- * @param {string} height  Height in pixels or percentage  (for example "400px"
- *                         or "30%")
+ * @param {string} width   Width in pixels or percentage (for example '800px'
+ *                         or '50%')
+ * @param {string} height  Height in pixels or percentage  (for example '400px'
+ *                         or '30%')
  */
 Graph.prototype.setSize = function(width, height) {
     this.frame.style.width = width;
     this.frame.style.height = height;
 
-    this.frame.canvas.style.width = "100%";
-    this.frame.canvas.style.height = "100%";
+    this.frame.canvas.style.width = '100%';
+    this.frame.canvas.style.height = '100%';
 
     this.frame.canvas.width = this.frame.canvas.clientWidth;
     this.frame.canvas.height = this.frame.canvas.clientHeight;
@@ -14190,7 +14189,7 @@ Graph.prototype.redraw = function() {
  * @private
  */
 Graph.prototype._redraw = function() {
-    var ctx = this.frame.canvas.getContext("2d");
+    var ctx = this.frame.canvas.getContext('2d');
 
     // clear the canvas
     var w = this.frame.canvas.width;
@@ -14218,8 +14217,8 @@ Graph.prototype._redraw = function() {
 Graph.prototype._setTranslation = function(offsetX, offsetY) {
     if (this.translation === undefined) {
         this.translation = {
-            "x": 0,
-            "y": 0
+            x: 0,
+            y: 0
         };
     }
 
@@ -14238,8 +14237,8 @@ Graph.prototype._setTranslation = function(offsetX, offsetY) {
  */
 Graph.prototype._getTranslation = function() {
     return {
-        "x": this.translation.x,
-        "y": this.translation.y
+        x: this.translation.x,
+        y: this.translation.y
     };
 };
 
@@ -14260,25 +14259,49 @@ Graph.prototype._getScale = function() {
     return this.scale;
 };
 
-Graph.prototype._xToCanvas = function(x) {
+/**
+ * Convert a horizontal point on the HTML canvas to the x-value of the model
+ * @param {number} x
+ * @returns {number}
+ * @private
+ */
+Graph.prototype._canvasToX = function(x) {
     return (x - this.translation.x) / this.scale;
 };
 
-Graph.prototype._canvasToX = function(x) {
+/**
+ * Convert an x-value in the model to a horizontal point on the HTML canvas
+ * @param {number} x
+ * @returns {number}
+ * @private
+ */
+Graph.prototype._xToCanvas = function(x) {
     return x * this.scale + this.translation.x;
 };
 
-Graph.prototype._yToCanvas = function(y) {
+/**
+ * Convert a vertical point on the HTML canvas to the y-value of the model
+ * @param {number} y
+ * @returns {number}
+ * @private
+ */
+Graph.prototype._canvasToY = function(y) {
     return (y - this.translation.y) / this.scale;
 };
 
-Graph.prototype._canvasToY = function(y) {
+/**
+ * Convert an y-value in the model to a vertical point on the HTML canvas
+ * @param {number} y
+ * @returns {number}
+ * @private
+ */
+Graph.prototype._yToCanvas = function(y) {
     return y * this.scale + this.translation.y ;
 };
 
 /**
  * Redraw all nodes
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
  * @param {CanvasRenderingContext2D}   ctx
  * @private
  */
@@ -14305,7 +14328,7 @@ Graph.prototype._drawNodes = function(ctx) {
 
 /**
  * Redraw all edges
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
  * @param {CanvasRenderingContext2D}   ctx
  * @private
  */
@@ -14341,7 +14364,7 @@ Graph.prototype._doStabilize = function() {
 
     var end = new Date();
 
-    // console.log("Stabilized in " + (end-start) + " ms, " + count + " iterations" ); // TODO: cleanup
+    // console.log('Stabilized in ' + (end-start) + ' ms, ' + count + ' iterations' ); // TODO: cleanup
 };
 
 /**
@@ -14498,7 +14521,7 @@ Graph.prototype._calculateForces = function() {
 
 /**
  * Check if any of the nodes is still moving
- * @param {number} vmin   the minimum velocity considered as "moving"
+ * @param {number} vmin   the minimum velocity considered as 'moving'
  * @return {boolean}      true if moving, false if non of the nodes is moving
  * @private
  */