Fixed #1531 , #1335: border distances for arrow positioning

HISTORY.md

@@ -9,6 +9,9 @@ http://visjs.org
 - Fixed #1527: error when creating/updating a Timeline without data.
 - Fixed #1127: `doubleClick` event not being fired.
 
+### Network
+
+- Fixed #1531 , #1335:  border distances for arrow positioning
 
 ## 2015-12-18, version 4.11.0
 

lib/network/modules/components/nodes/shapes/Box.js

@@ -60,19 +60,20 @@ class Box extends NodeBase {
     this.left = x - this.width * 0.5;
     this.top = y - this.height * 0.5;
 
-    this.boundingBox.left = this.left;
-    this.boundingBox.top = this.top;
-    this.boundingBox.bottom = this.top + this.height;
-    this.boundingBox.right = this.left + this.width;
+    let borderRadius = this.options.shapeProperties.borderRadius; // only effective for box
+    this.boundingBox.left = this.left - borderRadius;
+    this.boundingBox.top = this.top - borderRadius;
+    this.boundingBox.bottom = this.top + this.height + borderRadius;
+    this.boundingBox.right = this.left + this.width + borderRadius;
   }
 
   distanceToBorder(ctx, angle) {
     this.resize(ctx);
-    let a = this.width / 2;
-    let b = this.height / 2;
-    let w = (Math.sin(angle) * a);
-    let h = (Math.cos(angle) * b);
-    return a * b / Math.sqrt(w * w + h * h);
+    let borderWidth = this.options.borderWidth;
+
+    return Math.min(
+        Math.abs((this.width) / 2 / Math.cos(angle)),
+        Math.abs((this.height)  / 2 / Math.sin(angle))) + borderWidth;
   }
 }
 

lib/network/modules/components/nodes/shapes/Circle.js

@@ -45,11 +45,7 @@ class Circle extends CircleImageBase {
 
   distanceToBorder(ctx, angle) {
     this.resize(ctx);
-    var a = this.width / 2;
-    var b = this.height / 2;
-    var w = (Math.sin(angle) * a);
-    var h = (Math.cos(angle) * b);
-    return a * b / Math.sqrt(w * w + h * h);
+    return this.width * 0.5;
   }
 }
 

lib/network/modules/components/nodes/shapes/CircularImage.js

@@ -38,10 +38,10 @@ class CircularImage extends CircleImageBase {
 
     let size = Math.min(0.5*this.height, 0.5*this.width);
 
-    // draw the backgroun circle. IMPORTANT: the stroke in this method is used by the clip method below.
+    // draw the background circle. IMPORTANT: the stroke in this method is used by the clip method below.
     this._drawRawCircle(ctx, x, y, selected, hover, size);
 
-    // now we draw in the cicle, we save so we can revert the clip operation after drawing.
+    // now we draw in the circle, we save so we can revert the clip operation after drawing.
     ctx.save();
     // clip is used to use the stroke in drawRawCircle as an area that we can draw in.
     ctx.clip();
@@ -68,7 +68,7 @@ class CircularImage extends CircleImageBase {
 
   distanceToBorder(ctx, angle) {
     this.resize(ctx);
-    return this._distanceToBorder(ctx,angle);
+    return this.width * 0.5;
   }
 }
 

lib/network/modules/components/nodes/shapes/Image.js

@@ -77,12 +77,7 @@ class Image extends CircleImageBase {
   }
 
   distanceToBorder(ctx, angle) {
-    this.resize(ctx);
-    var a = this.width / 2;
-    var b = this.height / 2;
-    var w = (Math.sin(angle) * a);
-    var h = (Math.cos(angle) * b);
-    return a * b / Math.sqrt(w * w + h * h);
+     return this._distanceToBorder(ctx,angle);
   }
 }
 

lib/network/modules/components/nodes/util/NodeBase.js

@@ -16,7 +16,7 @@ class NodeBase {
   }
 
   _distanceToBorder(ctx,angle) {
-    var borderWidth = 1;
+    var borderWidth = this.options.borderWidth;
     this.resize(ctx);
     return Math.min(
         Math.abs(this.width / 2 / Math.cos(angle)),

lib/network/modules/components/physics/BarnesHutSolver.js

@@ -24,7 +24,7 @@ class BarnesHutSolver {
 
 
   /**
-   * This function calculates the forces the nodes apply on eachother based on a gravitational model.
+   * This function calculates the forces the nodes apply on each other based on a gravitational model.
    * The Barnes Hut method is used to speed up this N-body simulation.
    *
    * @private