Allow setting line spacing on GUI Textblock when drawing lines

dist/preview release/gui/babylon.gui.d.ts

@@ -514,12 +514,14 @@ declare module BABYLON.GUI {
         private _textVerticalAlignment;
         private _lines;
         private _resizeToFit;
+        private _lineSpacing;
         /**
         * An event triggered after the text is changed
         * @type {BABYLON.Observable}
         */
         onTextChangedObservable: Observable<TextBlock>;
         resizeToFit: boolean;
+        lineSpacing: number;
         textWrapping: boolean;
         text: string;
         textHorizontalAlignment: number;

dist/preview release/gui/babylon.gui.js

@@ -3160,6 +3160,7 @@ var BABYLON;
                 _this._textHorizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
                 _this._textVerticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_CENTER;
                 _this._resizeToFit = false;
+                _this._lineSpacing = 0;
                 /**
                 * An event triggered after the text is changed
                 * @type {BABYLON.Observable}
@@ -3182,6 +3183,13 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(TextBlock.prototype, "lineSpacing", {
+                set: function (value) {
+                    this._lineSpacing = value;
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(TextBlock.prototype, "textWrapping", {
                 get: function () {
                     return this._textWrapping;
@@ -3333,8 +3341,11 @@ var BABYLON;
                 }
                 rootY += this._currentMeasure.top;
                 var maxLineWidth = 0;
-                for (var _i = 0, _a = this._lines; _i < _a.length; _i++) {
-                    var line = _a[_i];
+                for (var i = 0; i < this._lines.length; i++) {
+                    var line = this._lines[i];
+                    if (i !== 0 && this._lineSpacing > 0) {
+                        rootY += this._lineSpacing;
+                    }
                     this._drawText(line.text, line.width, rootY, context);
                     rootY += this._fontOffset.height;
                     if (line.width > maxLineWidth)

dist/preview release/gui/babylon.gui.module.d.ts

@@ -519,12 +519,14 @@ declare module BABYLON.GUI {
         private _textVerticalAlignment;
         private _lines;
         private _resizeToFit;
+        private _lineSpacing;
         /**
         * An event triggered after the text is changed
         * @type {BABYLON.Observable}
         */
         onTextChangedObservable: Observable<TextBlock>;
         resizeToFit: boolean;
+        lineSpacing: number;
         textWrapping: boolean;
         text: string;
         textHorizontalAlignment: number;

gui/src/controls/textBlock.ts

@@ -9,7 +9,7 @@ module BABYLON.GUI {
 
         private _lines: any[];
         private _resizeToFit: boolean = false;
-
+        private _lineSpacing: number = 0;
         /**
         * An event triggered after the text is changed
         * @type {BABYLON.Observable}
@@ -20,6 +20,10 @@ module BABYLON.GUI {
             return this._resizeToFit;
         }
 
+        public set lineSpacing(value: number) {
+            this._lineSpacing = value;
+        }
+
         set resizeToFit(value: boolean) {
             this._resizeToFit = value;
 
@@ -106,7 +110,7 @@ module BABYLON.GUI {
                     break;
             }
 
-            if(this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY){
+            if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                 context.shadowColor = this.shadowColor;
                 context.shadowBlur = this.shadowBlur;
                 context.shadowOffsetX = this.shadowOffsetX;
@@ -133,41 +137,41 @@ module BABYLON.GUI {
             var _lines = this.text.split("\n");
 
             if (this._textWrapping && !this._resizeToFit) {
-                for(var _line of _lines) {
+                for (var _line of _lines) {
                     this._lines.push(this._parseLineWithTextWrapping(_line, context));
                 }
             } else {
-                for(var _line of _lines) {
+                for (var _line of _lines) {
                     this._lines.push(this._parseLine(_line, context));
                 }
             }
         }
 
-        protected _parseLine(line: string='', context: CanvasRenderingContext2D): object {
-          return {text: line, width: context.measureText(line).width};
+        protected _parseLine(line: string = '', context: CanvasRenderingContext2D): object {
+            return { text: line, width: context.measureText(line).width };
         }
 
-        protected _parseLineWithTextWrapping(line: string='', context: CanvasRenderingContext2D): object {
-          var words = line.split(' ');
-          var width = this._currentMeasure.width;
-          var lineWidth = 0;
-
-          for(var n = 0; n < words.length; n++) {
-              var testLine = n > 0 ? line + " " + words[n] : words[0];
-              var metrics = context.measureText(testLine);
-              var testWidth = metrics.width;
-              if (testWidth > width && n > 0) {
-                  this._lines.push({text: line, width: lineWidth});
-                  line = words[n];
-                  lineWidth = context.measureText(line).width;
-              }
-              else {
-                  lineWidth = testWidth;
-                  line = testLine;
-              }
-          }
+        protected _parseLineWithTextWrapping(line: string = '', context: CanvasRenderingContext2D): object {
+            var words = line.split(' ');
+            var width = this._currentMeasure.width;
+            var lineWidth = 0;
+
+            for (var n = 0; n < words.length; n++) {
+                var testLine = n > 0 ? line + " " + words[n] : words[0];
+                var metrics = context.measureText(testLine);
+                var testWidth = metrics.width;
+                if (testWidth > width && n > 0) {
+                    this._lines.push({ text: line, width: lineWidth });
+                    line = words[n];
+                    lineWidth = context.measureText(line).width;
+                }
+                else {
+                    lineWidth = testWidth;
+                    line = testLine;
+                }
+            }
 
-          return {text: line, width: lineWidth};
+            return { text: line, width: lineWidth };
         }
 
         protected _renderLines(context: CanvasRenderingContext2D): void {
@@ -191,9 +195,15 @@ module BABYLON.GUI {
 
             rootY += this._currentMeasure.top;
 
-            var maxLineWidth: number = 0;
+            var maxLineWidth: number = 0;            
+
+            for (let i = 0; i < this._lines.length; i++) {
+                const line = this._lines[i];
+
+                if (i !== 0 && this._lineSpacing > 0 ){
+                    rootY += this._lineSpacing;
+                }
 
-            for (var line of this._lines) {
                 this._drawText(line.text, line.width, rootY, context);
                 rootY += this._fontOffset.height;