@babylonjs/gui 5.0.0-alpha.8 → 5.0.0-beta.3

package/2D/controls/control.js

@@ -1,14 +1,15 @@
 import { __decorate } from "tslib";
-import { Observable } from "@babylonjs/core/Misc/observable";
-import { Vector2, Vector3, Matrix } from "@babylonjs/core/Maths/math.vector";
-import { PointerEventTypes } from '@babylonjs/core/Events/pointerEvents';
-import { Logger } from "@babylonjs/core/Misc/logger";
-import { Tools } from "@babylonjs/core/Misc/tools";
-import { ValueAndUnit } from "../valueAndUnit";
-import { Measure } from "../measure";
-import { Matrix2D, Vector2WithInfo } from "../math2D";
-import { _TypeStore } from '@babylonjs/core/Misc/typeStore';
-import { SerializationHelper, serialize } from '@babylonjs/core/Misc/decorators';
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import { Vector2, Vector3, Matrix } from "@babylonjs/core/Maths/math.vector.js";
+import { PointerEventTypes } from "@babylonjs/core/Events/pointerEvents.js";
+import { Logger } from "@babylonjs/core/Misc/logger.js";
+import { Tools } from "@babylonjs/core/Misc/tools.js";
+import { ValueAndUnit } from "../valueAndUnit.js";
+import { Measure } from "../measure.js";
+import { Matrix2D, Vector2WithInfo } from "../math2D.js";
+import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
+import { SerializationHelper, serialize } from "@babylonjs/core/Misc/decorators.js";
+import { Engine } from "@babylonjs/core/Engines/engine.js";
 /**
  * Root class used for all 2D controls
  * @see https://doc.babylonjs.com/how_to/gui#controls
@@ -28,6 +29,8 @@ var Control = /** @class */ (function () {
         this._zIndex = 0;
         /** @hidden */
         this._currentMeasure = Measure.Empty();
+        /** @hidden */
+        this._tempPaddingMeasure = Measure.Empty();
         this._fontFamily = "Arial";
         this._fontStyle = "";
         this._fontWeight = "";
@@ -52,6 +55,7 @@ var Control = /** @class */ (function () {
         this._prevCurrentMeasureTransformedIntoGlobalSpace = Measure.Empty();
         /** @hidden */
         this._cachedParentMeasure = Measure.Empty();
+        this._descendantsOnlyPadding = false;
         this._paddingLeft = new ValueAndUnit(0);
         this._paddingRight = new ValueAndUnit(0);
         this._paddingTop = new ValueAndUnit(0);
@@ -74,15 +78,20 @@ var Control = /** @class */ (function () {
         this._isMatrixDirty = true;
         this._isVisible = true;
         this._isHighlighted = false;
+        this._highlightColor = "#4affff";
+        this._highlightLineWidth = 2;
         this._fontSet = false;
         this._dummyVector2 = Vector2.Zero();
         this._downCount = 0;
         this._enterCount = -1;
         this._doNotRender = false;
         this._downPointerIds = {};
+        this._evaluatedMeasure = new Measure(0, 0, 0, 0);
+        this._evaluatedParentMeasure = new Measure(0, 0, 0, 0);
         this._isEnabled = true;
         this._disabledColor = "#9a9a9a";
         this._disabledColorItem = "#6a6a6a";
+        this._isReadOnly = false;
         /** @hidden */
         this._rebuildLayout = false;
         /** @hidden */
@@ -118,7 +127,8 @@ var Control = /** @class */ (function () {
         this._shadowOffsetX = 0;
         this._shadowOffsetY = 0;
         this._shadowBlur = 0;
-        this._shadowColor = 'black';
+        this._previousShadowBlur = 0;
+        this._shadowColor = "black";
         /** Gets or sets the cursor to use when the control is hovered */
         this.hoverCursor = "";
         /** @hidden */
@@ -126,36 +136,36 @@ var Control = /** @class */ (function () {
         /** @hidden */
         this._linkOffsetY = new ValueAndUnit(0);
         /**
-        * An event triggered when pointer wheel is scrolled
-        */
+         * An event triggered when pointer wheel is scrolled
+         */
         this.onWheelObservable = new Observable();
         /**
-        * An event triggered when the pointer move over the control.
-        */
+         * An event triggered when the pointer moves over the control.
+         */
         this.onPointerMoveObservable = new Observable();
         /**
-        * An event triggered when the pointer move out of the control.
-        */
+         * An event triggered when the pointer moves out of the control.
+         */
         this.onPointerOutObservable = new Observable();
         /**
-        * An event triggered when the pointer taps the control
-        */
+         * An event triggered when the pointer taps the control
+         */
         this.onPointerDownObservable = new Observable();
         /**
-        * An event triggered when pointer up
-        */
+         * An event triggered when pointer up
+         */
         this.onPointerUpObservable = new Observable();
         /**
-        * An event triggered when a control is clicked on
-        */
+         * An event triggered when a control is clicked on
+         */
         this.onPointerClickObservable = new Observable();
         /**
-        * An event triggered when pointer enters the control
-        */
+         * An event triggered when pointer enters the control
+         */
         this.onPointerEnterObservable = new Observable();
         /**
-        * An event triggered when the control is marked as dirty
-        */
+         * An event triggered when the control is marked as dirty
+         */
         this.onDirtyObservable = new Observable();
         /**
          * An event triggered before drawing the control
@@ -166,8 +176,8 @@ var Control = /** @class */ (function () {
          */
         this.onAfterDrawObservable = new Observable();
         /**
-        * An event triggered when the control has been disposed
-        */
+         * An event triggered when the control has been disposed
+         */
         this.onDisposeObservable = new Observable();
         /**
          * Gets or sets a fixed ratio for this control.
@@ -179,6 +189,30 @@ var Control = /** @class */ (function () {
         this._fixedRatioMasterIsWidth = true;
         this._tmpMeasureA = new Measure(0, 0, 0, 0);
     }
+    Object.defineProperty(Control.prototype, "isReadOnly", {
+        /**
+         * Gets or sets a boolean indicating if the control is readonly (default: false).
+         * A readonly control will still raise pointer events but will not react to them
+         */
+        get: function () {
+            return this._isReadOnly;
+        },
+        set: function (value) {
+            this._isReadOnly = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "transformedMeasure", {
+        /**
+         * Gets the transformed measure, that is the bounding box of the control after applying all transformations
+         */
+        get: function () {
+            return this._evaluatedMeasure;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Control.prototype, "shadowOffsetX", {
         /** Gets or sets a value indicating the offset to apply on X axis to render the shadow */
         get: function () {
@@ -218,6 +252,7 @@ var Control = /** @class */ (function () {
             if (this._shadowBlur === value) {
                 return;
             }
+            this._previousShadowBlur = this._shadowBlur;
             this._shadowBlur = value;
             this._markAsDirty();
         },
@@ -292,6 +327,23 @@ var Control = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Control.prototype, "highlightLineWidth", {
+        /**
+         * Gets or sets a number indicating size of stroke we want to highlight the control with (mostly for debugging purpose)
+         */
+        get: function () {
+            return this._highlightLineWidth;
+        },
+        set: function (value) {
+            if (this._highlightLineWidth === value) {
+                return;
+            }
+            this._highlightLineWidth = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Control.prototype, "isHighlighted", {
         /**
          * Gets or sets a boolean indicating that we want to highlight the control (mostly for debugging purpose)
@@ -309,10 +361,27 @@ var Control = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Control.prototype, "highlightColor", {
+        /**
+         * Gets or sets a string defining the color to use for highlighting this control
+         */
+        get: function () {
+            return this._highlightColor;
+        },
+        set: function (value) {
+            if (this._highlightColor === value) {
+                return;
+            }
+            this._highlightColor = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Control.prototype, "scaleX", {
         /** Gets or sets a value indicating the scale factor on X axis (1 by default)
          * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
-        */
+         */
         get: function () {
             return this._scaleX;
         },
@@ -330,7 +399,7 @@ var Control = /** @class */ (function () {
     Object.defineProperty(Control.prototype, "scaleY", {
         /** Gets or sets a value indicating the scale factor on Y axis (1 by default)
          * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
-        */
+         */
         get: function () {
             return this._scaleY;
         },
@@ -348,7 +417,7 @@ var Control = /** @class */ (function () {
     Object.defineProperty(Control.prototype, "rotation", {
         /** Gets or sets the rotation angle (0 by default)
          * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
-        */
+         */
         get: function () {
             return this._rotation;
         },
@@ -366,7 +435,7 @@ var Control = /** @class */ (function () {
     Object.defineProperty(Control.prototype, "transformCenterY", {
         /** Gets or sets the transformation center on Y axis (0 by default)
          * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
-        */
+         */
         get: function () {
             return this._transformCenterY;
         },
@@ -384,7 +453,7 @@ var Control = /** @class */ (function () {
     Object.defineProperty(Control.prototype, "transformCenterX", {
         /** Gets or sets the transformation center on X axis (0 by default)
          * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
-        */
+         */
         get: function () {
             return this._transformCenterX;
         },
@@ -514,9 +583,6 @@ var Control = /** @class */ (function () {
     Object.defineProperty(Control.prototype, "fontFamily", {
         /** Gets or set font family */
         get: function () {
-            if (!this._fontSet) {
-                return "";
-            }
             return this._fontFamily;
         },
         set: function (value) {
@@ -709,6 +775,24 @@ var Control = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Control.prototype, "descendantsOnlyPadding", {
+        /**
+         * Gets or sets a value indicating the padding should work like in CSS.
+         * Basically, it will add the padding amount on each side of the parent control for its children.
+         */
+        get: function () {
+            return this._descendantsOnlyPadding;
+        },
+        set: function (value) {
+            if (this._descendantsOnlyPadding === value) {
+                return;
+            }
+            this._descendantsOnlyPadding = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Control.prototype, "paddingLeft", {
         /**
          * Gets or sets a value indicating the padding to use on the left of the control
@@ -742,6 +826,17 @@ var Control = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Control.prototype, "_paddingLeftInPixels", {
+        /** @hidden */
+        get: function () {
+            if (this._descendantsOnlyPadding) {
+                return 0;
+            }
+            return this.paddingLeftInPixels;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Control.prototype, "paddingRight", {
         /**
          * Gets or sets a value indicating the padding to use on the right of the control
@@ -775,6 +870,17 @@ var Control = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Control.prototype, "_paddingRightInPixels", {
+        /** @hidden */
+        get: function () {
+            if (this._descendantsOnlyPadding) {
+                return 0;
+            }
+            return this.paddingRightInPixels;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Control.prototype, "paddingTop", {
         /**
          * Gets or sets a value indicating the padding to use on the top of the control
@@ -808,6 +914,17 @@ var Control = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Control.prototype, "_paddingTopInPixels", {
+        /** @hidden */
+        get: function () {
+            if (this._descendantsOnlyPadding) {
+                return 0;
+            }
+            return this.paddingTopInPixels;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Control.prototype, "paddingBottom", {
         /**
          * Gets or sets a value indicating the padding to use on the bottom of the control
@@ -841,6 +958,17 @@ var Control = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Control.prototype, "_paddingBottomInPixels", {
+        /** @hidden */
+        get: function () {
+            if (this._descendantsOnlyPadding) {
+                return 0;
+            }
+            return this.paddingBottomInPixels;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Control.prototype, "left", {
         /**
          * Gets or sets a value indicating the left coordinate of the control
@@ -1115,7 +1243,7 @@ var Control = /** @class */ (function () {
         }
         this.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
         this.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
-        var globalViewport = this._host._getGlobalViewport(scene);
+        var globalViewport = this._host._getGlobalViewport();
         var projectedPosition = Vector3.Project(position, Matrix.Identity(), scene.getTransformMatrix(), globalViewport);
         this._moveToProjectedPosition(projectedPosition);
         if (projectedPosition.z < 0 || projectedPosition.z > 1) {
@@ -1151,7 +1279,7 @@ var Control = /** @class */ (function () {
      * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
      */
     Control.prototype.linkWithMesh = function (mesh) {
-        if (!this._host || this.parent && this.parent !== this._host._rootContainer) {
+        if (!this._host || (this.parent && this.parent !== this._host._rootContainer)) {
             if (mesh) {
                 Tools.Error("Cannot link a control to a mesh if the control is not at root level");
             }
@@ -1174,13 +1302,13 @@ var Control = /** @class */ (function () {
         this._host._linkedControls.push(this);
     };
     /**
-    * Shorthand funtion to set the top, right, bottom, and left padding values on the control.
-    * @param { string | number} paddingTop - The value of the top padding.
-    * @param { string | number} paddingRight - The value of the right padding. If omitted, top is used.
-    * @param { string | number} paddingBottom - The value of the bottom padding. If omitted, top is used.
-    * @param { string | number} paddingLeft - The value of the left padding. If omitted, right is used.
-    * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-    */
+     * Shorthand funtion to set the top, right, bottom, and left padding values on the control.
+     * @param { string | number} paddingTop - The value of the top padding.
+     * @param { string | number} paddingRight - The value of the right padding. If omitted, top is used.
+     * @param { string | number} paddingBottom - The value of the bottom padding. If omitted, top is used.
+     * @param { string | number} paddingLeft - The value of the left padding. If omitted, right is used.
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+     */
     Control.prototype.setPadding = function (paddingTop, paddingRight, paddingBottom, paddingLeft) {
         var top = paddingTop;
         var right = paddingRight !== null && paddingRight !== void 0 ? paddingRight : top;
@@ -1211,10 +1339,17 @@ var Control = /** @class */ (function () {
     };
     /** @hidden */
     Control.prototype._moveToProjectedPosition = function (projectedPosition) {
+        var _a;
         var oldLeft = this._left.getValue(this._host);
         var oldTop = this._top.getValue(this._host);
-        var newLeft = ((projectedPosition.x + this._linkOffsetX.getValue(this._host)) - this._currentMeasure.width / 2);
-        var newTop = ((projectedPosition.y + this._linkOffsetY.getValue(this._host)) - this._currentMeasure.height / 2);
+        if (this._currentMeasure.width === 0 && this._currentMeasure.height === 0) {
+            var parentMeasure = (_a = this.parent) === null || _a === void 0 ? void 0 : _a._currentMeasure;
+            if (parentMeasure) {
+                this._processMeasures(parentMeasure, this._host.getContext());
+            }
+        }
+        var newLeft = projectedPosition.x + this._linkOffsetX.getValue(this._host) - this._currentMeasure.width / 2;
+        var newTop = projectedPosition.y + this._linkOffsetY.getValue(this._host) - this._currentMeasure.height / 2;
         if (this._left.ignoreAdaptiveScaling && this._top.ignoreAdaptiveScaling) {
             if (Math.abs(newLeft - oldLeft) < 0.5) {
                 newLeft = oldLeft;
@@ -1267,6 +1402,14 @@ var Control = /** @class */ (function () {
         return true;
     };
     /** @hidden */
+    Control.prototype._computeAdditionnalOffsetX = function () {
+        return 0;
+    };
+    /** @hidden */
+    Control.prototype._computeAdditionnalOffsetY = function () {
+        return 0;
+    };
+    /** @hidden */
     Control.prototype.invalidateRect = function () {
         this._transform();
         if (this.host && this.host.useInvalidateRectOptimization) {
@@ -1275,20 +1418,17 @@ var Control = /** @class */ (function () {
             // get the boudning box of the current measure and last frames measure in global space and invalidate it
             // the previous measure is used to properly clear a control that is scaled down
             Measure.CombineToRef(this._tmpMeasureA, this._prevCurrentMeasureTransformedIntoGlobalSpace, this._tmpMeasureA);
-            if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
-                // Expand rect based on shadows
-                var shadowOffsetX = this.shadowOffsetX;
-                var shadowOffsetY = this.shadowOffsetY;
-                var shadowBlur = this.shadowBlur;
-                var leftShadowOffset = Math.min(Math.min(shadowOffsetX, 0) - shadowBlur * 2, 0);
-                var rightShadowOffset = Math.max(Math.max(shadowOffsetX, 0) + shadowBlur * 2, 0);
-                var topShadowOffset = Math.min(Math.min(shadowOffsetY, 0) - shadowBlur * 2, 0);
-                var bottomShadowOffset = Math.max(Math.max(shadowOffsetY, 0) + shadowBlur * 2, 0);
-                this.host.invalidateRect(Math.floor(this._tmpMeasureA.left + leftShadowOffset), Math.floor(this._tmpMeasureA.top + topShadowOffset), Math.ceil(this._tmpMeasureA.left + this._tmpMeasureA.width + rightShadowOffset), Math.ceil(this._tmpMeasureA.top + this._tmpMeasureA.height + bottomShadowOffset));
-            }
-            else {
-                this.host.invalidateRect(Math.floor(this._tmpMeasureA.left), Math.floor(this._tmpMeasureA.top), Math.ceil(this._tmpMeasureA.left + this._tmpMeasureA.width), Math.ceil(this._tmpMeasureA.top + this._tmpMeasureA.height));
-            }
+            // Expand rect based on shadows
+            var shadowOffsetX = this.shadowOffsetX;
+            var shadowOffsetY = this.shadowOffsetY;
+            var shadowBlur = Math.max(this._previousShadowBlur, this.shadowBlur);
+            var leftShadowOffset = Math.min(Math.min(shadowOffsetX, 0) - shadowBlur * 2, 0);
+            var rightShadowOffset = Math.max(Math.max(shadowOffsetX, 0) + shadowBlur * 2, 0);
+            var topShadowOffset = Math.min(Math.min(shadowOffsetY, 0) - shadowBlur * 2, 0);
+            var bottomShadowOffset = Math.max(Math.max(shadowOffsetY, 0) + shadowBlur * 2, 0);
+            var offsetX = this._computeAdditionnalOffsetX();
+            var offsetY = this._computeAdditionnalOffsetY();
+            this.host.invalidateRect(Math.floor(this._tmpMeasureA.left + leftShadowOffset - offsetX), Math.floor(this._tmpMeasureA.top + topShadowOffset - offsetY), Math.ceil(this._tmpMeasureA.left + this._tmpMeasureA.width + rightShadowOffset + offsetX), Math.ceil(this._tmpMeasureA.top + this._tmpMeasureA.height + bottomShadowOffset + offsetY));
         }
     };
     /** @hidden */
@@ -1350,8 +1490,8 @@ var Control = /** @class */ (function () {
             return;
         }
         context.save();
-        context.strokeStyle = "#4affff";
-        context.lineWidth = 2;
+        context.strokeStyle = this._highlightColor;
+        context.lineWidth = this._highlightLineWidth;
         this._renderHighlightSpecific(context);
         context.restore();
     };
@@ -1364,6 +1504,9 @@ var Control = /** @class */ (function () {
         if (this._isFontSizeInPercentage) {
             this._fontSet = true;
         }
+        if (this._host && this._host.useSmallestIdeal && !this._font) {
+            this._fontSet = true;
+        }
         if (this._fontSet) {
             this._prepareFont();
             this._fontSet = false;
@@ -1378,7 +1521,7 @@ var Control = /** @class */ (function () {
             context.globalAlpha *= this._alpha;
         }
         else if (this._alphaSet) {
-            context.globalAlpha = this.parent ? this.parent.alpha * this._alpha : this._alpha;
+            context.globalAlpha = this.parent && !this.parent.renderToIntermediateTexture ? this.parent.alpha * this._alpha : this._alpha;
         }
     };
     /** @hidden */
@@ -1388,7 +1531,7 @@ var Control = /** @class */ (function () {
         }
         if (this._isDirty || !this._cachedParentMeasure.isEqualsTo(parentMeasure)) {
             this.host._numLayoutCalls++;
-            this._currentMeasure.addAndTransformToRef(this._transformMatrix, -this.paddingLeftInPixels | 0, -this.paddingTopInPixels | 0, this.paddingRightInPixels | 0, this.paddingBottomInPixels | 0, this._prevCurrentMeasureTransformedIntoGlobalSpace);
+            this._currentMeasure.addAndTransformToRef(this._transformMatrix, -this._paddingLeftInPixels | 0, -this._paddingTopInPixels | 0, this._paddingRightInPixels | 0, this._paddingBottomInPixels | 0, this._prevCurrentMeasureTransformedIntoGlobalSpace);
             context.save();
             this._applyStates(context);
             var rebuildCount = 0;
@@ -1410,39 +1553,50 @@ var Control = /** @class */ (function () {
     };
     /** @hidden */
     Control.prototype._processMeasures = function (parentMeasure, context) {
-        this._currentMeasure.copyFrom(parentMeasure);
+        this._tempPaddingMeasure.copyFrom(parentMeasure);
+        // Apply padding if in correct mode
+        if (this.parent && this.parent.descendantsOnlyPadding) {
+            this._tempPaddingMeasure.left += this.parent.paddingLeftInPixels;
+            this._tempPaddingMeasure.top += this.parent.paddingTopInPixels;
+            this._tempPaddingMeasure.width -= this.parent.paddingLeftInPixels + this.parent.paddingRightInPixels;
+            this._tempPaddingMeasure.height -= this.parent.paddingTopInPixels + this.parent.paddingBottomInPixels;
+        }
+        this._currentMeasure.copyFrom(this._tempPaddingMeasure);
         // Let children take some pre-measurement actions
-        this._preMeasure(parentMeasure, context);
+        this._preMeasure(this._tempPaddingMeasure, context);
         this._measure();
-        this._computeAlignment(parentMeasure, context);
+        this._computeAlignment(this._tempPaddingMeasure, context);
         // Convert to int values
         this._currentMeasure.left = this._currentMeasure.left | 0;
         this._currentMeasure.top = this._currentMeasure.top | 0;
         this._currentMeasure.width = this._currentMeasure.width | 0;
         this._currentMeasure.height = this._currentMeasure.height | 0;
         // Let children add more features
-        this._additionalProcessing(parentMeasure, context);
-        this._cachedParentMeasure.copyFrom(parentMeasure);
+        this._additionalProcessing(this._tempPaddingMeasure, context);
+        this._cachedParentMeasure.copyFrom(this._tempPaddingMeasure);
+        this._currentMeasure.transformToRef(this._transformMatrix, this._evaluatedMeasure);
         if (this.onDirtyObservable.hasObservers()) {
             this.onDirtyObservable.notifyObservers(this);
         }
     };
     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
-            if (this._currentMeasure.left > parentMeasure.left + parentMeasure.width) {
+            if (this._evaluatedMeasure.left > this._evaluatedParentMeasure.left + this._evaluatedParentMeasure.width) {
                 this._isClipped = true;
                 return;
             }
-            if (this._currentMeasure.left + this._currentMeasure.width < parentMeasure.left) {
+            if (this._evaluatedMeasure.left + this._evaluatedMeasure.width < this._evaluatedParentMeasure.left) {
                 this._isClipped = true;
                 return;
             }
-            if (this._currentMeasure.top > parentMeasure.top + parentMeasure.height) {
+            if (this._evaluatedMeasure.top > this._evaluatedParentMeasure.top + this._evaluatedParentMeasure.height) {
                 this._isClipped = true;
                 return;
             }
-            if (this._currentMeasure.top + this._currentMeasure.height < parentMeasure.top) {
+            if (this._evaluatedMeasure.top + this._evaluatedMeasure.height < this._evaluatedParentMeasure.top) {
                 this._isClipped = true;
                 return;
             }
@@ -1504,33 +1658,35 @@ var Control = /** @class */ (function () {
                 y = (parentHeight - height) / 2;
                 break;
         }
-        if (this._paddingLeft.isPixel) {
-            this._currentMeasure.left += this._paddingLeft.getValue(this._host);
-            this._currentMeasure.width -= this._paddingLeft.getValue(this._host);
-        }
-        else {
-            this._currentMeasure.left += parentWidth * this._paddingLeft.getValue(this._host);
-            this._currentMeasure.width -= parentWidth * this._paddingLeft.getValue(this._host);
-        }
-        if (this._paddingRight.isPixel) {
-            this._currentMeasure.width -= this._paddingRight.getValue(this._host);
-        }
-        else {
-            this._currentMeasure.width -= parentWidth * this._paddingRight.getValue(this._host);
-        }
-        if (this._paddingTop.isPixel) {
-            this._currentMeasure.top += this._paddingTop.getValue(this._host);
-            this._currentMeasure.height -= this._paddingTop.getValue(this._host);
-        }
-        else {
-            this._currentMeasure.top += parentHeight * this._paddingTop.getValue(this._host);
-            this._currentMeasure.height -= parentHeight * this._paddingTop.getValue(this._host);
-        }
-        if (this._paddingBottom.isPixel) {
-            this._currentMeasure.height -= this._paddingBottom.getValue(this._host);
-        }
-        else {
-            this._currentMeasure.height -= parentHeight * this._paddingBottom.getValue(this._host);
+        if (!this.descendantsOnlyPadding) {
+            if (this._paddingLeft.isPixel) {
+                this._currentMeasure.left += this._paddingLeft.getValue(this._host);
+                this._currentMeasure.width -= this._paddingLeft.getValue(this._host);
+            }
+            else {
+                this._currentMeasure.left += parentWidth * this._paddingLeft.getValue(this._host);
+                this._currentMeasure.width -= parentWidth * this._paddingLeft.getValue(this._host);
+            }
+            if (this._paddingRight.isPixel) {
+                this._currentMeasure.width -= this._paddingRight.getValue(this._host);
+            }
+            else {
+                this._currentMeasure.width -= parentWidth * this._paddingRight.getValue(this._host);
+            }
+            if (this._paddingTop.isPixel) {
+                this._currentMeasure.top += this._paddingTop.getValue(this._host);
+                this._currentMeasure.height -= this._paddingTop.getValue(this._host);
+            }
+            else {
+                this._currentMeasure.top += parentHeight * this._paddingTop.getValue(this._host);
+                this._currentMeasure.height -= parentHeight * this._paddingTop.getValue(this._host);
+            }
+            if (this._paddingBottom.isPixel) {
+                this._currentMeasure.height -= this._paddingBottom.getValue(this._host);
+            }
+            else {
+                this._currentMeasure.height -= parentHeight * this._paddingBottom.getValue(this._host);
+            }
         }
         if (this._left.isPixel) {
             this._currentMeasure.left += this._left.getValue(this._host);
@@ -1684,7 +1840,8 @@ var Control = /** @class */ (function () {
         if (this._enterCount > 0) {
             return false;
         }
-        if (this._enterCount === -1) { // -1 is for touch input, we are now sure we are with a mouse or pencil
+        if (this._enterCount === -1) {
+            // -1 is for touch input, we are now sure we are with a mouse or pencil
             this._enterCount = 0;
         }
         this._enterCount++;
@@ -1815,6 +1972,8 @@ var Control = /** @class */ (function () {
             this._font = this._fontStyle + " " + this._fontWeight + " " + this.fontSizeInPixels + "px " + this._fontFamily;
         }
         this._fontOffset = Control._GetFontOffset(this._font);
+        //children need to be refreshed
+        this.getDescendants().forEach(function (child) { return child._markAllAsDirty(); });
     };
     /**
      * Serializes the current control
@@ -1825,7 +1984,7 @@ var Control = /** @class */ (function () {
         serializationObject.name = this.name;
         serializationObject.className = this.getClassName();
         if (this._font) {
-            serializationObject.fontFamily = this.fontFamily;
+            serializationObject.fontFamily = this._fontFamily;
             serializationObject.fontSize = this.fontSize;
             serializationObject.fontWeight = this.fontWeight;
             serializationObject.fontStyle = this.fontStyle;
@@ -1929,30 +2088,11 @@ var Control = /** @class */ (function () {
         if (Control._FontHeightSizes[font]) {
             return Control._FontHeightSizes[font];
         }
-        var text = document.createElement("span");
-        text.innerHTML = "Hg";
-        text.style.font = font;
-        var block = document.createElement("div");
-        block.style.display = "inline-block";
-        block.style.width = "1px";
-        block.style.height = "0px";
-        block.style.verticalAlign = "bottom";
-        var div = document.createElement("div");
-        div.style.whiteSpace = "nowrap";
-        div.appendChild(text);
-        div.appendChild(block);
-        document.body.appendChild(div);
-        var fontAscent = 0;
-        var fontHeight = 0;
-        try {
-            fontHeight = block.getBoundingClientRect().top - text.getBoundingClientRect().top;
-            block.style.verticalAlign = "baseline";
-            fontAscent = block.getBoundingClientRect().top - text.getBoundingClientRect().top;
-        }
-        finally {
-            document.body.removeChild(div);
-        }
-        var result = { ascent: fontAscent, height: fontHeight, descent: fontHeight - fontAscent };
+        var engine = Engine.LastCreatedEngine;
+        if (!engine) {
+            throw new Error("Invalid engine. Unable to create a canvas.");
+        }
+        var result = engine.getFontOffset(font);
         Control._FontHeightSizes[font] = result;
         return result;
     };
@@ -2090,6 +2230,9 @@ var Control = /** @class */ (function () {
     __decorate([
         serialize()
     ], Control.prototype, "isVisible", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "descendantsOnlyPadding", null);
     __decorate([
         serialize()
     ], Control.prototype, "paddingLeft", null);
@@ -2123,8 +2266,14 @@ var Control = /** @class */ (function () {
     __decorate([
         serialize()
     ], Control.prototype, "disabledColorItem", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "overlapGroup", void 0);
+    __decorate([
+        serialize()
+    ], Control.prototype, "overlapDeltaMultiplier", void 0);
     return Control;
 }());
 export { Control };
-_TypeStore.RegisteredTypes["BABYLON.GUI.Control"] = Control;
+RegisterClass("BABYLON.GUI.Control", Control);
 //# sourceMappingURL=control.js.map