Refactoring in Canvas.js (#3030)

lib/network/modules/Canvas.js

@@ -189,12 +189,7 @@ class Canvas {
     }
     else {
       let ctx = this.frame.canvas.getContext("2d");
-      this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio ||
-      ctx.mozBackingStorePixelRatio ||
-      ctx.msBackingStorePixelRatio ||
-      ctx.oBackingStorePixelRatio ||
-      ctx.backingStorePixelRatio || 1);
-
+      this._setPixelRatio(ctx);
       this.frame.canvas.getContext("2d").setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
     }
 
@@ -264,11 +259,7 @@ class Canvas {
     // update the pixel ratio
     let ctx = this.frame.canvas.getContext("2d");
     let previousRatio = this.pixelRatio; // we cache this because the camera state storage needs the old value
-    this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio ||
-      ctx.mozBackingStorePixelRatio ||
-      ctx.msBackingStorePixelRatio ||
-      ctx.oBackingStorePixelRatio ||
-      ctx.backingStorePixelRatio || 1);
+    this._setPixelRatio(ctx);
 
     if (width != this.options.width || height != this.options.height || this.frame.style.width != width || this.frame.style.height != height) {
       this._getCameraState(previousRatio);
@@ -296,26 +287,29 @@ class Canvas {
       // this would adapt the width of the canvas to the width from 100% if and only if
       // there is a change.
 
+      let newWidth  = Math.round(this.frame.canvas.clientWidth  * this.pixelRatio);
+      let newHeight = Math.round(this.frame.canvas.clientHeight * this.pixelRatio);
+
       // store the camera if there is a change in size.
-      if (this.frame.canvas.width != Math.round(this.frame.canvas.clientWidth * this.pixelRatio) || this.frame.canvas.height != Math.round(this.frame.canvas.clientHeight * this.pixelRatio)) {
+      if (this.frame.canvas.width !== newWidth || this.frame.canvas.height !== newHeight) {
         this._getCameraState(previousRatio);
       }
 
-      if (this.frame.canvas.width != Math.round(this.frame.canvas.clientWidth * this.pixelRatio)) {
-        this.frame.canvas.width = Math.round(this.frame.canvas.clientWidth * this.pixelRatio);
+      if (this.frame.canvas.width !== newWidth) {
+        this.frame.canvas.width = newWidth;
         emitEvent = true;
       }
-      if (this.frame.canvas.height != Math.round(this.frame.canvas.clientHeight * this.pixelRatio)) {
-        this.frame.canvas.height = Math.round(this.frame.canvas.clientHeight * this.pixelRatio);
+      if (this.frame.canvas.height !== newHeight) {
+        this.frame.canvas.height = newHeight;
         emitEvent = true;
       }
     }
 
     if (emitEvent === true) {
       this.body.emitter.emit('resize', {
-        width:Math.round(this.frame.canvas.width / this.pixelRatio),
-        height:Math.round(this.frame.canvas.height / this.pixelRatio),
-        oldWidth: Math.round(oldWidth / this.pixelRatio),
+        width    : Math.round(this.frame.canvas.width / this.pixelRatio),
+        height   : Math.round(this.frame.canvas.height / this.pixelRatio),
+        oldWidth : Math.round(oldWidth / this.pixelRatio),
         oldHeight: Math.round(oldHeight / this.pixelRatio)
       });
 
@@ -330,6 +324,18 @@ class Canvas {
   };
 
 
+  /**
+   * @private
+   */
+  _setPixelRatio(ctx) {
+    this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio ||
+      ctx.mozBackingStorePixelRatio ||
+      ctx.msBackingStorePixelRatio  ||
+      ctx.oBackingStorePixelRatio   ||
+      ctx.backingStorePixelRatio    || 1);
+  }
+
+
   /**
    * Convert the X coordinate in DOM-space (coordinate point in browser relative to the container div) to
    * the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon)
@@ -397,4 +403,4 @@ class Canvas {
 
 }
 
-export default Canvas;
+export default Canvas;