Merge remote-tracking branch 'origin/v4' into v4

Conflicts:
	lib/network/modules/components/edges/BezierEdgeDynamic.js

lib/network/Network.js

@@ -111,7 +111,7 @@ function Network (container, data, options) {
   this.configurationSystem = new ConfigurationSystem(this);
 
   // create the DOM elements
-  this.canvas.create();
+  this.canvas._create();
 
   // apply options
   this.setOptions(options);
@@ -125,7 +125,6 @@ function Network (container, data, options) {
 Emitter(Network.prototype);
 
 
-
 /**
  * Set options
  * @param {Object} options

lib/network/modules/Canvas.js

@@ -13,6 +13,7 @@ let util = require('../../util');
 class Canvas {
   constructor(body) {
     this.body = body;
+    this.pixelRatio = 1;
 
     this.options = {};
     this.defaultOptions = {
@@ -21,6 +22,7 @@ class Canvas {
     }
     util.extend(this.options, this.defaultOptions);
 
+    // bind the events
     this.body.emitter.once("resize", (obj) => {
       if (obj.width !== 0) {
         this.body.view.translation.x = obj.width * 0.5;
@@ -31,18 +33,37 @@ class Canvas {
     });
     this.body.emitter.on("destroy", () => this.hammer.destroy());
 
+    // automatically adapt to a changing size of the browser.
     window.onresize = () => {this.setSize(); this.body.emitter.emit("_redraw");};
-
-    this.pixelRatio = 1;
   }
 
   setOptions(options) {
     if (options !== undefined) {
-      util.deepExtend(this.options, options);
+      if (options.width !== undefined) {this.options.width = this._prepareValue(options.width );}
+      if (options.height!== undefined) {this.options.height= this._prepareValue(options.height);}
     }
   }
 
-  create() {
+  _prepareValue(value) {
+    if (typeof value === 'number') {
+      return value + 'px';
+    }
+    else if (typeof value === 'string') {
+      if (value.indexOf('%') !== -1 || value.indexOf('px') !== -1) {
+        return value;
+      }
+      else if (value.indexOf('%') === -1) {
+        return value + 'px';
+      }
+    }
+    throw new Error('Could not use the value supplie for width or height:' + value);
+  }
+
+
+  /**
+   * Create the HTML
+   */
+  _create() {
     // remove all elements from the container element.
     while (this.body.container.hasChildNodes()) {
       this.body.container.removeChild(this.body.container.firstChild);
@@ -52,7 +73,7 @@ class Canvas {
     this.frame.className = 'vis network-frame';
     this.frame.style.position = 'relative';
     this.frame.style.overflow = 'hidden';
-    this.frame.tabIndex = 900;
+    this.frame.tabIndex = 900; // tab index is required for keycharm to bind keystrokes to the div instead of the window
 
     //////////////////////////////////////////////////////////////////
 
@@ -132,6 +153,9 @@ class Canvas {
    *                         or '30%')
    */
   setSize(width = this.options.width, height = this.options.height) {
+    width = this._prepareValue(width);
+    height= this._prepareValue(height);
+
     let emitEvent = false;
     let oldWidth = this.frame.canvas.width;
     let oldHeight = this.frame.canvas.height;

lib/network/modules/CanvasRenderer.js

@@ -36,7 +36,7 @@ class CanvasRenderer {
     this.body.emitter.on("_startRendering", () => {
       this.renderRequests += 1;
       this.renderingActive = true;
-      this.startRendering();
+      this._startRendering();
     });
     this.body.emitter.on("_stopRendering", () => {
       this.renderRequests -= 1;
@@ -59,14 +59,14 @@ class CanvasRenderer {
     }
   }
 
-  startRendering() {
+  _startRendering() {
     if (this.renderingActive === true) {
       if (!this.renderTimer) {
         if (this.requiresTimeout === true) {
-          this.renderTimer = window.setTimeout(this.renderStep.bind(this), this.simulationInterval); // wait this.renderTimeStep milliseconds and perform the animation step function
+          this.renderTimer = window.setTimeout(this._renderStep.bind(this), this.simulationInterval); // wait this.renderTimeStep milliseconds and perform the animation step function
         }
         else {
-          this.renderTimer = window.requestAnimationFrame(this.renderStep.bind(this)); // wait this.renderTimeStep milliseconds and perform the animation step function
+          this.renderTimer = window.requestAnimationFrame(this._renderStep.bind(this)); // wait this.renderTimeStep milliseconds and perform the animation step function
         }
       }
     }
@@ -75,20 +75,20 @@ class CanvasRenderer {
     }
   }
 
-  renderStep() {
+  _renderStep() {
     // reset the renderTimer so a new scheduled animation step can be set
     this.renderTimer = undefined;
 
     if (this.requiresTimeout === true) {
       // this schedules a new simulation step
-      this.startRendering();
+      this._startRendering();
     }
 
     this._redraw();
 
     if (this.requiresTimeout === false) {
       // this schedules a new simulation step
-      this.startRendering();
+      this._startRendering();
     }
   }
 

lib/network/modules/NodesHandler.js

@@ -25,6 +25,7 @@ class NodesHandler {
     this.defaultOptions = {
       borderWidth: 1,
       borderWidthSelected: undefined,
+      brokenImage:undefined,
       color: {
         border: '#2B7CE9',
         background: '#97C2FC',
@@ -85,6 +86,7 @@ class NodesHandler {
       },
       shape: 'ellipse',
       size: 25,
+      title: undefined,
       value: 1,
       x: undefined,
       y: undefined