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

package/2D/controls/control.js

@@ -1,2309 +1,2434 @@
-import { __decorate } from "tslib";
-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 { EngineStore } from "@babylonjs/core/Engines/engineStore.js";
-/**
- * Root class used for all 2D controls
- * @see https://doc.babylonjs.com/how_to/gui#controls
- */
-var Control = /** @class */ (function () {
-    // Functions
-    /**
-     * Creates a new control
-     * @param name defines the name of the control
-     */
-    function Control(
-    /** defines the name of the control */
-    name) {
-        this.name = name;
-        this._alpha = 1;
-        this._alphaSet = false;
-        this._zIndex = 0;
-        /** @hidden */
-        this._currentMeasure = Measure.Empty();
-        /** @hidden */
-        this._tempPaddingMeasure = Measure.Empty();
-        this._fontFamily = "Arial";
-        this._fontStyle = "";
-        this._fontWeight = "";
-        this._fontSize = new ValueAndUnit(18, ValueAndUnit.UNITMODE_PIXEL, false);
-        /** @hidden */
-        this._width = new ValueAndUnit(1, ValueAndUnit.UNITMODE_PERCENTAGE, false);
-        /** @hidden */
-        this._height = new ValueAndUnit(1, ValueAndUnit.UNITMODE_PERCENTAGE, false);
-        this._color = "";
-        this._style = null;
-        /** @hidden */
-        this._horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
-        /** @hidden */
-        this._verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
-        /** @hidden */
-        this._isDirty = true;
-        /** @hidden */
-        this._wasDirty = false;
-        /** @hidden */
-        this._tempParentMeasure = Measure.Empty();
-        /** @hidden */
-        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);
-        this._paddingBottom = new ValueAndUnit(0);
-        /** @hidden */
-        this._left = new ValueAndUnit(0);
-        /** @hidden */
-        this._top = new ValueAndUnit(0);
-        this._scaleX = 1.0;
-        this._scaleY = 1.0;
-        this._rotation = 0;
-        this._transformCenterX = 0.5;
-        this._transformCenterY = 0.5;
-        /** @hidden */
-        this._transformMatrix = Matrix2D.Identity();
-        /** @hidden */
-        this._invertTransformMatrix = Matrix2D.Identity();
-        /** @hidden */
-        this._transformedPosition = Vector2.Zero();
-        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 */
-        this._customData = {};
-        /** @hidden */
-        this._isClipped = false;
-        /** @hidden */
-        this._automaticSize = false;
-        /**
-         * Gets or sets an object used to store user defined information for the node
-         */
-        this.metadata = null;
-        /** Gets or sets a boolean indicating if the control can be hit with pointer events */
-        this.isHitTestVisible = true;
-        /** Gets or sets a boolean indicating if the control can block pointer events */
-        this.isPointerBlocker = false;
-        /** Gets or sets a boolean indicating if the control can be focusable */
-        this.isFocusInvisible = false;
-        /**
-         * Gets or sets a boolean indicating if the children are clipped to the current control bounds.
-         * Please note that not clipping children may generate issues with adt.useInvalidateRectOptimization so it is recommended to turn this optimization off if you want to use unclipped children
-         */
-        this.clipChildren = true;
-        /**
-         * Gets or sets a boolean indicating that control content must be clipped
-         * Please note that not clipping children may generate issues with adt.useInvalidateRectOptimization so it is recommended to turn this optimization off if you want to use unclipped children
-         */
-        this.clipContent = true;
-        /**
-         * Gets or sets a boolean indicating that the current control should cache its rendering (useful when the control does not change often)
-         */
-        this.useBitmapCache = false;
-        this._shadowOffsetX = 0;
-        this._shadowOffsetY = 0;
-        this._shadowBlur = 0;
-        this._previousShadowBlur = 0;
-        this._shadowColor = "black";
-        /** Gets or sets the cursor to use when the control is hovered */
-        this.hoverCursor = "";
-        /** @hidden */
-        this._linkOffsetX = new ValueAndUnit(0);
-        /** @hidden */
-        this._linkOffsetY = new ValueAndUnit(0);
-        /**
-         * An event triggered when pointer wheel is scrolled
-         */
-        this.onWheelObservable = new Observable();
-        /**
-         * An event triggered when the pointer moves over the control.
-         */
-        this.onPointerMoveObservable = new Observable();
-        /**
-         * An event triggered when the pointer moves out of the control.
-         */
-        this.onPointerOutObservable = new Observable();
-        /**
-         * An event triggered when the pointer taps the control
-         */
-        this.onPointerDownObservable = new Observable();
-        /**
-         * An event triggered when pointer up
-         */
-        this.onPointerUpObservable = new Observable();
-        /**
-         * An event triggered when a control is clicked on
-         */
-        this.onPointerClickObservable = new Observable();
-        /**
-         * An event triggered when pointer enters the control
-         */
-        this.onPointerEnterObservable = new Observable();
-        /**
-         * An event triggered when the control is marked as dirty
-         */
-        this.onDirtyObservable = new Observable();
-        /**
-         * An event triggered before drawing the control
-         */
-        this.onBeforeDrawObservable = new Observable();
-        /**
-         * An event triggered after the control was drawn
-         */
-        this.onAfterDrawObservable = new Observable();
-        /**
-         * An event triggered when the control has been disposed
-         */
-        this.onDisposeObservable = new Observable();
-        /**
-         * Gets or sets a fixed ratio for this control.
-         * When different from 0, the ratio is used to compute the "second" dimension.
-         * The first dimension used in the computation is the last one set (by setting width / widthInPixels or height / heightInPixels), and the
-         * second dimension is computed as first dimension * fixedRatio
-         */
-        this.fixedRatio = 0;
-        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 () {
-            return this._shadowOffsetX;
-        },
-        set: function (value) {
-            if (this._shadowOffsetX === value) {
-                return;
-            }
-            this._shadowOffsetX = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "shadowOffsetY", {
-        /** Gets or sets a value indicating the offset to apply on Y axis to render the shadow */
-        get: function () {
-            return this._shadowOffsetY;
-        },
-        set: function (value) {
-            if (this._shadowOffsetY === value) {
-                return;
-            }
-            this._shadowOffsetY = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "shadowBlur", {
-        /** Gets or sets a value indicating the amount of blur to use to render the shadow */
-        get: function () {
-            return this._shadowBlur;
-        },
-        set: function (value) {
-            if (this._shadowBlur === value) {
-                return;
-            }
-            this._previousShadowBlur = this._shadowBlur;
-            this._shadowBlur = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "shadowColor", {
-        /** Gets or sets a value indicating the color of the shadow (black by default ie. "#000") */
-        get: function () {
-            return this._shadowColor;
-        },
-        set: function (value) {
-            if (this._shadowColor === value) {
-                return;
-            }
-            this._shadowColor = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "typeName", {
-        // Properties
-        /** Gets the control type name */
-        get: function () {
-            return this._getTypeName();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Get the current class name of the control.
-     * @returns current class name
-     */
-    Control.prototype.getClassName = function () {
-        return this._getTypeName();
-    };
-    Object.defineProperty(Control.prototype, "host", {
-        /**
-         * Get the hosting AdvancedDynamicTexture
-         */
-        get: function () {
-            return this._host;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "fontOffset", {
-        /** Gets or set information about font offsets (used to render and align text) */
-        get: function () {
-            return this._fontOffset;
-        },
-        set: function (offset) {
-            this._fontOffset = offset;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "alpha", {
-        /** Gets or sets alpha value for the control (1 means opaque and 0 means entirely transparent) */
-        get: function () {
-            return this._alpha;
-        },
-        set: function (value) {
-            if (this._alpha === value) {
-                return;
-            }
-            this._alphaSet = true;
-            this._alpha = value;
-            this._markAsDirty();
-        },
-        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)
-         */
-        get: function () {
-            return this._isHighlighted;
-        },
-        set: function (value) {
-            if (this._isHighlighted === value) {
-                return;
-            }
-            this._isHighlighted = value;
-            this._markAsDirty();
-        },
-        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;
-        },
-        set: function (value) {
-            if (this._scaleX === value) {
-                return;
-            }
-            this._scaleX = value;
-            this._markAsDirty();
-            this._markMatrixAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    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;
-        },
-        set: function (value) {
-            if (this._scaleY === value) {
-                return;
-            }
-            this._scaleY = value;
-            this._markAsDirty();
-            this._markMatrixAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    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;
-        },
-        set: function (value) {
-            if (this._rotation === value) {
-                return;
-            }
-            this._rotation = value;
-            this._markAsDirty();
-            this._markMatrixAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    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;
-        },
-        set: function (value) {
-            if (this._transformCenterY === value) {
-                return;
-            }
-            this._transformCenterY = value;
-            this._markAsDirty();
-            this._markMatrixAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    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;
-        },
-        set: function (value) {
-            if (this._transformCenterX === value) {
-                return;
-            }
-            this._transformCenterX = value;
-            this._markAsDirty();
-            this._markMatrixAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "horizontalAlignment", {
-        /**
-         * Gets or sets the horizontal alignment
-         * @see https://doc.babylonjs.com/how_to/gui#alignments
-         */
-        get: function () {
-            return this._horizontalAlignment;
-        },
-        set: function (value) {
-            if (this._horizontalAlignment === value) {
-                return;
-            }
-            this._horizontalAlignment = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "verticalAlignment", {
-        /**
-         * Gets or sets the vertical alignment
-         * @see https://doc.babylonjs.com/how_to/gui#alignments
-         */
-        get: function () {
-            return this._verticalAlignment;
-        },
-        set: function (value) {
-            if (this._verticalAlignment === value) {
-                return;
-            }
-            this._verticalAlignment = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "width", {
-        /**
-         * Gets or sets control width
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._width.toString(this._host);
-        },
-        set: function (value) {
-            this._fixedRatioMasterIsWidth = true;
-            if (this._width.toString(this._host) === value) {
-                return;
-            }
-            if (this._width.fromString(value)) {
-                this._markAsDirty();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "widthInPixels", {
-        /**
-         * Gets or sets the control width in pixel
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._width.getValueInPixel(this._host, this._cachedParentMeasure.width);
-        },
-        set: function (value) {
-            if (isNaN(value)) {
-                return;
-            }
-            this._fixedRatioMasterIsWidth = true;
-            this.width = value + "px";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "height", {
-        /**
-         * Gets or sets control height
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._height.toString(this._host);
-        },
-        set: function (value) {
-            this._fixedRatioMasterIsWidth = false;
-            if (this._height.toString(this._host) === value) {
-                return;
-            }
-            if (this._height.fromString(value)) {
-                this._markAsDirty();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "heightInPixels", {
-        /**
-         * Gets or sets control height in pixel
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._height.getValueInPixel(this._host, this._cachedParentMeasure.height);
-        },
-        set: function (value) {
-            if (isNaN(value)) {
-                return;
-            }
-            this._fixedRatioMasterIsWidth = false;
-            this.height = value + "px";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "fontFamily", {
-        /** Gets or set font family */
-        get: function () {
-            return this._fontFamily;
-        },
-        set: function (value) {
-            if (this._fontFamily === value) {
-                return;
-            }
-            this._fontFamily = value;
-            this._resetFontCache();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "fontStyle", {
-        /** Gets or sets font style */
-        get: function () {
-            return this._fontStyle;
-        },
-        set: function (value) {
-            if (this._fontStyle === value) {
-                return;
-            }
-            this._fontStyle = value;
-            this._resetFontCache();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "fontWeight", {
-        /** Gets or sets font weight */
-        get: function () {
-            return this._fontWeight;
-        },
-        set: function (value) {
-            if (this._fontWeight === value) {
-                return;
-            }
-            this._fontWeight = value;
-            this._resetFontCache();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "style", {
-        /**
-         * Gets or sets style
-         * @see https://doc.babylonjs.com/how_to/gui#styles
-         */
-        get: function () {
-            return this._style;
-        },
-        set: function (value) {
-            var _this = this;
-            if (this._style) {
-                this._style.onChangedObservable.remove(this._styleObserver);
-                this._styleObserver = null;
-            }
-            this._style = value;
-            if (this._style) {
-                this._styleObserver = this._style.onChangedObservable.add(function () {
-                    _this._markAsDirty();
-                    _this._resetFontCache();
-                });
-            }
-            this._markAsDirty();
-            this._resetFontCache();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "_isFontSizeInPercentage", {
-        /** @hidden */
-        get: function () {
-            return this._fontSize.isPercentage;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "fontSizeInPixels", {
-        /** Gets or sets font size in pixels */
-        get: function () {
-            var fontSizeToUse = this._style ? this._style._fontSize : this._fontSize;
-            if (fontSizeToUse.isPixel) {
-                return fontSizeToUse.getValue(this._host);
-            }
-            return fontSizeToUse.getValueInPixel(this._host, this._tempParentMeasure.height || this._cachedParentMeasure.height);
-        },
-        set: function (value) {
-            if (isNaN(value)) {
-                return;
-            }
-            this.fontSize = value + "px";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "fontSize", {
-        /** Gets or sets font size */
-        get: function () {
-            return this._fontSize.toString(this._host);
-        },
-        set: function (value) {
-            if (this._fontSize.toString(this._host) === value) {
-                return;
-            }
-            if (this._fontSize.fromString(value)) {
-                this._markAsDirty();
-                this._resetFontCache();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "color", {
-        /** Gets or sets foreground color */
-        get: function () {
-            return this._color;
-        },
-        set: function (value) {
-            if (this._color === value) {
-                return;
-            }
-            this._color = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "zIndex", {
-        /** Gets or sets z index which is used to reorder controls on the z axis */
-        get: function () {
-            return this._zIndex;
-        },
-        set: function (value) {
-            if (this.zIndex === value) {
-                return;
-            }
-            this._zIndex = value;
-            if (this.parent) {
-                this.parent._reOrderControl(this);
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "notRenderable", {
-        /** Gets or sets a boolean indicating if the control can be rendered */
-        get: function () {
-            return this._doNotRender;
-        },
-        set: function (value) {
-            if (this._doNotRender === value) {
-                return;
-            }
-            this._doNotRender = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "isVisible", {
-        /** Gets or sets a boolean indicating if the control is visible */
-        get: function () {
-            return this._isVisible;
-        },
-        set: function (value) {
-            if (this._isVisible === value) {
-                return;
-            }
-            this._isVisible = value;
-            this._markAsDirty(true);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "isDirty", {
-        /** Gets a boolean indicating that the control needs to update its rendering */
-        get: function () {
-            return this._isDirty;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "linkedMesh", {
-        /**
-         * Gets the current linked mesh (or null if none)
-         */
-        get: function () {
-            return this._linkedMesh;
-        },
-        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
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._paddingLeft.toString(this._host);
-        },
-        set: function (value) {
-            if (this._paddingLeft.fromString(value)) {
-                this._markAsDirty();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "paddingLeftInPixels", {
-        /**
-         * Gets or sets a value indicating the padding in pixels to use on the left of the control
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._paddingLeft.getValueInPixel(this._host, this._cachedParentMeasure.width);
-        },
-        set: function (value) {
-            if (isNaN(value)) {
-                return;
-            }
-            this.paddingLeft = value + "px";
-        },
-        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
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._paddingRight.toString(this._host);
-        },
-        set: function (value) {
-            if (this._paddingRight.fromString(value)) {
-                this._markAsDirty();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "paddingRightInPixels", {
-        /**
-         * Gets or sets a value indicating the padding in pixels to use on the right of the control
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._paddingRight.getValueInPixel(this._host, this._cachedParentMeasure.width);
-        },
-        set: function (value) {
-            if (isNaN(value)) {
-                return;
-            }
-            this.paddingRight = value + "px";
-        },
-        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
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._paddingTop.toString(this._host);
-        },
-        set: function (value) {
-            if (this._paddingTop.fromString(value)) {
-                this._markAsDirty();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "paddingTopInPixels", {
-        /**
-         * Gets or sets a value indicating the padding in pixels to use on the top of the control
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._paddingTop.getValueInPixel(this._host, this._cachedParentMeasure.height);
-        },
-        set: function (value) {
-            if (isNaN(value)) {
-                return;
-            }
-            this.paddingTop = value + "px";
-        },
-        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
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._paddingBottom.toString(this._host);
-        },
-        set: function (value) {
-            if (this._paddingBottom.fromString(value)) {
-                this._markAsDirty();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "paddingBottomInPixels", {
-        /**
-         * Gets or sets a value indicating the padding in pixels to use on the bottom of the control
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._paddingBottom.getValueInPixel(this._host, this._cachedParentMeasure.height);
-        },
-        set: function (value) {
-            if (isNaN(value)) {
-                return;
-            }
-            this.paddingBottom = value + "px";
-        },
-        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
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._left.toString(this._host);
-        },
-        set: function (value) {
-            if (this._left.fromString(value)) {
-                this._markAsDirty();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "leftInPixels", {
-        /**
-         * Gets or sets a value indicating the left coordinate in pixels of the control
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._left.getValueInPixel(this._host, this._cachedParentMeasure.width);
-        },
-        set: function (value) {
-            if (isNaN(value)) {
-                return;
-            }
-            this.left = value + "px";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "top", {
-        /**
-         * Gets or sets a value indicating the top coordinate of the control
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._top.toString(this._host);
-        },
-        set: function (value) {
-            if (this._top.fromString(value)) {
-                this._markAsDirty();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "topInPixels", {
-        /**
-         * Gets or sets a value indicating the top coordinate in pixels of the control
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._top.getValueInPixel(this._host, this._cachedParentMeasure.height);
-        },
-        set: function (value) {
-            if (isNaN(value)) {
-                return;
-            }
-            this.top = value + "px";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "linkOffsetX", {
-        /**
-         * Gets or sets a value indicating the offset on X axis to the linked mesh
-         * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
-         */
-        get: function () {
-            return this._linkOffsetX.toString(this._host);
-        },
-        set: function (value) {
-            if (this._linkOffsetX.fromString(value)) {
-                this._markAsDirty();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "linkOffsetXInPixels", {
-        /**
-         * Gets or sets a value indicating the offset in pixels on X axis to the linked mesh
-         * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
-         */
-        get: function () {
-            return this._linkOffsetX.getValueInPixel(this._host, this._cachedParentMeasure.width);
-        },
-        set: function (value) {
-            if (isNaN(value)) {
-                return;
-            }
-            this.linkOffsetX = value + "px";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "linkOffsetY", {
-        /**
-         * Gets or sets a value indicating the offset on Y axis to the linked mesh
-         * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
-         */
-        get: function () {
-            return this._linkOffsetY.toString(this._host);
-        },
-        set: function (value) {
-            if (this._linkOffsetY.fromString(value)) {
-                this._markAsDirty();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "linkOffsetYInPixels", {
-        /**
-         * Gets or sets a value indicating the offset in pixels on Y axis to the linked mesh
-         * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
-         */
-        get: function () {
-            return this._linkOffsetY.getValueInPixel(this._host, this._cachedParentMeasure.height);
-        },
-        set: function (value) {
-            if (isNaN(value)) {
-                return;
-            }
-            this.linkOffsetY = value + "px";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "centerX", {
-        /** Gets the center coordinate on X axis */
-        get: function () {
-            return this._currentMeasure.left + this._currentMeasure.width / 2;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "centerY", {
-        /** Gets the center coordinate on Y axis */
-        get: function () {
-            return this._currentMeasure.top + this._currentMeasure.height / 2;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "isEnabled", {
-        /** Gets or sets if control is Enabled */
-        get: function () {
-            return this._isEnabled;
-        },
-        set: function (value) {
-            var _this = this;
-            if (this._isEnabled === value) {
-                return;
-            }
-            this._isEnabled = value;
-            this._markAsDirty();
-            // if this control or any of it's descendants are under a pointer, we need to fire a pointerOut event
-            var recursivelyFirePointerOut = function (control) {
-                if (!control.host) {
-                    return;
-                }
-                for (var pointer in control.host._lastControlOver) {
-                    if (control === _this.host._lastControlOver[pointer]) {
-                        control._onPointerOut(control, null, true);
-                        delete control.host._lastControlOver[pointer];
-                    }
-                }
-                if (control.children !== undefined) {
-                    control.children.forEach(recursivelyFirePointerOut);
-                }
-            };
-            recursivelyFirePointerOut(this);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "disabledColor", {
-        /** Gets or sets background color of control if it's disabled. Only applies to Button class. */
-        get: function () {
-            return this._disabledColor;
-        },
-        set: function (value) {
-            if (this._disabledColor === value) {
-                return;
-            }
-            this._disabledColor = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control.prototype, "disabledColorItem", {
-        /** Gets or sets front color of control if it's disabled. Only applies to Checkbox class. */
-        get: function () {
-            return this._disabledColorItem;
-        },
-        set: function (value) {
-            if (this._disabledColorItem === value) {
-                return;
-            }
-            this._disabledColorItem = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /** @hidden */
-    Control.prototype._getTypeName = function () {
-        return "Control";
-    };
-    /**
-     * Gets the first ascendant in the hierarchy of the given type
-     * @param className defines the required type
-     * @returns the ascendant or null if not found
-     */
-    Control.prototype.getAscendantOfClass = function (className) {
-        if (!this.parent) {
-            return null;
-        }
-        if (this.parent.getClassName() === className) {
-            return this.parent;
-        }
-        return this.parent.getAscendantOfClass(className);
-    };
-    /**
-     * Mark control element as dirty
-     * @param force force non visible elements to be marked too
-     */
-    Control.prototype.markAsDirty = function (force) {
-        this._markAsDirty(force);
-    };
-    /**
-     * Mark the element and its children as dirty
-     */
-    Control.prototype.markAllAsDirty = function () {
-        this._markAllAsDirty();
-    };
-    /** @hidden */
-    Control.prototype._resetFontCache = function () {
-        this._fontSet = true;
-        this._markAsDirty();
-    };
-    /**
-     * Determines if a container is an ascendant of the current control
-     * @param container defines the container to look for
-     * @returns true if the container is one of the ascendant of the control
-     */
-    Control.prototype.isAscendant = function (container) {
-        if (!this.parent) {
-            return false;
-        }
-        if (this.parent === container) {
-            return true;
-        }
-        return this.parent.isAscendant(container);
-    };
-    /**
-     * Gets coordinates in local control space
-     * @param globalCoordinates defines the coordinates to transform
-     * @returns the new coordinates in local space
-     */
-    Control.prototype.getLocalCoordinates = function (globalCoordinates) {
-        var result = Vector2.Zero();
-        this.getLocalCoordinatesToRef(globalCoordinates, result);
-        return result;
-    };
-    /**
-     * Gets coordinates in local control space
-     * @param globalCoordinates defines the coordinates to transform
-     * @param result defines the target vector2 where to store the result
-     * @returns the current control
-     */
-    Control.prototype.getLocalCoordinatesToRef = function (globalCoordinates, result) {
-        result.x = globalCoordinates.x - this._currentMeasure.left;
-        result.y = globalCoordinates.y - this._currentMeasure.top;
-        return this;
-    };
-    /**
-     * Gets coordinates in parent local control space
-     * @param globalCoordinates defines the coordinates to transform
-     * @returns the new coordinates in parent local space
-     */
-    Control.prototype.getParentLocalCoordinates = function (globalCoordinates) {
-        var result = Vector2.Zero();
-        result.x = globalCoordinates.x - this._cachedParentMeasure.left;
-        result.y = globalCoordinates.y - this._cachedParentMeasure.top;
-        return result;
-    };
-    /**
-     * Move the current control to a vector3 position projected onto the screen.
-     * @param position defines the target position
-     * @param scene defines the hosting scene
-     */
-    Control.prototype.moveToVector3 = function (position, scene) {
-        if (!this._host || this.parent !== this._host._rootContainer) {
-            Tools.Error("Cannot move a control to a vector3 if the control is not at root level");
-            return;
-        }
-        this.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
-        this.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
-        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) {
-            this.notRenderable = true;
-            return;
-        }
-        this.notRenderable = false;
-    };
-    /**
-     * Will store all controls that have this control as ascendant in a given array
-     * @param results defines the array where to store the descendants
-     * @param directDescendantsOnly defines if true only direct descendants of 'this' will be considered, if false direct and also indirect (children of children, an so on in a recursive manner) descendants of 'this' will be considered
-     * @param predicate defines an optional predicate that will be called on every evaluated child, the predicate must return true for a given child to be part of the result, otherwise it will be ignored
-     */
-    Control.prototype.getDescendantsToRef = function (results, directDescendantsOnly, predicate) {
-        if (directDescendantsOnly === void 0) { directDescendantsOnly = false; }
-        // Do nothing by default
-    };
-    /**
-     * Will return all controls that have this control as ascendant
-     * @param directDescendantsOnly defines if true only direct descendants of 'this' will be considered, if false direct and also indirect (children of children, an so on in a recursive manner) descendants of 'this' will be considered
-     * @param predicate defines an optional predicate that will be called on every evaluated child, the predicate must return true for a given child to be part of the result, otherwise it will be ignored
-     * @return all child controls
-     */
-    Control.prototype.getDescendants = function (directDescendantsOnly, predicate) {
-        var results = new Array();
-        this.getDescendantsToRef(results, directDescendantsOnly, predicate);
-        return results;
-    };
-    /**
-     * Link current control with a target mesh
-     * @param mesh defines the mesh to link with
-     * @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 (mesh) {
-                Tools.Error("Cannot link a control to a mesh if the control is not at root level");
-            }
-            return;
-        }
-        var index = this._host._linkedControls.indexOf(this);
-        if (index !== -1) {
-            this._linkedMesh = mesh;
-            if (!mesh) {
-                this._host._linkedControls.splice(index, 1);
-            }
-            return;
-        }
-        else if (!mesh) {
-            return;
-        }
-        this.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
-        this.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
-        this._linkedMesh = mesh;
-        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
-     */
-    Control.prototype.setPadding = function (paddingTop, paddingRight, paddingBottom, paddingLeft) {
-        var top = paddingTop;
-        var right = paddingRight !== null && paddingRight !== void 0 ? paddingRight : top;
-        var bottom = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : top;
-        var left = paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : right;
-        this.paddingTop = top;
-        this.paddingRight = right;
-        this.paddingBottom = bottom;
-        this.paddingLeft = left;
-    };
-    /**
-     * Shorthand funtion to set the top, right, bottom, and left padding values in pixels on the control.
-     * @param { number} paddingTop - The value in pixels of the top padding.
-     * @param { number} paddingRight - The value in pixels of the right padding. If omitted, top is used.
-     * @param { number} paddingBottom - The value in pixels of the bottom padding. If omitted, top is used.
-     * @param { number} paddingLeft - The value in pixels of the left padding. If omitted, right is used.
-     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-     */
-    Control.prototype.setPaddingInPixels = function (paddingTop, paddingRight, paddingBottom, paddingLeft) {
-        var top = paddingTop;
-        var right = paddingRight !== null && paddingRight !== void 0 ? paddingRight : top;
-        var bottom = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : top;
-        var left = paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : right;
-        this.paddingTopInPixels = top;
-        this.paddingRightInPixels = right;
-        this.paddingBottomInPixels = bottom;
-        this.paddingLeftInPixels = left;
-    };
-    /** @hidden */
-    Control.prototype._moveToProjectedPosition = function (projectedPosition) {
-        var _a;
-        var oldLeft = this._left.getValue(this._host);
-        var oldTop = this._top.getValue(this._host);
-        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;
-            }
-            if (Math.abs(newTop - oldTop) < 0.5) {
-                newTop = oldTop;
-            }
-        }
-        this.left = newLeft + "px";
-        this.top = newTop + "px";
-        this._left.ignoreAdaptiveScaling = true;
-        this._top.ignoreAdaptiveScaling = true;
-        this._markAsDirty();
-    };
-    /** @hidden */
-    Control.prototype._offsetLeft = function (offset) {
-        this._isDirty = true;
-        this._currentMeasure.left += offset;
-    };
-    /** @hidden */
-    Control.prototype._offsetTop = function (offset) {
-        this._isDirty = true;
-        this._currentMeasure.top += offset;
-    };
-    /** @hidden */
-    Control.prototype._markMatrixAsDirty = function () {
-        this._isMatrixDirty = true;
-        this._flagDescendantsAsMatrixDirty();
-    };
-    /** @hidden */
-    Control.prototype._flagDescendantsAsMatrixDirty = function () {
-        // No child
-    };
-    /** @hidden */
-    Control.prototype._intersectsRect = function (rect) {
-        // Rotate the control's current measure into local space and check if it intersects the passed in rectangle
-        this._currentMeasure.transformToRef(this._transformMatrix, this._tmpMeasureA);
-        if (this._tmpMeasureA.left >= rect.left + rect.width) {
-            return false;
-        }
-        if (this._tmpMeasureA.top >= rect.top + rect.height) {
-            return false;
-        }
-        if (this._tmpMeasureA.left + this._tmpMeasureA.width <= rect.left) {
-            return false;
-        }
-        if (this._tmpMeasureA.top + this._tmpMeasureA.height <= rect.top) {
-            return false;
-        }
-        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) {
-            // Rotate by transform to get the measure transformed to global space
-            this._currentMeasure.transformToRef(this._transformMatrix, this._tmpMeasureA);
-            // 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);
-            // 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 */
-    Control.prototype._markAsDirty = function (force) {
-        if (force === void 0) { force = false; }
-        if (!this._isVisible && !force) {
-            return;
-        }
-        this._isDirty = true;
-        // Redraw only this rectangle
-        if (this._host) {
-            this._host.markAsDirty();
-        }
-    };
-    /** @hidden */
-    Control.prototype._markAllAsDirty = function () {
-        this._markAsDirty();
-        if (this._font) {
-            this._prepareFont();
-        }
-    };
-    /** @hidden */
-    Control.prototype._link = function (host) {
-        this._host = host;
-        if (this._host) {
-            this.uniqueId = this._host.getScene().getUniqueId();
-        }
-    };
-    /** @hidden */
-    Control.prototype._transform = function (context) {
-        if (!this._isMatrixDirty && this._scaleX === 1 && this._scaleY === 1 && this._rotation === 0) {
-            return;
-        }
-        // postTranslate
-        var offsetX = this._currentMeasure.width * this._transformCenterX + this._currentMeasure.left;
-        var offsetY = this._currentMeasure.height * this._transformCenterY + this._currentMeasure.top;
-        if (context) {
-            context.translate(offsetX, offsetY);
-            // rotate
-            context.rotate(this._rotation);
-            // scale
-            context.scale(this._scaleX, this._scaleY);
-            // preTranslate
-            context.translate(-offsetX, -offsetY);
-        }
-        // Need to update matrices?
-        if (this._isMatrixDirty || this._cachedOffsetX !== offsetX || this._cachedOffsetY !== offsetY) {
-            this._cachedOffsetX = offsetX;
-            this._cachedOffsetY = offsetY;
-            this._isMatrixDirty = false;
-            this._flagDescendantsAsMatrixDirty();
-            Matrix2D.ComposeToRef(-offsetX, -offsetY, this._rotation, this._scaleX, this._scaleY, this.parent ? this.parent._transformMatrix : null, this._transformMatrix);
-            this._transformMatrix.invertToRef(this._invertTransformMatrix);
-        }
-    };
-    /** @hidden */
-    Control.prototype._renderHighlight = function (context) {
-        if (!this.isHighlighted) {
-            return;
-        }
-        context.save();
-        context.strokeStyle = this._highlightColor;
-        context.lineWidth = this._highlightLineWidth;
-        this._renderHighlightSpecific(context);
-        context.restore();
-    };
-    /** @hidden */
-    Control.prototype._renderHighlightSpecific = function (context) {
-        context.strokeRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
-    };
-    /** @hidden */
-    Control.prototype._applyStates = function (context) {
-        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;
-        }
-        if (this._font) {
-            context.font = this._font;
-        }
-        if (this._color) {
-            context.fillStyle = this._color;
-        }
-        if (Control.AllowAlphaInheritance) {
-            context.globalAlpha *= this._alpha;
-        }
-        else if (this._alphaSet) {
-            context.globalAlpha = this.parent && !this.parent.renderToIntermediateTexture ? this.parent.alpha * this._alpha : this._alpha;
-        }
-    };
-    /** @hidden */
-    Control.prototype._layout = function (parentMeasure, context) {
-        if (!this.isDirty && (!this.isVisible || this.notRenderable)) {
-            return false;
-        }
-        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);
-            context.save();
-            this._applyStates(context);
-            var rebuildCount = 0;
-            do {
-                this._rebuildLayout = false;
-                this._processMeasures(parentMeasure, context);
-                rebuildCount++;
-            } while (this._rebuildLayout && rebuildCount < 3);
-            if (rebuildCount >= 3) {
-                Logger.Error("Layout cycle detected in GUI (Control name=".concat(this.name, ", uniqueId=").concat(this.uniqueId, ")"));
-            }
-            context.restore();
-            this.invalidateRect();
-            this._evaluateClippingState(parentMeasure);
-        }
-        this._wasDirty = this._isDirty;
-        this._isDirty = false;
-        return true;
-    };
-    /** @hidden */
-    Control.prototype._processMeasures = function (parentMeasure, context) {
-        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(this._tempPaddingMeasure, context);
-        this._measure();
-        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(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._evaluatedMeasure.left > this._evaluatedParentMeasure.left + this._evaluatedParentMeasure.width) {
-                this._isClipped = true;
-                return;
-            }
-            if (this._evaluatedMeasure.left + this._evaluatedMeasure.width < this._evaluatedParentMeasure.left) {
-                this._isClipped = true;
-                return;
-            }
-            if (this._evaluatedMeasure.top > this._evaluatedParentMeasure.top + this._evaluatedParentMeasure.height) {
-                this._isClipped = true;
-                return;
-            }
-            if (this._evaluatedMeasure.top + this._evaluatedMeasure.height < this._evaluatedParentMeasure.top) {
-                this._isClipped = true;
-                return;
-            }
-        }
-        this._isClipped = false;
-    };
-    /** @hidden */
-    Control.prototype._measure = function () {
-        // Width / Height
-        if (this._width.isPixel) {
-            this._currentMeasure.width = this._width.getValue(this._host);
-        }
-        else {
-            this._currentMeasure.width *= this._width.getValue(this._host);
-        }
-        if (this._height.isPixel) {
-            this._currentMeasure.height = this._height.getValue(this._host);
-        }
-        else {
-            this._currentMeasure.height *= this._height.getValue(this._host);
-        }
-        if (this.fixedRatio !== 0) {
-            if (this._fixedRatioMasterIsWidth) {
-                this._currentMeasure.height = this._currentMeasure.width * this.fixedRatio;
-            }
-            else {
-                this._currentMeasure.width = this._currentMeasure.height * this.fixedRatio;
-            }
-        }
-    };
-    /** @hidden */
-    Control.prototype._computeAlignment = function (parentMeasure, context) {
-        var width = this._currentMeasure.width;
-        var height = this._currentMeasure.height;
-        var parentWidth = parentMeasure.width;
-        var parentHeight = parentMeasure.height;
-        // Left / top
-        var x = 0;
-        var y = 0;
-        switch (this.horizontalAlignment) {
-            case Control.HORIZONTAL_ALIGNMENT_LEFT:
-                x = 0;
-                break;
-            case Control.HORIZONTAL_ALIGNMENT_RIGHT:
-                x = parentWidth - width;
-                break;
-            case Control.HORIZONTAL_ALIGNMENT_CENTER:
-                x = (parentWidth - width) / 2;
-                break;
-        }
-        switch (this.verticalAlignment) {
-            case Control.VERTICAL_ALIGNMENT_TOP:
-                y = 0;
-                break;
-            case Control.VERTICAL_ALIGNMENT_BOTTOM:
-                y = parentHeight - height;
-                break;
-            case Control.VERTICAL_ALIGNMENT_CENTER:
-                y = (parentHeight - height) / 2;
-                break;
-        }
-        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);
-        }
-        else {
-            this._currentMeasure.left += parentWidth * this._left.getValue(this._host);
-        }
-        if (this._top.isPixel) {
-            this._currentMeasure.top += this._top.getValue(this._host);
-        }
-        else {
-            this._currentMeasure.top += parentHeight * this._top.getValue(this._host);
-        }
-        this._currentMeasure.left += x;
-        this._currentMeasure.top += y;
-    };
-    /** @hidden */
-    Control.prototype._preMeasure = function (parentMeasure, context) {
-        // Do nothing
-    };
-    /** @hidden */
-    Control.prototype._additionalProcessing = function (parentMeasure, context) {
-        // Do nothing
-    };
-    /** @hidden */
-    Control.prototype._clipForChildren = function (context) {
-        // DO nothing
-    };
-    Control.prototype._clip = function (context, invalidatedRectangle) {
-        context.beginPath();
-        Control._ClipMeasure.copyFrom(this._currentMeasure);
-        if (invalidatedRectangle) {
-            // Rotate the invalidated rect into the control's space
-            invalidatedRectangle.transformToRef(this._invertTransformMatrix, this._tmpMeasureA);
-            // Get the intersection of the rect in context space and the current context
-            var intersection = new Measure(0, 0, 0, 0);
-            intersection.left = Math.max(this._tmpMeasureA.left, this._currentMeasure.left);
-            intersection.top = Math.max(this._tmpMeasureA.top, this._currentMeasure.top);
-            intersection.width = Math.min(this._tmpMeasureA.left + this._tmpMeasureA.width, this._currentMeasure.left + this._currentMeasure.width) - intersection.left;
-            intersection.height = Math.min(this._tmpMeasureA.top + this._tmpMeasureA.height, this._currentMeasure.top + this._currentMeasure.height) - intersection.top;
-            Control._ClipMeasure.copyFrom(intersection);
-        }
-        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
-            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);
-            context.rect(Control._ClipMeasure.left + leftShadowOffset, Control._ClipMeasure.top + topShadowOffset, Control._ClipMeasure.width + rightShadowOffset - leftShadowOffset, Control._ClipMeasure.height + bottomShadowOffset - topShadowOffset);
-        }
-        else {
-            context.rect(Control._ClipMeasure.left, Control._ClipMeasure.top, Control._ClipMeasure.width, Control._ClipMeasure.height);
-        }
-        context.clip();
-    };
-    /** @hidden */
-    Control.prototype._render = function (context, invalidatedRectangle) {
-        if (!this.isVisible || this.notRenderable || this._isClipped) {
-            this._isDirty = false;
-            return false;
-        }
-        this.host._numRenderCalls++;
-        context.save();
-        this._applyStates(context);
-        // Transform
-        this._transform(context);
-        // Clip
-        if (this.clipContent) {
-            this._clip(context, invalidatedRectangle);
-        }
-        if (this.onBeforeDrawObservable.hasObservers()) {
-            this.onBeforeDrawObservable.notifyObservers(this);
-        }
-        if (this.useBitmapCache && !this._wasDirty && this._cacheData) {
-            context.putImageData(this._cacheData, this._currentMeasure.left, this._currentMeasure.top);
-        }
-        else {
-            this._draw(context, invalidatedRectangle);
-        }
-        if (this.useBitmapCache && this._wasDirty) {
-            this._cacheData = context.getImageData(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
-        }
-        this._renderHighlight(context);
-        if (this.onAfterDrawObservable.hasObservers()) {
-            this.onAfterDrawObservable.notifyObservers(this);
-        }
-        context.restore();
-        return true;
-    };
-    /** @hidden */
-    Control.prototype._draw = function (context, invalidatedRectangle) {
-        // Do nothing
-    };
-    /**
-     * Tests if a given coordinates belong to the current control
-     * @param x defines x coordinate to test
-     * @param y defines y coordinate to test
-     * @returns true if the coordinates are inside the control
-     */
-    Control.prototype.contains = function (x, y) {
-        // Invert transform
-        this._invertTransformMatrix.transformCoordinates(x, y, this._transformedPosition);
-        x = this._transformedPosition.x;
-        y = this._transformedPosition.y;
-        // Check
-        if (x < this._currentMeasure.left) {
-            return false;
-        }
-        if (x > this._currentMeasure.left + this._currentMeasure.width) {
-            return false;
-        }
-        if (y < this._currentMeasure.top) {
-            return false;
-        }
-        if (y > this._currentMeasure.top + this._currentMeasure.height) {
-            return false;
-        }
-        if (this.isPointerBlocker) {
-            this._host._shouldBlockPointer = true;
-        }
-        return true;
-    };
-    /** @hidden */
-    Control.prototype._processPicking = function (x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY) {
-        if (!this._isEnabled) {
-            return false;
-        }
-        if (!this.isHitTestVisible || !this.isVisible || this._doNotRender) {
-            return false;
-        }
-        if (!this.contains(x, y)) {
-            return false;
-        }
-        this._processObservables(type, x, y, pi, pointerId, buttonIndex, deltaX, deltaY);
-        return true;
-    };
-    /** @hidden */
-    Control.prototype._onPointerMove = function (target, coordinates, pointerId, pi) {
-        var canNotify = this.onPointerMoveObservable.notifyObservers(coordinates, -1, target, this, pi);
-        if (canNotify && this.parent != null) {
-            this.parent._onPointerMove(target, coordinates, pointerId, pi);
-        }
-    };
-    /** @hidden */
-    Control.prototype._onPointerEnter = function (target, pi) {
-        if (!this._isEnabled) {
-            return false;
-        }
-        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
-            this._enterCount = 0;
-        }
-        this._enterCount++;
-        var canNotify = this.onPointerEnterObservable.notifyObservers(this, -1, target, this, pi);
-        if (canNotify && this.parent != null) {
-            this.parent._onPointerEnter(target, pi);
-        }
-        return true;
-    };
-    /** @hidden */
-    Control.prototype._onPointerOut = function (target, pi, force) {
-        if (force === void 0) { force = false; }
-        if (!force && (!this._isEnabled || target === this)) {
-            return;
-        }
-        this._enterCount = 0;
-        var canNotify = true;
-        if (!target.isAscendant(this)) {
-            canNotify = this.onPointerOutObservable.notifyObservers(this, -1, target, this, pi);
-        }
-        if (canNotify && this.parent != null) {
-            this.parent._onPointerOut(target, pi, force);
-        }
-    };
-    /** @hidden */
-    Control.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex, pi) {
-        // Prevent pointerout to lose control context.
-        // Event redundancy is checked inside the function.
-        this._onPointerEnter(this, pi);
-        if (this._downCount !== 0) {
-            return false;
-        }
-        this._downCount++;
-        this._downPointerIds[pointerId] = true;
-        var canNotify = this.onPointerDownObservable.notifyObservers(new Vector2WithInfo(coordinates, buttonIndex), -1, target, this, pi);
-        if (canNotify && this.parent != null) {
-            this.parent._onPointerDown(target, coordinates, pointerId, buttonIndex, pi);
-        }
-        return true;
-    };
-    /** @hidden */
-    Control.prototype._onPointerUp = function (target, coordinates, pointerId, buttonIndex, notifyClick, pi) {
-        if (!this._isEnabled) {
-            return;
-        }
-        this._downCount = 0;
-        delete this._downPointerIds[pointerId];
-        var canNotifyClick = notifyClick;
-        if (notifyClick && (this._enterCount > 0 || this._enterCount === -1)) {
-            canNotifyClick = this.onPointerClickObservable.notifyObservers(new Vector2WithInfo(coordinates, buttonIndex), -1, target, this, pi);
-        }
-        var canNotify = this.onPointerUpObservable.notifyObservers(new Vector2WithInfo(coordinates, buttonIndex), -1, target, this, pi);
-        if (canNotify && this.parent != null) {
-            this.parent._onPointerUp(target, coordinates, pointerId, buttonIndex, canNotifyClick, pi);
-        }
-    };
-    /** @hidden */
-    Control.prototype._forcePointerUp = function (pointerId) {
-        if (pointerId === void 0) { pointerId = null; }
-        if (pointerId !== null) {
-            this._onPointerUp(this, Vector2.Zero(), pointerId, 0, true);
-        }
-        else {
-            for (var key in this._downPointerIds) {
-                this._onPointerUp(this, Vector2.Zero(), +key, 0, true);
-            }
-        }
-    };
-    /** @hidden */
-    Control.prototype._onWheelScroll = function (deltaX, deltaY) {
-        if (!this._isEnabled) {
-            return;
-        }
-        var canNotify = this.onWheelObservable.notifyObservers(new Vector2(deltaX, deltaY));
-        if (canNotify && this.parent != null) {
-            this.parent._onWheelScroll(deltaX, deltaY);
-        }
-    };
-    /** @hidden */
-    Control.prototype._onCanvasBlur = function () { };
-    /** @hidden */
-    Control.prototype._processObservables = function (type, x, y, pi, pointerId, buttonIndex, deltaX, deltaY) {
-        if (!this._isEnabled) {
-            return false;
-        }
-        this._dummyVector2.copyFromFloats(x, y);
-        if (type === PointerEventTypes.POINTERMOVE) {
-            this._onPointerMove(this, this._dummyVector2, pointerId, pi);
-            var previousControlOver = this._host._lastControlOver[pointerId];
-            if (previousControlOver && previousControlOver !== this) {
-                previousControlOver._onPointerOut(this, pi);
-            }
-            if (previousControlOver !== this) {
-                this._onPointerEnter(this, pi);
-            }
-            this._host._lastControlOver[pointerId] = this;
-            return true;
-        }
-        if (type === PointerEventTypes.POINTERDOWN) {
-            this._onPointerDown(this, this._dummyVector2, pointerId, buttonIndex, pi);
-            this._host._registerLastControlDown(this, pointerId);
-            this._host._lastPickedControl = this;
-            return true;
-        }
-        if (type === PointerEventTypes.POINTERUP) {
-            if (this._host._lastControlDown[pointerId]) {
-                this._host._lastControlDown[pointerId]._onPointerUp(this, this._dummyVector2, pointerId, buttonIndex, true, pi);
-            }
-            delete this._host._lastControlDown[pointerId];
-            return true;
-        }
-        if (type === PointerEventTypes.POINTERWHEEL) {
-            if (this._host._lastControlOver[pointerId]) {
-                this._host._lastControlOver[pointerId]._onWheelScroll(deltaX, deltaY);
-                return true;
-            }
-        }
-        return false;
-    };
-    Control.prototype._prepareFont = function () {
-        if (!this._font && !this._fontSet) {
-            return;
-        }
-        if (this._style) {
-            this._font = this._style.fontStyle + " " + this._style.fontWeight + " " + this.fontSizeInPixels + "px " + this._style.fontFamily;
-        }
-        else {
-            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
-     * @param serializationObject defined the JSON serialized object
-     */
-    Control.prototype.serialize = function (serializationObject) {
-        SerializationHelper.Serialize(this, serializationObject);
-        serializationObject.name = this.name;
-        serializationObject.className = this.getClassName();
-        if (this._font) {
-            serializationObject.fontFamily = this._fontFamily;
-            serializationObject.fontSize = this.fontSize;
-            serializationObject.fontWeight = this.fontWeight;
-            serializationObject.fontStyle = this.fontStyle;
-        }
-    };
-    /** @hidden */
-    Control.prototype._parseFromContent = function (serializedObject, host) {
-        if (serializedObject.fontFamily) {
-            this.fontFamily = serializedObject.fontFamily;
-        }
-        if (serializedObject.fontSize) {
-            this.fontSize = serializedObject.fontSize;
-        }
-        if (serializedObject.fontWeight) {
-            this.fontWeight = serializedObject.fontWeight;
-        }
-        if (serializedObject.fontStyle) {
-            this.fontStyle = serializedObject.fontStyle;
-        }
-    };
-    /** Releases associated resources */
-    Control.prototype.dispose = function () {
-        this.onDirtyObservable.clear();
-        this.onBeforeDrawObservable.clear();
-        this.onAfterDrawObservable.clear();
-        this.onPointerDownObservable.clear();
-        this.onPointerEnterObservable.clear();
-        this.onPointerMoveObservable.clear();
-        this.onPointerOutObservable.clear();
-        this.onPointerUpObservable.clear();
-        this.onPointerClickObservable.clear();
-        this.onWheelObservable.clear();
-        if (this._styleObserver && this._style) {
-            this._style.onChangedObservable.remove(this._styleObserver);
-            this._styleObserver = null;
-        }
-        if (this.parent) {
-            this.parent.removeControl(this);
-            this.parent = null;
-        }
-        if (this._host) {
-            var index = this._host._linkedControls.indexOf(this);
-            if (index > -1) {
-                this.linkWithMesh(null);
-            }
-        }
-        // Callback
-        this.onDisposeObservable.notifyObservers(this);
-        this.onDisposeObservable.clear();
-    };
-    Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_LEFT", {
-        /** HORIZONTAL_ALIGNMENT_LEFT */
-        get: function () {
-            return Control._HORIZONTAL_ALIGNMENT_LEFT;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_RIGHT", {
-        /** HORIZONTAL_ALIGNMENT_RIGHT */
-        get: function () {
-            return Control._HORIZONTAL_ALIGNMENT_RIGHT;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_CENTER", {
-        /** HORIZONTAL_ALIGNMENT_CENTER */
-        get: function () {
-            return Control._HORIZONTAL_ALIGNMENT_CENTER;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control, "VERTICAL_ALIGNMENT_TOP", {
-        /** VERTICAL_ALIGNMENT_TOP */
-        get: function () {
-            return Control._VERTICAL_ALIGNMENT_TOP;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control, "VERTICAL_ALIGNMENT_BOTTOM", {
-        /** VERTICAL_ALIGNMENT_BOTTOM */
-        get: function () {
-            return Control._VERTICAL_ALIGNMENT_BOTTOM;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Control, "VERTICAL_ALIGNMENT_CENTER", {
-        /** VERTICAL_ALIGNMENT_CENTER */
-        get: function () {
-            return Control._VERTICAL_ALIGNMENT_CENTER;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /** @hidden */
-    Control._GetFontOffset = function (font) {
-        if (Control._FontHeightSizes[font]) {
-            return Control._FontHeightSizes[font];
-        }
-        var engine = EngineStore.LastCreatedEngine;
-        if (!engine) {
-            throw new Error("Invalid engine. Unable to create a canvas.");
-        }
-        var result = engine.getFontOffset(font);
-        Control._FontHeightSizes[font] = result;
-        return result;
-    };
-    /**
-     * Creates a Control from parsed data
-     * @param serializedObject defines parsed data
-     * @param host defines the hosting AdvancedDynamicTexture
-     * @returns a new Control
-     */
-    Control.Parse = function (serializedObject, host) {
-        var controlType = Tools.Instantiate("BABYLON.GUI." + serializedObject.className);
-        var control = SerializationHelper.Parse(function () { return new controlType(); }, serializedObject, null);
-        control.name = serializedObject.name;
-        control._parseFromContent(serializedObject, host);
-        return control;
-    };
-    /** @hidden */
-    Control.drawEllipse = function (x, y, width, height, context) {
-        context.translate(x, y);
-        context.scale(width, height);
-        context.beginPath();
-        context.arc(0, 0, 1, 0, 2 * Math.PI);
-        context.closePath();
-        context.scale(1 / width, 1 / height);
-        context.translate(-x, -y);
-    };
-    /**
-     * Gets or sets a boolean indicating if alpha must be an inherited value (false by default)
-     */
-    Control.AllowAlphaInheritance = false;
-    Control._ClipMeasure = new Measure(0, 0, 0, 0);
-    // Statics
-    Control._HORIZONTAL_ALIGNMENT_LEFT = 0;
-    Control._HORIZONTAL_ALIGNMENT_RIGHT = 1;
-    Control._HORIZONTAL_ALIGNMENT_CENTER = 2;
-    Control._VERTICAL_ALIGNMENT_TOP = 0;
-    Control._VERTICAL_ALIGNMENT_BOTTOM = 1;
-    Control._VERTICAL_ALIGNMENT_CENTER = 2;
-    Control._FontHeightSizes = {};
-    /**
-     * Creates a stack panel that can be used to render headers
-     * @param control defines the control to associate with the header
-     * @param text defines the text of the header
-     * @param size defines the size of the header
-     * @param options defines options used to configure the header
-     * @returns a new StackPanel
-     * @ignore
-     * @hidden
-     */
-    Control.AddHeader = function () { };
-    __decorate([
-        serialize()
-    ], Control.prototype, "metadata", void 0);
-    __decorate([
-        serialize()
-    ], Control.prototype, "isHitTestVisible", void 0);
-    __decorate([
-        serialize()
-    ], Control.prototype, "isPointerBlocker", void 0);
-    __decorate([
-        serialize()
-    ], Control.prototype, "isFocusInvisible", void 0);
-    __decorate([
-        serialize()
-    ], Control.prototype, "clipChildren", void 0);
-    __decorate([
-        serialize()
-    ], Control.prototype, "clipContent", void 0);
-    __decorate([
-        serialize()
-    ], Control.prototype, "useBitmapCache", void 0);
-    __decorate([
-        serialize()
-    ], Control.prototype, "shadowOffsetX", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "shadowOffsetY", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "shadowBlur", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "shadowColor", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "hoverCursor", void 0);
-    __decorate([
-        serialize()
-    ], Control.prototype, "fontOffset", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "alpha", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "scaleX", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "scaleY", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "rotation", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "transformCenterY", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "transformCenterX", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "horizontalAlignment", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "verticalAlignment", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "fixedRatio", void 0);
-    __decorate([
-        serialize()
-    ], Control.prototype, "width", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "height", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "style", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "color", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "zIndex", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "notRenderable", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "isVisible", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "descendantsOnlyPadding", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "paddingLeft", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "paddingRight", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "paddingTop", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "paddingBottom", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "left", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "top", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "linkOffsetX", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "linkOffsetY", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "isEnabled", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "disabledColor", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "disabledColorItem", null);
-    __decorate([
-        serialize()
-    ], Control.prototype, "overlapGroup", void 0);
-    __decorate([
-        serialize()
-    ], Control.prototype, "overlapDeltaMultiplier", void 0);
-    return Control;
-}());
-export { Control };
-RegisterClass("BABYLON.GUI.Control", Control);
+import { __decorate } from "tslib";
+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";
+import { Measure } from "../measure";
+import { Matrix2D, Vector2WithInfo } from "../math2D";
+import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
+import { SerializationHelper, serialize } from "@babylonjs/core/Misc/decorators.js";
+import { EngineStore } from "@babylonjs/core/Engines/engineStore.js";
+/**
+ * Root class used for all 2D controls
+ * @see https://doc.babylonjs.com/how_to/gui#controls
+ */
+var Control = /** @class */ (function () {
+    // Functions
+    /**
+     * Creates a new control
+     * @param name defines the name of the control
+     */
+    function Control(
+    /** defines the name of the control */
+    name) {
+        this.name = name;
+        this._alpha = 1;
+        this._alphaSet = false;
+        this._zIndex = 0;
+        /** @hidden */
+        this._currentMeasure = Measure.Empty();
+        /** @hidden */
+        this._tempPaddingMeasure = Measure.Empty();
+        this._fontFamily = "Arial";
+        this._fontStyle = "";
+        this._fontWeight = "";
+        this._fontSize = new ValueAndUnit(18, ValueAndUnit.UNITMODE_PIXEL, false);
+        /** @hidden */
+        this._width = new ValueAndUnit(1, ValueAndUnit.UNITMODE_PERCENTAGE, false);
+        /** @hidden */
+        this._height = new ValueAndUnit(1, ValueAndUnit.UNITMODE_PERCENTAGE, false);
+        this._color = "";
+        this._style = null;
+        /** @hidden */
+        this._horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
+        /** @hidden */
+        this._verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
+        /** @hidden */
+        this._isDirty = true;
+        /** @hidden */
+        this._wasDirty = false;
+        /** @hidden */
+        this._tempParentMeasure = Measure.Empty();
+        /** @hidden */
+        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);
+        this._paddingBottom = new ValueAndUnit(0);
+        /** @hidden */
+        this._left = new ValueAndUnit(0);
+        /** @hidden */
+        this._top = new ValueAndUnit(0);
+        this._scaleX = 1.0;
+        this._scaleY = 1.0;
+        this._rotation = 0;
+        this._transformCenterX = 0.5;
+        this._transformCenterY = 0.5;
+        /** @hidden */
+        this._transformMatrix = Matrix2D.Identity();
+        /** @hidden */
+        this._invertTransformMatrix = Matrix2D.Identity();
+        /** @hidden */
+        this._transformedPosition = Vector2.Zero();
+        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 */
+        this._customData = {};
+        /** @hidden */
+        this._isClipped = false;
+        /** @hidden */
+        this._automaticSize = false;
+        /**
+         * Gets or sets an object used to store user defined information for the node
+         */
+        this.metadata = null;
+        /** Gets or sets a boolean indicating if the control can be hit with pointer events */
+        this.isHitTestVisible = true;
+        /** Gets or sets a boolean indicating if the control can block pointer events */
+        this.isPointerBlocker = false;
+        /** Gets or sets a boolean indicating if the control can be focusable */
+        this.isFocusInvisible = false;
+        /**
+         * Gets or sets a boolean indicating if the children are clipped to the current control bounds.
+         * Please note that not clipping children may generate issues with adt.useInvalidateRectOptimization so it is recommended to turn this optimization off if you want to use unclipped children
+         */
+        this.clipChildren = true;
+        /**
+         * Gets or sets a boolean indicating that control content must be clipped
+         * Please note that not clipping children may generate issues with adt.useInvalidateRectOptimization so it is recommended to turn this optimization off if you want to use unclipped children
+         */
+        this.clipContent = true;
+        /**
+         * Gets or sets a boolean indicating that the current control should cache its rendering (useful when the control does not change often)
+         */
+        this.useBitmapCache = false;
+        this._shadowOffsetX = 0;
+        this._shadowOffsetY = 0;
+        this._shadowBlur = 0;
+        this._previousShadowBlur = 0;
+        this._shadowColor = "black";
+        /** Gets or sets the cursor to use when the control is hovered */
+        this.hoverCursor = "";
+        /** @hidden */
+        this._linkOffsetX = new ValueAndUnit(0);
+        /** @hidden */
+        this._linkOffsetY = new ValueAndUnit(0);
+        /**
+         * An event triggered when pointer wheel is scrolled
+         */
+        this.onWheelObservable = new Observable();
+        /**
+         * An event triggered when the pointer moves over the control.
+         */
+        this.onPointerMoveObservable = new Observable();
+        /**
+         * An event triggered when the pointer moves out of the control.
+         */
+        this.onPointerOutObservable = new Observable();
+        /**
+         * An event triggered when the pointer taps the control
+         */
+        this.onPointerDownObservable = new Observable();
+        /**
+         * An event triggered when pointer up
+         */
+        this.onPointerUpObservable = new Observable();
+        /**
+         * An event triggered when a control is clicked on
+         */
+        this.onPointerClickObservable = new Observable();
+        /**
+         * An event triggered when pointer enters the control
+         */
+        this.onPointerEnterObservable = new Observable();
+        /**
+         * An event triggered when the control is marked as dirty
+         */
+        this.onDirtyObservable = new Observable();
+        /**
+         * An event triggered before drawing the control
+         */
+        this.onBeforeDrawObservable = new Observable();
+        /**
+         * An event triggered after the control was drawn
+         */
+        this.onAfterDrawObservable = new Observable();
+        /**
+         * An event triggered when the control has been disposed
+         */
+        this.onDisposeObservable = new Observable();
+        /**
+         * Gets or sets a fixed ratio for this control.
+         * When different from 0, the ratio is used to compute the "second" dimension.
+         * The first dimension used in the computation is the last one set (by setting width / widthInPixels or height / heightInPixels), and the
+         * second dimension is computed as first dimension * fixedRatio
+         */
+        this.fixedRatio = 0;
+        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 () {
+            return this._shadowOffsetX;
+        },
+        set: function (value) {
+            if (this._shadowOffsetX === value) {
+                return;
+            }
+            this._shadowOffsetX = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "shadowOffsetY", {
+        /** Gets or sets a value indicating the offset to apply on Y axis to render the shadow */
+        get: function () {
+            return this._shadowOffsetY;
+        },
+        set: function (value) {
+            if (this._shadowOffsetY === value) {
+                return;
+            }
+            this._shadowOffsetY = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "shadowBlur", {
+        /** Gets or sets a value indicating the amount of blur to use to render the shadow */
+        get: function () {
+            return this._shadowBlur;
+        },
+        set: function (value) {
+            if (this._shadowBlur === value) {
+                return;
+            }
+            this._previousShadowBlur = this._shadowBlur;
+            this._shadowBlur = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "shadowColor", {
+        /** Gets or sets a value indicating the color of the shadow (black by default ie. "#000") */
+        get: function () {
+            return this._shadowColor;
+        },
+        set: function (value) {
+            if (this._shadowColor === value) {
+                return;
+            }
+            this._shadowColor = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "typeName", {
+        // Properties
+        /** Gets the control type name */
+        get: function () {
+            return this._getTypeName();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Get the current class name of the control.
+     * @returns current class name
+     */
+    Control.prototype.getClassName = function () {
+        return this._getTypeName();
+    };
+    Object.defineProperty(Control.prototype, "host", {
+        /**
+         * Get the hosting AdvancedDynamicTexture
+         */
+        get: function () {
+            return this._host;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "fontOffset", {
+        /** Gets or set information about font offsets (used to render and align text) */
+        get: function () {
+            return this._fontOffset;
+        },
+        set: function (offset) {
+            this._fontOffset = offset;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "alpha", {
+        /** Gets or sets alpha value for the control (1 means opaque and 0 means entirely transparent) */
+        get: function () {
+            return this._alpha;
+        },
+        set: function (value) {
+            if (this._alpha === value) {
+                return;
+            }
+            this._alphaSet = true;
+            this._alpha = value;
+            this._markAsDirty();
+        },
+        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)
+         */
+        get: function () {
+            return this._isHighlighted;
+        },
+        set: function (value) {
+            if (this._isHighlighted === value) {
+                return;
+            }
+            this._isHighlighted = value;
+            this._markAsDirty();
+        },
+        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;
+        },
+        set: function (value) {
+            if (this._scaleX === value) {
+                return;
+            }
+            this._scaleX = value;
+            this._markAsDirty();
+            this._markMatrixAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    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;
+        },
+        set: function (value) {
+            if (this._scaleY === value) {
+                return;
+            }
+            this._scaleY = value;
+            this._markAsDirty();
+            this._markMatrixAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    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;
+        },
+        set: function (value) {
+            if (this._rotation === value) {
+                return;
+            }
+            this._rotation = value;
+            this._markAsDirty();
+            this._markMatrixAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    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;
+        },
+        set: function (value) {
+            if (this._transformCenterY === value) {
+                return;
+            }
+            this._transformCenterY = value;
+            this._markAsDirty();
+            this._markMatrixAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    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;
+        },
+        set: function (value) {
+            if (this._transformCenterX === value) {
+                return;
+            }
+            this._transformCenterX = value;
+            this._markAsDirty();
+            this._markMatrixAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "horizontalAlignment", {
+        /**
+         * Gets or sets the horizontal alignment
+         * @see https://doc.babylonjs.com/how_to/gui#alignments
+         */
+        get: function () {
+            return this._horizontalAlignment;
+        },
+        set: function (value) {
+            if (this._horizontalAlignment === value) {
+                return;
+            }
+            this._horizontalAlignment = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "verticalAlignment", {
+        /**
+         * Gets or sets the vertical alignment
+         * @see https://doc.babylonjs.com/how_to/gui#alignments
+         */
+        get: function () {
+            return this._verticalAlignment;
+        },
+        set: function (value) {
+            if (this._verticalAlignment === value) {
+                return;
+            }
+            this._verticalAlignment = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "width", {
+        /**
+         * Gets or sets control width
+         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+         */
+        get: function () {
+            return this._width.toString(this._host);
+        },
+        set: function (value) {
+            this._fixedRatioMasterIsWidth = true;
+            if (this._width.toString(this._host) === value) {
+                return;
+            }
+            if (this._width.fromString(value)) {
+                this._markAsDirty();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "widthInPixels", {
+        /**
+         * Gets or sets the control width in pixel
+         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+         */
+        get: function () {
+            return this._width.getValueInPixel(this._host, this._cachedParentMeasure.width);
+        },
+        set: function (value) {
+            if (isNaN(value)) {
+                return;
+            }
+            this._fixedRatioMasterIsWidth = true;
+            this.width = value + "px";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "height", {
+        /**
+         * Gets or sets control height
+         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+         */
+        get: function () {
+            return this._height.toString(this._host);
+        },
+        set: function (value) {
+            this._fixedRatioMasterIsWidth = false;
+            if (this._height.toString(this._host) === value) {
+                return;
+            }
+            if (this._height.fromString(value)) {
+                this._markAsDirty();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "heightInPixels", {
+        /**
+         * Gets or sets control height in pixel
+         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+         */
+        get: function () {
+            return this._height.getValueInPixel(this._host, this._cachedParentMeasure.height);
+        },
+        set: function (value) {
+            if (isNaN(value)) {
+                return;
+            }
+            this._fixedRatioMasterIsWidth = false;
+            this.height = value + "px";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "fontFamily", {
+        /** Gets or set font family */
+        get: function () {
+            return this._fontFamily;
+        },
+        set: function (value) {
+            if (this._fontFamily === value) {
+                return;
+            }
+            this._fontFamily = value;
+            this._resetFontCache();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "fontStyle", {
+        /** Gets or sets font style */
+        get: function () {
+            return this._fontStyle;
+        },
+        set: function (value) {
+            if (this._fontStyle === value) {
+                return;
+            }
+            this._fontStyle = value;
+            this._resetFontCache();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "fontWeight", {
+        /** Gets or sets font weight */
+        get: function () {
+            return this._fontWeight;
+        },
+        set: function (value) {
+            if (this._fontWeight === value) {
+                return;
+            }
+            this._fontWeight = value;
+            this._resetFontCache();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "style", {
+        /**
+         * Gets or sets style
+         * @see https://doc.babylonjs.com/how_to/gui#styles
+         */
+        get: function () {
+            return this._style;
+        },
+        set: function (value) {
+            var _this = this;
+            if (this._style) {
+                this._style.onChangedObservable.remove(this._styleObserver);
+                this._styleObserver = null;
+            }
+            this._style = value;
+            if (this._style) {
+                this._styleObserver = this._style.onChangedObservable.add(function () {
+                    _this._markAsDirty();
+                    _this._resetFontCache();
+                });
+            }
+            this._markAsDirty();
+            this._resetFontCache();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "_isFontSizeInPercentage", {
+        /** @hidden */
+        get: function () {
+            return this._fontSize.isPercentage;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "fontSizeInPixels", {
+        /** Gets or sets font size in pixels */
+        get: function () {
+            var fontSizeToUse = this._style ? this._style._fontSize : this._fontSize;
+            if (fontSizeToUse.isPixel) {
+                return fontSizeToUse.getValue(this._host);
+            }
+            return fontSizeToUse.getValueInPixel(this._host, this._tempParentMeasure.height || this._cachedParentMeasure.height);
+        },
+        set: function (value) {
+            if (isNaN(value)) {
+                return;
+            }
+            this.fontSize = value + "px";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "fontSize", {
+        /** Gets or sets font size */
+        get: function () {
+            return this._fontSize.toString(this._host);
+        },
+        set: function (value) {
+            if (this._fontSize.toString(this._host) === value) {
+                return;
+            }
+            if (this._fontSize.fromString(value)) {
+                this._markAsDirty();
+                this._resetFontCache();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "color", {
+        /** Gets or sets foreground color */
+        get: function () {
+            return this._color;
+        },
+        set: function (value) {
+            if (this._color === value) {
+                return;
+            }
+            this._color = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "zIndex", {
+        /** Gets or sets z index which is used to reorder controls on the z axis */
+        get: function () {
+            return this._zIndex;
+        },
+        set: function (value) {
+            if (this.zIndex === value) {
+                return;
+            }
+            this._zIndex = value;
+            if (this.parent) {
+                this.parent._reOrderControl(this);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "notRenderable", {
+        /** Gets or sets a boolean indicating if the control can be rendered */
+        get: function () {
+            return this._doNotRender;
+        },
+        set: function (value) {
+            if (this._doNotRender === value) {
+                return;
+            }
+            this._doNotRender = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "isVisible", {
+        /** Gets or sets a boolean indicating if the control is visible */
+        get: function () {
+            return this._isVisible;
+        },
+        set: function (value) {
+            if (this._isVisible === value) {
+                return;
+            }
+            this._isVisible = value;
+            this._markAsDirty(true);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "isDirty", {
+        /** Gets a boolean indicating that the control needs to update its rendering */
+        get: function () {
+            return this._isDirty;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "linkedMesh", {
+        /**
+         * Gets the current linked mesh (or null if none)
+         */
+        get: function () {
+            return this._linkedMesh;
+        },
+        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
+         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+         */
+        get: function () {
+            return this._paddingLeft.toString(this._host);
+        },
+        set: function (value) {
+            if (this._paddingLeft.fromString(value)) {
+                this._markAsDirty();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "paddingLeftInPixels", {
+        /**
+         * Gets or sets a value indicating the padding in pixels to use on the left of the control
+         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+         */
+        get: function () {
+            return this._paddingLeft.getValueInPixel(this._host, this._cachedParentMeasure.width);
+        },
+        set: function (value) {
+            if (isNaN(value)) {
+                return;
+            }
+            this.paddingLeft = value + "px";
+        },
+        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
+         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+         */
+        get: function () {
+            return this._paddingRight.toString(this._host);
+        },
+        set: function (value) {
+            if (this._paddingRight.fromString(value)) {
+                this._markAsDirty();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "paddingRightInPixels", {
+        /**
+         * Gets or sets a value indicating the padding in pixels to use on the right of the control
+         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+         */
+        get: function () {
+            return this._paddingRight.getValueInPixel(this._host, this._cachedParentMeasure.width);
+        },
+        set: function (value) {
+            if (isNaN(value)) {
+                return;
+            }
+            this.paddingRight = value + "px";
+        },
+        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
+         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+         */
+        get: function () {
+            return this._paddingTop.toString(this._host);
+        },
+        set: function (value) {
+            if (this._paddingTop.fromString(value)) {
+                this._markAsDirty();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "paddingTopInPixels", {
+        /**
+         * Gets or sets a value indicating the padding in pixels to use on the top of the control
+         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+         */
+        get: function () {
+            return this._paddingTop.getValueInPixel(this._host, this._cachedParentMeasure.height);
+        },
+        set: function (value) {
+            if (isNaN(value)) {
+                return;
+            }
+            this.paddingTop = value + "px";
+        },
+        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
+         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+         */
+        get: function () {
+            return this._paddingBottom.toString(this._host);
+        },
+        set: function (value) {
+            if (this._paddingBottom.fromString(value)) {
+                this._markAsDirty();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "paddingBottomInPixels", {
+        /**
+         * Gets or sets a value indicating the padding in pixels to use on the bottom of the control
+         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+         */
+        get: function () {
+            return this._paddingBottom.getValueInPixel(this._host, this._cachedParentMeasure.height);
+        },
+        set: function (value) {
+            if (isNaN(value)) {
+                return;
+            }
+            this.paddingBottom = value + "px";
+        },
+        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
+         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+         */
+        get: function () {
+            return this._left.toString(this._host);
+        },
+        set: function (value) {
+            if (this._left.fromString(value)) {
+                this._markAsDirty();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "leftInPixels", {
+        /**
+         * Gets or sets a value indicating the left coordinate in pixels of the control
+         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+         */
+        get: function () {
+            return this._left.getValueInPixel(this._host, this._cachedParentMeasure.width);
+        },
+        set: function (value) {
+            if (isNaN(value)) {
+                return;
+            }
+            this.left = value + "px";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "top", {
+        /**
+         * Gets or sets a value indicating the top coordinate of the control
+         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+         */
+        get: function () {
+            return this._top.toString(this._host);
+        },
+        set: function (value) {
+            if (this._top.fromString(value)) {
+                this._markAsDirty();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "topInPixels", {
+        /**
+         * Gets or sets a value indicating the top coordinate in pixels of the control
+         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+         */
+        get: function () {
+            return this._top.getValueInPixel(this._host, this._cachedParentMeasure.height);
+        },
+        set: function (value) {
+            if (isNaN(value)) {
+                return;
+            }
+            this.top = value + "px";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "linkOffsetX", {
+        /**
+         * Gets or sets a value indicating the offset on X axis to the linked mesh
+         * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
+         */
+        get: function () {
+            return this._linkOffsetX.toString(this._host);
+        },
+        set: function (value) {
+            if (this._linkOffsetX.fromString(value)) {
+                this._markAsDirty();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "linkOffsetXInPixels", {
+        /**
+         * Gets or sets a value indicating the offset in pixels on X axis to the linked mesh
+         * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
+         */
+        get: function () {
+            return this._linkOffsetX.getValueInPixel(this._host, this._cachedParentMeasure.width);
+        },
+        set: function (value) {
+            if (isNaN(value)) {
+                return;
+            }
+            this.linkOffsetX = value + "px";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "linkOffsetY", {
+        /**
+         * Gets or sets a value indicating the offset on Y axis to the linked mesh
+         * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
+         */
+        get: function () {
+            return this._linkOffsetY.toString(this._host);
+        },
+        set: function (value) {
+            if (this._linkOffsetY.fromString(value)) {
+                this._markAsDirty();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "linkOffsetYInPixels", {
+        /**
+         * Gets or sets a value indicating the offset in pixels on Y axis to the linked mesh
+         * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
+         */
+        get: function () {
+            return this._linkOffsetY.getValueInPixel(this._host, this._cachedParentMeasure.height);
+        },
+        set: function (value) {
+            if (isNaN(value)) {
+                return;
+            }
+            this.linkOffsetY = value + "px";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "centerX", {
+        /** Gets the center coordinate on X axis */
+        get: function () {
+            return this._currentMeasure.left + this._currentMeasure.width / 2;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "centerY", {
+        /** Gets the center coordinate on Y axis */
+        get: function () {
+            return this._currentMeasure.top + this._currentMeasure.height / 2;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "isEnabled", {
+        /** Gets or sets if control is Enabled */
+        get: function () {
+            return this._isEnabled;
+        },
+        set: function (value) {
+            var _this = this;
+            if (this._isEnabled === value) {
+                return;
+            }
+            this._isEnabled = value;
+            this._markAsDirty();
+            // if this control or any of it's descendants are under a pointer, we need to fire a pointerOut event
+            var recursivelyFirePointerOut = function (control) {
+                if (!control.host) {
+                    return;
+                }
+                for (var pointer in control.host._lastControlOver) {
+                    if (control === _this.host._lastControlOver[pointer]) {
+                        control._onPointerOut(control, null, true);
+                        delete control.host._lastControlOver[pointer];
+                    }
+                }
+                if (control.children !== undefined) {
+                    control.children.forEach(recursivelyFirePointerOut);
+                }
+            };
+            recursivelyFirePointerOut(this);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "disabledColor", {
+        /** Gets or sets background color of control if it's disabled. Only applies to Button class. */
+        get: function () {
+            return this._disabledColor;
+        },
+        set: function (value) {
+            if (this._disabledColor === value) {
+                return;
+            }
+            this._disabledColor = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control.prototype, "disabledColorItem", {
+        /** Gets or sets front color of control if it's disabled. Only applies to Checkbox class. */
+        get: function () {
+            return this._disabledColorItem;
+        },
+        set: function (value) {
+            if (this._disabledColorItem === value) {
+                return;
+            }
+            this._disabledColorItem = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /** @hidden */
+    Control.prototype._getTypeName = function () {
+        return "Control";
+    };
+    /**
+     * Gets the first ascendant in the hierarchy of the given type
+     * @param className defines the required type
+     * @returns the ascendant or null if not found
+     */
+    Control.prototype.getAscendantOfClass = function (className) {
+        if (!this.parent) {
+            return null;
+        }
+        if (this.parent.getClassName() === className) {
+            return this.parent;
+        }
+        return this.parent.getAscendantOfClass(className);
+    };
+    /**
+     * Mark control element as dirty
+     * @param force force non visible elements to be marked too
+     */
+    Control.prototype.markAsDirty = function (force) {
+        if (force === void 0) { force = false; }
+        this._markAsDirty(force);
+    };
+    /**
+     * Mark the element and its children as dirty
+     */
+    Control.prototype.markAllAsDirty = function () {
+        this._markAllAsDirty();
+    };
+    /** @hidden */
+    Control.prototype._resetFontCache = function () {
+        this._fontSet = true;
+        this._markAsDirty();
+    };
+    /**
+     * Determines if a container is an ascendant of the current control
+     * @param container defines the container to look for
+     * @returns true if the container is one of the ascendant of the control
+     */
+    Control.prototype.isAscendant = function (container) {
+        if (!this.parent) {
+            return false;
+        }
+        if (this.parent === container) {
+            return true;
+        }
+        return this.parent.isAscendant(container);
+    };
+    /**
+     * Gets coordinates in local control space
+     * @param globalCoordinates defines the coordinates to transform
+     * @returns the new coordinates in local space
+     */
+    Control.prototype.getLocalCoordinates = function (globalCoordinates) {
+        var result = Vector2.Zero();
+        this.getLocalCoordinatesToRef(globalCoordinates, result);
+        return result;
+    };
+    /**
+     * Gets coordinates in local control space
+     * @param globalCoordinates defines the coordinates to transform
+     * @param result defines the target vector2 where to store the result
+     * @returns the current control
+     */
+    Control.prototype.getLocalCoordinatesToRef = function (globalCoordinates, result) {
+        result.x = globalCoordinates.x - this._currentMeasure.left;
+        result.y = globalCoordinates.y - this._currentMeasure.top;
+        return this;
+    };
+    /**
+     * Gets coordinates in parent local control space
+     * @param globalCoordinates defines the coordinates to transform
+     * @returns the new coordinates in parent local space
+     */
+    Control.prototype.getParentLocalCoordinates = function (globalCoordinates) {
+        var result = Vector2.Zero();
+        result.x = globalCoordinates.x - this._cachedParentMeasure.left;
+        result.y = globalCoordinates.y - this._cachedParentMeasure.top;
+        return result;
+    };
+    /**
+     * Move the current control to a vector3 position projected onto the screen.
+     * @param position defines the target position
+     * @param scene defines the hosting scene
+     */
+    Control.prototype.moveToVector3 = function (position, scene) {
+        if (!this._host || this.parent !== this._host._rootContainer) {
+            Tools.Error("Cannot move a control to a vector3 if the control is not at root level");
+            return;
+        }
+        this.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        this.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
+        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) {
+            this.notRenderable = true;
+            return;
+        }
+        this.notRenderable = false;
+    };
+    /**
+     * Will store all controls that have this control as ascendant in a given array
+     * @param results defines the array where to store the descendants
+     * @param directDescendantsOnly defines if true only direct descendants of 'this' will be considered, if false direct and also indirect (children of children, an so on in a recursive manner) descendants of 'this' will be considered
+     * @param predicate defines an optional predicate that will be called on every evaluated child, the predicate must return true for a given child to be part of the result, otherwise it will be ignored
+     */
+    Control.prototype.getDescendantsToRef = function (results, directDescendantsOnly, predicate) {
+        if (directDescendantsOnly === void 0) { directDescendantsOnly = false; }
+        // Do nothing by default
+    };
+    /**
+     * Will return all controls that have this control as ascendant
+     * @param directDescendantsOnly defines if true only direct descendants of 'this' will be considered, if false direct and also indirect (children of children, an so on in a recursive manner) descendants of 'this' will be considered
+     * @param predicate defines an optional predicate that will be called on every evaluated child, the predicate must return true for a given child to be part of the result, otherwise it will be ignored
+     * @return all child controls
+     */
+    Control.prototype.getDescendants = function (directDescendantsOnly, predicate) {
+        var results = new Array();
+        this.getDescendantsToRef(results, directDescendantsOnly, predicate);
+        return results;
+    };
+    /**
+     * Link current control with a target mesh
+     * @param mesh defines the mesh to link with
+     * @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 (mesh) {
+                Tools.Error("Cannot link a control to a mesh if the control is not at root level");
+            }
+            return;
+        }
+        var index = this._host._linkedControls.indexOf(this);
+        if (index !== -1) {
+            this._linkedMesh = mesh;
+            if (!mesh) {
+                this._host._linkedControls.splice(index, 1);
+            }
+            return;
+        }
+        else if (!mesh) {
+            return;
+        }
+        this.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        this.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
+        this._linkedMesh = mesh;
+        this._host._linkedControls.push(this);
+    };
+    /**
+     * Shorthand function 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;
+        var bottom = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : top;
+        var left = paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : right;
+        this.paddingTop = top;
+        this.paddingRight = right;
+        this.paddingBottom = bottom;
+        this.paddingLeft = left;
+    };
+    /**
+     * Shorthand funtion to set the top, right, bottom, and left padding values in pixels on the control.
+     * @param { number} paddingTop - The value in pixels of the top padding.
+     * @param { number} paddingRight - The value in pixels of the right padding. If omitted, top is used.
+     * @param { number} paddingBottom - The value in pixels of the bottom padding. If omitted, top is used.
+     * @param { number} paddingLeft - The value in pixels of the left padding. If omitted, right is used.
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+     */
+    Control.prototype.setPaddingInPixels = function (paddingTop, paddingRight, paddingBottom, paddingLeft) {
+        var top = paddingTop;
+        var right = paddingRight !== null && paddingRight !== void 0 ? paddingRight : top;
+        var bottom = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : top;
+        var left = paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : right;
+        this.paddingTopInPixels = top;
+        this.paddingRightInPixels = right;
+        this.paddingBottomInPixels = bottom;
+        this.paddingLeftInPixels = left;
+    };
+    /**
+     * @param projectedPosition
+     * @hidden
+     */
+    Control.prototype._moveToProjectedPosition = function (projectedPosition) {
+        var _a;
+        var oldLeft = this._left.getValue(this._host);
+        var oldTop = this._top.getValue(this._host);
+        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;
+            }
+            if (Math.abs(newTop - oldTop) < 0.5) {
+                newTop = oldTop;
+            }
+        }
+        this.left = newLeft + "px";
+        this.top = newTop + "px";
+        this._left.ignoreAdaptiveScaling = true;
+        this._top.ignoreAdaptiveScaling = true;
+        this._markAsDirty();
+    };
+    /**
+     * @param offset
+     * @hidden
+     */
+    Control.prototype._offsetLeft = function (offset) {
+        this._isDirty = true;
+        this._currentMeasure.left += offset;
+    };
+    /**
+     * @param offset
+     * @hidden
+     */
+    Control.prototype._offsetTop = function (offset) {
+        this._isDirty = true;
+        this._currentMeasure.top += offset;
+    };
+    /** @hidden */
+    Control.prototype._markMatrixAsDirty = function () {
+        this._isMatrixDirty = true;
+        this._flagDescendantsAsMatrixDirty();
+    };
+    /** @hidden */
+    Control.prototype._flagDescendantsAsMatrixDirty = function () {
+        // No child
+    };
+    /**
+     * @param rect
+     * @param context
+     * @hidden
+     */
+    Control.prototype._intersectsRect = function (rect, context) {
+        // make sure we are transformed correctly before checking intersections. no-op if nothing is dirty.
+        this._transform(context);
+        if (this._evaluatedMeasure.left >= rect.left + rect.width) {
+            return false;
+        }
+        if (this._evaluatedMeasure.top >= rect.top + rect.height) {
+            return false;
+        }
+        if (this._evaluatedMeasure.left + this._evaluatedMeasure.width <= rect.left) {
+            return false;
+        }
+        if (this._evaluatedMeasure.top + this._evaluatedMeasure.height <= rect.top) {
+            return false;
+        }
+        return true;
+    };
+    /** @hidden */
+    Control.prototype._computeAdditionnalOffsetX = function () {
+        return 0;
+    };
+    /** @hidden */
+    Control.prototype._computeAdditionnalOffsetY = function () {
+        return 0;
+    };
+    /** @hidden */
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    Control.prototype.invalidateRect = function () {
+        this._transform();
+        if (this.host && this.host.useInvalidateRectOptimization) {
+            // Rotate by transform to get the measure transformed to global space
+            this._currentMeasure.transformToRef(this._transformMatrix, this._tmpMeasureA);
+            // 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);
+            // 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));
+        }
+    };
+    /**
+     * @param force
+     * @hidden
+     */
+    Control.prototype._markAsDirty = function (force) {
+        if (force === void 0) { force = false; }
+        if (!this._isVisible && !force) {
+            return;
+        }
+        this._isDirty = true;
+        this._markMatrixAsDirty();
+        // Redraw only this rectangle
+        if (this._host) {
+            this._host.markAsDirty();
+        }
+    };
+    /** @hidden */
+    Control.prototype._markAllAsDirty = function () {
+        this._markAsDirty();
+        if (this._font) {
+            this._prepareFont();
+        }
+    };
+    /**
+     * @param host
+     * @hidden
+     */
+    Control.prototype._link = function (host) {
+        this._host = host;
+        if (this._host) {
+            this.uniqueId = this._host.getScene().getUniqueId();
+        }
+    };
+    /**
+     * @param context
+     * @hidden
+     */
+    Control.prototype._transform = function (context) {
+        if (!this._isMatrixDirty && this._scaleX === 1 && this._scaleY === 1 && this._rotation === 0) {
+            return;
+        }
+        // postTranslate
+        var offsetX = this._currentMeasure.width * this._transformCenterX + this._currentMeasure.left;
+        var offsetY = this._currentMeasure.height * this._transformCenterY + this._currentMeasure.top;
+        if (context) {
+            context.translate(offsetX, offsetY);
+            // rotate
+            context.rotate(this._rotation);
+            // scale
+            context.scale(this._scaleX, this._scaleY);
+            // preTranslate
+            context.translate(-offsetX, -offsetY);
+        }
+        // Need to update matrices?
+        if (this._isMatrixDirty || this._cachedOffsetX !== offsetX || this._cachedOffsetY !== offsetY) {
+            this._cachedOffsetX = offsetX;
+            this._cachedOffsetY = offsetY;
+            this._isMatrixDirty = false;
+            this._flagDescendantsAsMatrixDirty();
+            Matrix2D.ComposeToRef(-offsetX, -offsetY, this._rotation, this._scaleX, this._scaleY, this.parent ? this.parent._transformMatrix : null, this._transformMatrix);
+            this._transformMatrix.invertToRef(this._invertTransformMatrix);
+            this._currentMeasure.transformToRef(this._transformMatrix, this._evaluatedMeasure);
+        }
+    };
+    /**
+     * @param context
+     * @hidden
+     */
+    Control.prototype._renderHighlight = function (context) {
+        if (!this.isHighlighted) {
+            return;
+        }
+        context.save();
+        context.strokeStyle = this._highlightColor;
+        context.lineWidth = this._highlightLineWidth;
+        this._renderHighlightSpecific(context);
+        context.restore();
+    };
+    /**
+     * @param context
+     * @hidden
+     */
+    Control.prototype._renderHighlightSpecific = function (context) {
+        context.strokeRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+    };
+    /**
+     * @param context
+     * @hidden
+     */
+    Control.prototype._applyStates = function (context) {
+        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;
+        }
+        if (this._font) {
+            context.font = this._font;
+        }
+        if (this._color) {
+            context.fillStyle = this._color;
+        }
+        if (Control.AllowAlphaInheritance) {
+            context.globalAlpha *= this._alpha;
+        }
+        else if (this._alphaSet) {
+            context.globalAlpha = this.parent && !this.parent.renderToIntermediateTexture ? this.parent.alpha * this._alpha : this._alpha;
+        }
+    };
+    /**
+     * @param parentMeasure
+     * @param context
+     * @hidden
+     */
+    Control.prototype._layout = function (parentMeasure, context) {
+        if (!this.isDirty && (!this.isVisible || this.notRenderable)) {
+            return false;
+        }
+        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);
+            context.save();
+            this._applyStates(context);
+            var rebuildCount = 0;
+            do {
+                this._rebuildLayout = false;
+                this._processMeasures(parentMeasure, context);
+                rebuildCount++;
+            } while (this._rebuildLayout && rebuildCount < 3);
+            if (rebuildCount >= 3) {
+                Logger.Error("Layout cycle detected in GUI (Control name=".concat(this.name, ", uniqueId=").concat(this.uniqueId, ")"));
+            }
+            context.restore();
+            this.invalidateRect();
+            this._evaluateClippingState(parentMeasure);
+        }
+        this._wasDirty = this._isDirty;
+        this._isDirty = false;
+        return true;
+    };
+    /**
+     * @param parentMeasure
+     * @param context
+     * @hidden
+     */
+    Control.prototype._processMeasures = function (parentMeasure, context) {
+        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(this._tempPaddingMeasure, context);
+        this._measure();
+        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(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._evaluatedMeasure.left > this._evaluatedParentMeasure.left + this._evaluatedParentMeasure.width) {
+                this._isClipped = true;
+                return;
+            }
+            if (this._evaluatedMeasure.left + this._evaluatedMeasure.width < this._evaluatedParentMeasure.left) {
+                this._isClipped = true;
+                return;
+            }
+            if (this._evaluatedMeasure.top > this._evaluatedParentMeasure.top + this._evaluatedParentMeasure.height) {
+                this._isClipped = true;
+                return;
+            }
+            if (this._evaluatedMeasure.top + this._evaluatedMeasure.height < this._evaluatedParentMeasure.top) {
+                this._isClipped = true;
+                return;
+            }
+        }
+        this._isClipped = false;
+    };
+    /** @hidden */
+    Control.prototype._measure = function () {
+        // Width / Height
+        if (this._width.isPixel) {
+            this._currentMeasure.width = this._width.getValue(this._host);
+        }
+        else {
+            this._currentMeasure.width *= this._width.getValue(this._host);
+        }
+        if (this._height.isPixel) {
+            this._currentMeasure.height = this._height.getValue(this._host);
+        }
+        else {
+            this._currentMeasure.height *= this._height.getValue(this._host);
+        }
+        if (this.fixedRatio !== 0) {
+            if (this._fixedRatioMasterIsWidth) {
+                this._currentMeasure.height = this._currentMeasure.width * this.fixedRatio;
+            }
+            else {
+                this._currentMeasure.width = this._currentMeasure.height * this.fixedRatio;
+            }
+        }
+    };
+    /**
+     * @param parentMeasure
+     * @param context
+     * @hidden
+     */
+    Control.prototype._computeAlignment = function (parentMeasure, context) {
+        var width = this._currentMeasure.width;
+        var height = this._currentMeasure.height;
+        var parentWidth = parentMeasure.width;
+        var parentHeight = parentMeasure.height;
+        // Left / top
+        var x = 0;
+        var y = 0;
+        switch (this.horizontalAlignment) {
+            case Control.HORIZONTAL_ALIGNMENT_LEFT:
+                x = 0;
+                break;
+            case Control.HORIZONTAL_ALIGNMENT_RIGHT:
+                x = parentWidth - width;
+                break;
+            case Control.HORIZONTAL_ALIGNMENT_CENTER:
+                x = (parentWidth - width) / 2;
+                break;
+        }
+        switch (this.verticalAlignment) {
+            case Control.VERTICAL_ALIGNMENT_TOP:
+                y = 0;
+                break;
+            case Control.VERTICAL_ALIGNMENT_BOTTOM:
+                y = parentHeight - height;
+                break;
+            case Control.VERTICAL_ALIGNMENT_CENTER:
+                y = (parentHeight - height) / 2;
+                break;
+        }
+        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);
+        }
+        else {
+            this._currentMeasure.left += parentWidth * this._left.getValue(this._host);
+        }
+        if (this._top.isPixel) {
+            this._currentMeasure.top += this._top.getValue(this._host);
+        }
+        else {
+            this._currentMeasure.top += parentHeight * this._top.getValue(this._host);
+        }
+        this._currentMeasure.left += x;
+        this._currentMeasure.top += y;
+    };
+    /**
+     * @param parentMeasure
+     * @param context
+     * @hidden
+     */
+    Control.prototype._preMeasure = function (parentMeasure, context) {
+        // Do nothing
+    };
+    /**
+     * @param parentMeasure
+     * @param context
+     * @hidden
+     */
+    Control.prototype._additionalProcessing = function (parentMeasure, context) {
+        // Do nothing
+    };
+    /**
+     * @param context
+     * @hidden
+     */
+    Control.prototype._clipForChildren = function (context) {
+        // DO nothing
+    };
+    Control.prototype._clip = function (context, invalidatedRectangle) {
+        context.beginPath();
+        Control._ClipMeasure.copyFrom(this._currentMeasure);
+        if (invalidatedRectangle) {
+            // Rotate the invalidated rect into the control's space
+            invalidatedRectangle.transformToRef(this._invertTransformMatrix, this._tmpMeasureA);
+            // Get the intersection of the rect in context space and the current context
+            var intersection = new Measure(0, 0, 0, 0);
+            intersection.left = Math.max(this._tmpMeasureA.left, this._currentMeasure.left);
+            intersection.top = Math.max(this._tmpMeasureA.top, this._currentMeasure.top);
+            intersection.width = Math.min(this._tmpMeasureA.left + this._tmpMeasureA.width, this._currentMeasure.left + this._currentMeasure.width) - intersection.left;
+            intersection.height = Math.min(this._tmpMeasureA.top + this._tmpMeasureA.height, this._currentMeasure.top + this._currentMeasure.height) - intersection.top;
+            Control._ClipMeasure.copyFrom(intersection);
+        }
+        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
+            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);
+            context.rect(Control._ClipMeasure.left + leftShadowOffset, Control._ClipMeasure.top + topShadowOffset, Control._ClipMeasure.width + rightShadowOffset - leftShadowOffset, Control._ClipMeasure.height + bottomShadowOffset - topShadowOffset);
+        }
+        else {
+            context.rect(Control._ClipMeasure.left, Control._ClipMeasure.top, Control._ClipMeasure.width, Control._ClipMeasure.height);
+        }
+        context.clip();
+    };
+    /**
+     * @param context
+     * @param invalidatedRectangle
+     * @hidden
+     */
+    Control.prototype._render = function (context, invalidatedRectangle) {
+        if (!this.isVisible || this.notRenderable || this._isClipped) {
+            this._isDirty = false;
+            return false;
+        }
+        this.host._numRenderCalls++;
+        context.save();
+        this._applyStates(context);
+        // Transform
+        this._transform(context);
+        // Clip
+        if (this.clipContent) {
+            this._clip(context, invalidatedRectangle);
+        }
+        if (this.onBeforeDrawObservable.hasObservers()) {
+            this.onBeforeDrawObservable.notifyObservers(this);
+        }
+        if (this.useBitmapCache && !this._wasDirty && this._cacheData) {
+            context.putImageData(this._cacheData, this._currentMeasure.left, this._currentMeasure.top);
+        }
+        else {
+            this._draw(context, invalidatedRectangle);
+        }
+        if (this.useBitmapCache && this._wasDirty) {
+            this._cacheData = context.getImageData(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+        }
+        this._renderHighlight(context);
+        if (this.onAfterDrawObservable.hasObservers()) {
+            this.onAfterDrawObservable.notifyObservers(this);
+        }
+        context.restore();
+        return true;
+    };
+    /**
+     * @param context
+     * @param invalidatedRectangle
+     * @hidden
+     */
+    Control.prototype._draw = function (context, invalidatedRectangle) {
+        // Do nothing
+    };
+    /**
+     * Tests if a given coordinates belong to the current control
+     * @param x defines x coordinate to test
+     * @param y defines y coordinate to test
+     * @returns true if the coordinates are inside the control
+     */
+    Control.prototype.contains = function (x, y) {
+        // Invert transform
+        this._invertTransformMatrix.transformCoordinates(x, y, this._transformedPosition);
+        x = this._transformedPosition.x;
+        y = this._transformedPosition.y;
+        // Check
+        if (x < this._currentMeasure.left) {
+            return false;
+        }
+        if (x > this._currentMeasure.left + this._currentMeasure.width) {
+            return false;
+        }
+        if (y < this._currentMeasure.top) {
+            return false;
+        }
+        if (y > this._currentMeasure.top + this._currentMeasure.height) {
+            return false;
+        }
+        if (this.isPointerBlocker) {
+            this._host._shouldBlockPointer = true;
+        }
+        return true;
+    };
+    /**
+     * @param x
+     * @param y
+     * @param pi
+     * @param type
+     * @param pointerId
+     * @param buttonIndex
+     * @param deltaX
+     * @param deltaY
+     * @hidden
+     */
+    Control.prototype._processPicking = function (x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY) {
+        if (!this._isEnabled) {
+            return false;
+        }
+        if (!this.isHitTestVisible || !this.isVisible || this._doNotRender) {
+            return false;
+        }
+        if (!this.contains(x, y)) {
+            return false;
+        }
+        this._processObservables(type, x, y, pi, pointerId, buttonIndex, deltaX, deltaY);
+        return true;
+    };
+    /**
+     * @param target
+     * @param coordinates
+     * @param pointerId
+     * @param pi
+     * @hidden
+     */
+    Control.prototype._onPointerMove = function (target, coordinates, pointerId, pi) {
+        var canNotify = this.onPointerMoveObservable.notifyObservers(coordinates, -1, target, this, pi);
+        if (canNotify && this.parent != null) {
+            this.parent._onPointerMove(target, coordinates, pointerId, pi);
+        }
+    };
+    /**
+     * @param target
+     * @param pi
+     * @hidden
+     */
+    Control.prototype._onPointerEnter = function (target, pi) {
+        if (!this._isEnabled) {
+            return false;
+        }
+        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
+            this._enterCount = 0;
+        }
+        this._enterCount++;
+        var canNotify = this.onPointerEnterObservable.notifyObservers(this, -1, target, this, pi);
+        if (canNotify && this.parent != null) {
+            this.parent._onPointerEnter(target, pi);
+        }
+        return true;
+    };
+    /**
+     * @param target
+     * @param pi
+     * @param force
+     * @hidden
+     */
+    Control.prototype._onPointerOut = function (target, pi, force) {
+        if (force === void 0) { force = false; }
+        if (!force && (!this._isEnabled || target === this)) {
+            return;
+        }
+        this._enterCount = 0;
+        var canNotify = true;
+        if (!target.isAscendant(this)) {
+            canNotify = this.onPointerOutObservable.notifyObservers(this, -1, target, this, pi);
+        }
+        if (canNotify && this.parent != null) {
+            this.parent._onPointerOut(target, pi, force);
+        }
+    };
+    /**
+     * @param target
+     * @param coordinates
+     * @param pointerId
+     * @param buttonIndex
+     * @param pi
+     * @hidden
+     */
+    Control.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex, pi) {
+        // Prevent pointerout to lose control context.
+        // Event redundancy is checked inside the function.
+        this._onPointerEnter(this, pi);
+        if (this._downCount !== 0) {
+            return false;
+        }
+        this._downCount++;
+        this._downPointerIds[pointerId] = true;
+        var canNotify = this.onPointerDownObservable.notifyObservers(new Vector2WithInfo(coordinates, buttonIndex), -1, target, this, pi);
+        if (canNotify && this.parent != null) {
+            this.parent._onPointerDown(target, coordinates, pointerId, buttonIndex, pi);
+        }
+        return true;
+    };
+    /**
+     * @param target
+     * @param coordinates
+     * @param pointerId
+     * @param buttonIndex
+     * @param notifyClick
+     * @param pi
+     * @hidden
+     */
+    Control.prototype._onPointerUp = function (target, coordinates, pointerId, buttonIndex, notifyClick, pi) {
+        if (!this._isEnabled) {
+            return;
+        }
+        this._downCount = 0;
+        delete this._downPointerIds[pointerId];
+        var canNotifyClick = notifyClick;
+        if (notifyClick && (this._enterCount > 0 || this._enterCount === -1)) {
+            canNotifyClick = this.onPointerClickObservable.notifyObservers(new Vector2WithInfo(coordinates, buttonIndex), -1, target, this, pi);
+        }
+        var canNotify = this.onPointerUpObservable.notifyObservers(new Vector2WithInfo(coordinates, buttonIndex), -1, target, this, pi);
+        if (canNotify && this.parent != null) {
+            this.parent._onPointerUp(target, coordinates, pointerId, buttonIndex, canNotifyClick, pi);
+        }
+    };
+    /**
+     * @param pointerId
+     * @hidden
+     */
+    Control.prototype._forcePointerUp = function (pointerId) {
+        if (pointerId === void 0) { pointerId = null; }
+        if (pointerId !== null) {
+            this._onPointerUp(this, Vector2.Zero(), pointerId, 0, true);
+        }
+        else {
+            for (var key in this._downPointerIds) {
+                this._onPointerUp(this, Vector2.Zero(), +key, 0, true);
+            }
+        }
+    };
+    /**
+     * @param deltaX
+     * @param deltaY
+     * @hidden
+     */
+    Control.prototype._onWheelScroll = function (deltaX, deltaY) {
+        if (!this._isEnabled) {
+            return;
+        }
+        var canNotify = this.onWheelObservable.notifyObservers(new Vector2(deltaX, deltaY));
+        if (canNotify && this.parent != null) {
+            this.parent._onWheelScroll(deltaX, deltaY);
+        }
+    };
+    /** @hidden */
+    Control.prototype._onCanvasBlur = function () { };
+    /**
+     * @param type
+     * @param x
+     * @param y
+     * @param pi
+     * @param pointerId
+     * @param buttonIndex
+     * @param deltaX
+     * @param deltaY
+     * @hidden
+     */
+    Control.prototype._processObservables = function (type, x, y, pi, pointerId, buttonIndex, deltaX, deltaY) {
+        if (!this._isEnabled) {
+            return false;
+        }
+        this._dummyVector2.copyFromFloats(x, y);
+        if (type === PointerEventTypes.POINTERMOVE) {
+            this._onPointerMove(this, this._dummyVector2, pointerId, pi);
+            var previousControlOver = this._host._lastControlOver[pointerId];
+            if (previousControlOver && previousControlOver !== this) {
+                previousControlOver._onPointerOut(this, pi);
+            }
+            if (previousControlOver !== this) {
+                this._onPointerEnter(this, pi);
+            }
+            this._host._lastControlOver[pointerId] = this;
+            return true;
+        }
+        if (type === PointerEventTypes.POINTERDOWN) {
+            this._onPointerDown(this, this._dummyVector2, pointerId, buttonIndex, pi);
+            this._host._registerLastControlDown(this, pointerId);
+            this._host._lastPickedControl = this;
+            return true;
+        }
+        if (type === PointerEventTypes.POINTERUP) {
+            if (this._host._lastControlDown[pointerId]) {
+                this._host._lastControlDown[pointerId]._onPointerUp(this, this._dummyVector2, pointerId, buttonIndex, true, pi);
+            }
+            delete this._host._lastControlDown[pointerId];
+            return true;
+        }
+        if (type === PointerEventTypes.POINTERWHEEL) {
+            if (this._host._lastControlOver[pointerId]) {
+                this._host._lastControlOver[pointerId]._onWheelScroll(deltaX, deltaY);
+                return true;
+            }
+        }
+        return false;
+    };
+    Control.prototype._prepareFont = function () {
+        if (!this._font && !this._fontSet) {
+            return;
+        }
+        if (this._style) {
+            this._font = this._style.fontStyle + " " + this._style.fontWeight + " " + this.fontSizeInPixels + "px " + this._style.fontFamily;
+        }
+        else {
+            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
+     * @param serializationObject defined the JSON serialized object
+     */
+    Control.prototype.serialize = function (serializationObject) {
+        SerializationHelper.Serialize(this, serializationObject);
+        serializationObject.name = this.name;
+        serializationObject.className = this.getClassName();
+        if (this._font) {
+            serializationObject.fontFamily = this._fontFamily;
+            serializationObject.fontSize = this.fontSize;
+            serializationObject.fontWeight = this.fontWeight;
+            serializationObject.fontStyle = this.fontStyle;
+        }
+    };
+    /**
+     * @param serializedObject
+     * @param host
+     * @hidden
+     */
+    Control.prototype._parseFromContent = function (serializedObject, host) {
+        if (serializedObject.fontFamily) {
+            this.fontFamily = serializedObject.fontFamily;
+        }
+        if (serializedObject.fontSize) {
+            this.fontSize = serializedObject.fontSize;
+        }
+        if (serializedObject.fontWeight) {
+            this.fontWeight = serializedObject.fontWeight;
+        }
+        if (serializedObject.fontStyle) {
+            this.fontStyle = serializedObject.fontStyle;
+        }
+    };
+    /** Releases associated resources */
+    Control.prototype.dispose = function () {
+        this.onDirtyObservable.clear();
+        this.onBeforeDrawObservable.clear();
+        this.onAfterDrawObservable.clear();
+        this.onPointerDownObservable.clear();
+        this.onPointerEnterObservable.clear();
+        this.onPointerMoveObservable.clear();
+        this.onPointerOutObservable.clear();
+        this.onPointerUpObservable.clear();
+        this.onPointerClickObservable.clear();
+        this.onWheelObservable.clear();
+        if (this._styleObserver && this._style) {
+            this._style.onChangedObservable.remove(this._styleObserver);
+            this._styleObserver = null;
+        }
+        if (this.parent) {
+            this.parent.removeControl(this);
+            this.parent = null;
+        }
+        if (this._host) {
+            var index = this._host._linkedControls.indexOf(this);
+            if (index > -1) {
+                this.linkWithMesh(null);
+            }
+        }
+        // Callback
+        this.onDisposeObservable.notifyObservers(this);
+        this.onDisposeObservable.clear();
+    };
+    Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_LEFT", {
+        /** HORIZONTAL_ALIGNMENT_LEFT */
+        get: function () {
+            return Control._HORIZONTAL_ALIGNMENT_LEFT;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_RIGHT", {
+        /** HORIZONTAL_ALIGNMENT_RIGHT */
+        get: function () {
+            return Control._HORIZONTAL_ALIGNMENT_RIGHT;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_CENTER", {
+        /** HORIZONTAL_ALIGNMENT_CENTER */
+        get: function () {
+            return Control._HORIZONTAL_ALIGNMENT_CENTER;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control, "VERTICAL_ALIGNMENT_TOP", {
+        /** VERTICAL_ALIGNMENT_TOP */
+        get: function () {
+            return Control._VERTICAL_ALIGNMENT_TOP;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control, "VERTICAL_ALIGNMENT_BOTTOM", {
+        /** VERTICAL_ALIGNMENT_BOTTOM */
+        get: function () {
+            return Control._VERTICAL_ALIGNMENT_BOTTOM;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Control, "VERTICAL_ALIGNMENT_CENTER", {
+        /** VERTICAL_ALIGNMENT_CENTER */
+        get: function () {
+            return Control._VERTICAL_ALIGNMENT_CENTER;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * @param font
+     * @hidden
+     */
+    Control._GetFontOffset = function (font) {
+        if (Control._FontHeightSizes[font]) {
+            return Control._FontHeightSizes[font];
+        }
+        var engine = EngineStore.LastCreatedEngine;
+        if (!engine) {
+            throw new Error("Invalid engine. Unable to create a canvas.");
+        }
+        var result = engine.getFontOffset(font);
+        Control._FontHeightSizes[font] = result;
+        return result;
+    };
+    /**
+     * Creates a Control from parsed data
+     * @param serializedObject defines parsed data
+     * @param host defines the hosting AdvancedDynamicTexture
+     * @returns a new Control
+     */
+    Control.Parse = function (serializedObject, host) {
+        var controlType = Tools.Instantiate("BABYLON.GUI." + serializedObject.className);
+        var control = SerializationHelper.Parse(function () { return new controlType(); }, serializedObject, null);
+        control.name = serializedObject.name;
+        control._parseFromContent(serializedObject, host);
+        return control;
+    };
+    /**
+     * @param x
+     * @param y
+     * @param width
+     * @param height
+     * @param context
+     * @hidden
+     */
+    Control.drawEllipse = function (x, y, width, height, context) {
+        context.translate(x, y);
+        context.scale(width, height);
+        context.beginPath();
+        context.arc(0, 0, 1, 0, 2 * Math.PI);
+        context.closePath();
+        context.scale(1 / width, 1 / height);
+        context.translate(-x, -y);
+    };
+    /**
+     * Gets or sets a boolean indicating if alpha must be an inherited value (false by default)
+     */
+    Control.AllowAlphaInheritance = false;
+    Control._ClipMeasure = new Measure(0, 0, 0, 0);
+    // Statics
+    Control._HORIZONTAL_ALIGNMENT_LEFT = 0;
+    Control._HORIZONTAL_ALIGNMENT_RIGHT = 1;
+    Control._HORIZONTAL_ALIGNMENT_CENTER = 2;
+    Control._VERTICAL_ALIGNMENT_TOP = 0;
+    Control._VERTICAL_ALIGNMENT_BOTTOM = 1;
+    Control._VERTICAL_ALIGNMENT_CENTER = 2;
+    Control._FontHeightSizes = {};
+    Control.AddHeader = function () { };
+    __decorate([
+        serialize()
+    ], Control.prototype, "metadata", void 0);
+    __decorate([
+        serialize()
+    ], Control.prototype, "isHitTestVisible", void 0);
+    __decorate([
+        serialize()
+    ], Control.prototype, "isPointerBlocker", void 0);
+    __decorate([
+        serialize()
+    ], Control.prototype, "isFocusInvisible", void 0);
+    __decorate([
+        serialize()
+    ], Control.prototype, "clipChildren", void 0);
+    __decorate([
+        serialize()
+    ], Control.prototype, "clipContent", void 0);
+    __decorate([
+        serialize()
+    ], Control.prototype, "useBitmapCache", void 0);
+    __decorate([
+        serialize()
+    ], Control.prototype, "shadowOffsetX", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "shadowOffsetY", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "shadowBlur", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "shadowColor", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "hoverCursor", void 0);
+    __decorate([
+        serialize()
+    ], Control.prototype, "fontOffset", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "alpha", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "scaleX", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "scaleY", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "rotation", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "transformCenterY", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "transformCenterX", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "horizontalAlignment", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "verticalAlignment", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "fixedRatio", void 0);
+    __decorate([
+        serialize()
+    ], Control.prototype, "width", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "height", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "style", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "color", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "zIndex", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "notRenderable", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "isVisible", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "descendantsOnlyPadding", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "paddingLeft", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "paddingRight", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "paddingTop", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "paddingBottom", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "left", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "top", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "linkOffsetX", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "linkOffsetY", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "isEnabled", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "disabledColor", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "disabledColorItem", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "overlapGroup", void 0);
+    __decorate([
+        serialize()
+    ], Control.prototype, "overlapDeltaMultiplier", void 0);
+    return Control;
+}());
+export { Control };
+RegisterClass("BABYLON.GUI.Control", Control);
 //# sourceMappingURL=control.js.map