changed the dashes options, fixed bug

examples/network/01_basic_usage.html

@@ -30,7 +30,7 @@
   // create an array with edges
   var edges = [
     {from: 1, to: 1},
-    {from: 1, to: 3},
+    {from: 1, to: 3, dashes:{pattern:[10,15,2,5]}},
     {from: 1, to: 2},
     {from: 2, to: 4},
     {from: 2, to: 5}
@@ -44,11 +44,10 @@
     edges: edges
   };
   var options = {
-    configure:'edges'
-//    edges:{
-//      shadow:true,
-//      shape:'dot'
-//    },
+    configure:'edges',
+    edges:{
+      dashes:true,
+    },
 //      physics:{stabilization:true}
   }
   var network = new vis.Network(container, data, options);

lib/network/modules/ConfigurationSystem.js

@@ -88,12 +88,7 @@ class ConfigurationSystem {
           inherit: ['from','to','both',true, false],
           opacity: [1, 0, 1, 0.05]
         },
-        dashes: {
-          enabled: false,
-          length: [5, 0, 50, 1],
-          gap: [5, 0, 50, 1],
-          altLength: [5, 0, 50, 1]
-        },
+        dashes: false,
         font: {
           color: ['color','#343434'],
           size: [14, 0, 100, 1], // px

lib/network/modules/EdgesHandler.js

@@ -36,10 +36,7 @@ class EdgesHandler {
       },
       dashes:{
         enabled: false,
-        preset: 'dotted',
-        length: 10,
-        gap: 5,
-        altLength: undefined
+        pattern:[5,5]
       },
       font: {
         color: '#343434',

lib/network/modules/InteractionHandler.js

@@ -217,7 +217,7 @@ class InteractionHandler {
     this.drag.translation = util.extend({},this.body.view.translation); // copy the object
     this.drag.nodeId = undefined;
 
-    this.selectionHandler._generateClickEvent('dragStart',pointer);
+    this.selectionHandler._generateClickEvent('dragStart',this.drag.pointer);
 
     if (node !== undefined && this.options.dragNodes === true) {
       this.drag.nodeId = node.id;
@@ -324,7 +324,7 @@ class InteractionHandler {
     else {
       this.body.emitter.emit('_requestRedraw');
     }
-    this.selectionHandler._generateClickEvent('dragEnd',pointer);
+    this.selectionHandler._generateClickEvent('dragEnd',this.getPointer(event.center));
   }
 
 

lib/network/modules/components/edges/util/EdgeBase.js

@@ -27,45 +27,57 @@ class EdgeBase {
     // set style
     ctx.strokeStyle = this.getColor(ctx);
     ctx.lineWidth = this.getLineWidth(selected, hover);
+    let via = undefined;
+    if (this.options.dashes.enabled === true) {
+      via = this._drawDashedLine(ctx);
+    }
+    else {
+      via = this._drawLine(ctx);
+    }
+    return via;
+  }
+
+
+  _drawLine(ctx) {
     let via = undefined;
     if (this.from != this.to) {
       // draw line
-      if (this.options.dashes.enabled === true) {
-        via = this._drawDashedLine(ctx);
-      }
-      else {
-        via = this._line(ctx);
-      }
+      via = this._line(ctx);
     }
     else {
       let [x,y,radius] = this._getCircleData(ctx);
       this._circle(ctx, x, y, radius);
     }
-
     return via;
   }
 
-
   _drawDashedLine(ctx) {
     let via = undefined;
+    ctx.lineCap = 'round';
+    let pattern = [5,5];
+    if (this.options.dashes.pattern !== undefined) {
+      if (Array.isArray(this.options.dashes.pattern) === true) {
+        pattern = this.options.dashes.pattern;
+      }
+    }
+
     // only firefox and chrome support this method, else we use the legacy one.
     if (ctx.setLineDash !== undefined && this.options.dashes.altLength === undefined) {
       ctx.save();
-      // configure the dash pattern
-      let pattern = [0];
-      if (this.options.dashes.length !== undefined && this.options.dashes.gap !== undefined) {
-        pattern = [this.options.dashes.length, this.options.dashes.gap];
-      }
-      else {
-        pattern = [5, 5];
-      }
 
       // set dash settings for chrome or firefox
       ctx.setLineDash(pattern);
       ctx.lineDashOffset = 0;
 
       // draw the line
-      via = this._line(ctx);
+      if (this.from != this.to) {
+        // draw line
+        via = this._line(ctx);
+      }
+      else {
+        let [x,y,radius] = this._getCircleData(ctx);
+        this._circle(ctx, x, y, radius);
+      }
 
       // restore the dash settings.
       ctx.setLineDash([0]);
@@ -73,23 +85,15 @@ class EdgeBase {
       ctx.restore();
     }
     else { // unsupporting smooth lines
-      // draw dashes line
-      ctx.beginPath();
-      ctx.lineCap = 'round';
-      if (this.options.dashes.altLength !== undefined) //If an alt dash value has been set add to the array this value
-      {
-        ctx.dashesLine(this.from.x, this.from.y, this.to.x, this.to.y,
-          [this.options.dashes.length, this.options.dashes.gap, this.options.dashes.altLength, this.options.dashes.gap]);
-      }
-      else if (this.options.dashes.length !== undefined && this.options.dashes.gap !== undefined) //If a dash and gap value has been set add to the array this value
-      {
-        ctx.dashesLine(this.from.x, this.from.y, this.to.x, this.to.y,
-          [this.options.dashes.length, this.options.dashes.gap]);
+
+
+      if (this.from != this.to) {
+        // draw line
+        ctx.dashedLine(this.from.x, this.from.y, this.to.x, this.to.y, pattern);
       }
-      else //If all else fails draw a line
-      {
-        ctx.moveTo(this.from.x, this.from.y);
-        ctx.lineTo(this.to.x, this.to.y);
+      else {
+        let [x,y,radius] = this._getCircleData(ctx);
+        this._circle(ctx, x, y, radius);
       }
       // draw shadow if enabled
       this.enableShadow(ctx);

lib/network/modules/components/shared/Label.js

@@ -32,8 +32,8 @@ class Label {
   static parseOptions(parentOptions, newOptions) {
     if (typeof newOptions.font === 'string') {
       let newOptionsArray = newOptions.font.split(" ");
-      parentOptions.size = newOptionsArray[0].replace("px",'');
-      parentOptions.face = newOptionsArray[1];
+      parentOptions.size  = newOptionsArray[0].replace("px",'');
+      parentOptions.face  = newOptionsArray[1];
       parentOptions.color = newOptionsArray[2];
     }
     else if (typeof newOptions.font === 'object') {

lib/network/shapes.js

@@ -236,27 +236,38 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
    * @author David Jordan
    * @date 2012-08-08
    */
-  CanvasRenderingContext2D.prototype.dashedLine = function (x, y, x2, y2, dashArray) {
-    if (!dashArray) dashArray = [10, 5];
-    if (dashLength === 0) dashLength = 0.001; // Hack for Safari
-    var dashCount = dashArray.length;
+  CanvasRenderingContext2D.prototype.dashedLine = function (x, y, x2, y2, pattern) {
+    this.beginPath();
     this.moveTo(x, y);
-    var dx = (x2 - x), dy = (y2 - y);
+
+    var patternLength = pattern.length;
+    var dx = (x2 - x);
+    var dy = (y2 - y);
     var slope = dy / dx;
     var distRemaining = Math.sqrt(dx * dx + dy * dy);
-    var dashIndex = 0, draw = true;
+    var patternIndex = 0;
+    var draw = true;
+    var xStep = 0;
+    var dashLength = pattern[0];
+
     while (distRemaining >= 0.1) {
-      var dashLength = dashArray[dashIndex++ % dashCount];
-      if (dashLength > distRemaining) dashLength = distRemaining;
-      var xStep = Math.sqrt(dashLength * dashLength / (1 + slope * slope));
-      if (dx < 0) xStep = -xStep;
+      dashLength = pattern[patternIndex++ % patternLength];
+      if (dashLength > distRemaining) {
+        dashLength = distRemaining;
+      }
+
+      xStep = Math.sqrt(dashLength * dashLength / (1 + slope * slope));
+      xStep = dx < 0 ? -xStep : xStep;
       x += xStep;
       y += slope * xStep;
-      this[draw ? 'lineTo' : 'moveTo'](x, y);
+
+      if (draw === true) {this.lineTo(x,y);}
+      else               {this.moveTo(x,y);}
+
       distRemaining -= dashLength;
       draw = !draw;
     }
   };
 
-  // TODO: add diamond shape
+
 }