patched redraw requests with image load callbacks during stabilization. Fixed size option correctly working for images and circular images.

lib/network/modules/CanvasRenderer.js

@@ -21,22 +21,38 @@ class CanvasRenderer {
     this.renderingActive = false;
     this.renderRequests = 0;
     this.pixelRatio = undefined;
+    this.allowRedrawRequests = true;
 
     this.dragging = false;
 
-    this.body.emitter.on("dragStart",       () => {this.dragging = true;});
-    this.body.emitter.on("dragEnd",         () => this.dragging = false);
-    this.body.emitter.on("_redraw",         () => {if (this.renderingActive === false) {this._redraw();}});
-    this.body.emitter.on("_requestRedraw",  this._requestRedraw.bind(this));
-    this.body.emitter.on("_startRendering", () => {this.renderRequests += 1; this.renderingActive = true; this.startRendering();});
-    this.body.emitter.on("_stopRendering",  () => {this.renderRequests -= 1; this.renderingActive = this.renderRequests > 0;});
+    this.body.emitter.on("dragStart", () => {
+      this.dragging = true;
+    });
+    this.body.emitter.on("dragEnd", () => this.dragging = false);
+    this.body.emitter.on("_redraw", () => {
+      if (this.renderingActive === false) {
+        this._redraw();
+      }
+    });
+    this.body.emitter.on("_blockRedrawRequests", () => {this.allowRedrawRequests = false;});
+    this.body.emitter.on("_allowRedrawRequests", () => {this.allowRedrawRequests = true; });
+    this.body.emitter.on("_requestRedraw", this._requestRedraw.bind(this));
+    this.body.emitter.on("_startRendering", () => {
+      this.renderRequests += 1;
+      this.renderingActive = true;
+      this.startRendering();
+    });
+    this.body.emitter.on("_stopRendering", () => {
+      this.renderRequests -= 1;
+      this.renderingActive = this.renderRequests > 0;
+    });
 
     this.options = {};
     this.defaultOptions = {
       hideEdgesOnDrag: false,
       hideNodesOnDrag: false
     }
-    util.extend(this.options,this.defaultOptions);
+    util.extend(this.options, this.defaultOptions);
 
     this._determineBrowserMethod();
   }
@@ -94,10 +110,10 @@ class CanvasRenderer {
    * @private
    */
   _requestRedraw() {
-    if (this.redrawRequested !== true && this.renderingActive === false) {
+    if (this.redrawRequested !== true && this.renderingActive === false && this.allowRedrawRequests === true) {
       this.redrawRequested = true;
       if (this.requiresTimeout === true) {
-        window.setTimeout(this._redraw.bind(this, false),0);
+        window.setTimeout(this._redraw.bind(this, false), 0);
       }
       else {
         window.requestAnimationFrame(this._redraw.bind(this, false));
@@ -132,7 +148,6 @@ class CanvasRenderer {
     ctx.clearRect(0, 0, w, h);
 
 
-
     this.body.emitter.emit("beforeDrawing", ctx);
 
     // set scaling and translation
@@ -176,7 +191,7 @@ class CanvasRenderer {
    * @param {Boolean} [alwaysShow]
    * @private
    */
-  _drawNodes(ctx,alwaysShow = false) {
+  _drawNodes(ctx, alwaysShow = false) {
     var nodes = this.body.nodes;
     var nodeIndices = this.body.nodeIndices;
     var node;
@@ -195,7 +210,7 @@ class CanvasRenderer {
         }
         // todo: replace check
         //else if (node.inArea() === true) {
-          node.draw(ctx);
+        node.draw(ctx);
         //}
       }
     }

lib/network/modules/PhysicsEngine.js

@@ -2,12 +2,12 @@
  * Created by Alex on 2/23/2015.
  */
 
-import BarnesHutSolver from "./components/physics/BarnesHutSolver";
-import Repulsion from "./components/physics/RepulsionSolver";
-import HierarchicalRepulsion from "./components/physics/HierarchicalRepulsionSolver";
-import SpringSolver from "./components/physics/SpringSolver";
-import HierarchicalSpringSolver from "./components/physics/HierarchicalSpringSolver";
-import CentralGravitySolver from "./components/physics/CentralGravitySolver";
+import BarnesHutSolver from './components/physics/BarnesHutSolver';
+import Repulsion from './components/physics/RepulsionSolver';
+import HierarchicalRepulsion from './components/physics/HierarchicalRepulsionSolver';
+import SpringSolver from './components/physics/SpringSolver';
+import HierarchicalSpringSolver from './components/physics/HierarchicalSpringSolver';
+import CentralGravitySolver from './components/physics/CentralGravitySolver';
 
 var util = require('../../util');
 
@@ -67,23 +67,23 @@ class PhysicsEngine {
     }
     util.extend(this.options, this.defaultOptions);
 
-    this.body.emitter.on("initPhysics",     () => {this.initPhysics();});
-    this.body.emitter.on("resetPhysics",    () => {this.stopSimulation(); this.ready = false;});
-    this.body.emitter.on("disablePhysics",  () => {this.physicsEnabled = false; this.stopSimulation();});
-    this.body.emitter.on("restorePhysics",  () => {
+    this.body.emitter.on('initPhysics',     () => {this.initPhysics();});
+    this.body.emitter.on('resetPhysics',    () => {this.stopSimulation(); this.ready = false;});
+    this.body.emitter.on('disablePhysics',  () => {this.physicsEnabled = false; this.stopSimulation();});
+    this.body.emitter.on('restorePhysics',  () => {
       this.setOptions(this.options);
       if (this.ready === true) {
         this.stabilized = false;
         this.runSimulation();
       }
     });
-    this.body.emitter.on("startSimulation", () => {
+    this.body.emitter.on('startSimulation', () => {
       if (this.ready === true) {
         this.stabilized = false;
         this.runSimulation();
       }
     })
-    this.body.emitter.on("stopSimulation",  () => {this.stopSimulation();});
+    this.body.emitter.on('stopSimulation',  () => {this.stopSimulation();});
   }
 
   setOptions(options) {
@@ -104,12 +104,12 @@ class PhysicsEngine {
 
   init() {
     var options;
-    if (this.options.solver === "repulsion") {
+    if (this.options.solver === 'repulsion') {
       options = this.options.repulsion;
       this.nodesSolver = new Repulsion(this.body, this.physicsBody, options);
       this.edgesSolver = new SpringSolver(this.body, this.physicsBody, options);
     }
-    else if (this.options.solver === "hierarchicalRepulsion") {
+    else if (this.options.solver === 'hierarchicalRepulsion') {
       options = this.options.hierarchicalRepulsion;
       this.nodesSolver = new HierarchicalRepulsion(this.body, this.physicsBody, options);
       this.edgesSolver = new HierarchicalSpringSolver(this.body, this.physicsBody, options);
@@ -128,26 +128,27 @@ class PhysicsEngine {
     if (this.physicsEnabled === true) {
       this.stabilized = false;
       if (this.options.stabilization.enabled === true) {
+        this.body.emitter.emit('_blockRedrawRequests');
         this.stabilize();
       }
       else {
         this.ready = true;
-        this.body.emitter.emit("zoomExtent", {duration: 0}, true)
+        this.body.emitter.emit('zoomExtent', {duration: 0}, true)
         this.runSimulation();
       }
     }
     else {
       this.ready = true;
-      this.body.emitter.emit("_redraw");
+      this.body.emitter.emit('_redraw');
     }
   }
 
   stopSimulation() {
     this.stabilized = true;
     if (this.viewFunction !== undefined) {
-      this.body.emitter.off("initRedraw", this.viewFunction);
+      this.body.emitter.off('initRedraw', this.viewFunction);
       this.viewFunction = undefined;
-      this.body.emitter.emit("_stopRendering");
+      this.body.emitter.emit('_stopRendering');
     }
   }
 
@@ -155,12 +156,12 @@ class PhysicsEngine {
     if (this.physicsEnabled === true) {
       if (this.viewFunction === undefined) {
         this.viewFunction = this.simulationStep.bind(this);
-        this.body.emitter.on("initRedraw", this.viewFunction);
-        this.body.emitter.emit("_startRendering");
+        this.body.emitter.on('initRedraw', this.viewFunction);
+        this.body.emitter.emit('_startRendering');
       }
     }
     else {
-      this.body.emitter.emit("_redraw");
+      this.body.emitter.emit('_redraw');
     }
   }
 
@@ -180,7 +181,7 @@ class PhysicsEngine {
 
     if (this.stabilized === true) {
       if (this.stabilizationIterations > 1) {
-        // trigger the "stabilized" event.
+        // 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
         // be able to catch it
@@ -191,7 +192,7 @@ class PhysicsEngine {
         this.stabilizationIterations = 0;
         this.startedStabilization = false;
         setTimeout(function () {
-          me.body.emitter.emit("stabilized", params);
+          me.body.emitter.emit('stabilized', params);
         }, 0);
       }
       else {
@@ -202,7 +203,7 @@ class PhysicsEngine {
   }
 
   /**
-   * A single simulation step (or "tick") in the physics simulation
+   * A single simulation step (or 'tick') in the physics simulation
    *
    * @private
    */
@@ -218,7 +219,7 @@ class PhysicsEngine {
       else {
         // this is here to ensure that there is no start event when the network is already stable.
         if (this.startedStabilization === false) {
-          this.body.emitter.emit("startStabilizing");
+          this.body.emitter.emit('startStabilizing');
           this.startedStabilization = true;
         }
       }
@@ -432,7 +433,7 @@ class PhysicsEngine {
     }
   
     if (this.stabilized === false && this.stabilizationSteps < this.options.stabilization.iterations) {
-      this.body.emitter.emit("stabilizationProgress", {steps: this.stabilizationSteps, total: this.options.stabilization.iterations});
+      this.body.emitter.emit('stabilizationProgress', {steps: this.stabilizationSteps, total: this.options.stabilization.iterations});
       setTimeout(this._stabilizationBatch.bind(this),0);
     }
     else {
@@ -441,16 +442,17 @@ class PhysicsEngine {
   }
 
   _finalizeStabilization() {
+    this.body.emitter.emit('_allowRedrawRequests');
     if (this.options.stabilization.zoomExtent === true) {
-      this.body.emitter.emit("zoomExtent", {duration:0});
+      this.body.emitter.emit('zoomExtent', {duration:0});
     }
 
     if (this.options.stabilization.onlyDynamicEdges === true) {
       this._restoreFrozenNodes();
     }
     
-    this.body.emitter.emit("stabilizationIterationsDone");
-    this.body.emitter.emit("_requestRedraw");
+    this.body.emitter.emit('stabilizationIterationsDone');
+    this.body.emitter.emit('_requestRedraw');
 
     this.ready = true;
   }

lib/network/modules/components/nodes/shapes/image.js

@@ -14,20 +14,14 @@ class Image extends CircleImageBase {
   resize() {
     if (!this.width || !this.height) {  // undefined or 0
       var width, height;
-      if (this.value) {
-        var scale = this.imageObj.height / this.imageObj.width;
-        if (scale !== undefined) {
-          width = this.options.size || this.imageObj.width;
-          height = this.options.size * scale || this.imageObj.height;
-        }
-        else {
-          width = 0;
-          height = 0;
-        }
+      var scale = this.imageObj.height / this.imageObj.width;
+      if (scale !== undefined) {
+        width = this.options.size * 2 || this.imageObj.width;
+        height = this.options.size * 2 * scale || this.imageObj.height;
       }
       else {
-        width = this.imageObj.width;
-        height = this.imageObj.height;
+        width = 0;
+        height = 0;
       }
       this.width = width;
       this.height = height;