babylonjs-gui 5.4.0 → 5.5.0

package/babylon.gui.d.ts

@@ -3678,6 +3678,7 @@ declare module BABYLON.GUI {
         protected _parseLine(line: string | undefined, context: BABYLON.ICanvasRenderingContext): object;
         private _getCharsToRemove;
         protected _parseLineEllipsis(line: string | undefined, width: number, context: BABYLON.ICanvasRenderingContext): object;
+        private _getTextMetricsWidth;
         protected _parseLineWordWrap(line: string | undefined, width: number, context: BABYLON.ICanvasRenderingContext): object[];
         protected _parseLineWordWrapEllipsis(line: string | undefined, width: number, height: number, context: BABYLON.ICanvasRenderingContext): object[];
         protected _renderLines(context: BABYLON.ICanvasRenderingContext): void;

package/babylon.gui.js

@@ -8622,20 +8622,28 @@ var Image = /** @class */ (function (_super) {
         //Top Left
         this._drawImage(context, 0, 0, leftWidth, topHeight, this._currentMeasure.left, this._currentMeasure.top, leftWidth, topHeight);
         //Top
+        context.clearRect(centerLeftOffset, this._currentMeasure.top, targetCenterWidth, topHeight);
         this._drawImage(context, this._sliceLeft, 0, centerWidth, topHeight, centerLeftOffset, this._currentMeasure.top, targetCenterWidth, topHeight);
         //Top Right
-        this._drawImage(context, this.sliceRight, 0, rightWidth, topHeight, rightOffset, this._currentMeasure.top, rightWidth, topHeight);
+        context.clearRect(rightOffset, this._currentMeasure.top, rightWidth, topHeight);
+        this._drawImage(context, this._sliceRight, 0, rightWidth, topHeight, rightOffset, this._currentMeasure.top, rightWidth, topHeight);
         //Left
+        context.clearRect(this._currentMeasure.left, centerTopOffset, leftWidth, targetCenterHeight);
         this._drawImage(context, 0, this._sliceTop, leftWidth, centerHeight, this._currentMeasure.left, centerTopOffset, leftWidth, targetCenterHeight);
         // Center
+        context.clearRect(centerLeftOffset, centerTopOffset, targetCenterWidth, targetCenterHeight);
         this._drawImage(context, this._sliceLeft, this._sliceTop, centerWidth, centerHeight, centerLeftOffset, centerTopOffset, targetCenterWidth, targetCenterHeight);
         //Right
+        context.clearRect(rightOffset, centerTopOffset, rightWidth, targetCenterHeight);
         this._drawImage(context, this._sliceRight, this._sliceTop, rightWidth, centerHeight, rightOffset, centerTopOffset, rightWidth, targetCenterHeight);
         //Bottom Left
+        context.clearRect(this._currentMeasure.left, bottomOffset, leftWidth, bottomHeight);
         this._drawImage(context, 0, this._sliceBottom, leftWidth, bottomHeight, this._currentMeasure.left, bottomOffset, leftWidth, bottomHeight);
         //Bottom
+        context.clearRect(centerLeftOffset, bottomOffset, targetCenterWidth, bottomHeight);
         this._drawImage(context, this.sliceLeft, this._sliceBottom, centerWidth, bottomHeight, centerLeftOffset, bottomOffset, targetCenterWidth, bottomHeight);
         //Bottom Right
+        context.clearRect(rightOffset, bottomOffset, rightWidth, bottomHeight);
         this._drawImage(context, this._sliceRight, this._sliceBottom, rightWidth, bottomHeight, rightOffset, bottomOffset, rightWidth, bottomHeight);
     };
     Image.prototype.dispose = function () {
@@ -14758,9 +14766,7 @@ var TextBlock = /** @class */ (function (_super) {
     };
     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 };
+        return { text: line, width: this._getTextMetricsWidth(context.measureText(line)) };
     };
     //Calculate how many characters approximately we need to remove
     TextBlock.prototype._getCharsToRemove = function (lineWidth, width, lineLength) {
@@ -14772,8 +14778,7 @@ var TextBlock = /** @class */ (function (_super) {
     };
     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 lineWidth = this._getTextMetricsWidth(context.measureText(line));
         var removeChars = this._getCharsToRemove(lineWidth, width, line.length);
         // unicode support. split('') does not work with unicode!
         // make sure Array.from is available
@@ -14782,8 +14787,7 @@ var TextBlock = /** @class */ (function (_super) {
             // 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);
+                lineWidth = this._getTextMetricsWidth(context.measureText(line + "…"));
                 removeChars = this._getCharsToRemove(lineWidth, width, line.length);
             }
             // Add on the end
@@ -14793,28 +14797,30 @@ var TextBlock = /** @class */ (function (_super) {
             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);
+                lineWidth = this._getTextMetricsWidth(context.measureText(line));
                 removeChars = this._getCharsToRemove(lineWidth, width, line.length);
             }
         }
         return { text: line, width: lineWidth };
     };
+    TextBlock.prototype._getTextMetricsWidth = function (textMetrics) {
+        if (textMetrics.actualBoundingBoxLeft !== undefined) {
+            return Math.abs(textMetrics.actualBoundingBoxLeft) + Math.abs(textMetrics.actualBoundingBoxRight);
+        }
+        return textMetrics.width;
+    };
     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);
+        var lineWidth = this._getTextMetricsWidth(context.measureText(line));
         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);
+            var testWidth = this._getTextMetricsWidth(context.measureText(testLine));
             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);
+                lineWidth = this._getTextMetricsWidth(context.measureText(line));
             }
             else {
                 lineWidth = testWidth;