- Fixed upscaling when the window size increases.

- Accepted pull request #1544, thanks @felixhayashi!
- Fixed documented bug in #1544.

HISTORY.md

@@ -18,6 +18,9 @@ http://visjs.org
 - Fixed #1404, made the array returned by findNode match the docs.
 - Added #1138, enable the user to define the color of the shadows for nodes and edges.
 - Fixed #1528, #1278, avoided ID's being cast to string for methods that return ID's as well as storePositions casting to string.
+- Fixed upscaling when the window size increases.
+- Accepted pull request #1544, thanks @felixhayashi!
+- Fixed documented bug in #1544.
 
 ## 2015-12-18, version 4.11.0
 

dist/vis.css

@@ -1121,14 +1121,17 @@ div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends {
 
 div.vis-color-picker {
   position:absolute;
+  top: 0px;
+  left: 30px;
   margin-top:-140px;
   margin-left:30px;
-  width:293px;
-  height:425px;
+  width:310px;
+  height:444px;
+  z-index: 1;
   padding: 10px;
   border-radius:15px;
   background-color:#ffffff;
-  display:none;
+  display: none;
   box-shadow: rgba(0,0,0,0.5) 0px 0px 10px 0px;
 }
 
@@ -1138,8 +1141,8 @@ div.vis-color-picker div.vis-arrow {
   left:5px;
 }
 
-div.vis-color-picker div.vis-arrow:after,
-div.vis-color-picker div.vis-arrow:before {
+div.vis-color-picker div.vis-arrow::after,
+div.vis-color-picker div.vis-arrow::before {
   right: 100%;
   top: 50%;
   border: solid transparent;

dist/vis.js

@@ -5,7 +5,7 @@
  * A dynamic, browser-based visualization library.
  *
  * @version 4.11.1-SNAPSHOT
- * @date    2016-01-04
+ * @date    2016-01-05
  *
  * @license
  * Copyright (C) 2011-2015 Almende B.V, http://almende.com
@@ -22257,7 +22257,7 @@ return /******/ (function(modules) { // webpackBootstrap
               // a header for the category
               this._makeHeader(option);
 
-              // get the suboptions
+              // get the sub options
               this._handleObject(this.configureOptions[option], [option]);
             }
             counter++;
@@ -22288,7 +22288,7 @@ return /******/ (function(modules) { // webpackBootstrap
         }
 
         this._push();
-        this.colorPicker.insertTo(this.container);
+        //~ this.colorPicker.insertTo(this.container);
       }
 
       /**
@@ -22702,17 +22702,25 @@ return /******/ (function(modules) { // webpackBootstrap
       value: function _showColorPicker(value, div, path) {
         var _this6 = this;
 
-        var rect = div.getBoundingClientRect();
-        var bodyRect = document.body.getBoundingClientRect();
-        var pickerX = rect.left + rect.width + 5;
-        var pickerY = rect.top - bodyRect.top + rect.height + 2;
-        this.colorPicker.show(pickerX, pickerY);
+        // clear the callback from this div
+        div.onclick = function () {};
+
+        this.colorPicker.insertTo(div);
+        this.colorPicker.show();
+
         this.colorPicker.setColor(value);
-        this.colorPicker.setCallback(function (color) {
+        this.colorPicker.setUpdateCallback(function (color) {
           var colorString = 'rgba(' + color.r + ',' + color.g + ',' + color.b + ',' + color.a + ')';
           div.style.backgroundColor = colorString;
           _this6._update(colorString, path);
         });
+
+        // on close of the colorpicker, restore the callback.
+        this.colorPicker.setCloseCallback(function () {
+          div.onclick = function () {
+            _this6._showColorPicker(value, div, path);
+          };
+        });
       }
 
       /**
@@ -22924,6 +22932,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
       // bound by
       this.updateCallback = function () {};
+      this.closeCallback = function () {};
 
       // create all DOM elements
       this._create();
@@ -22953,12 +22962,26 @@ return /******/ (function(modules) { // webpackBootstrap
        * @param callback
        */
     }, {
-      key: 'setCallback',
-      value: function setCallback(callback) {
+      key: 'setUpdateCallback',
+      value: function setUpdateCallback(callback) {
         if (typeof callback === 'function') {
           this.updateCallback = callback;
         } else {
-          throw new Error("Function attempted to set as colorPicker callback is not a function.");
+          throw new Error("Function attempted to set as colorPicker update callback is not a function.");
+        }
+      }
+
+      /**
+       * the callback is executed on apply and save. Bind it to the application
+       * @param callback
+       */
+    }, {
+      key: 'setCloseCallback',
+      value: function setCloseCallback(callback) {
+        if (typeof callback === 'function') {
+          this.closeCallback = callback;
+        } else {
+          throw new Error("Function attempted to set as colorPicker closing callback is not a function.");
         }
       }
     }, {
@@ -23029,17 +23052,19 @@ return /******/ (function(modules) { // webpackBootstrap
       }
 
       /**
-       * this shows the color picker at a location. The hue circle is constructed once and stored.
-       * @param x
-       * @param y
+       * this shows the color picker.
+       * The hue circle is constructed once and stored.
        */
     }, {
       key: 'show',
-      value: function show(x, y) {
+      value: function show() {
+        if (this.closeCallback !== undefined) {
+          this.closeCallback();
+          this.closeCallback = undefined;
+        }
+
         this.applied = false;
         this.frame.style.display = 'block';
-        this.frame.style.top = y + 'px';
-        this.frame.style.left = x + 'px';
         this._generateHueCircle();
       }
 
@@ -23066,6 +23091,12 @@ return /******/ (function(modules) { // webpackBootstrap
         }
 
         this.frame.style.display = 'none';
+
+        // call the closing callback, restoring the onclick method.
+        if (this.closeCallback !== undefined) {
+          this.closeCallback();
+          this.closeCallback = undefined;
+        }
       }
 
       /**
@@ -23165,7 +23196,7 @@ return /******/ (function(modules) { // webpackBootstrap
       }
 
       /**
-       * update the colorpicker. A black circle overlays the hue circle to mimic the brightness decreasing.
+       * update the color picker. A black circle overlays the hue circle to mimic the brightness decreasing.
        * @param rgba
        * @private
        */
@@ -30365,12 +30396,7 @@ return /******/ (function(modules) { // webpackBootstrap
     }, {
       key: 'distanceToBorder',
       value: function distanceToBorder(ctx, angle) {
-        this.resize(ctx);
-        var a = this.width / 2;
-        var b = this.height / 2;
-        var w = Math.sin(angle) * a;
-        var h = Math.cos(angle) * b;
-        return a * b / Math.sqrt(w * w + h * h);
+        return this._distanceToBorder(ctx, angle);
       }
     }]);
 
@@ -37254,8 +37280,19 @@ return /******/ (function(modules) { // webpackBootstrap
       value: function _setCameraState() {
         if (this.cameraState.scale !== undefined && this.frame.canvas.clientWidth !== 0 && this.frame.canvas.clientHeight !== 0 && this.pixelRatio !== 0 && this.cameraState.previousWidth > 0) {
 
-          this.body.view.scale = this.cameraState.scale * Math.min(this.frame.canvas.width / this.pixelRatio / this.cameraState.previousWidth, this.frame.canvas.height / this.pixelRatio / this.cameraState.previousHeight);
+          var widthRatio = this.frame.canvas.width / this.pixelRatio / this.cameraState.previousWidth;
+          var heightRatio = this.frame.canvas.height / this.pixelRatio / this.cameraState.previousHeight;
+          var newScale = this.cameraState.scale;
+
+          if (widthRatio != 1 && heightRatio != 1) {
+            newScale = this.cameraState.scale * 0.5 * (widthRatio + heightRatio);
+          } else if (widthRatio != 1) {
+            newScale = this.cameraState.scale * widthRatio;
+          } else if (heightRatio != 1) {
+            newScale = this.cameraState.scale * heightRatio;
+          }
 
+          this.body.view.scale = newScale;
           // this comes from the view module.
           var currentViewCenter = this.DOMtoCanvas({
             x: 0.5 * this.frame.canvas.clientWidth,
@@ -37418,13 +37455,13 @@ return /******/ (function(modules) { // webpackBootstrap
         var oldWidth = this.frame.canvas.width;
         var oldHeight = this.frame.canvas.height;
 
-        // update the pixelratio
+        // update the pixel ratio
         var ctx = this.frame.canvas.getContext("2d");
-        var previousRation = this.pixelRatio; // we cache this because the camera state storage needs the old value
+        var 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);
 
         if (width != this.options.width || height != this.options.height || this.frame.style.width != width || this.frame.style.height != height) {
-          this._getCameraState(previousRation);
+          this._getCameraState(previousRatio);
 
           this.frame.style.width = width;
           this.frame.style.height = height;
@@ -37445,7 +37482,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
           // 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)) {
-            this._getCameraState(previousRation);
+            this._getCameraState(previousRatio);
           }
 
           if (this.frame.canvas.width != Math.round(this.frame.canvas.clientWidth * this.pixelRatio)) {
@@ -40929,7 +40966,7 @@ return /******/ (function(modules) { // webpackBootstrap
         // restore the state of any bound functions or events, remove control nodes, restore physics
         this._clean();
 
-        // reset global letiables
+        // reset global variables
         this.manipulationDOM = {};
 
         // if the gui is enabled, draw all elements.

lib/network/modules/Canvas.js

@@ -105,8 +105,21 @@ class Canvas {
       this.pixelRatio !== 0 &&
       this.cameraState.previousWidth > 0) {
 
-      this.body.view.scale = this.cameraState.scale * Math.min((this.frame.canvas.width / this.pixelRatio) / this.cameraState.previousWidth,(this.frame.canvas.height / this.pixelRatio) / this.cameraState.previousHeight);
+      let widthRatio = (this.frame.canvas.width / this.pixelRatio) / this.cameraState.previousWidth;
+      let heightRatio = (this.frame.canvas.height / this.pixelRatio) / this.cameraState.previousHeight;
+      let newScale = this.cameraState.scale;
 
+      if (widthRatio != 1 && heightRatio != 1) {
+        newScale = this.cameraState.scale * 0.5 * (widthRatio + heightRatio);
+      }
+      else if (widthRatio != 1) {
+        newScale = this.cameraState.scale * widthRatio;
+      }
+      else if (heightRatio != 1) {
+        newScale = this.cameraState.scale * heightRatio;
+      }
+
+      this.body.view.scale = newScale;
       // this comes from the view module.
       var currentViewCenter = this.DOMtoCanvas({
         x: 0.5 * this.frame.canvas.clientWidth,
@@ -241,9 +254,9 @@ class Canvas {
     let oldWidth = this.frame.canvas.width;
     let oldHeight = this.frame.canvas.height;
 
-    // update the pixelratio
+    // update the pixel ratio
     let ctx = this.frame.canvas.getContext("2d");
-    let previousRation = this.pixelRatio; // we cache this because the camera state storage needs the old value
+    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 ||
@@ -251,7 +264,7 @@ class Canvas {
       ctx.backingStorePixelRatio || 1);
 
     if (width != this.options.width || height != this.options.height || this.frame.style.width != width || this.frame.style.height != height) {
-      this._getCameraState(previousRation);
+      this._getCameraState(previousRatio);
 
       this.frame.style.width = width;
       this.frame.style.height = height;
@@ -273,7 +286,7 @@ class Canvas {
 
       // 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)) {
-        this._getCameraState(previousRation);
+        this._getCameraState(previousRatio);
       }
 
       if (this.frame.canvas.width != Math.round(this.frame.canvas.clientWidth * this.pixelRatio)) {

lib/network/modules/ManipulationSystem.js

@@ -110,6 +110,7 @@ class ManipulationSystem {
     }
   }
 
+
   enableEditMode() {
     this.editMode = true;
 
@@ -143,7 +144,7 @@ class ManipulationSystem {
     // restore the state of any bound functions or events, remove control nodes, restore physics
     this._clean();
 
-    // reset global letiables
+    // reset global variables
     this.manipulationDOM = {};
 
     // if the gui is enabled, draw all elements.

lib/shared/ColorPicker.js

@@ -16,6 +16,7 @@ class ColorPicker {
 
     // bound by
     this.updateCallback = () => {};
+    this.closeCallback = () => {};
 
     // create all DOM elements
     this._create();
@@ -42,12 +43,25 @@ class ColorPicker {
    * the callback is executed on apply and save. Bind it to the application
    * @param callback
    */
-  setCallback(callback) {
+  setUpdateCallback(callback) {
     if (typeof callback === 'function') {
       this.updateCallback = callback;
     }
     else {
-      throw new Error("Function attempted to set as colorPicker callback is not a function.");
+      throw new Error("Function attempted to set as colorPicker update callback is not a function.");
+    }
+  }
+
+  /**
+   * the callback is executed on apply and save. Bind it to the application
+   * @param callback
+   */
+  setCloseCallback(callback) {
+    if (typeof callback === 'function') {
+      this.closeCallback = callback;
+    }
+    else {
+      throw new Error("Function attempted to set as colorPicker closing callback is not a function.");
     }
   }
 
@@ -123,6 +137,11 @@ class ColorPicker {
    * The hue circle is constructed once and stored.
    */
   show() {
+    if (this.closeCallback !== undefined) {
+      this.closeCallback();
+      this.closeCallback = undefined;
+    }
+
     this.applied = false;
     this.frame.style.display = 'block';
     this._generateHueCircle();
@@ -147,6 +166,12 @@ class ColorPicker {
     }
 
     this.frame.style.display = 'none';
+
+    // call the closing callback, restoring the onclick method.
+    if (this.closeCallback !== undefined) {
+      this.closeCallback();
+      this.closeCallback = undefined;
+    }
   }
 
 
@@ -240,7 +265,7 @@ class ColorPicker {
 
 
   /**
-   * update the colorpicker. A black circle overlays the hue circle to mimic the brightness decreasing.
+   * update the color picker. A black circle overlays the hue circle to mimic the brightness decreasing.
    * @param rgba
    * @private
    */

lib/shared/Configurator.js

@@ -140,7 +140,7 @@ class Configurator {
           // a header for the category
           this._makeHeader(option);
 
-          // get the suboptions
+          // get the sub options
           this._handleObject(this.configureOptions[option], [option]);
         }
         counter++;
@@ -530,14 +530,25 @@ class Configurator {
    * @private
    */
   _showColorPicker(value, div, path) {
+    // clear the callback from this div
+    div.onclick = function() {};
+
     this.colorPicker.insertTo(div);
     this.colorPicker.show();
+
     this.colorPicker.setColor(value);
-    this.colorPicker.setCallback((color) => {
+    this.colorPicker.setUpdateCallback((color) => {
       let colorString = 'rgba(' + color.r + ',' + color.g + ',' + color.b + ',' + color.a + ')';
       div.style.backgroundColor = colorString;
       this._update(colorString,path);
-    })
+    });
+
+    // on close of the colorpicker, restore the callback.
+    this.colorPicker.setCloseCallback(() => {
+      div.onclick = () => {
+        this._showColorPicker(value,div,path);
+      };
+    });
   }