added multiline text to edges, updated multiline code for both nodes and edges #291

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;