TextBlock: provide expected height

gui/src/2D/controls/textBlock.ts

@@ -249,29 +249,35 @@ module BABYLON.GUI {
         }
 
         protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
-            this._lines = [];
+            this._lines = this._breakLines(this._currentMeasure.width, context);
+            this.onLinesReadyObservable.notifyObservers(this);
+        }
+
+        protected _breakLines(refWidth: number, context: CanvasRenderingContext2D): object[] {
+            var lines = [];
             var _lines = this.text.split("\n");
 
             if (this._textWrapping && !this._resizeToFit) {
                 for (var _line of _lines) {
-                    this._lines.push(this._parseLineWithTextWrapping(_line, context));
+                    lines.push(...this._parseLineWithTextWrapping(_line, refWidth, context));
                 }
             } else {
                 for (var _line of _lines) {
-                    this._lines.push(this._parseLine(_line, context));
+                    lines.push(this._parseLine(_line, context));
                 }
             }
 
-            this.onLinesReadyObservable.notifyObservers(this);
+            return lines;
         }
 
         protected _parseLine(line: string = '', context: CanvasRenderingContext2D): object {
             return { text: line, width: context.measureText(line).width };
         }
 
-        protected _parseLineWithTextWrapping(line: string = '', context: CanvasRenderingContext2D): object {
+        protected _parseLineWithTextWrapping(line: string = '', width: number,
+                                             context: CanvasRenderingContext2D): object[] {
+            var lines = [];
             var words = line.split(' ');
-            var width = this._currentMeasure.width;
             var lineWidth = 0;
 
             for (var n = 0; n < words.length; n++) {
@@ -279,7 +285,7 @@ module BABYLON.GUI {
                 var metrics = context.measureText(testLine);
                 var testWidth = metrics.width;
                 if (testWidth > width && n > 0) {
-                    this._lines.push({ text: line, width: lineWidth });
+                    lines.push({ text: line, width: lineWidth });
                     line = words[n];
                     lineWidth = context.measureText(line).width;
                 }
@@ -288,8 +294,9 @@ module BABYLON.GUI {
                     line = testLine;
                 }
             }
+            lines.push({ text: line, width: lineWidth });
 
-            return { text: line, width: lineWidth };
+            return lines;
         }
 
         protected _renderLines(context: CanvasRenderingContext2D): void {
@@ -339,6 +346,26 @@ module BABYLON.GUI {
             }
         }
 
+        /**
+         * Given a width constraint applied on the text block, find the expected height
+         * @returns expected height
+         */
+        public computeExpectedHeight(): number {
+            if (this.text && this.widthInPixels) {
+                const context = document.createElement('canvas').getContext('2d');
+                if (context) {
+                    this._applyStates(context);
+                    if (!this._fontOffset) {
+                        this._fontOffset = Control._GetFontOffset(context.font);
+                    }
+                    const lines = this._lines ? this._lines : this._breakLines(
+                        this.widthInPixels - this.paddingLeftInPixels - this.paddingRightInPixels, context);
+                    return this.paddingTopInPixels + this.paddingBottomInPixels + this._fontOffset.height * lines.length;
+                }
+            }
+            return 0;
+        }
+
         dispose(): void {
             super.dispose();