- Fixed repeating stabilized event when the network is already stabilized.

HISTORY.md

@@ -24,6 +24,7 @@ http://visjs.org
 - Fixed infinite loop when an image can not be found and no brokenImage is provided.
 - Added getBoundingBox method.
 - Community fix for SVG images in IE11, thanks @dponch!
+- Fixed repeating stabilized event when the network is already stabilized.
 
 ### Graph2d
 

lib/network/Network.js

@@ -46,6 +46,7 @@ function Network (container, data, options) {
   this.renderTimestep = 1000 / this.renderRefreshRate; // ms -- saves calculation later on
   this.renderTime = 0;                                 // measured time it takes to render a frame
   this.physicsTime = 0;                                 // measured time it takes to render a frame
+  this.runDoubleSpeed = false;
   this.physicsDiscreteStepsize = 0.50;                 // discrete stepsize of the simulation
 
   this.initializing = true;
@@ -2149,6 +2150,23 @@ Network.prototype._discreteStepNodes = function() {
   return false;
 };
 
+
+Network.prototype._revertPhysicsState = function() {
+  var nodes = this.nodes;
+  for (var nodeId in nodes) {
+    if (nodes.hasOwnProperty(nodeId)) {
+      nodes[nodeId].revertPosition();
+    }
+  }
+}
+
+Network.prototype._revertPhysicsTick = function() {
+  this._doInAllActiveSectors("_revertPhysicsState");
+  if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
+    this._doInSupportSector("_revertPhysicsState");
+  }
+}
+
 /**
  * A single simulation step (or "tick") in the physics simulation
  *
@@ -2172,6 +2190,17 @@ Network.prototype._physicsTick = function() {
       // determine if the network has stabilzied
       this.moving = mainMovingStatus || supportMovingStatus;
 
+      if (this.moving == false) {
+        this._revertPhysicsTick();
+      }
+      else {
+        // this is here to ensure that there is no start event when the network is already stable.
+        if (this.startedStabilization == false) {
+          this.emit("startStabilization");
+          this.startedStabilization = true;
+        }
+      }
+
       this.stabilizationIterations++;
     }
   }
@@ -2193,13 +2222,17 @@ Network.prototype._animationStep = function() {
 
   var startTime = Date.now();
   this._physicsTick();
+  var physicsTime = Date.now() - startTime;
 
   // run double speed if it is a little graph
-  if (this.renderTimestep - this.renderTime > 2*this.physicsTime) {
+  if ((this.renderTimestep - this.renderTime > 2 * physicsTime || this.runDoubleSpeed == true)  && this.moving == true) {
     this._physicsTick();
-  }
 
-  this.physicsTime = Date.now() - startTime;
+    // this makes sure there is no jitter. The decision is taken once to run it at double speed.
+    if (this.renderTime != 0) {
+      this.runDoubleSpeed = true
+    }
+  }
 
   var renderStartTime = Date.now();
   this._redraw();
@@ -2219,11 +2252,6 @@ if (typeof window !== 'undefined') {
  */
 Network.prototype.start = function() {
   if (this.moving == true || this.xIncrement != 0 || this.yIncrement != 0 || this.zoomIncrement != 0) {
-    if (this.startedStabilization == false) {
-      this.emit("startStabilization");
-      this.startedStabilization = true;
-    }
-
     if (!this.timer) {
       if (this.requiresTimeout == true) {
         this.timer = window.setTimeout(this._animationStep.bind(this), this.renderTimestep); // wait this.renderTimeStep milliseconds and perform the animation step function
@@ -2235,7 +2263,8 @@ Network.prototype.start = function() {
   }
   else {
     this._redraw();
-    if (this.stabilizationIterations > 0) {
+    // this check is to ensure that the network does not emit these events if it was already stabilized and setOptions is called (setting moving to true and calling start())
+    if (this.stabilizationIterations > 1) {
       // trigger the "stabilized" event.
       // The event is triggered on the next tick, to prevent the case that
       // it is fired while initializing the Network, in which case you would not
@@ -2244,12 +2273,15 @@ Network.prototype.start = function() {
       var params = {
         iterations: me.stabilizationIterations
       };
-      me.stabilizationIterations = 0;
-      me.startedStabilization = false;
+      this.stabilizationIterations = 0;
+      this.startedStabilization = false;
       setTimeout(function () {
         me.emit("stabilized", params);
       }, 0);
     }
+    else {
+      this.stabilizationIterations = 0;
+    }
   }
 };
 

lib/network/Node.js

@@ -40,8 +40,6 @@ function Node(properties, imagelist, grouplist, networkConstants) {
 
   // set defaults for the properties
   this.id = undefined;
-  this.x = null;
-  this.y = null;
   this.allowedToMoveX = false;
   this.allowedToMoveY = false;
   this.xFixed = false;
@@ -64,6 +62,12 @@ function Node(properties, imagelist, grouplist, networkConstants) {
   this.fy = 0.0;  // external force y
   this.vx = 0.0;  // velocity x
   this.vy = 0.0;  // velocity y
+  this.x = null;
+  this.y = null;
+
+  // used for reverting to previous position on stabilization
+  this.previousState = {vx:0,vy:0,x:0,y:0};
+
   this.damping = networkConstants.physics.damping; // written every time gravity is calculated
   this.fixedData = {x:null,y:null};
 
@@ -87,6 +91,18 @@ function Node(properties, imagelist, grouplist, networkConstants) {
   this.parentEdgeId = null;
 }
 
+
+/**
+ *  Revert the position and velocity of the previous step.
+ */
+Node.prototype.revertPosition = function() {
+  this.x = this.previousState.x;
+  this.y = this.previousState.y;
+  this.vx = this.previousState.vx;
+  this.vy = this.previousState.vy;
+}
+
+
 /**
  * (re)setting the clustering variables and objects
  */
@@ -177,8 +193,7 @@ Node.prototype.setProperties = function(properties, constants) {
   // individual shape properties
   if (properties.radius !== undefined)         {this.baseRadiusValue = this.options.radius;}
   if (properties.color !== undefined)          {this.options.color = util.parseColor(properties.color);}
-
-  if (this.options.image!== undefined && this.options.image!= "") {
+  if (this.options.image !== undefined && this.options.image!= "") {
     if (this.imagelist) {
       this.imageObj = this.imagelist.load(this.options.image, this.options.brokenImage);
     }
@@ -342,11 +357,22 @@ Node.prototype._addForce = function(fx, fy) {
   this.fy += fy;
 };
 
+/**
+ * Store the state before the next step
+ */
+Node.prototype.storeState = function() {
+  this.previousState.x = this.x;
+  this.previousState.y = this.y;
+  this.previousState.vx = this.vx;
+  this.previousState.vy = this.vy;
+}
+
 /**
  * Perform one discrete step for the node
  * @param {number} interval    Time interval in seconds
  */
 Node.prototype.discreteStep = function(interval) {
+  this.storeState();
   if (!this.xFixed) {
     var dx   = this.damping * this.vx;     // damping force
     var ax   = (this.fx - dx) / this.options.mass;  // acceleration
@@ -378,6 +404,7 @@ Node.prototype.discreteStep = function(interval) {
  * @param {number} maxVelocity The speed limit imposed on the velocity
  */
 Node.prototype.discreteStepLimited = function(interval, maxVelocity) {
+  this.storeState();
   if (!this.xFixed) {
     var dx   = this.damping * this.vx;     // damping force
     var ax   = (this.fx - dx) / this.options.mass;  // acceleration