fixed bugs, restyled colorPicker

dist/vis.css

@@ -1022,6 +1022,31 @@ div.vis-network-colorPicker-frame {
     box-shadow: rgba(0,0,0,0.5) 0px 0px 10px 0px;
 }
 
+
+
+div.vis-network-colorPicker-arrowDiv {
+    position: absolute;
+    top:147px;
+    left:5px;
+}
+div.vis-network-colorPicker-arrowDiv:after, .vis-network-colorPicker-arrowDiv:before {
+    right: 100%;
+    top: 50%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+}
+
+div.vis-network-colorPicker-arrowDiv:after {
+    border-color: rgba(255, 255, 255, 0);
+    border-right-color: #ffffff;
+    border-width: 30px;
+    margin-top: -30px;
+}
+
 div.vis-network-colorPicker-color {
     position:absolute;
     width: 289px;
@@ -1123,23 +1148,23 @@ div.vis-network-colorPicker-button {
 }
 
 div.vis-network-colorPicker-button.cancel {
-    border:2px solid #ff4e33;
-    background-color: #ff7761;
+    /*border:2px solid #ff4e33;*/
+    /*background-color: #ff7761;*/
     left:5px;
 }
 div.vis-network-colorPicker-button.load {
-    border:2px solid #a153e6;
-    background-color: #cb8dff;
+    /*border:2px solid #a153e6;*/
+    /*background-color: #cb8dff;*/
     left:82px;
 }
 div.vis-network-colorPicker-button.apply {
-    border:2px solid #4588e6;
-    background-color: #82b6ff;
+    /*border:2px solid #4588e6;*/
+    /*background-color: #82b6ff;*/
     left:159px;
 }
 div.vis-network-colorPicker-button.save {
-    border:2px solid #45e655;
-    background-color: #6dff7c;
+    /*border:2px solid #45e655;*/
+    /*background-color: #6dff7c;*/
     left:236px;
 }
 

dist/vis.js

@@ -5,7 +5,7 @@
  * A dynamic, browser-based visualization library.
  *
  * @version 4.0.0-SNAPSHOT
- * @date    2015-03-27
+ * @date    2015-03-30
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -23486,7 +23486,6 @@ return /******/ (function(modules) { // webpackBootstrap
 
       // start the physics simulation. Can be safely called multiple times.
       this.body.emitter.emit("startSimulation");
-      this.body.emitter.emit("_requestRedraw");
     }
   };
 
@@ -30295,6 +30294,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
           this.body.emitter.emit("stabilizationIterationsDone");
           this.body.emitter.emit("_requestRedraw");
+
           this.ready = true;
         },
         writable: true,
@@ -32087,10 +32087,6 @@ return /******/ (function(modules) { // webpackBootstrap
       this.renderRequests = 0;
       this.pixelRatio = undefined;
 
-      // redefined in this._redraw
-      this.canvasTopLeft = { x: 0, y: 0 };
-      this.canvasBottomRight = { x: 0, y: 0 };
-
       this.dragging = false;
 
       this.body.emitter.on("dragStart", function () {
@@ -32174,7 +32170,6 @@ return /******/ (function(modules) { // webpackBootstrap
          * chart will be resized too.
          */
         value: function redraw() {
-          this._setSize(this.constants.width, this.constants.height);
           this._redraw();
         },
         writable: true,
@@ -32208,6 +32203,12 @@ return /******/ (function(modules) { // webpackBootstrap
           this.redrawRequested = false;
           var ctx = this.canvas.frame.canvas.getContext("2d");
 
+          if (this.canvas.frame.canvas.width === 0 || this.canvas.frame.canvas.height === 0) {
+            this.canvas.setSize();
+          }
+
+          console.log("her");
+
           if (this.pixelRation === undefined) {
             this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1);
           }
@@ -32219,6 +32220,8 @@ return /******/ (function(modules) { // webpackBootstrap
           var h = this.canvas.frame.canvas.clientHeight;
           ctx.clearRect(0, 0, w, h);
 
+
+
           this.body.emitter.emit("beforeDrawing", ctx);
 
           // set scaling and translation
@@ -32226,9 +32229,6 @@ return /******/ (function(modules) { // webpackBootstrap
           ctx.translate(this.body.view.translation.x, this.body.view.translation.y);
           ctx.scale(this.body.view.scale, this.body.view.scale);
 
-          this.canvasTopLeft = this.canvas.DOMtoCanvas({ x: 0, y: 0 });
-          this.canvasBottomRight = this.canvas.DOMtoCanvas({ x: this.canvas.frame.canvas.clientWidth, y: this.canvas.frame.canvas.clientHeight });
-
           if (hidden === false) {
             if (this.dragging === false || this.dragging === true && this.options.hideEdgesOnDrag === false) {
               this._drawEdges(ctx);
@@ -32417,12 +32417,21 @@ return /******/ (function(modules) { // webpackBootstrap
       util.extend(this.options, this.defaultOptions);
 
       this.body.emitter.once("resize", function (obj) {
-        _this.body.view.translation.x = obj.width * 0.5;_this.body.view.translation.y = obj.height * 0.5;
+        if (obj.width !== 0) {
+          _this.body.view.translation.x = obj.width * 0.5;
+        }
+        if (obj.height !== 0) {
+          _this.body.view.translation.y = obj.height * 0.5;
+        }
       });
       this.body.emitter.on("destroy", function () {
         return _this.hammer.destroy();
       });
 
+      window.onresize = function () {
+        _this.setSize();_this.body.emitter.emit("_redraw");
+      };
+
       this.pixelRatio = 1;
     }
 
@@ -32560,6 +32569,7 @@ return /******/ (function(modules) { // webpackBootstrap
           var emitEvent = false;
           var oldWidth = this.frame.canvas.width;
           var oldHeight = this.frame.canvas.height;
+
           if (width != this.options.width || height != this.options.height || this.frame.style.width != width || this.frame.style.height != height) {
             this.frame.style.width = width;
             this.frame.style.height = height;
@@ -32866,11 +32876,14 @@ return /******/ (function(modules) { // webpackBootstrap
 
             var xZoomLevel = this.canvas.frame.canvas.clientWidth / xDistance;
             var yZoomLevel = this.canvas.frame.canvas.clientHeight / yDistance;
+
             zoomLevel = xZoomLevel <= yZoomLevel ? xZoomLevel : yZoomLevel;
           }
 
           if (zoomLevel > 1) {
             zoomLevel = 1;
+          } else if (zoomLevel === 0) {
+            zoomLevel = 1;
           }
 
           var center = this._findCenter(range);
@@ -37388,7 +37401,11 @@ return /******/ (function(modules) { // webpackBootstrap
          */
         value: function _showColorPicker(event, value, div, path) {
           var _this = this;
-          this.colorPicker.show(event.pageX, event.pageY);
+          var rect = div.getBoundingClientRect();
+          var bodyRect = document.body.getBoundingClientRect();
+          var pickerX = rect.left + rect.width + 5;
+          var pickerY = rect.top - bodyRect.top + rect.height * 0.5;
+          this.colorPicker.show(pickerX, pickerY);
           this.colorPicker.setColor(value);
           this.colorPicker.setCallback(function (color) {
             var colorString = "rgba(" + color.r + "," + color.g + "," + color.b + "," + color.a + ")";
@@ -37496,7 +37513,7 @@ return /******/ (function(modules) { // webpackBootstrap
               pointer[path[i]] = value;
             }
           }
-          console.log(JSON.stringify(options));
+          //console.log(JSON.stringify(options))
           this.network.setOptions(options);
         },
         writable: true,
@@ -37697,7 +37714,7 @@ return /******/ (function(modules) { // webpackBootstrap
         value: function _save() {
           this.updateCallback(this.color);
           this.applied = false;
-          this.hide();
+          this._hide();
         },
         writable: true,
         configurable: true
@@ -37747,7 +37764,6 @@ return /******/ (function(modules) { // webpackBootstrap
           var setInitial = arguments[1] === undefined ? true : arguments[1];
           // store the initial color
           if (setInitial === true) {
-            console.log("here");
             this.initialColor = util.extend({}, rgba);
           }
 
@@ -37898,6 +37914,9 @@ return /******/ (function(modules) { // webpackBootstrap
           this.brightnessDiv = document.createElement("div");
           this.brightnessDiv.className = visPrefix + "colorPicker-brightness";
 
+          this.arrowDiv = document.createElement("div");
+          this.arrowDiv.className = visPrefix + "colorPicker-arrowDiv";
+
           this.opacityRange = document.createElement("input");
           this.opacityRange.type = "range";
           this.opacityRange.min = "0";
@@ -37966,6 +37985,7 @@ return /******/ (function(modules) { // webpackBootstrap
           this.loadButton.onclick = this._loadLast.bind(this);
 
           this.frame.appendChild(this.colorPickerDiv);
+          this.frame.appendChild(this.arrowDiv);
           this.frame.appendChild(this.brightnessLabel);
           this.frame.appendChild(this.brightnessDiv);
           this.frame.appendChild(this.opacityLabel);

examples/network/01_basic_usage.html

@@ -18,7 +18,6 @@
 <body>
 
 <div id="mynetwork"></div>
-
 <script type="text/javascript">
   // create an array with nodes
   var nodes = [
@@ -46,7 +45,7 @@
   };
   var options = {
       configure: true,
-      physics:{solver:'BarnesHut'},
+      physics:{solver:'BarnesHut', stabilization:true}
 //      nodes:{physics:false}
   }
   var network = new vis.Network(container, data, options);

lib/network/Network.js

@@ -175,7 +175,6 @@ Network.prototype.setOptions = function (options) {
 
     // start the physics simulation. Can be safely called multiple times.
     this.body.emitter.emit("startSimulation");
-    this.body.emitter.emit("_requestRedraw");
   }
 };
 

lib/network/css/network-colorpicker.css

@@ -12,6 +12,31 @@ div.vis-network-colorPicker-frame {
     box-shadow: rgba(0,0,0,0.5) 0px 0px 10px 0px;
 }
 
+
+
+div.vis-network-colorPicker-arrowDiv {
+    position: absolute;
+    top:147px;
+    left:5px;
+}
+div.vis-network-colorPicker-arrowDiv:after, .vis-network-colorPicker-arrowDiv:before {
+    right: 100%;
+    top: 50%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+}
+
+div.vis-network-colorPicker-arrowDiv:after {
+    border-color: rgba(255, 255, 255, 0);
+    border-right-color: #ffffff;
+    border-width: 30px;
+    margin-top: -30px;
+}
+
 div.vis-network-colorPicker-color {
     position:absolute;
     width: 289px;
@@ -113,23 +138,23 @@ div.vis-network-colorPicker-button {
 }
 
 div.vis-network-colorPicker-button.cancel {
-    border:2px solid #ff4e33;
-    background-color: #ff7761;
+    /*border:2px solid #ff4e33;*/
+    /*background-color: #ff7761;*/
     left:5px;
 }
 div.vis-network-colorPicker-button.load {
-    border:2px solid #a153e6;
-    background-color: #cb8dff;
+    /*border:2px solid #a153e6;*/
+    /*background-color: #cb8dff;*/
     left:82px;
 }
 div.vis-network-colorPicker-button.apply {
-    border:2px solid #4588e6;
-    background-color: #82b6ff;
+    /*border:2px solid #4588e6;*/
+    /*background-color: #82b6ff;*/
     left:159px;
 }
 div.vis-network-colorPicker-button.save {
-    border:2px solid #45e655;
-    background-color: #6dff7c;
+    /*border:2px solid #45e655;*/
+    /*background-color: #6dff7c;*/
     left:236px;
 }
 

lib/network/modules/Canvas.js

@@ -1,7 +1,7 @@
-var Hammer = require('../../module/hammer');
-var hammerUtil = require('../../hammerUtil');
+let Hammer = require('../../module/hammer');
+let hammerUtil = require('../../hammerUtil');
 
-var util = require('../../util');
+let util = require('../../util');
 
 /**
  * Create the main frame for the Network.
@@ -21,9 +21,18 @@ class Canvas {
     }
     util.extend(this.options, this.defaultOptions);
 
-    this.body.emitter.once("resize", (obj) => {this.body.view.translation.x = obj.width * 0.5; this.body.view.translation.y = obj.height * 0.5;});
+    this.body.emitter.once("resize", (obj) => {
+      if (obj.width !== 0) {
+        this.body.view.translation.x = obj.width * 0.5;
+      }
+      if (obj.height !== 0) {
+        this.body.view.translation.y = obj.height * 0.5;
+      }
+    });
     this.body.emitter.on("destroy", () => this.hammer.destroy());
 
+    window.onresize = () => {this.setSize(); this.body.emitter.emit("_redraw");};
+
     this.pixelRatio = 1;
   }
 
@@ -52,7 +61,7 @@ class Canvas {
     this.frame.appendChild(this.frame.canvas);
 
     if (!this.frame.canvas.getContext) {
-      var noCanvas = document.createElement( 'DIV' );
+      let noCanvas = document.createElement( 'DIV' );
       noCanvas.style.color = 'red';
       noCanvas.style.fontWeight =  'bold' ;
       noCanvas.style.padding =  '10px';
@@ -60,7 +69,7 @@ class Canvas {
       this.frame.canvas.appendChild(noCanvas);
     }
     else {
-      var ctx = this.frame.canvas.getContext("2d");
+      let ctx = this.frame.canvas.getContext("2d");
       this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio ||
       ctx.mozBackingStorePixelRatio ||
       ctx.msBackingStorePixelRatio ||
@@ -123,9 +132,10 @@ class Canvas {
    *                         or '30%')
    */
   setSize(width = this.options.width, height = this.options.height) {
-    var emitEvent = false;
-    var oldWidth = this.frame.canvas.width;
-    var oldHeight = this.frame.canvas.height;
+    let emitEvent = false;
+    let oldWidth = this.frame.canvas.width;
+    let oldHeight = this.frame.canvas.height;
+
     if (width != this.options.width || height != this.options.height || this.frame.style.width != width || this.frame.style.height != height) {
       this.frame.style.width = width;
       this.frame.style.height = height;

lib/network/modules/CanvasRenderer.js

@@ -22,10 +22,6 @@ class CanvasRenderer {
     this.renderRequests = 0;
     this.pixelRatio = undefined;
 
-    // redefined in this._redraw
-    this.canvasTopLeft     = {x: 0, y: 0};
-    this.canvasBottomRight = {x: 0, y: 0};
-
     this.dragging = false;
 
     this.body.emitter.on("dragStart",       () => {this.dragging = true;});
@@ -89,7 +85,6 @@ class CanvasRenderer {
    * chart will be resized too.
    */
   redraw() {
-    this._setSize(this.constants.width, this.constants.height);
     this._redraw();
   }
 
@@ -116,6 +111,12 @@ class CanvasRenderer {
     this.redrawRequested = false;
     var ctx = this.canvas.frame.canvas.getContext('2d');
 
+    if (this.canvas.frame.canvas.width === 0 || this.canvas.frame.canvas.height === 0) {
+      this.canvas.setSize();
+    }
+
+    console.log('her')
+
     if (this.pixelRation === undefined) {
       this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio ||
       ctx.mozBackingStorePixelRatio ||
@@ -131,6 +132,8 @@ class CanvasRenderer {
     var h = this.canvas.frame.canvas.clientHeight;
     ctx.clearRect(0, 0, w, h);
 
+
+
     this.body.emitter.emit("beforeDrawing", ctx);
 
     // set scaling and translation
@@ -138,9 +141,6 @@ class CanvasRenderer {
     ctx.translate(this.body.view.translation.x, this.body.view.translation.y);
     ctx.scale(this.body.view.scale, this.body.view.scale);
 
-    this.canvasTopLeft     = this.canvas.DOMtoCanvas({x:0,y:0});
-    this.canvasBottomRight = this.canvas.DOMtoCanvas({x:this.canvas.frame.canvas.clientWidth,y:this.canvas.frame.canvas.clientHeight});
-
     if (hidden === false) {
       if (this.dragging === false || (this.dragging === true && this.options.hideEdgesOnDrag === false)) {
         this._drawEdges(ctx);

lib/network/modules/ConfigurationSystem.js

@@ -533,7 +533,9 @@ class ConfigurationSystem {
     }
 
     value = value === undefined ? defaultColor : value;
-    div.onclick = (event) => {this._showColorPicker(event,value,div,path);}
+    div.onclick = (event) => {
+      this._showColorPicker(event,value,div,path);
+    }
 
     let label = this._makeLabel(path[path.length-1], path);
     this._makeEntree(path,label, div);
@@ -549,7 +551,11 @@ class ConfigurationSystem {
    * @private
    */
   _showColorPicker(event, value, div, path) {
-    this.colorPicker.show(event.pageX, event.pageY);
+    let rect = div.getBoundingClientRect();
+    let bodyRect = document.body.getBoundingClientRect();
+    let pickerX = rect.left + rect.width + 5;
+    let pickerY = rect.top - bodyRect.top + rect.height*0.5;
+    this.colorPicker.show(pickerX,pickerY);
     this.colorPicker.setColor(value);
     this.colorPicker.setCallback((color) => {
       let colorString = 'rgba(' + color.r + ',' + color.g + ',' + color.b + ',' + color.a + ')';
@@ -653,7 +659,7 @@ class ConfigurationSystem {
         pointer[path[i]] = value;
       }
     }
-    console.log(JSON.stringify(options))
+    //console.log(JSON.stringify(options))
     this.network.setOptions(options);
   }
 }

lib/network/modules/PhysicsEngine.js

@@ -451,6 +451,7 @@ class PhysicsEngine {
     
     this.body.emitter.emit("stabilizationIterationsDone");
     this.body.emitter.emit("_requestRedraw");
+
     this.ready = true;
   }
   

lib/network/modules/View.js

@@ -138,12 +138,16 @@ class View {
 
       var xZoomLevel = this.canvas.frame.canvas.clientWidth  / xDistance;
       var yZoomLevel = this.canvas.frame.canvas.clientHeight / yDistance;
+
       zoomLevel = (xZoomLevel <= yZoomLevel) ? xZoomLevel : yZoomLevel;
     }
 
     if (zoomLevel > 1.0) {
       zoomLevel = 1.0;
     }
+    else if (zoomLevel === 0) {
+      zoomLevel = 1.0;
+    }
 
     var center = this._findCenter(range);
     var animationOptions = {position: center, scale: zoomLevel, animation: options};

lib/network/modules/components/colorPicker.js

@@ -151,7 +151,7 @@ class ColorPicker {
   _save() {
     this.updateCallback(this.color);
     this.applied = false;
-    this.hide();
+    this._hide();
   }
 
 
@@ -189,7 +189,6 @@ class ColorPicker {
   _setColor(rgba, setInitial = true) {
     // store the initial color
     if (setInitial === true) {
-      console.log("here")
       this.initialColor = util.extend({}, rgba);
     }
 
@@ -328,6 +327,9 @@ class ColorPicker {
     this.brightnessDiv = document.createElement('div');
     this.brightnessDiv.className = visPrefix + 'colorPicker-brightness';
 
+    this.arrowDiv = document.createElement('div');
+    this.arrowDiv.className = visPrefix + 'colorPicker-arrowDiv';
+
     this.opacityRange = document.createElement('input');
     this.opacityRange.type = 'range';
     this.opacityRange.min = '0';
@@ -388,6 +390,7 @@ class ColorPicker {
     this.loadButton.onclick = this._loadLast.bind(this);
 
     this.frame.appendChild(this.colorPickerDiv);
+    this.frame.appendChild(this.arrowDiv);
     this.frame.appendChild(this.brightnessLabel);
     this.frame.appendChild(this.brightnessDiv);
     this.frame.appendChild(this.opacityLabel);