added edge color options per #54

dist/vis.js

@@ -5,7 +5,7 @@
  * A dynamic, browser-based visualization library.
  *
  * @version 0.7.0-SNAPSHOT
- * @date    2014-03-06
+ * @date    2014-03-07
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -10465,7 +10465,8 @@ function Edge (properties, graph, constants) {
   // 2012-08-08
   this.dash = util.extend({}, constants.edges.dash); // contains properties length, gap, altLength
 
-  this.color       = constants.edges.color;
+  this.color       = {color:constants.edges.color.color,
+                      highlight:constants.edges.color.highlight};
   this.widthFixed  = false;
   this.lengthFixed = false;
 
@@ -10513,7 +10514,17 @@ Edge.prototype.setProperties = function(properties, constants) {
     if (properties.dash.altLength !== undefined) {this.dash.altLength = properties.dash.altLength;}
   }
 
-  if (properties.color !== undefined) {this.color = properties.color;}
+  if (properties.color !== undefined) {
+    if (util.isString(properties.color)) {
+      this.color.color = properties.color;
+      this.color.highlight = properties.color;
+    }
+    else {
+      if (properties.color.color !== undefined)     {this.color.color = properties.color.color;}
+      if (properties.color.highlight !== undefined) {this.color.highlight = properties.color.highlight;}
+      else if (properties.color.color !== undefined){this.color.highlight = properties.color.color;}
+    }
+  }
 
   // A node is connected when it has a from and to node.
   this.connect();
@@ -10642,7 +10653,8 @@ Edge.prototype.isOverlappingWith = function(obj) {
  */
 Edge.prototype._drawLine = function(ctx) {
   // set style
-  ctx.strokeStyle = this.color;
+  if (this.selected == true) {ctx.strokeStyle = this.color.highlight;}
+  else                       {ctx.strokeStyle = this.color.color;}
   ctx.lineWidth = this._getLineWidth();
 
   if (this.from != this.to) {
@@ -10772,7 +10784,9 @@ Edge.prototype._label = function (ctx, text, x, y) {
  */
 Edge.prototype._drawDashLine = function(ctx) {
   // set style
-  ctx.strokeStyle = this.color;
+  if (this.selected == true) {ctx.strokeStyle = this.color.highlight;}
+  else                       {ctx.strokeStyle = this.color.color;}
+
   ctx.lineWidth = this._getLineWidth();
 
   // only firefox and chrome support this method, else we use the legacy one.
@@ -10895,8 +10909,8 @@ Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
 Edge.prototype._drawArrowCenter = function(ctx) {
   var point;
   // set style
-  ctx.strokeStyle = this.color;
-  ctx.fillStyle = this.color;
+  if (this.selected == true) {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
+  else                       {ctx.strokeStyle = this.color.color; ctx.fillStyle = this.color.color;}
   ctx.lineWidth = this._getLineWidth();
 
   if (this.from != this.to) {
@@ -10969,8 +10983,9 @@ Edge.prototype._drawArrowCenter = function(ctx) {
  */
 Edge.prototype._drawArrow = function(ctx) {
   // set style
-  ctx.strokeStyle = this.color;
-  ctx.fillStyle = this.color;
+  if (this.selected == true) {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
+  else                       {ctx.strokeStyle = this.color.color; ctx.fillStyle = this.color.color;}
+
   ctx.lineWidth = this._getLineWidth();
 
   var angle, length;
@@ -15838,7 +15853,10 @@ function Graph (container, data, options) {
       widthMax: 15,
       width: 1,
       style: 'line',
-      color: '#848484',
+      color: {
+        color:'#848484',
+        highlight:'#848484'
+      },
       fontColor: '#343434',
       fontSize: 14, // px
       fontFace: 'arial',
@@ -15855,8 +15873,8 @@ function Graph (container, data, options) {
         theta: 1 / 0.6, // inverted to save time during calculation
         gravitationalConstant: -2000,
         centralGravity: 0.3,
-        springLength: 100,
-        springConstant: 0.05,
+        springLength: 95,
+        springConstant: 0.04,
         damping: 0.09
       },
       repulsion: {

docs/graph.html

@@ -482,12 +482,26 @@ var edges = [
     <th>Description</th>
   </tr>
 
-  <tr>
-    <td>color</td>
-    <td>string</td>
-    <td>no</td>
-    <td>A HTML color for the edge.</td>
-  </tr>
+    <tr>
+        <td>color</td>
+        <td>String | Object</td>
+        <td>no</td>
+        <td>Color for the edge.</td>
+    </tr>
+
+    <tr>
+        <td>color.color</td>
+        <td>String</td>
+        <td>no</td>
+        <td>Color of the edge when not selected.</td>
+    </tr>
+
+    <tr>
+        <td>color.highlight</td>
+        <td>String</td>
+        <td>no</td>
+        <td>Color of the edge when selected.</td>
+    </tr>
 
   <tr>
     <td>dash</td>
@@ -1009,12 +1023,26 @@ var options = {
     <th>Description</th>
   </tr>
 
-  <tr>
-    <td>color</td>
-    <td>String</td>
-    <td>"#2B7CE9"</td>
-    <td>The default color of a edge.</td>
-  </tr>
+    <tr>
+        <td>color</td>
+        <td>String | Object</td>
+        <td>Object</td>
+        <td>Colors of the edge. This object contains both colors for the selected and unselected state.</td>
+    </tr>
+
+    <tr>
+        <td>color.color</td>
+        <td>String</td>
+        <td>"#848484"</td>
+        <td>Color of the edge when not selected.</td>
+    </tr>
+
+    <tr>
+        <td>color.highlight</td>
+        <td>String</td>
+        <td>"#848484"</td>
+        <td>Color of the edge when selected.</td>
+    </tr>
 
   <tr>
     <td>dash</td>
@@ -1225,8 +1253,8 @@ var options = {
             enabled: true,
             gravitationalConstant: -2000,
             centralGravity: 0.1,
-            springLength: 100,
-            springConstant: 0.05,
+            springLength: 95,
+            springConstant: 0.04,
             damping: 0.09
         },
         repulsion: {
@@ -1267,14 +1295,14 @@ var options = {
     <tr>
         <td>springLength</td>
         <td>Number</td>
-        <td>100</td>
+        <td>95</td>
         <td>In the previous versions this was a property of the edges, called length. This is the length of the springs when they are at rest. During the simulation they will be streched by the gravitational fields.
             To greatly reduce the edge length, the gravitationalConstant has to be reduced as well.</td>
     </tr>
     <tr>
         <td>springConstant</td>
         <td>Number</td>
-        <td>0.05</td>
+        <td>0.04</td>
         <td>This is the spring constant used to calculate the spring forces based on Hooke&prime;s Law. More information is available <a href="http://en.wikipedia.org/wiki/Hooke's_law" target="_blank">here</a>.</td>
     </tr>
     <tr>

src/graph/Edge.js

@@ -52,7 +52,8 @@ function Edge (properties, graph, constants) {
   // 2012-08-08
   this.dash = util.extend({}, constants.edges.dash); // contains properties length, gap, altLength
 
-  this.color       = constants.edges.color;
+  this.color       = {color:constants.edges.color.color,
+                      highlight:constants.edges.color.highlight};
   this.widthFixed  = false;
   this.lengthFixed = false;
 
@@ -100,7 +101,17 @@ Edge.prototype.setProperties = function(properties, constants) {
     if (properties.dash.altLength !== undefined) {this.dash.altLength = properties.dash.altLength;}
   }
 
-  if (properties.color !== undefined) {this.color = properties.color;}
+  if (properties.color !== undefined) {
+    if (util.isString(properties.color)) {
+      this.color.color = properties.color;
+      this.color.highlight = properties.color;
+    }
+    else {
+      if (properties.color.color !== undefined)     {this.color.color = properties.color.color;}
+      if (properties.color.highlight !== undefined) {this.color.highlight = properties.color.highlight;}
+      else if (properties.color.color !== undefined){this.color.highlight = properties.color.color;}
+    }
+  }
 
   // A node is connected when it has a from and to node.
   this.connect();
@@ -229,7 +240,8 @@ Edge.prototype.isOverlappingWith = function(obj) {
  */
 Edge.prototype._drawLine = function(ctx) {
   // set style
-  ctx.strokeStyle = this.color;
+  if (this.selected == true) {ctx.strokeStyle = this.color.highlight;}
+  else                       {ctx.strokeStyle = this.color.color;}
   ctx.lineWidth = this._getLineWidth();
 
   if (this.from != this.to) {
@@ -359,7 +371,9 @@ Edge.prototype._label = function (ctx, text, x, y) {
  */
 Edge.prototype._drawDashLine = function(ctx) {
   // set style
-  ctx.strokeStyle = this.color;
+  if (this.selected == true) {ctx.strokeStyle = this.color.highlight;}
+  else                       {ctx.strokeStyle = this.color.color;}
+
   ctx.lineWidth = this._getLineWidth();
 
   // only firefox and chrome support this method, else we use the legacy one.
@@ -482,8 +496,8 @@ Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
 Edge.prototype._drawArrowCenter = function(ctx) {
   var point;
   // set style
-  ctx.strokeStyle = this.color;
-  ctx.fillStyle = this.color;
+  if (this.selected == true) {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
+  else                       {ctx.strokeStyle = this.color.color; ctx.fillStyle = this.color.color;}
   ctx.lineWidth = this._getLineWidth();
 
   if (this.from != this.to) {
@@ -556,8 +570,9 @@ Edge.prototype._drawArrowCenter = function(ctx) {
  */
 Edge.prototype._drawArrow = function(ctx) {
   // set style
-  ctx.strokeStyle = this.color;
-  ctx.fillStyle = this.color;
+  if (this.selected == true) {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
+  else                       {ctx.strokeStyle = this.color.color; ctx.fillStyle = this.color.color;}
+
   ctx.lineWidth = this._getLineWidth();
 
   var angle, length;

src/graph/Graph.js

@@ -63,7 +63,10 @@ function Graph (container, data, options) {
       widthMax: 15,
       width: 1,
       style: 'line',
-      color: '#848484',
+      color: {
+        color:'#848484',
+        highlight:'#848484'
+      },
       fontColor: '#343434',
       fontSize: 14, // px
       fontFace: 'arial',
@@ -80,8 +83,8 @@ function Graph (container, data, options) {
         theta: 1 / 0.6, // inverted to save time during calculation
         gravitationalConstant: -2000,
         centralGravity: 0.3,
-        springLength: 100,
-        springConstant: 0.05,
+        springLength: 95,
+        springConstant: 0.04,
         damping: 0.09
       },
       repulsion: {