added edge selection on edge label

HISTORY.md

@@ -8,6 +8,7 @@ http://visjs.org
 
 - Fixed nodes not always being unfixed when using allowedToMove.
 - Added dragStart and dragEnd events.
+- Added edge selection on edge labels.
 
 ### Graph2d
 

lib/network/Edge.js

@@ -38,6 +38,7 @@ function Edge (properties, network, networkConstants) {
   this.value  = undefined;
   this.selected = false;
   this.hover = false;
+  this.labelDimensions = {top:0,left:0,width:0,height:0};
 
   this.from = null;   // a node
   this.to = null;     // a node
@@ -547,22 +548,26 @@ Edge.prototype._label = function (ctx, text, x, y) {
     // TODO: cache the calculated size
     ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
         this.options.fontSize + "px " + this.options.fontFace;
-    ctx.fillStyle = this.options.fontFill;
+
 
     var lines = String(text).split('\n');
     var lineCount = lines.length;
     var fontSize = (Number(this.options.fontSize) + 4);
     var yLine = y + (1 - lineCount) / 2 * fontSize;
 
+    var width = ctx.measureText(lines[0]).width;
+    for (var i = 1; i < lineCount; i++) {
+      var lineWidth = ctx.measureText(lines[i]).width;
+      width = lineWidth > width ? lineWidth : width;
+    }
+    var height = this.options.fontSize * lineCount;
+    var left = x - width / 2;
+    var top = y - height / 2;
+
+    this.labelDimensions = {top:top,left:left,width:width,height:height};
+
     if (this.options.fontFill !== undefined && this.options.fontFill !== null && this.options.fontFill !== "none") {
-      var width = ctx.measureText(lines[0]).width;
-      for (var i = 1; i < lineCount; i++) {
-        var lineWidth = ctx.measureText(lines[i]).width;
-        width = lineWidth > width ? lineWidth : width;
-      }
-      var height = this.options.fontSize * lineCount;
-      var left = x - width / 2;
-      var top = y - height / 2;
+      ctx.fillStyle = this.options.fontFill;
       ctx.fillRect(left, top, width, height);
     }
 
@@ -918,6 +923,7 @@ Edge.prototype._drawArrow = function(ctx) {
  * @private
  */
 Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point
+  var returnValue = 0;
   if (this.from != this.to) {
     if (this.options.smoothCurves.enabled == true) {
       var xVia, yVia;
@@ -943,10 +949,10 @@ Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is
         }
         lastX = x; lastY = y;
       }
-      return minDistance
+      returnValue = minDistance;
     }
     else {
-      return this._getDistanceToLine(x1,y1,x2,y2,x3,y3);
+      returnValue = this._getDistanceToLine(x1,y1,x2,y2,x3,y3);
     }
   }
   else {
@@ -963,7 +969,17 @@ Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is
     }
     dx = x - x3;
     dy = y - y3;
-    return Math.abs(Math.sqrt(dx*dx + dy*dy) - radius);
+    returnValue = Math.abs(Math.sqrt(dx*dx + dy*dy) - radius);
+  }
+
+  if (this.labelDimensions.left < x3 &&
+    this.labelDimensions.left + this.labelDimensions.width > x3 &&
+    this.labelDimensions.top < y3 &&
+    this.labelDimensions.top + this.labelDimensions.height > y3) {
+    return 0;
+  }
+  else {
+    return returnValue;
   }
 };