babylonjs-gui 5.0.0-alpha.65 → 5.0.0-beta.1

package/babylon.gui.js

@@ -1925,6 +1925,29 @@ var Button = /** @class */ (function (_super) {
         }
         _super.prototype._onPointerUp.call(this, target, coordinates, pointerId, buttonIndex, notifyClick, pi);
     };
+    /**
+    * Serializes the current button
+    * @param serializationObject defines the JSON serialized object
+    */
+    Button.prototype.serialize = function (serializationObject) {
+        _super.prototype.serialize.call(this, serializationObject);
+        if (this._textBlock) {
+            serializationObject.textBlockName = this._textBlock.name;
+        }
+        if (this._image) {
+            serializationObject.imageName = this._image.name;
+        }
+    };
+    /** @hidden */
+    Button.prototype._parseFromContent = function (serializedObject, host) {
+        _super.prototype._parseFromContent.call(this, serializedObject, host);
+        if (serializedObject.textBlockName) {
+            this._textBlock = this.getChildByName(serializedObject.textBlockName);
+        }
+        if (serializedObject.imageName) {
+            this._image = this.getChildByName(serializedObject.imageName);
+        }
+    };
     // Statics
     /**
      * Creates a new button made with an image and a text
@@ -5774,6 +5797,7 @@ var Control = /** @class */ (function () {
         }
     };
     Control.prototype._evaluateClippingState = function (parentMeasure) {
+        this._currentMeasure.transformToRef(this._transformMatrix, this._evaluatedMeasure);
         if (this.parent && this.parent.clipChildren) {
             parentMeasure.transformToRef(this.parent._transformMatrix, this._evaluatedParentMeasure);
             // Early clip
@@ -13941,6 +13965,10 @@ var TextWrapping;
      * 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
@@ -14203,7 +14231,7 @@ var TextBlock = /** @class */ (function (_super) {
         }
         _super.prototype._processMeasures.call(this, parentMeasure, context);
         // Prepare lines
-        this._lines = this._breakLines(this._currentMeasure.width, context);
+        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++) {
@@ -14295,7 +14323,7 @@ var TextBlock = /** @class */ (function (_super) {
             context.miterLimit = 2;
         }
     };
-    TextBlock.prototype._breakLines = function (refWidth, context) {
+    TextBlock.prototype._breakLines = function (refWidth, refHeight, context) {
         var lines = [];
         var _lines = this.text.split("\n");
         if (this._textWrapping === TextWrapping.Ellipsis) {
@@ -14310,9 +14338,15 @@ var TextBlock = /** @class */ (function (_super) {
                 lines.push.apply(lines, this._parseLineWordWrap(_line, refWidth, context));
             }
         }
-        else {
+        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));
             }
         }
@@ -14376,6 +14410,24 @@ var TextBlock = /** @class */ (function (_super) {
         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("" + (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;
@@ -14405,6 +14457,20 @@ var TextBlock = /** @class */ (function (_super) {
             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
@@ -14412,26 +14478,15 @@ var TextBlock = /** @class */ (function (_super) {
     TextBlock.prototype.computeExpectedHeight = function () {
         var _a;
         if (this.text && this.widthInPixels) {
-            // Shoudl abstract platform instead of using LastCreatedEngine
+            // Should abstract platform instead of using LastCreatedEngine
             var context_1 = (_a = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Engine"].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__WEBPACK_IMPORTED_MODULE_3__["Control"]._GetFontOffset(context_1.font);
                 }
-                var lines = this._lines ? this._lines : this._breakLines(this.widthInPixels - this._paddingLeftInPixels - this._paddingRightInPixels, context_1);
-                var newHeight = this._paddingTopInPixels + this._paddingBottomInPixels + this._fontOffset.height * lines.length;
-                if (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 += (lines.length - 1) * lineSpacing;
-                }
-                return newHeight;
+                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;