Changed navigation css per #51, added stabilizationIterations option to graph and docs per #52

dist/vis.css

@@ -428,36 +428,36 @@ div.graph-navigation:active {
 
 div.graph-navigation.up {
     background-image: url("img/graph/upArrow.png");
-    margin-top:520px;
-    margin-left:55px;
+    bottom:50px;
+    left:55px;
 }
 div.graph-navigation.down {
     background-image: url("img/graph/downArrow.png");
-    margin-top:560px;
-    margin-left:55px;
+    bottom:10px;
+    left:55px;
 }
 div.graph-navigation.left {
     background-image: url("img/graph/leftArrow.png");
-    margin-top:560px;
-    margin-left:15px;
+    bottom:10px;
+    left:15px;
 }
 div.graph-navigation.right {
     background-image: url("img/graph/rightArrow.png");
-    margin-top:560px;
-    margin-left:95px;
+    bottom:10px;
+    left:95px;
 }
 div.graph-navigation.zoomIn {
     background-image: url("img/graph/plus.png");
-    margin-top:560px;
-    margin-left:555px;
+    bottom:10px;
+    right:15px;
 }
 div.graph-navigation.zoomOut {
     background-image: url("img/graph/minus.png");
-    margin-top:560px;
-    margin-left:515px;
+    bottom:10px;
+    right:55px;
 }
 div.graph-navigation.zoomExtends {
     background-image: url("img/graph/zoomExtends.png");
-    margin-top:520px;
-    margin-left:555px;
+    bottom:50px;
+    right:15px;
 }

dist/vis.js

@@ -5,7 +5,7 @@
  * A dynamic, browser-based visualization library.
  *
  * @version 0.7.0-SNAPSHOT
- * @date    2014-03-05
+ * @date    2014-03-06
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -12507,7 +12507,7 @@ var HierarchicalLayoutMixin = {
     }
 
     // stabilize the system after positioning. This function calls zoomExtent.
-    this._doStabilize();
+    this._stabilize();
   },
 
 
@@ -13714,7 +13714,7 @@ var ClusterMixin = {
    // this is called here because if clusterin is disabled, the start and stabilize are called in
    // the setData function.
    if (this.stabilize) {
-     this._doStabilize();
+     this._stabilize();
    }
    this.start();
  },
@@ -15423,6 +15423,9 @@ var NavigationMixin = {
 
     this.navigationDivs['wrapper'] = document.createElement('div');
     this.navigationDivs['wrapper'].id = "graph-navigation_wrapper";
+    this.navigationDivs['wrapper'].style.position = "absolute";
+    this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
+    this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
     this.containerElement.insertBefore(this.navigationDivs['wrapper'],this.frame);
 
     for (var i = 0; i < navigationDivs.length; i++) {
@@ -15474,7 +15477,6 @@ var NavigationMixin = {
    * @private
    */
   _moveUp : function(event) {
-    console.log("here")
     this.yIncrement = this.constants.keyboard.speed.y;
     this.start(); // if there is no node movement, the calculation wont be done
     this._preventDefault(event);
@@ -15914,7 +15916,7 @@ function Graph (container, data, options) {
     smoothCurves: true,
     maxVelocity:  10,
     minVelocity:  0.1,   // px/s
-    maxIterations: 1000  // maximum number of iteration to stabilize
+    stabilizationIterations: 1000  // maximum number of iteration to stabilize
   };
   this.editMode = this.constants.dataManipulation.initiallyVisible;
 
@@ -16220,7 +16222,7 @@ Graph.prototype.setData = function(data, disableStart) {
   if (!disableStart) {
     // find a stable position or start animating to a stable position
     if (this.stabilize) {
-      this._doStabilize();
+      this._stabilize();
     }
     this.start();
   }
@@ -16240,6 +16242,7 @@ Graph.prototype.setOptions = function (options) {
     if (options.selectable !== undefined)      {this.selectable = options.selectable;}
     if (options.smoothCurves !== undefined)    {this.constants.smoothCurves = options.smoothCurves;}
     if (options.configurePhysics !== undefined){this.constants.configurePhysics = options.configurePhysics;}
+    if (options.stabilizationIterations !== undefined)   {this.constants.stabilizationIterations = options.stabilizationIterations;}
 
     if (options.onAdd) {
         this.triggerFunctions.add = options.onAdd;
@@ -16943,7 +16946,13 @@ Graph.prototype.setSize = function(width, height) {
   this.frame.canvas.height = this.frame.canvas.clientHeight;
 
   if (this.manipulationDiv !== undefined) {
-    this.manipulationDiv.style.width = this.frame.canvas.clientWidth;
+    this.manipulationDiv.style.width = this.frame.canvas.clientWidth + "px";
+  }
+  if (this.navigationDivs !== undefined) {
+    if (this.navigationDivs['wrapper'] !== undefined) {
+      this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
+      this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
+    }
   }
 
   this.emit('resize', {width:this.frame.canvas.width,height:this.frame.canvas.height});
@@ -17461,10 +17470,10 @@ Graph.prototype._drawEdges = function(ctx) {
  * Find a stable position for all nodes
  * @private
  */
-Graph.prototype._doStabilize = function() {
+Graph.prototype._stabilize = function() {
   // find stable position
   var count = 0;
-  while (this.moving && count < this.constants.maxIterations) {
+  while (this.moving && count < this.constants.stabilizationIterations) {
     this._physicsTick();
     count++;
   }

docs/graph.html

@@ -774,6 +774,14 @@ var options = {
       the nodes move to a stabe position visibly in an animated way.</td>
   </tr>
 
+<tr>
+    <td>stabilizationIterations</td>
+    <td>Number</td>
+    <td>1000</td>
+    <td>If stabilize is set to true, this number is the (maximum) amount of physics steps the stabilization process takes
+        before showing the result. If your simulation takes too long to stabilize, this number can be reduced. On the other hand, if your graph is not stabilized after loading, this number can be increased.</td>
+</tr>
+
   <tr>
     <td>width</td>
     <td>String</td>

src/graph/Graph.js

@@ -145,7 +145,7 @@ function Graph (container, data, options) {
     smoothCurves: true,
     maxVelocity:  10,
     minVelocity:  0.1,   // px/s
-    maxIterations: 1000  // maximum number of iteration to stabilize
+    stabilizationIterations: 1000  // maximum number of iteration to stabilize
   };
   this.editMode = this.constants.dataManipulation.initiallyVisible;
 
@@ -451,7 +451,7 @@ Graph.prototype.setData = function(data, disableStart) {
   if (!disableStart) {
     // find a stable position or start animating to a stable position
     if (this.stabilize) {
-      this._doStabilize();
+      this._stabilize();
     }
     this.start();
   }
@@ -471,6 +471,7 @@ Graph.prototype.setOptions = function (options) {
     if (options.selectable !== undefined)      {this.selectable = options.selectable;}
     if (options.smoothCurves !== undefined)    {this.constants.smoothCurves = options.smoothCurves;}
     if (options.configurePhysics !== undefined){this.constants.configurePhysics = options.configurePhysics;}
+    if (options.stabilizationIterations !== undefined)   {this.constants.stabilizationIterations = options.stabilizationIterations;}
 
     if (options.onAdd) {
         this.triggerFunctions.add = options.onAdd;
@@ -1174,7 +1175,13 @@ Graph.prototype.setSize = function(width, height) {
   this.frame.canvas.height = this.frame.canvas.clientHeight;
 
   if (this.manipulationDiv !== undefined) {
-    this.manipulationDiv.style.width = this.frame.canvas.clientWidth;
+    this.manipulationDiv.style.width = this.frame.canvas.clientWidth + "px";
+  }
+  if (this.navigationDivs !== undefined) {
+    if (this.navigationDivs['wrapper'] !== undefined) {
+      this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
+      this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
+    }
   }
 
   this.emit('resize', {width:this.frame.canvas.width,height:this.frame.canvas.height});
@@ -1692,10 +1699,10 @@ Graph.prototype._drawEdges = function(ctx) {
  * Find a stable position for all nodes
  * @private
  */
-Graph.prototype._doStabilize = function() {
+Graph.prototype._stabilize = function() {
   // find stable position
   var count = 0;
-  while (this.moving && count < this.constants.maxIterations) {
+  while (this.moving && count < this.constants.stabilizationIterations) {
     this._physicsTick();
     count++;
   }

src/graph/css/graph-navigation.css

@@ -27,36 +27,36 @@ div.graph-navigation:active {
 
 div.graph-navigation.up {
     background-image: url("img/graph/upArrow.png");
-    margin-top:520px;
-    margin-left:55px;
+    bottom:50px;
+    left:55px;
 }
 div.graph-navigation.down {
     background-image: url("img/graph/downArrow.png");
-    margin-top:560px;
-    margin-left:55px;
+    bottom:10px;
+    left:55px;
 }
 div.graph-navigation.left {
     background-image: url("img/graph/leftArrow.png");
-    margin-top:560px;
-    margin-left:15px;
+    bottom:10px;
+    left:15px;
 }
 div.graph-navigation.right {
     background-image: url("img/graph/rightArrow.png");
-    margin-top:560px;
-    margin-left:95px;
+    bottom:10px;
+    left:95px;
 }
 div.graph-navigation.zoomIn {
     background-image: url("img/graph/plus.png");
-    margin-top:560px;
-    margin-left:555px;
+    bottom:10px;
+    right:15px;
 }
 div.graph-navigation.zoomOut {
     background-image: url("img/graph/minus.png");
-    margin-top:560px;
-    margin-left:515px;
+    bottom:10px;
+    right:55px;
 }
 div.graph-navigation.zoomExtends {
     background-image: url("img/graph/zoomExtends.png");
-    margin-top:520px;
-    margin-left:555px;
+    bottom:50px;
+    right:15px;
 }

src/graph/graphMixins/ClusterMixin.js

@@ -22,7 +22,7 @@ var ClusterMixin = {
    // this is called here because if clusterin is disabled, the start and stabilize are called in
    // the setData function.
    if (this.stabilize) {
-     this._doStabilize();
+     this._stabilize();
    }
    this.start();
  },

src/graph/graphMixins/HierarchicalLayoutMixin.js

@@ -96,7 +96,7 @@ var HierarchicalLayoutMixin = {
     }
 
     // stabilize the system after positioning. This function calls zoomExtent.
-    this._doStabilize();
+    this._stabilize();
   },
 
 

src/graph/graphMixins/NavigationMixin.js

@@ -30,6 +30,9 @@ var NavigationMixin = {
 
     this.navigationDivs['wrapper'] = document.createElement('div');
     this.navigationDivs['wrapper'].id = "graph-navigation_wrapper";
+    this.navigationDivs['wrapper'].style.position = "absolute";
+    this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
+    this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
     this.containerElement.insertBefore(this.navigationDivs['wrapper'],this.frame);
 
     for (var i = 0; i < navigationDivs.length; i++) {
@@ -81,7 +84,6 @@ var NavigationMixin = {
    * @private
    */
   _moveUp : function(event) {
-    console.log("here")
     this.yIncrement = this.constants.keyboard.speed.y;
     this.start(); // if there is no node movement, the calculation wont be done
     this._preventDefault(event);