added gradients for edges

lib/network/Edge.js

@@ -79,7 +79,7 @@ Edge.prototype.setProperties = function(properties) {
 
   var fields = ['style','fontSize','fontFace','fontColor','fontFill','fontStrokeWidth','fontStrokeColor','width',
     'widthSelectionMultiplier','hoverWidth','arrowScaleFactor','dash','inheritColor','labelAlignment', 'opacity',
-    'customScalingFunction'
+    'customScalingFunction','useGradients'
   ];
   util.selectiveDeepExtend(fields, this.options, properties);
 
@@ -234,7 +234,7 @@ Edge.prototype.isOverlappingWith = function(obj) {
   }
 };
 
-Edge.prototype._getColor = function() {
+Edge.prototype._getColor = function(ctx) {
   var colorObj = this.options.color;
   if (this.colorDirty === true) {
     if (this.options.inheritColor == "to") {
@@ -255,6 +255,13 @@ Edge.prototype._getColor = function() {
     this.colorDirty = false;
   }
 
+  if (this.options.useGradients == true) {
+    var grd = ctx.createLinearGradient(this.from.x, this.from.y, this.to.x, this.to.y);
+    grd.addColorStop(0, this.from.selected ? this.from.options.color.highlight.border :  this.from.options.color.border);
+    grd.addColorStop(1, this.to.selected ? this.to.options.color.highlight.border :  this.to.options.color.border);
+    return grd;
+  }
+
   if (this.selected == true)   {return colorObj.highlight;}
   else if (this.hover == true) {return colorObj.hover;}
   else                         {return colorObj.color;}
@@ -270,7 +277,7 @@ Edge.prototype._getColor = function() {
  */
 Edge.prototype._drawLine = function(ctx) {
   // set style
-  ctx.strokeStyle = this._getColor();
+  ctx.strokeStyle = this._getColor(ctx);
   ctx.lineWidth   = this._getLineWidth();
 
   if (this.from != this.to) {
@@ -715,7 +722,7 @@ Edge.prototype._drawLabelText = function(ctx, x, yLine, lines, lineCount, fontSi
  */
 Edge.prototype._drawDashLine = function(ctx) {
   // set style
-  ctx.strokeStyle = this._getColor();
+  ctx.strokeStyle = this._getColor(ctx);
   ctx.lineWidth = this._getLineWidth();
 
   var via = null;
@@ -820,7 +827,7 @@ Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
 Edge.prototype._drawArrowCenter = function(ctx) {
   var point;
   // set style
-  ctx.strokeStyle = this._getColor();
+  ctx.strokeStyle = this._getColor(ctx);
   ctx.fillStyle = ctx.strokeStyle;
   ctx.lineWidth = this._getLineWidth();
 
@@ -956,7 +963,7 @@ Edge.prototype._findBorderPosition = function(from,ctx) {
  */
 Edge.prototype._drawArrow = function(ctx) {
   // set style
-  ctx.strokeStyle = this._getColor();
+  ctx.strokeStyle = this._getColor(ctx);
   ctx.fillStyle = ctx.strokeStyle;
   ctx.lineWidth = this._getLineWidth();
 

lib/network/Network.js

@@ -129,7 +129,8 @@ function Network (container, data, options) {
         gap: 5,
         altLength: undefined
       },
-      inheritColor: "from" // to, from, false, true (== from)
+      inheritColor: "from", // to, from, false, true (== from)
+      useGradients: false
     },
     configurePhysics:false,
     physics: {