@babylonjs/gui 5.0.0-beta.9 → 5.0.0-rc.10

package/2D/controls/textBlock.js

@@ -1,589 +1,604 @@
-import { __decorate, __extends } from "tslib";
-import { Observable } from "@babylonjs/core/Misc/observable.js";
-import { ValueAndUnit } from "../valueAndUnit.js";
-import { Control } from "./control.js";
-import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
-import { serialize } from '@babylonjs/core/Misc/decorators.js';
-import { EngineStore } from "@babylonjs/core/Engines/engineStore.js";
-/**
- * Enum that determines the text-wrapping mode to use.
- */
-export var TextWrapping;
-(function (TextWrapping) {
-    /**
-     * Clip the text when it's larger than Control.width; this is the default mode.
-     */
-    TextWrapping[TextWrapping["Clip"] = 0] = "Clip";
-    /**
-     * Wrap the text word-wise, i.e. try to add line-breaks at word boundary to fit within Control.width.
-     */
-    TextWrapping[TextWrapping["WordWrap"] = 1] = "WordWrap";
-    /**
-     * Ellipsize the text, i.e. shrink with trailing … when text is larger than Control.width.
-     */
-    TextWrapping[TextWrapping["Ellipsis"] = 2] = "Ellipsis";
-    /**
-     * Wrap the text word-wise and clip the text when the text's height is larger than the Control.height, and shrink the last line with trailing … .
-     */
-    TextWrapping[TextWrapping["WordWrapEllipsis"] = 3] = "WordWrapEllipsis";
-})(TextWrapping || (TextWrapping = {}));
-/**
- * Class used to create text block control
- */
-var TextBlock = /** @class */ (function (_super) {
-    __extends(TextBlock, _super);
-    /**
-     * Creates a new TextBlock object
-     * @param name defines the name of the control
-     * @param text defines the text to display (emptry string by default)
-     */
-    function TextBlock(
-    /**
-     * Defines the name of the control
-     */
-    name, text) {
-        if (text === void 0) { text = ""; }
-        var _this = _super.call(this, name) || this;
-        _this.name = name;
-        _this._text = "";
-        _this._textWrapping = TextWrapping.Clip;
-        _this._textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
-        _this._textVerticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
-        _this._resizeToFit = false;
-        _this._lineSpacing = new ValueAndUnit(0);
-        _this._outlineWidth = 0;
-        _this._outlineColor = "white";
-        _this._underline = false;
-        _this._lineThrough = false;
-        /**
-         * An event triggered after the text is changed
-         */
-        _this.onTextChangedObservable = new Observable();
-        /**
-         * An event triggered after the text was broken up into lines
-         */
-        _this.onLinesReadyObservable = new Observable();
-        _this.text = text;
-        return _this;
-    }
-    Object.defineProperty(TextBlock.prototype, "lines", {
-        /**
-         * Return the line list (you may need to use the onLinesReadyObservable to make sure the list is ready)
-         */
-        get: function () {
-            return this._lines;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(TextBlock.prototype, "resizeToFit", {
-        /**
-         * Gets or sets an boolean indicating that the TextBlock will be resized to fit container
-         */
-        get: function () {
-            return this._resizeToFit;
-        },
-        /**
-         * Gets or sets an boolean indicating that the TextBlock will be resized to fit container
-         */
-        set: function (value) {
-            if (this._resizeToFit === value) {
-                return;
-            }
-            this._resizeToFit = value;
-            if (this._resizeToFit) {
-                this._width.ignoreAdaptiveScaling = true;
-                this._height.ignoreAdaptiveScaling = true;
-            }
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(TextBlock.prototype, "textWrapping", {
-        /**
-         * Gets or sets a boolean indicating if text must be wrapped
-         */
-        get: function () {
-            return this._textWrapping;
-        },
-        /**
-         * Gets or sets a boolean indicating if text must be wrapped
-         */
-        set: function (value) {
-            if (this._textWrapping === value) {
-                return;
-            }
-            this._textWrapping = +value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(TextBlock.prototype, "text", {
-        /**
-         * Gets or sets text to display
-         */
-        get: function () {
-            return this._text;
-        },
-        /**
-         * Gets or sets text to display
-         */
-        set: function (value) {
-            if (this._text === value) {
-                return;
-            }
-            this._text = value + ""; // Making sure it is a text
-            this._markAsDirty();
-            this.onTextChangedObservable.notifyObservers(this);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(TextBlock.prototype, "textHorizontalAlignment", {
-        /**
-         * Gets or sets text horizontal alignment (BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER by default)
-         */
-        get: function () {
-            return this._textHorizontalAlignment;
-        },
-        /**
-         * Gets or sets text horizontal alignment (BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER by default)
-         */
-        set: function (value) {
-            if (this._textHorizontalAlignment === value) {
-                return;
-            }
-            this._textHorizontalAlignment = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(TextBlock.prototype, "textVerticalAlignment", {
-        /**
-         * Gets or sets text vertical alignment (BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER by default)
-         */
-        get: function () {
-            return this._textVerticalAlignment;
-        },
-        /**
-         * Gets or sets text vertical alignment (BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER by default)
-         */
-        set: function (value) {
-            if (this._textVerticalAlignment === value) {
-                return;
-            }
-            this._textVerticalAlignment = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(TextBlock.prototype, "lineSpacing", {
-        /**
-         * Gets or sets line spacing value
-         */
-        get: function () {
-            return this._lineSpacing.toString(this._host);
-        },
-        /**
-         * Gets or sets line spacing value
-         */
-        set: function (value) {
-            if (this._lineSpacing.fromString(value)) {
-                this._markAsDirty();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(TextBlock.prototype, "outlineWidth", {
-        /**
-         * Gets or sets outlineWidth of the text to display
-         */
-        get: function () {
-            return this._outlineWidth;
-        },
-        /**
-         * Gets or sets outlineWidth of the text to display
-         */
-        set: function (value) {
-            if (this._outlineWidth === value) {
-                return;
-            }
-            this._outlineWidth = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(TextBlock.prototype, "underline", {
-        /**
-         * Gets or sets a boolean indicating that text must have underline
-         */
-        get: function () {
-            return this._underline;
-        },
-        /**
-         * Gets or sets a boolean indicating that text must have underline
-         */
-        set: function (value) {
-            if (this._underline === value) {
-                return;
-            }
-            this._underline = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(TextBlock.prototype, "lineThrough", {
-        /**
-         * Gets or sets an boolean indicating that text must be crossed out
-         */
-        get: function () {
-            return this._lineThrough;
-        },
-        /**
-         * Gets or sets an boolean indicating that text must be crossed out
-         */
-        set: function (value) {
-            if (this._lineThrough === value) {
-                return;
-            }
-            this._lineThrough = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(TextBlock.prototype, "outlineColor", {
-        /**
-         * Gets or sets outlineColor of the text to display
-         */
-        get: function () {
-            return this._outlineColor;
-        },
-        /**
-         * Gets or sets outlineColor of the text to display
-         */
-        set: function (value) {
-            if (this._outlineColor === value) {
-                return;
-            }
-            this._outlineColor = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    TextBlock.prototype._getTypeName = function () {
-        return "TextBlock";
-    };
-    TextBlock.prototype._processMeasures = function (parentMeasure, context) {
-        if (!this._fontOffset || this.isDirty) {
-            this._fontOffset = Control._GetFontOffset(context.font);
-        }
-        _super.prototype._processMeasures.call(this, parentMeasure, context);
-        // Prepare lines
-        this._lines = this._breakLines(this._currentMeasure.width, this._currentMeasure.height, context);
-        this.onLinesReadyObservable.notifyObservers(this);
-        var maxLineWidth = 0;
-        for (var i = 0; i < this._lines.length; i++) {
-            var line = this._lines[i];
-            if (line.width > maxLineWidth) {
-                maxLineWidth = line.width;
-            }
-        }
-        if (this._resizeToFit) {
-            if (this._textWrapping === TextWrapping.Clip) {
-                var newWidth = (this._paddingLeftInPixels + this._paddingRightInPixels + maxLineWidth) | 0;
-                if (newWidth !== this._width.internalValue) {
-                    this._width.updateInPlace(newWidth, ValueAndUnit.UNITMODE_PIXEL);
-                    this._rebuildLayout = true;
-                }
-            }
-            var newHeight = (this._paddingTopInPixels + this._paddingBottomInPixels + this._fontOffset.height * this._lines.length) | 0;
-            if (this._lines.length > 0 && this._lineSpacing.internalValue !== 0) {
-                var lineSpacing = 0;
-                if (this._lineSpacing.isPixel) {
-                    lineSpacing = this._lineSpacing.getValue(this._host);
-                }
-                else {
-                    lineSpacing = this._lineSpacing.getValue(this._host) * this._height.getValueInPixel(this._host, this._cachedParentMeasure.height);
-                }
-                newHeight += (this._lines.length - 1) * lineSpacing;
-            }
-            if (newHeight !== this._height.internalValue) {
-                this._height.updateInPlace(newHeight, ValueAndUnit.UNITMODE_PIXEL);
-                this._rebuildLayout = true;
-            }
-        }
-    };
-    TextBlock.prototype._drawText = function (text, textWidth, y, context) {
-        var width = this._currentMeasure.width;
-        var x = 0;
-        switch (this._textHorizontalAlignment) {
-            case Control.HORIZONTAL_ALIGNMENT_LEFT:
-                x = 0;
-                break;
-            case Control.HORIZONTAL_ALIGNMENT_RIGHT:
-                x = width - textWidth;
-                break;
-            case Control.HORIZONTAL_ALIGNMENT_CENTER:
-                x = (width - textWidth) / 2;
-                break;
-        }
-        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
-            context.shadowColor = this.shadowColor;
-            context.shadowBlur = this.shadowBlur;
-            context.shadowOffsetX = this.shadowOffsetX;
-            context.shadowOffsetY = this.shadowOffsetY;
-        }
-        if (this.outlineWidth) {
-            context.strokeText(text, this._currentMeasure.left + x, y);
-        }
-        context.fillText(text, this._currentMeasure.left + x, y);
-        if (this._underline) {
-            context.beginPath();
-            context.lineWidth = Math.round(this.fontSizeInPixels * 0.05);
-            context.moveTo(this._currentMeasure.left + x, y + 3);
-            context.lineTo(this._currentMeasure.left + x + textWidth, y + 3);
-            context.stroke();
-            context.closePath();
-        }
-        if (this._lineThrough) {
-            context.beginPath();
-            context.lineWidth = Math.round(this.fontSizeInPixels * 0.05);
-            context.moveTo(this._currentMeasure.left + x, y - this.fontSizeInPixels / 3);
-            context.lineTo(this._currentMeasure.left + x + textWidth, y - this.fontSizeInPixels / 3);
-            context.stroke();
-            context.closePath();
-        }
-    };
-    /** @hidden */
-    TextBlock.prototype._draw = function (context, invalidatedRectangle) {
-        context.save();
-        this._applyStates(context);
-        // Render lines
-        this._renderLines(context);
-        context.restore();
-    };
-    TextBlock.prototype._applyStates = function (context) {
-        _super.prototype._applyStates.call(this, context);
-        if (this.outlineWidth) {
-            context.lineWidth = this.outlineWidth;
-            context.strokeStyle = this.outlineColor;
-            context.lineJoin = 'miter';
-            context.miterLimit = 2;
-        }
-    };
-    TextBlock.prototype._breakLines = function (refWidth, refHeight, context) {
-        var lines = [];
-        var _lines = this.text.split("\n");
-        if (this._textWrapping === TextWrapping.Ellipsis) {
-            for (var _i = 0, _lines_1 = _lines; _i < _lines_1.length; _i++) {
-                var _line = _lines_1[_i];
-                lines.push(this._parseLineEllipsis(_line, refWidth, context));
-            }
-        }
-        else if (this._textWrapping === TextWrapping.WordWrap) {
-            for (var _a = 0, _lines_2 = _lines; _a < _lines_2.length; _a++) {
-                var _line = _lines_2[_a];
-                lines.push.apply(lines, this._parseLineWordWrap(_line, refWidth, context));
-            }
-        }
-        else if (this._textWrapping === TextWrapping.WordWrapEllipsis) {
-            for (var _b = 0, _lines_3 = _lines; _b < _lines_3.length; _b++) {
-                var _line = _lines_3[_b];
-                lines.push.apply(lines, this._parseLineWordWrapEllipsis(_line, refWidth, refHeight, context));
-            }
-        }
-        else {
-            for (var _c = 0, _lines_4 = _lines; _c < _lines_4.length; _c++) {
-                var _line = _lines_4[_c];
-                lines.push(this._parseLine(_line, context));
-            }
-        }
-        return lines;
-    };
-    TextBlock.prototype._parseLine = function (line, context) {
-        if (line === void 0) { line = ""; }
-        var textMetrics = context.measureText(line);
-        var lineWidth = Math.abs(textMetrics.actualBoundingBoxLeft) + Math.abs(textMetrics.actualBoundingBoxRight);
-        return { text: line, width: lineWidth };
-    };
-    TextBlock.prototype._parseLineEllipsis = function (line, width, context) {
-        if (line === void 0) { line = ""; }
-        var textMetrics = context.measureText(line);
-        var lineWidth = Math.abs(textMetrics.actualBoundingBoxLeft) + Math.abs(textMetrics.actualBoundingBoxRight);
-        if (lineWidth > width) {
-            line += "…";
-        }
-        // unicode support. split('') does not work with unicode!
-        // make sure Array.from is available
-        var characters = Array.from && Array.from(line);
-        if (!characters) {
-            // no array.from, use the old method
-            while (line.length > 2 && lineWidth > width) {
-                line = line.slice(0, -2) + "…";
-                textMetrics = context.measureText(line);
-                lineWidth = Math.abs(textMetrics.actualBoundingBoxLeft) + Math.abs(textMetrics.actualBoundingBoxRight);
-            }
-        }
-        else {
-            while (characters.length && lineWidth > width) {
-                characters.pop();
-                line = "".concat(characters.join(""), "...");
-                textMetrics = context.measureText(line);
-                lineWidth = Math.abs(textMetrics.actualBoundingBoxLeft) + Math.abs(textMetrics.actualBoundingBoxRight);
-            }
-        }
-        return { text: line, width: lineWidth };
-    };
-    TextBlock.prototype._parseLineWordWrap = function (line, width, context) {
-        if (line === void 0) { line = ""; }
-        var lines = [];
-        var words = this.wordSplittingFunction ? this.wordSplittingFunction(line) : line.split(" ");
-        var textMetrics = context.measureText(line);
-        var lineWidth = Math.abs(textMetrics.actualBoundingBoxLeft) + Math.abs(textMetrics.actualBoundingBoxRight);
-        for (var n = 0; n < words.length; n++) {
-            var testLine = n > 0 ? line + " " + words[n] : words[0];
-            var metrics = context.measureText(testLine);
-            var testWidth = Math.abs(metrics.actualBoundingBoxLeft) + Math.abs(metrics.actualBoundingBoxRight);
-            if (testWidth > width && n > 0) {
-                lines.push({ text: line, width: lineWidth });
-                line = words[n];
-                textMetrics = context.measureText(line);
-                lineWidth = Math.abs(textMetrics.actualBoundingBoxLeft) + Math.abs(textMetrics.actualBoundingBoxRight);
-            }
-            else {
-                lineWidth = testWidth;
-                line = testLine;
-            }
-        }
-        lines.push({ text: line, width: lineWidth });
-        return lines;
-    };
-    TextBlock.prototype._parseLineWordWrapEllipsis = function (line, width, height, context) {
-        if (line === void 0) { line = ""; }
-        var lines = this._parseLineWordWrap(line, width, context);
-        for (var n = 1; n <= lines.length; n++) {
-            var currentHeight = this._computeHeightForLinesOf(n);
-            if (currentHeight > height && n > 1) {
-                var lastLine = lines[n - 2];
-                var currentLine = lines[n - 1];
-                lines[n - 2] = this._parseLineEllipsis("".concat(lastLine.text + currentLine.text), width, context);
-                var linesToRemove = lines.length - n + 1;
-                for (var i = 0; i < linesToRemove; i++) {
-                    lines.pop();
-                }
-                return lines;
-            }
-        }
-        return lines;
-    };
-    TextBlock.prototype._renderLines = function (context) {
-        var height = this._currentMeasure.height;
-        var rootY = 0;
-        switch (this._textVerticalAlignment) {
-            case Control.VERTICAL_ALIGNMENT_TOP:
-                rootY = this._fontOffset.ascent;
-                break;
-            case Control.VERTICAL_ALIGNMENT_BOTTOM:
-                rootY = height - this._fontOffset.height * (this._lines.length - 1) - this._fontOffset.descent;
-                break;
-            case Control.VERTICAL_ALIGNMENT_CENTER:
-                rootY = this._fontOffset.ascent + (height - this._fontOffset.height * this._lines.length) / 2;
-                break;
-        }
-        rootY += this._currentMeasure.top;
-        for (var i = 0; i < this._lines.length; i++) {
-            var line = this._lines[i];
-            if (i !== 0 && this._lineSpacing.internalValue !== 0) {
-                if (this._lineSpacing.isPixel) {
-                    rootY += this._lineSpacing.getValue(this._host);
-                }
-                else {
-                    rootY = rootY + this._lineSpacing.getValue(this._host) * this._height.getValueInPixel(this._host, this._cachedParentMeasure.height);
-                }
-            }
-            this._drawText(line.text, line.width, rootY, context);
-            rootY += this._fontOffset.height;
-        }
-    };
-    TextBlock.prototype._computeHeightForLinesOf = function (lineCount) {
-        var newHeight = this._paddingTopInPixels + this._paddingBottomInPixels + this._fontOffset.height * lineCount;
-        if (lineCount > 0 && this._lineSpacing.internalValue !== 0) {
-            var lineSpacing = 0;
-            if (this._lineSpacing.isPixel) {
-                lineSpacing = this._lineSpacing.getValue(this._host);
-            }
-            else {
-                lineSpacing = this._lineSpacing.getValue(this._host) * this._height.getValueInPixel(this._host, this._cachedParentMeasure.height);
-            }
-            newHeight += (lineCount - 1) * lineSpacing;
-        }
-        return newHeight;
-    };
-    /**
-     * Given a width constraint applied on the text block, find the expected height
-     * @returns expected height
-     */
-    TextBlock.prototype.computeExpectedHeight = function () {
-        var _a;
-        if (this.text && this.widthInPixels) {
-            // Should abstract platform instead of using LastCreatedEngine
-            var context_1 = (_a = EngineStore.LastCreatedEngine) === null || _a === void 0 ? void 0 : _a.createCanvas(0, 0).getContext("2d");
-            if (context_1) {
-                this._applyStates(context_1);
-                if (!this._fontOffset) {
-                    this._fontOffset = Control._GetFontOffset(context_1.font);
-                }
-                var lines = this._lines ? this._lines : this._breakLines(this.widthInPixels - this._paddingLeftInPixels - this._paddingRightInPixels, this.heightInPixels - this._paddingTopInPixels - this._paddingBottomInPixels, context_1);
-                return this._computeHeightForLinesOf(lines.length);
-            }
-        }
-        return 0;
-    };
-    TextBlock.prototype.dispose = function () {
-        _super.prototype.dispose.call(this);
-        this.onTextChangedObservable.clear();
-    };
-    __decorate([
-        serialize()
-    ], TextBlock.prototype, "resizeToFit", null);
-    __decorate([
-        serialize()
-    ], TextBlock.prototype, "textWrapping", null);
-    __decorate([
-        serialize()
-    ], TextBlock.prototype, "text", null);
-    __decorate([
-        serialize()
-    ], TextBlock.prototype, "textHorizontalAlignment", null);
-    __decorate([
-        serialize()
-    ], TextBlock.prototype, "textVerticalAlignment", null);
-    __decorate([
-        serialize()
-    ], TextBlock.prototype, "lineSpacing", null);
-    __decorate([
-        serialize()
-    ], TextBlock.prototype, "outlineWidth", null);
-    __decorate([
-        serialize()
-    ], TextBlock.prototype, "underline", null);
-    __decorate([
-        serialize()
-    ], TextBlock.prototype, "lineThrough", null);
-    __decorate([
-        serialize()
-    ], TextBlock.prototype, "outlineColor", null);
-    return TextBlock;
-}(Control));
-export { TextBlock };
-RegisterClass("BABYLON.GUI.TextBlock", TextBlock);
+import { __decorate, __extends } from "tslib";
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import { ValueAndUnit } from "../valueAndUnit";
+import { Control } from "./control";
+import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
+import { serialize } from "@babylonjs/core/Misc/decorators.js";
+import { EngineStore } from "@babylonjs/core/Engines/engineStore.js";
+/**
+ * Enum that determines the text-wrapping mode to use.
+ */
+export var TextWrapping;
+(function (TextWrapping) {
+    /**
+     * Clip the text when it's larger than Control.width; this is the default mode.
+     */
+    TextWrapping[TextWrapping["Clip"] = 0] = "Clip";
+    /**
+     * Wrap the text word-wise, i.e. try to add line-breaks at word boundary to fit within Control.width.
+     */
+    TextWrapping[TextWrapping["WordWrap"] = 1] = "WordWrap";
+    /**
+     * Ellipsize the text, i.e. shrink with trailing … when text is larger than Control.width.
+     */
+    TextWrapping[TextWrapping["Ellipsis"] = 2] = "Ellipsis";
+    /**
+     * Wrap the text word-wise and clip the text when the text's height is larger than the Control.height, and shrink the last line with trailing … .
+     */
+    TextWrapping[TextWrapping["WordWrapEllipsis"] = 3] = "WordWrapEllipsis";
+})(TextWrapping || (TextWrapping = {}));
+/**
+ * Class used to create text block control
+ */
+var TextBlock = /** @class */ (function (_super) {
+    __extends(TextBlock, _super);
+    /**
+     * Creates a new TextBlock object
+     * @param name defines the name of the control
+     * @param text defines the text to display (empty string by default)
+     */
+    function TextBlock(
+    /**
+     * Defines the name of the control
+     */
+    name, text) {
+        if (text === void 0) { text = ""; }
+        var _this = _super.call(this, name) || this;
+        _this.name = name;
+        _this._text = "";
+        _this._textWrapping = TextWrapping.Clip;
+        _this._textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
+        _this._textVerticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
+        _this._resizeToFit = false;
+        _this._lineSpacing = new ValueAndUnit(0);
+        _this._outlineWidth = 0;
+        _this._outlineColor = "white";
+        _this._underline = false;
+        _this._lineThrough = false;
+        /**
+         * An event triggered after the text is changed
+         */
+        _this.onTextChangedObservable = new Observable();
+        /**
+         * An event triggered after the text was broken up into lines
+         */
+        _this.onLinesReadyObservable = new Observable();
+        _this.text = text;
+        return _this;
+    }
+    Object.defineProperty(TextBlock.prototype, "lines", {
+        /**
+         * Return the line list (you may need to use the onLinesReadyObservable to make sure the list is ready)
+         */
+        get: function () {
+            return this._lines;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextBlock.prototype, "resizeToFit", {
+        /**
+         * Gets or sets an boolean indicating that the TextBlock will be resized to fit container
+         */
+        get: function () {
+            return this._resizeToFit;
+        },
+        /**
+         * Gets or sets an boolean indicating that the TextBlock will be resized to fit container
+         */
+        set: function (value) {
+            if (this._resizeToFit === value) {
+                return;
+            }
+            this._resizeToFit = value;
+            if (this._resizeToFit) {
+                this._width.ignoreAdaptiveScaling = true;
+                this._height.ignoreAdaptiveScaling = true;
+            }
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextBlock.prototype, "textWrapping", {
+        /**
+         * Gets or sets a boolean indicating if text must be wrapped
+         */
+        get: function () {
+            return this._textWrapping;
+        },
+        /**
+         * Gets or sets a boolean indicating if text must be wrapped
+         */
+        set: function (value) {
+            if (this._textWrapping === value) {
+                return;
+            }
+            this._textWrapping = +value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextBlock.prototype, "text", {
+        /**
+         * Gets or sets text to display
+         */
+        get: function () {
+            return this._text;
+        },
+        /**
+         * Gets or sets text to display
+         */
+        set: function (value) {
+            if (this._text === value) {
+                return;
+            }
+            this._text = value + ""; // Making sure it is a text
+            this._markAsDirty();
+            this.onTextChangedObservable.notifyObservers(this);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextBlock.prototype, "textHorizontalAlignment", {
+        /**
+         * Gets or sets text horizontal alignment (BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER by default)
+         */
+        get: function () {
+            return this._textHorizontalAlignment;
+        },
+        /**
+         * Gets or sets text horizontal alignment (BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER by default)
+         */
+        set: function (value) {
+            if (this._textHorizontalAlignment === value) {
+                return;
+            }
+            this._textHorizontalAlignment = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextBlock.prototype, "textVerticalAlignment", {
+        /**
+         * Gets or sets text vertical alignment (BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER by default)
+         */
+        get: function () {
+            return this._textVerticalAlignment;
+        },
+        /**
+         * Gets or sets text vertical alignment (BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER by default)
+         */
+        set: function (value) {
+            if (this._textVerticalAlignment === value) {
+                return;
+            }
+            this._textVerticalAlignment = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextBlock.prototype, "lineSpacing", {
+        /**
+         * Gets or sets line spacing value
+         */
+        get: function () {
+            return this._lineSpacing.toString(this._host);
+        },
+        /**
+         * Gets or sets line spacing value
+         */
+        set: function (value) {
+            if (this._lineSpacing.fromString(value)) {
+                this._markAsDirty();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextBlock.prototype, "outlineWidth", {
+        /**
+         * Gets or sets outlineWidth of the text to display
+         */
+        get: function () {
+            return this._outlineWidth;
+        },
+        /**
+         * Gets or sets outlineWidth of the text to display
+         */
+        set: function (value) {
+            if (this._outlineWidth === value) {
+                return;
+            }
+            this._outlineWidth = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextBlock.prototype, "underline", {
+        /**
+         * Gets or sets a boolean indicating that text must have underline
+         */
+        get: function () {
+            return this._underline;
+        },
+        /**
+         * Gets or sets a boolean indicating that text must have underline
+         */
+        set: function (value) {
+            if (this._underline === value) {
+                return;
+            }
+            this._underline = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextBlock.prototype, "lineThrough", {
+        /**
+         * Gets or sets an boolean indicating that text must be crossed out
+         */
+        get: function () {
+            return this._lineThrough;
+        },
+        /**
+         * Gets or sets an boolean indicating that text must be crossed out
+         */
+        set: function (value) {
+            if (this._lineThrough === value) {
+                return;
+            }
+            this._lineThrough = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextBlock.prototype, "outlineColor", {
+        /**
+         * Gets or sets outlineColor of the text to display
+         */
+        get: function () {
+            return this._outlineColor;
+        },
+        /**
+         * Gets or sets outlineColor of the text to display
+         */
+        set: function (value) {
+            if (this._outlineColor === value) {
+                return;
+            }
+            this._outlineColor = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TextBlock.prototype._getTypeName = function () {
+        return "TextBlock";
+    };
+    TextBlock.prototype._processMeasures = function (parentMeasure, context) {
+        if (!this._fontOffset || this.isDirty) {
+            this._fontOffset = Control._GetFontOffset(context.font);
+        }
+        _super.prototype._processMeasures.call(this, parentMeasure, context);
+        // Prepare lines
+        this._lines = this._breakLines(this._currentMeasure.width, this._currentMeasure.height, context);
+        this.onLinesReadyObservable.notifyObservers(this);
+        var maxLineWidth = 0;
+        for (var i = 0; i < this._lines.length; i++) {
+            var line = this._lines[i];
+            if (line.width > maxLineWidth) {
+                maxLineWidth = line.width;
+            }
+        }
+        if (this._resizeToFit) {
+            if (this._textWrapping === TextWrapping.Clip) {
+                var newWidth = (this._paddingLeftInPixels + this._paddingRightInPixels + maxLineWidth) | 0;
+                if (newWidth !== this._width.internalValue) {
+                    this._width.updateInPlace(newWidth, ValueAndUnit.UNITMODE_PIXEL);
+                    this._rebuildLayout = true;
+                }
+            }
+            var newHeight = (this._paddingTopInPixels + this._paddingBottomInPixels + this._fontOffset.height * this._lines.length) | 0;
+            if (this._lines.length > 0 && this._lineSpacing.internalValue !== 0) {
+                var lineSpacing = 0;
+                if (this._lineSpacing.isPixel) {
+                    lineSpacing = this._lineSpacing.getValue(this._host);
+                }
+                else {
+                    lineSpacing = this._lineSpacing.getValue(this._host) * this._height.getValueInPixel(this._host, this._cachedParentMeasure.height);
+                }
+                newHeight += (this._lines.length - 1) * lineSpacing;
+            }
+            if (newHeight !== this._height.internalValue) {
+                this._height.updateInPlace(newHeight, ValueAndUnit.UNITMODE_PIXEL);
+                this._rebuildLayout = true;
+            }
+        }
+    };
+    TextBlock.prototype._drawText = function (text, textWidth, y, context) {
+        var width = this._currentMeasure.width;
+        var x = 0;
+        switch (this._textHorizontalAlignment) {
+            case Control.HORIZONTAL_ALIGNMENT_LEFT:
+                x = 0;
+                break;
+            case Control.HORIZONTAL_ALIGNMENT_RIGHT:
+                x = width - textWidth;
+                break;
+            case Control.HORIZONTAL_ALIGNMENT_CENTER:
+                x = (width - textWidth) / 2;
+                break;
+        }
+        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
+            context.shadowColor = this.shadowColor;
+            context.shadowBlur = this.shadowBlur;
+            context.shadowOffsetX = this.shadowOffsetX;
+            context.shadowOffsetY = this.shadowOffsetY;
+        }
+        if (this.outlineWidth) {
+            context.strokeText(text, this._currentMeasure.left + x, y);
+        }
+        context.fillText(text, this._currentMeasure.left + x, y);
+        if (this._underline) {
+            context.beginPath();
+            context.lineWidth = Math.round(this.fontSizeInPixels * 0.05);
+            context.moveTo(this._currentMeasure.left + x, y + 3);
+            context.lineTo(this._currentMeasure.left + x + textWidth, y + 3);
+            context.stroke();
+            context.closePath();
+        }
+        if (this._lineThrough) {
+            context.beginPath();
+            context.lineWidth = Math.round(this.fontSizeInPixels * 0.05);
+            context.moveTo(this._currentMeasure.left + x, y - this.fontSizeInPixels / 3);
+            context.lineTo(this._currentMeasure.left + x + textWidth, y - this.fontSizeInPixels / 3);
+            context.stroke();
+            context.closePath();
+        }
+    };
+    /**
+     * @param context
+     * @hidden
+     */
+    TextBlock.prototype._draw = function (context) {
+        context.save();
+        this._applyStates(context);
+        // Render lines
+        this._renderLines(context);
+        context.restore();
+    };
+    TextBlock.prototype._applyStates = function (context) {
+        _super.prototype._applyStates.call(this, context);
+        if (this.outlineWidth) {
+            context.lineWidth = this.outlineWidth;
+            context.strokeStyle = this.outlineColor;
+            context.lineJoin = "miter";
+            context.miterLimit = 2;
+        }
+    };
+    TextBlock.prototype._breakLines = function (refWidth, refHeight, context) {
+        var lines = [];
+        var _lines = this.text.split("\n");
+        if (this._textWrapping === TextWrapping.Ellipsis) {
+            for (var _i = 0, _lines_1 = _lines; _i < _lines_1.length; _i++) {
+                var _line = _lines_1[_i];
+                lines.push(this._parseLineEllipsis(_line, refWidth, context));
+            }
+        }
+        else if (this._textWrapping === TextWrapping.WordWrap) {
+            for (var _a = 0, _lines_2 = _lines; _a < _lines_2.length; _a++) {
+                var _line = _lines_2[_a];
+                lines.push.apply(lines, this._parseLineWordWrap(_line, refWidth, context));
+            }
+        }
+        else if (this._textWrapping === TextWrapping.WordWrapEllipsis) {
+            for (var _b = 0, _lines_3 = _lines; _b < _lines_3.length; _b++) {
+                var _line = _lines_3[_b];
+                lines.push.apply(lines, this._parseLineWordWrapEllipsis(_line, refWidth, refHeight, context));
+            }
+        }
+        else {
+            for (var _c = 0, _lines_4 = _lines; _c < _lines_4.length; _c++) {
+                var _line = _lines_4[_c];
+                lines.push(this._parseLine(_line, context));
+            }
+        }
+        return lines;
+    };
+    TextBlock.prototype._parseLine = function (line, context) {
+        if (line === void 0) { line = ""; }
+        var textMetrics = context.measureText(line);
+        var lineWidth = Math.abs(textMetrics.actualBoundingBoxLeft) + Math.abs(textMetrics.actualBoundingBoxRight);
+        return { text: line, width: lineWidth };
+    };
+    //Calculate how many characters approximately we need to remove
+    TextBlock.prototype._getCharsToRemove = function (lineWidth, width, lineLength) {
+        var diff = lineWidth > width ? lineWidth - width : 0;
+        // This isn't exact unless the font is monospaced
+        var charWidth = lineWidth / lineLength;
+        var removeChars = Math.max(Math.floor(diff / charWidth), 1);
+        return removeChars;
+    };
+    TextBlock.prototype._parseLineEllipsis = function (line, width, context) {
+        if (line === void 0) { line = ""; }
+        var textMetrics = context.measureText(line);
+        var lineWidth = Math.abs(textMetrics.actualBoundingBoxLeft) + Math.abs(textMetrics.actualBoundingBoxRight);
+        var removeChars = this._getCharsToRemove(lineWidth, width, line.length);
+        // unicode support. split('') does not work with unicode!
+        // make sure Array.from is available
+        var characters = Array.from && Array.from(line);
+        if (!characters) {
+            // no array.from, use the old method
+            while (line.length > 2 && lineWidth > width) {
+                line = line.slice(0, -removeChars);
+                textMetrics = context.measureText(line + "…");
+                lineWidth = Math.abs(textMetrics.actualBoundingBoxLeft) + Math.abs(textMetrics.actualBoundingBoxRight);
+                removeChars = this._getCharsToRemove(lineWidth, width, line.length);
+            }
+            // Add on the end
+            line += "…";
+        }
+        else {
+            while (characters.length && lineWidth > width) {
+                characters.splice(characters.length - removeChars, removeChars);
+                line = "".concat(characters.join(""), "\u2026");
+                textMetrics = context.measureText(line);
+                lineWidth = Math.abs(textMetrics.actualBoundingBoxLeft) + Math.abs(textMetrics.actualBoundingBoxRight);
+                removeChars = this._getCharsToRemove(lineWidth, width, line.length);
+            }
+        }
+        return { text: line, width: lineWidth };
+    };
+    TextBlock.prototype._parseLineWordWrap = function (line, width, context) {
+        if (line === void 0) { line = ""; }
+        var lines = [];
+        var words = this.wordSplittingFunction ? this.wordSplittingFunction(line) : line.split(" ");
+        var textMetrics = context.measureText(line);
+        var lineWidth = Math.abs(textMetrics.actualBoundingBoxLeft) + Math.abs(textMetrics.actualBoundingBoxRight);
+        for (var n = 0; n < words.length; n++) {
+            var testLine = n > 0 ? line + " " + words[n] : words[0];
+            var metrics = context.measureText(testLine);
+            var testWidth = Math.abs(metrics.actualBoundingBoxLeft) + Math.abs(metrics.actualBoundingBoxRight);
+            if (testWidth > width && n > 0) {
+                lines.push({ text: line, width: lineWidth });
+                line = words[n];
+                textMetrics = context.measureText(line);
+                lineWidth = Math.abs(textMetrics.actualBoundingBoxLeft) + Math.abs(textMetrics.actualBoundingBoxRight);
+            }
+            else {
+                lineWidth = testWidth;
+                line = testLine;
+            }
+        }
+        lines.push({ text: line, width: lineWidth });
+        return lines;
+    };
+    TextBlock.prototype._parseLineWordWrapEllipsis = function (line, width, height, context) {
+        if (line === void 0) { line = ""; }
+        var lines = this._parseLineWordWrap(line, width, context);
+        for (var n = 1; n <= lines.length; n++) {
+            var currentHeight = this._computeHeightForLinesOf(n);
+            if (currentHeight > height && n > 1) {
+                var lastLine = lines[n - 2];
+                var currentLine = lines[n - 1];
+                lines[n - 2] = this._parseLineEllipsis("".concat(lastLine.text + currentLine.text), width, context);
+                var linesToRemove = lines.length - n + 1;
+                for (var i = 0; i < linesToRemove; i++) {
+                    lines.pop();
+                }
+                return lines;
+            }
+        }
+        return lines;
+    };
+    TextBlock.prototype._renderLines = function (context) {
+        var height = this._currentMeasure.height;
+        var rootY = 0;
+        switch (this._textVerticalAlignment) {
+            case Control.VERTICAL_ALIGNMENT_TOP:
+                rootY = this._fontOffset.ascent;
+                break;
+            case Control.VERTICAL_ALIGNMENT_BOTTOM:
+                rootY = height - this._fontOffset.height * (this._lines.length - 1) - this._fontOffset.descent;
+                break;
+            case Control.VERTICAL_ALIGNMENT_CENTER:
+                rootY = this._fontOffset.ascent + (height - this._fontOffset.height * this._lines.length) / 2;
+                break;
+        }
+        rootY += this._currentMeasure.top;
+        for (var i = 0; i < this._lines.length; i++) {
+            var line = this._lines[i];
+            if (i !== 0 && this._lineSpacing.internalValue !== 0) {
+                if (this._lineSpacing.isPixel) {
+                    rootY += this._lineSpacing.getValue(this._host);
+                }
+                else {
+                    rootY = rootY + this._lineSpacing.getValue(this._host) * this._height.getValueInPixel(this._host, this._cachedParentMeasure.height);
+                }
+            }
+            this._drawText(line.text, line.width, rootY, context);
+            rootY += this._fontOffset.height;
+        }
+    };
+    TextBlock.prototype._computeHeightForLinesOf = function (lineCount) {
+        var newHeight = this._paddingTopInPixels + this._paddingBottomInPixels + this._fontOffset.height * lineCount;
+        if (lineCount > 0 && this._lineSpacing.internalValue !== 0) {
+            var lineSpacing = 0;
+            if (this._lineSpacing.isPixel) {
+                lineSpacing = this._lineSpacing.getValue(this._host);
+            }
+            else {
+                lineSpacing = this._lineSpacing.getValue(this._host) * this._height.getValueInPixel(this._host, this._cachedParentMeasure.height);
+            }
+            newHeight += (lineCount - 1) * lineSpacing;
+        }
+        return newHeight;
+    };
+    /**
+     * Given a width constraint applied on the text block, find the expected height
+     * @returns expected height
+     */
+    TextBlock.prototype.computeExpectedHeight = function () {
+        var _a;
+        if (this.text && this.widthInPixels) {
+            // Should abstract platform instead of using LastCreatedEngine
+            var context_1 = (_a = EngineStore.LastCreatedEngine) === null || _a === void 0 ? void 0 : _a.createCanvas(0, 0).getContext("2d");
+            if (context_1) {
+                this._applyStates(context_1);
+                if (!this._fontOffset) {
+                    this._fontOffset = Control._GetFontOffset(context_1.font);
+                }
+                var lines = this._lines
+                    ? this._lines
+                    : this._breakLines(this.widthInPixels - this._paddingLeftInPixels - this._paddingRightInPixels, this.heightInPixels - this._paddingTopInPixels - this._paddingBottomInPixels, context_1);
+                return this._computeHeightForLinesOf(lines.length);
+            }
+        }
+        return 0;
+    };
+    TextBlock.prototype.dispose = function () {
+        _super.prototype.dispose.call(this);
+        this.onTextChangedObservable.clear();
+    };
+    __decorate([
+        serialize()
+    ], TextBlock.prototype, "resizeToFit", null);
+    __decorate([
+        serialize()
+    ], TextBlock.prototype, "textWrapping", null);
+    __decorate([
+        serialize()
+    ], TextBlock.prototype, "text", null);
+    __decorate([
+        serialize()
+    ], TextBlock.prototype, "textHorizontalAlignment", null);
+    __decorate([
+        serialize()
+    ], TextBlock.prototype, "textVerticalAlignment", null);
+    __decorate([
+        serialize()
+    ], TextBlock.prototype, "lineSpacing", null);
+    __decorate([
+        serialize()
+    ], TextBlock.prototype, "outlineWidth", null);
+    __decorate([
+        serialize()
+    ], TextBlock.prototype, "underline", null);
+    __decorate([
+        serialize()
+    ], TextBlock.prototype, "lineThrough", null);
+    __decorate([
+        serialize()
+    ], TextBlock.prototype, "outlineColor", null);
+    return TextBlock;
+}(Control));
+export { TextBlock };
+RegisterClass("BABYLON.GUI.TextBlock", TextBlock);
 //# sourceMappingURL=textBlock.js.map