Merge branch 'master' into es6

HISTORY.md

@@ -2,12 +2,12 @@
 http://visjs.org
 
 
-## not yet released, version 3.8.1-SNAPSHOT
+## 2015-01-16, version 3.9.0
 
 ### Network
 
-- reverted change in image class, fixed bug #552
-- improved (not neccesarily fixed) the fontFill offset between different browsers. #365
+- Reverted change in image class, fixed bug #552
+- Improved (not neccesarily fixed) the fontFill offset between different browsers. #365
 - Fixed dashed lines on firefox on Unix systems
 - Altered the Manipulation Mixin to be succesfully destroyed from memory when calling destroy();
 - Improved drawing of arrowheads on smooth curves. #349
@@ -18,13 +18,16 @@ http://visjs.org
 - Improved edit edge control nodes positions, altered style a little.
 - Fixed issue #564 by resetting state to initial when no callback is performed in the return function.
 - Added condition to Repulsion similar to BarnesHut to ensure nodes do not overlap.
+- Added labelAlignment option to edges. Thanks @T-rav!
+- Close active sessions in dataManipulation when calling setData().
+- Fixed alignment issue with edgelabels
 
 ### Timeline
 
 - Added byUser flag to options of the rangechange and rangechanged event.
 
 
-## 20145-01-09, version 3.8.0
+## 2015-01-09, version 3.8.0
 
 ### General
 
@@ -52,6 +55,8 @@ http://visjs.org
 - Community fix for SVG images in IE11, thanks @dponch!
 - Fixed repeating stabilized event when the network is already stabilized.
 - Added circularImages, thanks for the contribution @brendon1982!
+- Stopped infinite loop when brokenImage is also not available.
+- Changed util color functions so they don't need eval. Thanks @naskooskov!
 
 ### Graph2d
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "vis",
-  "version": "3.8.1-SNAPSHOT",
+  "version": "3.9.0",
   "main": ["dist/vis.min.js", "dist/vis.min.css"],
   "description": "A dynamic, browser-based visualization library.",
   "homepage": "http://visjs.org/",

docs/network.html

@@ -1182,9 +1182,23 @@ var options = {
       <td>The color of the label stroke.
       Only applicable when property <code>label</code> is defined.</td>
   </tr>
+  <tr>
+      <td class="greenField">inheritColor</td>
+      <td>String | Boolean</td>
+      <td>from</td>
+      <td>Possible values: <code>"to","from", true, false</code>. If this value is set to false, the edge color information is used. If the value is set to true or "from",
+      the color data from the borders of the "from" node is used. If this value is "to", the color data from the borders of the "to" node is used.</td>
+  </tr>
+  <tr>
+      <td class="greenField">labelAlignment</td>
+      <td>String</td>
+      <td>horizontal</td>
+      <td>Possible values: <code>"line-above", "line-center", "line-below"</code>. The alignment of the label when drawn on the edge. 
+	  If <code>horizontal</code> it will align the label absolute horizontial.</td>
+  </tr>
 
   <tr>
-  <td class="greenField">style</td>
+   <td class="greenField">style</td>
       <td>string</td>
       <td>line</td>
       <td>Define a line style for the edge.
@@ -1192,13 +1206,6 @@ var options = {
       <code>arrow-center</code>, or <code>dash-line</code>.
       </td>
   </tr>
-  <tr>
-      <td class="greenField">inheritColor</td>
-      <td>String | Boolean</td>
-      <td>from</td>
-      <td>Possible values: <code>"to","from", true, false</code>. If this value is set to false, the edge color information is used. If the value is set to true or "from",
-      the color data from the borders of the "from" node is used. If this value is "to", the color data from the borders of the "to" node is used.</td>
-  </tr>
   <tr>
       <td class="greenField">width</td>
       <td>number</td>

examples/network/32_hierarchicaLayoutMethods.html

@@ -19,7 +19,7 @@
 
     <script type="text/javascript">
         var network = null;
-        var layoutMethod = "direction";
+        var layoutMethod = "hubsize";
 
         function destroy() {
             if (network !== null) {
@@ -83,10 +83,6 @@
                 from: 2,
                 to: 8
             });
-            edges.push({
-                from: 10,
-                to: 2
-            });
             edges.push({
                 from: 2,
                 to: 9
@@ -134,9 +130,8 @@
 </div>
 Layout method:
 <select id="layout">
-    <option value="direction">direction</option>
     <option value="hubsize">hubsize</option>
-
+    <option value="direction">direction</option>
 </select><br/>
 <br />
 

examples/network/34_circular_images.html

@@ -44,7 +44,8 @@
         {id: 11,  shape: 'circularImage', image: DIR + '11.png'},
         {id: 12,  shape: 'circularImage', image: DIR + '12.png'},
         {id: 13,  shape: 'circularImage', image: DIR + '13.png'},
-        {id: 14,  shape: 'circularImage', image: DIR + '14.png'}
+        {id: 14,  shape: 'circularImage', image: DIR + '14.png'},
+        {id: 15, label:"when images\nfail\nto load", shape: 'circularImage', image: DIR + 'missing.png', brokenImage: DIR + 'missingBrokenImage.png'}
       ];
 
       // create connetions between people
@@ -64,6 +65,7 @@
         {from: 11, to: 12},
         {from: 12, to: 13},
         {from: 13, to: 14},
+        {from: 14, to: 15}
       ];
 
       // create a network
@@ -74,15 +76,10 @@
       };
       var options = {
         nodes: {
-		  shape: 'circle',
           borderWidth:4,
 	      color: {
             border: '#222222',
-            background: '#ffffff',
-            highlight: {
-              border: '#428eff',
-              background: '#ffffff'
-            }
+            background: '#666666'
           },
           fontColor:'#eeeeee'
         },

examples/network/36_HTML_in_Nodes.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
 <head>
-    <title>Network | Images</title>
+    <title>Network | HTML in nodex</title>
 
     <style type="text/css">
         body {
@@ -74,7 +74,12 @@
 </head>
 
 <body onload="draw()">
-
+<p>
+    This example demonstrates showing custom HTML in Nodes, by using an SVG image.
+</p>
+<p style="color: red;">
+    WARNING: this is currently not supported by all browsers.
+</p>
 <div id="mynetwork"></div>
 </body>
 </html>

examples/network/37_label_alignment.html

@@ -0,0 +1,51 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Basic usage</title>
+
+  <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+
+  <style type="text/css">
+    #mynetwork {
+      width: 400px;
+      height: 400px;
+      border: 1px solid lightgray;
+    }
+  </style>
+</head>
+
+<body>
+
+<div id="mynetwork"></div>
+
+<script type="text/javascript">
+  // create an array with nodes
+  var nodes = [
+    {id: 1, label: 'Node 1'},
+    {id: 2, label: 'Node 2'},
+    {id: 3, label: 'Node 3'},
+    {id: 4, label: 'Node 4'},
+    {id: 5, label: 'Node 5'}
+  ];
+
+  // create an array with edges
+  var edges = [
+    {from: 1, to: 2, label: '1 to 2', labelAlignment:'line-center', fontFill:'orange' },
+    {from: 1, to: 3, label: '1 to 3', labelAlignment:'line-above', fontFill:'green'},
+    {from: 2, to: 4, label: '2 to 4', fontFill:'red'},
+    {from: 2, to: 5, label: '2 to 5', labelAlignment:'line-below', fontFill:'#ccd' }
+  ];
+
+  // create a network
+  var container = document.getElementById('mynetwork');
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {};
+  var network = new vis.Network(container, data, options);
+</script>
+
+</body>
+</html>

examples/network/index.html

@@ -48,6 +48,7 @@
   <p><a href="34_circular_images.html">34_circular_images.html</a></p>
   <p><a href="35_label_stroke.html">35_label_stroke.html</a></p>
   <p><a href="36_HTML_in_Nodes.html">36_HTML_in_Nodes.html</a></p>
+  <p><a href="37_label_alignment.html">37_label_alignment.html</a></p>
   <p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
 
 </div>

lib/network/Edge.js

@@ -76,7 +76,7 @@ Edge.prototype.setProperties = function(properties) {
   }
 
   var fields = ['style','fontSize','fontFace','fontColor','fontFill','fontStrokeWidth','fontStrokeColor','width',
-    'widthSelectionMultiplier','hoverWidth','arrowScaleFactor','dash','inheritColor'
+    'widthSelectionMultiplier','hoverWidth','arrowScaleFactor','dash','inheritColor','labelAlignment'
   ];
   util.selectiveDeepExtend(fields, this.options, properties);
 
@@ -119,6 +119,7 @@ Edge.prototype.setProperties = function(properties) {
     case 'dash-line':     this.draw = this._drawDashLine; break;
     default:              this.draw = this._drawLine; break;
   }
+  
 };
 
 /**
@@ -564,7 +565,7 @@ Edge.prototype._label = function (ctx, text, x, y) {
     if (this.dirtyLabel == true) {
       var lines = String(text).split('\n');
       var lineCount = lines.length;
-      var fontSize = (Number(this.options.fontSize) + 4);
+      var fontSize = Number(this.options.fontSize);
       yLine = y + (1 - lineCount) / 2 * fontSize;
 
       var width = ctx.measureText(lines[0]).width;
@@ -580,33 +581,117 @@ Edge.prototype._label = function (ctx, text, x, y) {
       this.labelDimensions = {top:top,left:left,width:width,height:height,yLine:yLine};
     }
 
+	var yLine = this.labelDimensions.yLine;
+	
+	ctx.save();
+	
+	if (this.options.labelAlignment != "horizontal"){
+		ctx.translate(x, yLine);
+		this._rotateForLabelAlignment(ctx);
+		x = 0;
+		yLine = 0;
+	}
+
+	
+	this._drawLabelRect(ctx);
+	this._drawLabelText(ctx,x,yLine, lines, lineCount, fontSize);
+	
+	ctx.restore();
+  }
+};
+
+/**
+ * Rotates the canvas so the text is most readable
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
+ */
+Edge.prototype._rotateForLabelAlignment = function(ctx) {
+	var dy = this.from.y - this.to.y;
+	var dx = this.from.x - this.to.x;
+	var angleInDegrees = Math.atan2(dy, dx);
+
+	// rotate so label it is readable
+	if((angleInDegrees < -1 && dx < 0) || (angleInDegrees > 0 && dx < 0)){
+		angleInDegrees = angleInDegrees + Math.PI;
+	}
+	
+	ctx.rotate(angleInDegrees);
+};
 
-    if (this.options.fontFill !== undefined && this.options.fontFill !== null && this.options.fontFill !== "none") {
-      ctx.fillStyle = this.options.fontFill;
-      ctx.fillRect(this.labelDimensions.left,
-        this.labelDimensions.top,
-        this.labelDimensions.width,
-        this.labelDimensions.height);
+/**
+ * Draws the label rectangle 
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {String} labelAlignment
+ * @private
+ */
+Edge.prototype._drawLabelRect = function(ctx) {
+	if (this.options.fontFill !== undefined && this.options.fontFill !== null && this.options.fontFill !== "none") {
+		ctx.fillStyle = this.options.fontFill;
+		
+		var lineMargin = 2;
+
+    if (this.options.labelAlignment == 'line-center') {
+      ctx.fillRect(-this.labelDimensions.width * 0.5, -this.labelDimensions.height * 0.5, this.labelDimensions.width, this.labelDimensions.height);
+    }
+    else if (this.options.labelAlignment == 'line-above') {
+      ctx.fillRect(-this.labelDimensions.width * 0.5, -(this.labelDimensions.height + lineMargin), this.labelDimensions.width, this.labelDimensions.height);
+    }
+    else if (this.options.labelAlignment == 'line-below') {
+      ctx.fillRect(-this.labelDimensions.width * 0.5, lineMargin, this.labelDimensions.width, this.labelDimensions.height);
+    }
+    else {
+      ctx.fillRect(this.labelDimensions.left, this.labelDimensions.top, this.labelDimensions.width, this.labelDimensions.height);
     }
+  }
+};
 
-    // draw text
-    ctx.fillStyle = this.options.fontColor || "black";
-    ctx.textAlign = "center";
-    ctx.textBaseline =  "middle";
-    if (this.options.fontStrokeWidth > 0){
-      ctx.lineWidth   = this.options.fontStrokeWidth;
-      ctx.strokeStyle = this.options.fontStrokeColor;
-      ctx.lineJoin    = 'round';
+/**
+ * Draws the label text 
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {Number} x
+ * @param {Number} yLine
+ * @param {Array} lines
+ * @param {Number} lineCount
+ * @param {Number} fontSize
+ * @private
+ */
+Edge.prototype._drawLabelText = function(ctx, x, yLine, lines, lineCount, fontSize) {
+	// draw text
+	ctx.fillStyle = this.options.fontColor || "black";
+	ctx.textAlign = "center";
+
+  // check for label alignment
+  if (this.options.labelAlignment != 'horizontal') {
+    var lineMargin = 2;
+    if (this.options.labelAlignment == 'line-above') {
+      ctx.textBaseline = "alphabetic";
+      yLine -= 2 * lineMargin; // distance from edge, required because we use alphabetic. Alphabetic has less difference between browsers
     }
-    yLine = this.labelDimensions.yLine;
-    for (var i = 0; i < lineCount; i++) {
-      if(this.options.fontStrokeWidth){
-        ctx.strokeText(lines[i], x, yLine);
-      }
-      ctx.fillText(lines[i], x, yLine);
-      yLine += fontSize;
+    else if (this.options.labelAlignment == 'line-below') {
+      ctx.textBaseline = "hanging";
+      yLine += 2 * lineMargin;// distance from edge, required because we use hanging. Hanging has less difference between browsers
     }
+    else {
+      ctx.textBaseline = "middle";
+    }
+  }
+  else {
+    ctx.textBaseline = "middle";
   }
+
+  // check for strokeWidth
+  if (this.options.fontStrokeWidth > 0){
+    ctx.lineWidth   = this.options.fontStrokeWidth;
+    ctx.strokeStyle = this.options.fontStrokeColor;
+    ctx.lineJoin    = 'round';
+  }
+	for (var i = 0; i < lineCount; i++) {
+    if(this.options.fontStrokeWidth > 0){
+      ctx.strokeText(lines[i], x, yLine);
+    }
+		ctx.fillText(lines[i], x, yLine);
+		yLine += fontSize;
+	}
 };
 
 /**

lib/network/Images.js

@@ -4,6 +4,7 @@
  */
 function Images() {
   this.images = {};
+  this.imageBroken = {};
   this.callback = undefined;
 }
 
@@ -23,13 +24,12 @@ Images.prototype.setOnloadCallback = function(callback) {
  * @return {Image} img          The image object
  */
 Images.prototype.load = function(url, brokenUrl) {
-  var img = this.images[url];
+  var img = this.images[url]; // make a pointer
   if (img === undefined) {
     // create the image
     var me = this;
     img = new Image();
     img.onload = function () {
-
       // IE11 fix -- thanks dponch!
       if (this.width == 0) {
         document.body.appendChild(this);
@@ -52,8 +52,16 @@ Images.prototype.load = function(url, brokenUrl) {
           me.callback(this);
         }
       }
+      else if (me.imageBroken[url] === true) {
+        console.error("Could not load brokenImage:", brokenUrl);
+        delete this.src;
+        if (me.callback) {
+          me.callback(this);
+        }
+      }
       else {
         this.src = brokenUrl;
+        me.imageBroken[url] = true;
       }
     };
 

lib/network/Network.js

@@ -105,6 +105,7 @@ function Network (container, data, options) {
       fontFill: 'white',
       fontStrokeWidth: 0, // px
       fontStrokeColor: 'white',
+      labelAlignment:'horizontal',
       arrowScaleFactor: 1,
       dash: {
         length: 10,
@@ -181,7 +182,7 @@ function Network (container, data, options) {
       levelSeparation: 150,
       nodeSpacing: 100,
       direction: "UD",   // UD, DU, LR, RL
-      layout: "hubsize" // hubsize, directed, uniqueDirected
+      layout: "hubsize" // hubsize, directed
     },
     freezeForStabilization: false,
     smoothCurves: {
@@ -548,6 +549,11 @@ Network.prototype.setData = function(data, disableStart) {
         ' parameter pair "nodes" and "edges", but not both.');
   }
 
+  // clean up in case there is anyone in an active mode of the manipulation. This is the same option as bound to the escape button.
+  if (this.constants.dataManipulation.enabled == true) {
+    this._createManipulatorBar();
+  }
+
   // set options
   this.setOptions(data && data.options);
   // set all data
@@ -713,6 +719,7 @@ Network.prototype.setOptions = function (options) {
       throw new Error('Option "labels" is deprecated. Use options "locale" and "locales" instead.');
     }
 
+
     // (Re)loading the mixins that can be enabled or disabled in the options.
     // load the force calculation functions, grouped under the physics system.
     this._loadPhysicsSystem();

lib/network/Node.js

@@ -557,7 +557,6 @@ Node.prototype._resizeImage = function (ctx) {
       this.growthIndicator = this.width - width;
     }
   }
-
 };
 
 Node.prototype._drawImageAtPosition = function (ctx) {
@@ -580,15 +579,21 @@ Node.prototype._drawImageAtPosition = function (ctx) {
 
 Node.prototype._drawImageLabel = function (ctx) {
   var yLabel;
-  if (this.imageObj.width != 0 ) {
-    yLabel = this.y + this.height / 2;
-  }
-  else {
-    // image still loading... just draw the label for now
-    yLabel = this.y;
+  var offset = 0;
+  
+  if (this.height){
+    offset = this.height / 2;
+    var labelDimensions = this.getTextSize(ctx);
+      
+    if (labelDimensions.lineCount >= 1){
+      offset += labelDimensions.height / 2;
+      offset += 3;
+    }
   }
+  
+  yLabel = this.y + offset;
 
-  this._label(ctx, this.label, this.x, yLabel, undefined, 'hanging');
+  this._label(ctx, this.label, this.x, yLabel, undefined);
 };
 
 Node.prototype._drawImage = function (ctx) {
@@ -610,7 +615,29 @@ Node.prototype._drawImage = function (ctx) {
 };
 
 Node.prototype._resizeCircularImage = function (ctx) {
-  this._resizeImage(ctx);
+  if(!this.imageObj.src || !this.imageObj.width || !this.imageObj.height){
+    if (!this.width) {
+      var diameter = this.options.radius * 2;
+      this.width = diameter;
+      this.height = diameter;
+
+      // scaling used for clustering
+      //this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
+      //this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
+      this.options.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.options.radius- 0.5*diameter;
+      this._swapToImageResizeWhenImageLoaded = true;
+    }
+  }
+  else {
+    if (this._swapToImageResizeWhenImageLoaded) {
+      this.width = 0;
+      this.height = 0;
+      delete this._swapToImageResizeWhenImageLoaded;
+    }
+    this._resizeImage(ctx);
+  }
+
 };
 
 Node.prototype._drawCircularImage = function (ctx) {
@@ -1010,8 +1037,8 @@ Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNo
     var top = y - height / 2;
     if (baseline == "hanging") {
       top += 0.5 * fontSize;
-      top += 3;   // distance from node, required because we use hanging. Hanging has less difference between browsers
-      yLine += 3; // distance from node
+      top += 4;   // distance from node, required because we use hanging. Hanging has less difference between browsers
+      yLine += 4; // distance from node
     }
     this.labelDimensions = {top:top,left:left,width:width,height:height,yLine:yLine};
 
@@ -1053,10 +1080,10 @@ Node.prototype.getTextSize = function(ctx) {
       width = Math.max(width, ctx.measureText(lines[i]).width);
     }
 
-    return {"width": width, "height": height};
+    return {"width": width, "height": height, lineCount: lines.length};
   }
   else {
-    return {"width": 0, "height": 0};
+    return {"width": 0, "height": 0, lineCount: 0};
   }
 };
 

lib/network/mixins/HierarchicalLayoutMixin.js

@@ -18,23 +18,6 @@ exports._resetLevels = function() {
  */
 exports._setupHierarchicalLayout = function() {
   if (this.constants.hierarchicalLayout.enabled == true && this.nodeIndices.length > 0) {
-    if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.direction == "DU") {
-      this.constants.hierarchicalLayout.levelSeparation = this.constants.hierarchicalLayout.levelSeparation < 0 ? this.constants.hierarchicalLayout.levelSeparation : this.constants.hierarchicalLayout.levelSeparation * -1;
-    }
-    else {
-      this.constants.hierarchicalLayout.levelSeparation = Math.abs(this.constants.hierarchicalLayout.levelSeparation);
-    }
-
-    if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.direction == "LR") {
-      if (this.constants.smoothCurves.enabled == true) {
-        this.constants.smoothCurves.type = "vertical";
-      }
-    }
-    else {
-      if (this.constants.smoothCurves.enabled == true) {
-        this.constants.smoothCurves.type = "horizontal";
-      }
-    }
     // get the size of the largest hubs and check if the user has defined a level for a node.
     var hubsize = 0;
     var node, nodeId;
@@ -74,7 +57,7 @@ exports._setupHierarchicalLayout = function() {
           this._determineLevels(hubsize);
         }
         else {
-          this._determineLevelsDirected();
+          this._determineLevelsDirected(false);
         }
 
       }
@@ -271,6 +254,23 @@ exports._changeConstants = function() {
     this.constants.smoothCurves.dynamic = false;
   }
   this._configureSmoothCurves();
+
+  var config = this.constants.hierarchicalLayout;
+  config.levelSeparation = Math.abs(config.levelSeparation);
+  if (config.direction == "RL" || config.direction == "DU") {
+    config.levelSeparation *= -1;
+  }
+
+  if (config.direction == "RL" || config.direction == "LR") {
+    if (this.constants.smoothCurves.enabled == true) {
+      this.constants.smoothCurves.type = "vertical";
+    }
+  }
+  else {
+    if (this.constants.smoothCurves.enabled == true) {
+      this.constants.smoothCurves.type = "horizontal";
+    }
+  }
 };
 
 
@@ -358,9 +358,9 @@ exports._setLevel = function(level, edges, parentId) {
  */
 exports._setLevelDirected = function(level, edges, parentId) {
   this.nodes[parentId].hierarchyEnumerated = true;
+  var childNode, direction;
   for (var i = 0; i < edges.length; i++) {
-    var childNode = null;
-    var direction = 1;
+    direction = 1;
     if (edges[i].toId == parentId) {
       childNode = edges[i].from;
       direction = -1;
@@ -374,9 +374,9 @@ exports._setLevelDirected = function(level, edges, parentId) {
   }
 
   for (var i = 0; i < edges.length; i++) {
-    var childNode = null;
     if (edges[i].toId == parentId) {childNode = edges[i].from;}
     else {childNode = edges[i].to;}
+
     if (childNode.edges.length > 1 && childNode.hierarchyEnumerated === false) {
       this._setLevelDirected(childNode.level, childNode.edges, childNode.id);
     }

lib/network/mixins/ManipulationMixin.js

@@ -15,6 +15,7 @@ exports._clearManipulatorBar = function() {
   delete this.sectors['support']['nodes']['targetNode'];
   delete this.sectors['support']['nodes']['targetViaNode'];
   this.controlNodesActive = false;
+  this.freezeSimulation = false;
 };
 
 /**

lib/util.js

@@ -737,48 +737,36 @@ exports.option.asElement = function (value, defaultValue) {
   return value || defaultValue || null;
 };
 
-
-
-exports.GiveDec = function(Hex) {
-  var Value;
-
-  if (Hex == "A")
-    Value = 10;
-  else if (Hex == "B")
-    Value = 11;
-  else if (Hex == "C")
-    Value = 12;
-  else if (Hex == "D")
-    Value = 13;
-  else if (Hex == "E")
-    Value = 14;
-  else if (Hex == "F")
-    Value = 15;
-  else
-    Value = eval(Hex);
-
-  return Value;
+/**
+ * http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
+ *
+ * @param {String} hex
+ * @returns {{r: *, g: *, b: *}} | 255 range
+ */
+exports.hexToRGB = function(hex) {
+  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+      return r + r + g + g + b + b;
+  });
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16)
+  } : null;
 };
 
-exports.GiveHex = function(Dec) {
-  var Value;
-
-  if(Dec == 10)
-    Value = "A";
-  else if (Dec == 11)
-    Value = "B";
-  else if (Dec == 12)
-    Value = "C";
-  else if (Dec == 13)
-    Value = "D";
-  else if (Dec == 14)
-    Value = "E";
-  else if (Dec == 15)
-    Value = "F";
-  else
-    Value = "" + Dec;
-
-  return Value;
+/**
+ *
+ * @param red     0 -- 255
+ * @param green   0 -- 255
+ * @param blue    0 -- 255
+ * @returns {string}
+ * @constructor
+ */
+exports.RGBToHex = function(red,green,blue) {
+  return "#" + ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).slice(1);
 };
 
 /**
@@ -862,42 +850,6 @@ exports.parseColor = function(color) {
   return c;
 };
 
-/**
- * http://www.yellowpipe.com/yis/tools/hex-to-rgb/color-converter.php
- *
- * @param {String} hex
- * @returns {{r: *, g: *, b: *}}
- */
-exports.hexToRGB = function(hex) {
-  hex = hex.replace("#","").toUpperCase();
-
-  var a = exports.GiveDec(hex.substring(0, 1));
-  var b = exports.GiveDec(hex.substring(1, 2));
-  var c = exports.GiveDec(hex.substring(2, 3));
-  var d = exports.GiveDec(hex.substring(3, 4));
-  var e = exports.GiveDec(hex.substring(4, 5));
-  var f = exports.GiveDec(hex.substring(5, 6));
-
-  var r = (a * 16) + b;
-  var g = (c * 16) + d;
-  var b = (e * 16) + f;
-
-  return {r:r,g:g,b:b};
-};
-
-exports.RGBToHex = function(red,green,blue) {
-  var a = exports.GiveHex(Math.floor(red / 16));
-  var b = exports.GiveHex(red % 16);
-  var c = exports.GiveHex(Math.floor(green / 16));
-  var d = exports.GiveHex(green % 16);
-  var e = exports.GiveHex(Math.floor(blue / 16));
-  var f = exports.GiveHex(blue % 16);
-
-  var hex = a + b + c + d + e + f;
-  return "#" + hex;
-};
-
-
 /**
  * http://www.javascripter.net/faq/rgb2hsv.htm
  *

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vis",
-  "version": "3.8.1-SNAPSHOT",
+  "version": "3.9.0",
   "description": "A dynamic, browser-based visualization library.",
   "homepage": "http://visjs.org/",
   "repository": {