improved example and cleaned up code a little

docs/network.html

@@ -1020,7 +1020,7 @@ All options defined per-node override these global settings.
 <p>
   Edges can be configured with different length and styling. To configure edges, provide an object named <code>edges</code> in the <code>options</code> for the Network.
   Because the length of an edge is a property of the physics simulation, you can change the length of the edge by changing the springLength in your selected physics solver.
-  To change the edge length of individual edges, you can use the <code>length</code> property in the <a href="Edges">edge definition</a>.
+  To change the edge length of individual edges, you can use the <code>length</code> property in the <a href="#Edges">edge definition</a>.
 </p>
 
 <p>

examples/network/33_animation.html

@@ -105,7 +105,7 @@
         nodes: nodes,
         edges: edges
       };
-      var options = {};
+      var options = {stabilizationIterations:3000};
       network = new vis.Network(container, data, options);
 
       // add event listeners
@@ -239,7 +239,12 @@
 <h2>Camera animations</h2>
 <div style="width:700px; font-size:14px;">
     You can move the view around programmatically using the .moveTo(options) function. The options supplied to this function can
-    also be (partially) supplied to the zoomExtent() function
+    also be (partially) supplied to the .zoomExtent() and .focusOnNode() methods. These are explained in the docs.
+    <br /><br/>
+    The buttons below take the fields from the table when they can. For instance, the "Animate with default settings." takes the position, scale and offset while using
+    the default animation values for duration and easing function. The focusOnNode takes everything except the position and the zoomExtent takes only the duration and easing function.
+    <br/><br/>
+    Here you can see a full description of the options you can supply to moveTo:
 </div>
 <pre>
 var moveToOptions = {

lib/network/Network.js

@@ -460,23 +460,6 @@ Network.prototype._findCenter = function(range) {
 };
 
 
-/**
- * center the network
- *
- * @param {object} range = {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
- */
-Network.prototype._getNetworkCenter = function(range) {
-  var center = this._findCenter(range);
-
-  center.x *= this.scale;
-  center.y *= this.scale;
-  center.x -= 0.5 * this.frame.canvas.clientWidth;
-  center.y -= 0.5 * this.frame.canvas.clientHeight;
-
-  return {x:-center.x,y:-center.y};
-};
-
-
 /**
  * This function zooms out to fit all data on screen based on amount of nodes
  *
@@ -538,17 +521,20 @@ Network.prototype.zoomExtent = function(animationOptions, initialZoom, disableSt
   }
 
 
-  this._setScale(zoomLevel);
-  var center = this._getNetworkCenter(range);
+  var center = this._findCenter(range);
   if (disableStart == false) {
-    this._setScale(scale);
-    var options = {targetTranslation: center, scale: zoomLevel, animation: animationOptions};
+    var options = {position: center, scale: zoomLevel, animation: animationOptions};
     this.moveTo(options);
     this.moving = true;
     this.start();
   }
   else {
-    this._setTranslation(center.x,center.y);
+    center.x *= zoomLevel;
+    center.y *= zoomLevel;
+    center.x -= 0.5 * this.frame.canvas.clientWidth;
+    center.y -= 0.5 * this.frame.canvas.clientHeight;
+    this._setScale(zoomLevel);
+    this._setTranslation(-center.x,-center.y);
   }
 };
 
@@ -2406,24 +2392,18 @@ Network.prototype.animateView = function (options) {
   this.sourceTranslation = this._getTranslation();
   this.targetScale = options.scale;
 
-  // directly supplying the target translation can be useful when using internally, like with zoomExtent()
-  if (options.targetTranslation !== undefined) {
-    this.targetTranslation = options.targetTranslation;
-  }
-  else {
-    // set the scale so the viewCenter is based on the correct zoom level. This is overridden in the transitionRedraw
-    // but at least then we'll have the target transition
-    this._setScale(this.targetScale);
-    var viewCenter = this.DOMtoCanvas({x: 0.5 * this.frame.canvas.clientWidth, y: 0.5 * this.frame.canvas.clientHeight});
-    var distanceFromCenter = { // offset from view, distance view has to change by these x and y to center the node
-      x: viewCenter.x - options.position.x,
-      y: viewCenter.y - options.position.y
-    };
-    this.targetTranslation = {
-      x: this.sourceTranslation.x + distanceFromCenter.x * this.targetScale + options.offset.x,
-      y: this.sourceTranslation.y + distanceFromCenter.y * this.targetScale + options.offset.y
-    };
-  }
+  // set the scale so the viewCenter is based on the correct zoom level. This is overridden in the transitionRedraw
+  // but at least then we'll have the target transition
+  this._setScale(this.targetScale);
+  var viewCenter = this.DOMtoCanvas({x: 0.5 * this.frame.canvas.clientWidth, y: 0.5 * this.frame.canvas.clientHeight});
+  var distanceFromCenter = { // offset from view, distance view has to change by these x and y to center the node
+    x: viewCenter.x - options.position.x,
+    y: viewCenter.y - options.position.y
+  };
+  this.targetTranslation = {
+    x: this.sourceTranslation.x + distanceFromCenter.x * this.targetScale + options.offset.x,
+    y: this.sourceTranslation.y + distanceFromCenter.y * this.targetScale + options.offset.y
+  };
 
   // if the time is set to 0, don't do an animation
   if (options.animation.duration == 0) {