added border width option for nodes per #210

HISTORY.md

@@ -28,7 +28,8 @@ http://visjs.org
 - Updated max velocity of nodes to three times it's original value.
 - Made "stabilized" event fire every time the network stabilizes.
 - Fixed drift in dragging nodes while zooming.
-- Fixed recursively constructing of hierarchical layouts.   
+- Fixed recursively constructing of hierarchical layouts.
+- Added borderWidth option for nodes.
 
 
 

docs/network.html

@@ -262,6 +262,21 @@ When using a DataSet, the network is automatically updating to changes in the Da
     <th>Description</th>
   </tr>
 
+  <tr>
+      <td>borderWidth</td>
+      <td>Number</td>
+      <td>1</td>
+      <td>The width of the border of the node when it is not selected, automatically limited by the width of the node.</td>
+  </tr>
+
+
+  <tr>
+      <td>borderWidthSelected</td>
+      <td>Number</td>
+      <td>undefined</td>
+      <td>The width of the border of the node when it is selected. If left at undefined, double the borderWidth will be used.</td>
+  </tr>
+
   <tr>
     <td>color</td>
     <td>String | Object</td>

lib/network/Network.js

@@ -83,7 +83,8 @@ function Network (container, data, options) {
       borderColor: '#2B7CE9',
       backgroundColor: '#97C2FC',
       highlightColor: '#D2E5FF',
-      group: undefined
+      group: undefined,
+      borderWidth: 1
     },
     edges: {
       widthMin: 1,

lib/network/Node.js

@@ -58,6 +58,8 @@ function Node(properties, imagelist, grouplist, constants) {
   this.radiusMax = constants.nodes.radiusMax;
   this.level = -1;
   this.preassignedLevel = false;
+  this.borderWidth = constants.nodes.borderWidth;
+  this.borderWidthSelected = constants.nodes.borderWidthSelected;
 
 
   this.imagelist = imagelist;
@@ -73,6 +75,8 @@ function Node(properties, imagelist, grouplist, constants) {
   this.mass = 1;  // kg
   this.fixedData = {x:null,y:null};
 
+
+  console.log(properties)
   this.setProperties(properties, constants);
 
   // creating the variables for clustering
@@ -152,7 +156,8 @@ Node.prototype.setProperties = function(properties, constants) {
   if (properties.y !== undefined)         {this.y = properties.y;}
   if (properties.value !== undefined)     {this.value = properties.value;}
   if (properties.level !== undefined)     {this.level = properties.level; this.preassignedLevel = true;}
-
+  if (properties.borderWidth !== undefined)                 {this.borderWidth = properties.borderWidth;}
+  if (properties.borderWidthSelected !== undefined)         {this.borderWidthSelected = properties.borderWidthSelected;}
 
   // physics
   if (properties.mass !== undefined)                {this.mass = properties.mass;}
@@ -570,22 +575,23 @@ Node.prototype._drawBox = function (ctx) {
   this.top = this.y - this.height / 2;
 
   var clusterLineWidth = 2.5;
-  var selectionLineWidth = 2;
+  var borderWidth = this.borderWidth;
+  var selectionLineWidth = this.borderWidthSelected || 2 * this.borderWidth;
 
   ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
   // draw the outer border
   if (this.clusterSize > 1) {
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
     ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+    ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
 
     ctx.roundRect(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth, this.radius);
     ctx.stroke();
   }
-  ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+  ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
   ctx.lineWidth *= this.networkScaleInv;
-  ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+  ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
 
   ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
 
@@ -619,22 +625,23 @@ Node.prototype._drawDatabase = function (ctx) {
   this.top = this.y - this.height / 2;
 
   var clusterLineWidth = 2.5;
-  var selectionLineWidth = 2;
+  var borderWidth = this.borderWidth;
+  var selectionLineWidth = this.borderWidthSelected || 2 * this.borderWidth;
 
   ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
   // draw the outer border
   if (this.clusterSize > 1) {
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
     ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+    ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
 
     ctx.database(this.x - this.width/2 - 2*ctx.lineWidth, this.y - this.height*0.5 - 2*ctx.lineWidth, this.width + 4*ctx.lineWidth, this.height + 4*ctx.lineWidth);
     ctx.stroke();
   }
-  ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+  ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
   ctx.lineWidth *= this.networkScaleInv;
-  ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+  ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
 
   ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
   ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height);
@@ -669,22 +676,23 @@ Node.prototype._drawCircle = function (ctx) {
   this.top = this.y - this.height / 2;
 
   var clusterLineWidth = 2.5;
-  var selectionLineWidth = 2;
+  var borderWidth = this.borderWidth;
+  var selectionLineWidth = this.borderWidthSelected || 2 * this.borderWidth;
 
   ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
   // draw the outer border
   if (this.clusterSize > 1) {
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
     ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+    ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
 
     ctx.circle(this.x, this.y, this.radius+2*ctx.lineWidth);
     ctx.stroke();
   }
-  ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+  ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
   ctx.lineWidth *= this.networkScaleInv;
-  ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+  ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
 
   ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
   ctx.circle(this.x, this.y, this.radius);
@@ -719,22 +727,23 @@ Node.prototype._drawEllipse = function (ctx) {
   this.top = this.y - this.height / 2;
 
   var clusterLineWidth = 2.5;
-  var selectionLineWidth = 2;
+  var borderWidth = this.borderWidth;
+  var selectionLineWidth = this.borderWidthSelected || 2 * this.borderWidth;
 
   ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
   // draw the outer border
   if (this.clusterSize > 1) {
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
     ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+    ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
 
     ctx.ellipse(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth);
     ctx.stroke();
   }
-  ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+  ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
   ctx.lineWidth *= this.networkScaleInv;
-  ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+  ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
 
   ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
 
@@ -786,7 +795,8 @@ Node.prototype._drawShape = function (ctx, shape) {
   this.top = this.y - this.height / 2;
 
   var clusterLineWidth = 2.5;
-  var selectionLineWidth = 2;
+  var borderWidth = this.borderWidth;
+  var selectionLineWidth = this.borderWidthSelected || 2 * this.borderWidth;
   var radiusMultiplier = 2;
 
   // choose draw method depending on the shape
@@ -802,16 +812,16 @@ Node.prototype._drawShape = function (ctx, shape) {
 
   // draw the outer border
   if (this.clusterSize > 1) {
-    ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+    ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
     ctx.lineWidth *= this.networkScaleInv;
-    ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+    ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
 
     ctx[shape](this.x, this.y, this.radius + radiusMultiplier * ctx.lineWidth);
     ctx.stroke();
   }
-  ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+  ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
   ctx.lineWidth *= this.networkScaleInv;
-  ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
+  ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
 
   ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
   ctx[shape](this.x, this.y, this.radius);