babylonjs-gui 6.4.0 → 6.5.0

package/babylon.gui.d.ts

@@ -2997,12 +2997,25 @@ declare module BABYLON.GUI {
         name?: string | undefined;
         private _thickness;
         private _cornerRadius;
+        private _cachedRadius;
         /** Gets or sets border thickness */
         get thickness(): number;
         set thickness(value: number);
-        /** Gets or sets the corner radius angle */
+        /** Gets or sets the corner radius of all angles */
         get cornerRadius(): number;
         set cornerRadius(value: number);
+        /** Gets or sets the corner radius top left angle */
+        get cornerRadiusX(): number;
+        set cornerRadiusX(value: number);
+        /** Gets or sets the corner radius top right angle */
+        get cornerRadiusY(): number;
+        set cornerRadiusY(value: number);
+        /** Gets or sets the corner radius bottom left angle */
+        get cornerRadiusZ(): number;
+        set cornerRadiusZ(value: number);
+        /** Gets or sets the corner radius bottom right angle */
+        get cornerRadiusW(): number;
+        set cornerRadiusW(value: number);
         /**
          * Creates a new Rectangle
          * @param name defines the control name
@@ -3857,6 +3870,7 @@ declare module BABYLON.GUI {
         private _lineThrough;
         private _wordDivider;
         private _forceResizeWidth;
+        private _applyOutlineToUnderline;
         /**
          * An event triggered after the text is changed
          */
@@ -3945,6 +3959,11 @@ declare module BABYLON.GUI {
          * Gets or sets an boolean indicating that text must be crossed out
          */
         set lineThrough(value: boolean);
+        /**
+         * If the outline should be applied to the underline/strike-through too. Has different behavior in Edge/Chrome vs Firefox.
+         */
+        get applyOutlineToUnderline(): boolean;
+        set applyOutlineToUnderline(value: boolean);
         /**
          * Gets or sets outlineColor of the text to display
          */
@@ -3981,6 +4000,7 @@ declare module BABYLON.GUI {
         protected _getTypeName(): string;
         protected _processMeasures(parentMeasure: Measure, context: BABYLON.ICanvasRenderingContext): void;
         private _drawText;
+        private _drawLine;
         /**
          * @internal
          */

package/babylon.gui.js

@@ -12700,7 +12700,8 @@ var Rectangle = /** @class */ (function (_super) {
         var _this = _super.call(this, name) || this;
         _this.name = name;
         _this._thickness = 1;
-        _this._cornerRadius = 0;
+        _this._cornerRadius = [0, 0, 0, 0];
+        _this._cachedRadius = [0, 0, 0, 0];
         return _this;
     }
     Object.defineProperty(Rectangle.prototype, "thickness", {
@@ -12719,29 +12720,85 @@ var Rectangle = /** @class */ (function (_super) {
         configurable: true
     });
     Object.defineProperty(Rectangle.prototype, "cornerRadius", {
-        /** Gets or sets the corner radius angle */
+        /** Gets or sets the corner radius of all angles */
         get: function () {
-            return this._cornerRadius;
+            return this._cornerRadius[0];
         },
         set: function (value) {
             if (value < 0) {
                 value = 0;
             }
-            if (this._cornerRadius === value) {
+            if (this._cornerRadius[0] === value && this._cornerRadius[1] === value && this._cornerRadius[2] === value && this._cornerRadius[3] === value) {
                 return;
             }
-            this._cornerRadius = value;
+            this._cornerRadius[0] = this._cornerRadius[1] = this._cornerRadius[2] = this._cornerRadius[3] = value;
             this._markAsDirty();
         },
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Rectangle.prototype, "cornerRadiusX", {
+        /** Gets or sets the corner radius top left angle */
+        get: function () {
+            return this._cornerRadius[0];
+        },
+        set: function (value) {
+            if (this._cornerRadius[0] === value) {
+                return;
+            }
+            this._cornerRadius[0] = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Rectangle.prototype, "cornerRadiusY", {
+        /** Gets or sets the corner radius top right angle */
+        get: function () {
+            return this._cornerRadius[1];
+        },
+        set: function (value) {
+            if (this._cornerRadius[1] === value) {
+                return;
+            }
+            this._cornerRadius[1] = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Rectangle.prototype, "cornerRadiusZ", {
+        /** Gets or sets the corner radius bottom left angle */
+        get: function () {
+            return this._cornerRadius[2];
+        },
+        set: function (value) {
+            if (this._cornerRadius[2] === value) {
+                return;
+            }
+            this._cornerRadius[2] = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Rectangle.prototype, "cornerRadiusW", {
+        /** Gets or sets the corner radius bottom right angle */
+        get: function () {
+            return this._cornerRadius[3];
+        },
+        set: function (value) {
+            if (this._cornerRadius[3] === value) {
+                return;
+            }
+            this._cornerRadius[3] = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Rectangle.prototype._getTypeName = function () {
         return "Rectangle";
     };
     /** @internal */
     Rectangle.prototype._computeAdditionnalOffsetX = function () {
-        if (this._cornerRadius) {
+        if (this._cornerRadius[0] !== 0 || this._cornerRadius[1] !== 0 || this._cornerRadius[2] !== 0 || this._cornerRadius[3] !== 0) {
             // Take in account the aliasing
             return 1;
         }
@@ -12749,7 +12806,7 @@ var Rectangle = /** @class */ (function (_super) {
     };
     /** @internal */
     Rectangle.prototype._computeAdditionnalOffsetY = function () {
-        if (this._cornerRadius) {
+        if (this._cornerRadius[0] !== 0 || this._cornerRadius[1] !== 0 || this._cornerRadius[2] !== 0 || this._cornerRadius[3] !== 0) {
             // Take in account the aliasing
             return 1;
         }
@@ -12768,7 +12825,7 @@ var Rectangle = /** @class */ (function (_super) {
         }
         if (this._background || this._backgroundGradient) {
             context.fillStyle = this._getRectangleFill(context);
-            if (this._cornerRadius) {
+            if (this._cornerRadius[0] !== 0 || this._cornerRadius[1] !== 0 || this._cornerRadius[2] !== 0 || this._cornerRadius[3] !== 0) {
                 this._drawRoundedRect(context, this._thickness / 2);
                 context.fill();
             }
@@ -12786,7 +12843,7 @@ var Rectangle = /** @class */ (function (_super) {
                 context.strokeStyle = this.gradient ? this.gradient.getCanvasGradient(context) : this.color;
             }
             context.lineWidth = this._thickness;
-            if (this._cornerRadius) {
+            if (this._cornerRadius[0] !== 0 || this._cornerRadius[1] !== 0 || this._cornerRadius[2] !== 0 || this._cornerRadius[3] !== 0) {
                 this._drawRoundedRect(context, this._thickness / 2);
                 context.stroke();
             }
@@ -12809,22 +12866,23 @@ var Rectangle = /** @class */ (function (_super) {
         var y = this._currentMeasure.top + offset;
         var width = this._currentMeasure.width - offset * 2;
         var height = this._currentMeasure.height - offset * 2;
-        var radius = Math.min(height / 2, Math.min(width / 2, this._cornerRadius));
-        radius = Math.abs(radius);
+        for (var index = 0; index < this._cornerRadius.length; index++) {
+            this._cachedRadius[index] = Math.abs(Math.min(height / 2, Math.min(width / 2, this._cornerRadius[index])));
+        }
         context.beginPath();
-        context.moveTo(x + radius, y);
-        context.lineTo(x + width - radius, y);
-        context.arc(x + width - radius, y + radius, radius, (3 * Math.PI) / 2, Math.PI * 2);
-        context.lineTo(x + width, y + height - radius);
-        context.arc(x + width - radius, y + height - radius, radius, 0, Math.PI / 2);
-        context.lineTo(x + radius, y + height);
-        context.arc(x + radius, y + height - radius, radius, Math.PI / 2, Math.PI);
-        context.lineTo(x, y + radius);
-        context.arc(x + radius, y + radius, radius, Math.PI, (3 * Math.PI) / 2);
+        context.moveTo(x + this._cachedRadius[0], y);
+        context.lineTo(x + width - this._cachedRadius[1], y);
+        context.arc(x + width - this._cachedRadius[1], y + this._cachedRadius[1], this._cachedRadius[1], (3 * Math.PI) / 2, Math.PI * 2);
+        context.lineTo(x + width, y + height - this._cachedRadius[2]);
+        context.arc(x + width - this._cachedRadius[2], y + height - this._cachedRadius[2], this._cachedRadius[2], 0, Math.PI / 2);
+        context.lineTo(x + this._cachedRadius[3], y + height);
+        context.arc(x + this._cachedRadius[3], y + height - this._cachedRadius[3], this._cachedRadius[3], Math.PI / 2, Math.PI);
+        context.lineTo(x, y + this._cachedRadius[0]);
+        context.arc(x + this._cachedRadius[0], y + this._cachedRadius[0], this._cachedRadius[0], Math.PI, (3 * Math.PI) / 2);
         context.closePath();
     };
     Rectangle.prototype._clipForChildren = function (context) {
-        if (this._cornerRadius) {
+        if (this._cornerRadius[0] !== 0 || this._cornerRadius[1] !== 0 || this._cornerRadius[2] !== 0 || this._cornerRadius[3] !== 0) {
             this._drawRoundedRect(context, this._thickness);
             context.clip();
         }
@@ -12835,6 +12893,18 @@ var Rectangle = /** @class */ (function (_super) {
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
         (0,core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__.serialize)()
     ], Rectangle.prototype, "cornerRadius", null);
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
+        (0,core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__.serialize)()
+    ], Rectangle.prototype, "cornerRadiusX", null);
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
+        (0,core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__.serialize)()
+    ], Rectangle.prototype, "cornerRadiusY", null);
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
+        (0,core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__.serialize)()
+    ], Rectangle.prototype, "cornerRadiusZ", null);
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
+        (0,core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__.serialize)()
+    ], Rectangle.prototype, "cornerRadiusW", null);
     return Rectangle;
 }(_container__WEBPACK_IMPORTED_MODULE_1__.Container));
 
@@ -16355,6 +16425,7 @@ var TextBlock = /** @class */ (function (_super) {
         _this._lineThrough = false;
         _this._wordDivider = " ";
         _this._forceResizeWidth = false;
+        _this._applyOutlineToUnderline = false;
         /**
          * An event triggered after the text is changed
          */
@@ -16560,6 +16631,23 @@ var TextBlock = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(TextBlock.prototype, "applyOutlineToUnderline", {
+        /**
+         * If the outline should be applied to the underline/strike-through too. Has different behavior in Edge/Chrome vs Firefox.
+         */
+        get: function () {
+            return this._applyOutlineToUnderline;
+        },
+        set: function (value) {
+            if (this._applyOutlineToUnderline === value) {
+                return;
+            }
+            this._applyOutlineToUnderline = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(TextBlock.prototype, "outlineColor", {
         /**
          * Gets or sets outlineColor of the text to display
@@ -16687,21 +16775,28 @@ var TextBlock = /** @class */ (function (_super) {
         }
         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();
+            this._drawLine(this._currentMeasure.left + x, y + 3, this._currentMeasure.left + x + textWidth, y + 3, context);
         }
         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);
+            this._drawLine(this._currentMeasure.left + x, y - this.fontSizeInPixels / 3, this._currentMeasure.left + x + textWidth, y - this.fontSizeInPixels / 3, context);
+        }
+    };
+    TextBlock.prototype._drawLine = function (xFrom, yFrom, xTo, yTo, context) {
+        context.beginPath();
+        context.lineWidth = Math.round(this.fontSizeInPixels * 0.05);
+        context.moveTo(xFrom, yFrom);
+        context.lineTo(xTo, yTo);
+        if (this.outlineWidth && this.applyOutlineToUnderline) {
+            context.stroke();
+            context.fill();
+        }
+        else {
+            var currentStroke = context.strokeStyle;
+            context.strokeStyle = context.fillStyle;
             context.stroke();
-            context.closePath();
+            context.strokeStyle = currentStroke;
         }
+        context.closePath();
     };
     /**
      * @internal
@@ -16935,6 +17030,9 @@ var TextBlock = /** @class */ (function (_super) {
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
         (0,core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.serialize)()
     ], TextBlock.prototype, "lineThrough", null);
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
+        (0,core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.serialize)()
+    ], TextBlock.prototype, "applyOutlineToUnderline", null);
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
         (0,core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.serialize)()
     ], TextBlock.prototype, "outlineColor", null);