added arrow-type 'circle'; fixes #1993

lib/network/modules/EdgesHandler.js

@@ -23,9 +23,9 @@ class EdgesHandler {
     this.options = {};
     this.defaultOptions = {
       arrows: {
-        to:     {enabled: false, scaleFactor:1}, // boolean / {arrowScaleFactor:1} / {enabled: false, arrowScaleFactor:1}
-        middle: {enabled: false, scaleFactor:1},
-        from:   {enabled: false, scaleFactor:1}
+        to:     {enabled: false, scaleFactor:1, type: 'arrow'}, // boolean / {arrowScaleFactor:1} / {enabled: false, arrowScaleFactor:1}
+        middle: {enabled: false, scaleFactor:1, type: 'arrow'},
+        from:   {enabled: false, scaleFactor:1, type: 'arrow'}
       },
       arrowStrikethrough: true,
       color: {
@@ -388,4 +388,4 @@ class EdgesHandler {
 
 }
 
-export default EdgesHandler;
+export default EdgesHandler;

lib/network/modules/PhysicsEngine.js

@@ -628,7 +628,7 @@ class PhysicsEngine {
       this._freezeNodes();
     }
     this.stabilizationIterations = 0;
-  
+
     setTimeout(() => this._stabilizationBatch(),0);
   }
 
@@ -649,7 +649,7 @@ class PhysicsEngine {
       this.physicsTick();
       count++;
     }
-  
+
     if (this.stabilized === false && this.stabilizationIterations < this.targetIterations) {
       this.body.emitter.emit('stabilizationProgress', {iterations: this.stabilizationIterations, total: this.targetIterations});
       setTimeout(this._stabilizationBatch.bind(this),0);
@@ -710,11 +710,11 @@ class PhysicsEngine {
 
       let angle = Math.atan2(force.y, force.x);
       ctx.fillStyle = color;
-      ctx.arrow(node.x + factor*force.x + Math.cos(angle)*arrowSize, node.y + factor*force.y+Math.sin(angle)*arrowSize, angle, arrowSize);
+      ctx.arrowEndpoint(node.x + factor*force.x + Math.cos(angle)*arrowSize, node.y + factor*force.y+Math.sin(angle)*arrowSize, angle, arrowSize);
       ctx.fill();
     }
   }
-  
+
 }
 
-export default PhysicsEngine;
+export default PhysicsEngine;

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

@@ -412,6 +412,7 @@ class EdgeBase {
     let node2;
     let guideOffset;
     let scaleFactor;
+    let type;
     let lineWidth = this.getLineWidth(selected, hover);
 
     if (position === 'from') {
@@ -419,17 +420,20 @@ class EdgeBase {
       node2 = this.to;
       guideOffset = 0.1;
       scaleFactor = this.options.arrows.from.scaleFactor;
+      type = this.options.arrows.from.type;
     }
     else if (position === 'to') {
       node1 = this.to;
       node2 = this.from;
       guideOffset = -0.1;
       scaleFactor = this.options.arrows.to.scaleFactor;
+      type = this.options.arrows.to.type;
     }
     else {
       node1 = this.to;
       node2 = this.from;
       scaleFactor = this.options.arrows.middle.scaleFactor;
+      type = this.options.arrows.middle.type;
     }
 
     // if not connected to itself
@@ -475,7 +479,7 @@ class EdgeBase {
     var yi = arrowPoint.y - length * 0.9 * Math.sin(angle);
     let arrowCore = {x: xi, y: yi};
 
-    return {point: arrowPoint, core: arrowCore, angle: angle, length: length};
+    return {point: arrowPoint, core: arrowCore, angle: angle, length: length, type: type};
   }
 
   /**
@@ -491,8 +495,13 @@ class EdgeBase {
     ctx.fillStyle = ctx.strokeStyle;
     ctx.lineWidth = this.getLineWidth(selected, hover);
 
-    // draw arrow at the end of the line
-    ctx.arrow(arrowData.point.x, arrowData.point.y, arrowData.angle, arrowData.length);
+    if (arrowData.type && arrowData.type.toLowerCase() === 'circle') {
+      // draw circle at the end of the line
+      ctx.circleEndpoint(arrowData.point.x, arrowData.point.y, arrowData.angle, arrowData.length);
+    } else {
+      // draw arrow at the end of the line
+      ctx.arrowEndpoint(arrowData.point.x, arrowData.point.y, arrowData.angle, arrowData.length);
+    }
 
     // draw shadow if enabled
     this.enableShadow(ctx);
@@ -521,4 +530,4 @@ class EdgeBase {
   }
 }
 
-export default EdgeBase;
+export default EdgeBase;

lib/network/options.js

@@ -24,9 +24,9 @@ let allOptions = {
   },
   edges: {
     arrows: {
-      to: { enabled: { boolean }, scaleFactor: { number }, __type__: { object, boolean } },
-      middle: { enabled: { boolean }, scaleFactor: { number }, __type__: { object, boolean } },
-      from: { enabled: { boolean }, scaleFactor: { number }, __type__: { object, boolean } },
+      to: { enabled: { boolean }, scaleFactor: { number }, type: { string: ['arrow', 'circle'] }, __type__: { object, boolean } },
+      middle: { enabled: { boolean }, scaleFactor: { number }, type: { string: ['arrow', 'circle'] }, __type__: { object, boolean } },
+      from: { enabled: { boolean }, scaleFactor: { number }, type: { string: ['arrow', 'circle'] }, __type__: { object, boolean } },
       __type__: { string: ['from', 'to', 'middle'], object }
     },
     arrowStrikethrough: { boolean },
@@ -371,9 +371,9 @@ let configureOptions = {
   },
   edges: {
     arrows: {
-      to: { enabled: false, scaleFactor: [1, 0, 3, 0.05] }, // boolean / {arrowScaleFactor:1} / {enabled: false, arrowScaleFactor:1}
-      middle: { enabled: false, scaleFactor: [1, 0, 3, 0.05] },
-      from: { enabled: false, scaleFactor: [1, 0, 3, 0.05] }
+      to: { enabled: false, scaleFactor: [1, 0, 3, 0.05], type: 'arrow' },
+      middle: { enabled: false, scaleFactor: [1, 0, 3, 0.05], type: 'arrow' },
+      from: { enabled: false, scaleFactor: [1, 0, 3, 0.05], type: 'arrow' }
     },
     arrowStrikethrough: true,
     color: {

lib/network/shapes.js

@@ -206,9 +206,9 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
 
 
   /**
-   * Draw an arrow point (no line)
+   * Draw an arrow an the end of an line with the given angle.
    */
-  CanvasRenderingContext2D.prototype.arrow = function (x, y, angle, length) {
+  CanvasRenderingContext2D.prototype.arrowEndpoint = function (x, y, angle, length) {
     // tail
     var xt = x - length * Math.cos(angle);
     var yt = y - length * Math.sin(angle);
@@ -233,6 +233,16 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
     this.closePath();
   };
 
+  /**
+   * Draw an circle an the end of an line with the given angle.
+   */
+  CanvasRenderingContext2D.prototype.circleEndpoint = function (x, y, angle, length) {
+    var radius = length * 0.4;
+    var xc = x - radius * Math.cos(angle);
+    var yc = y - radius * Math.sin(angle);
+    this.circle(xc, yc, radius);
+  };
+
   /**
    * Sets up the dashedLine functionality for drawing
    * Original code came from http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas