Merge remote-tracking branch 'origin/develop' into develop

Conflicts:
	dist/vis.js

HISTORY.md

@@ -13,6 +13,7 @@ http://visjs.org
 - Fixed some positioning issues with the close button of the manipulation menu.
 - Added fontFill to Nodes as it is in Edges.
 - Implemented support for broken image fallback. Thanks @sfairgrieve.
+- Added multiline labels to edges as they are implemented in nodes. Updated multiline example to show this.
 
 ### Timeline
 

examples/network/10_multiline_text.html

@@ -29,8 +29,8 @@
       var edges = [
         {from: 1, to: 2, style: 'line', color: 'red', width: 3, length: 200}, // individual length definition is possible
         {from: 1, to: 3, style: 'dash-line', width: 1, length: 200},
-        {from: 1, to: 4, style: 'line', width: 1, length: 200},
-        {from: 1, to: 5, style: 'arrow', width: 3, length: 200}
+        {from: 1, to: 4, style: 'line', width: 1, length: 200, label:'I\'m an edge!'},
+        {from: 1, to: 5, style: 'arrow', width: 3, length: 200, label:'arrows\nare cool'}
       ];
 
       // create a network

lib/network/Edge.js

@@ -548,18 +548,33 @@ Edge.prototype._label = function (ctx, text, x, y) {
     ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
         this.options.fontSize + "px " + this.options.fontFace;
     ctx.fillStyle = this.options.fontFill;
-    var width = ctx.measureText(text).width;
-    var height = this.options.fontSize;
-    var left = x - width / 2;
-    var top = y - height / 2;
 
-    ctx.fillRect(left, top, width, height);
+    var lines = String(text).split('\n');
+    var lineCount = lines.length;
+    var fontSize = (Number(this.options.fontSize) + 4);
+    var yLine = y + (1 - lineCount) / 2 * fontSize;
+
+    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.fillRect(left, top, width, height);
+    }
 
     // draw text
     ctx.fillStyle = this.options.fontColor || "black";
-    ctx.textAlign = "left";
-    ctx.textBaseline = "top";
-    ctx.fillText(text, left, top);
+    ctx.textAlign = "center";
+    ctx.textBaseline =  "middle";
+
+    for (var i = 0; i < lineCount; i++) {
+      ctx.fillText(lines[i], x, yLine);
+      yLine += fontSize;
+    }
   }
 };
 

lib/network/Node.js

@@ -857,8 +857,12 @@ Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNo
 
     // font fill from edges now for nodes!
     if (this.options.fontFill !== undefined && this.options.fontFill !== null && this.options.fontFill !== "none") {
-      var width = ctx.measureText(text).width;
-      var height = this.options.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;
       ctx.fillStyle = this.options.fontFill;