@babylonjs/gui 5.0.0-rc.1 → 5.0.0-rc.12

package/2D/advancedDynamicTexture.js

@@ -1,1287 +1,1319 @@
-import { __extends } from "tslib";
-import { Observable } from "@babylonjs/core/Misc/observable.js";
-import { Vector2, Vector3 } from "@babylonjs/core/Maths/math.vector.js";
-import { Tools } from "@babylonjs/core/Misc/tools.js";
-import { PointerEventTypes } from "@babylonjs/core/Events/pointerEvents.js";
-import { ClipboardEventTypes, ClipboardInfo } from "@babylonjs/core/Events/clipboardEvents.js";
-import { KeyboardEventTypes } from "@babylonjs/core/Events/keyboardEvents.js";
-import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial.js";
-import { Texture } from "@babylonjs/core/Materials/Textures/texture.js";
-import { DynamicTexture } from "@babylonjs/core/Materials/Textures/dynamicTexture.js";
-import { Layer } from "@babylonjs/core/Layers/layer.js";
-import { Container } from "./controls/container.js";
-import { Control } from "./controls/control.js";
-import { Style } from "./style.js";
-import { Measure } from "./measure.js";
-import { Constants } from "@babylonjs/core/Engines/constants.js";
-import { Viewport } from "@babylonjs/core/Maths/math.viewport.js";
-import { Color3 } from "@babylonjs/core/Maths/math.color.js";
-import { WebRequest } from "@babylonjs/core/Misc/webRequest.js";
-import { RandomGUID } from "@babylonjs/core/Misc/guid.js";
-/**
- * Class used to create texture to support 2D GUI elements
- * @see https://doc.babylonjs.com/how_to/gui
- */
-var AdvancedDynamicTexture = /** @class */ (function (_super) {
-    __extends(AdvancedDynamicTexture, _super);
-    /**
-     * Creates a new AdvancedDynamicTexture
-     * @param name defines the name of the texture
-     * @param width defines the width of the texture
-     * @param height defines the height of the texture
-     * @param scene defines the hosting scene
-     * @param generateMipMaps defines a boolean indicating if mipmaps must be generated (false by default)
-     * @param samplingMode defines the texture sampling mode (Texture.NEAREST_SAMPLINGMODE by default)
-     * @param invertY defines if the texture needs to be inverted on the y axis during loading (true by default)
-     */
-    function AdvancedDynamicTexture(name, width, height, scene, generateMipMaps, samplingMode, invertY) {
-        if (width === void 0) { width = 0; }
-        if (height === void 0) { height = 0; }
-        if (generateMipMaps === void 0) { generateMipMaps = false; }
-        if (samplingMode === void 0) { samplingMode = Texture.NEAREST_SAMPLINGMODE; }
-        if (invertY === void 0) { invertY = true; }
-        var _this = _super.call(this, name, { width: width, height: height }, scene, generateMipMaps, samplingMode, Constants.TEXTUREFORMAT_RGBA, invertY) || this;
-        _this._isDirty = false;
-        /** @hidden */
-        _this._rootContainer = new Container("root");
-        /** @hidden */
-        _this._lastControlOver = {};
-        /** @hidden */
-        _this._lastControlDown = {};
-        /** @hidden */
-        _this._capturingControl = {};
-        /** @hidden */
-        _this._linkedControls = new Array();
-        _this._isFullscreen = false;
-        _this._fullscreenViewport = new Viewport(0, 0, 1, 1);
-        _this._idealWidth = 0;
-        _this._idealHeight = 0;
-        _this._useSmallestIdeal = false;
-        _this._renderAtIdealSize = false;
-        _this._blockNextFocusCheck = false;
-        _this._renderScale = 1;
-        _this._cursorChanged = false;
-        _this._defaultMousePointerId = 0;
-        /** @hidden */
-        _this._numLayoutCalls = 0;
-        /** @hidden */
-        _this._numRenderCalls = 0;
-        /**
-         * Define type to string to ensure compatibility across browsers
-         * Safari doesn't support DataTransfer constructor
-         */
-        _this._clipboardData = "";
-        /**
-         * Observable event triggered each time an clipboard event is received from the rendering canvas
-         */
-        _this.onClipboardObservable = new Observable();
-        /**
-         * Observable event triggered each time a pointer down is intercepted by a control
-         */
-        _this.onControlPickedObservable = new Observable();
-        /**
-         * Observable event triggered before layout is evaluated
-         */
-        _this.onBeginLayoutObservable = new Observable();
-        /**
-         * Observable event triggered after the layout was evaluated
-         */
-        _this.onEndLayoutObservable = new Observable();
-        /**
-         * Observable event triggered before the texture is rendered
-         */
-        _this.onBeginRenderObservable = new Observable();
-        /**
-         * Observable event triggered after the texture was rendered
-         */
-        _this.onEndRenderObservable = new Observable();
-        /**
-         * Gets or sets a boolean defining if alpha is stored as premultiplied
-         */
-        _this.premulAlpha = false;
-        /**
-         * Gets or sets a boolean indicating that the canvas must be reverted on Y when updating the texture
-         */
-        _this.applyYInversionOnUpdate = true;
-        /**
-         * If set to true, every scene render will trigger a pointer event for the GUI
-         * if it is linked to a mesh or has controls linked to a mesh. This will allow
-         * you to catch the pointer moving around the GUI due to camera or mesh movements,
-         * but it has a performance cost.
-         */
-        _this.checkPointerEveryFrame = false;
-        _this._useInvalidateRectOptimization = true;
-        // Invalidated rectangle which is the combination of all invalidated controls after they have been rotated into absolute position
-        _this._invalidatedRectangle = null;
-        _this._clearMeasure = new Measure(0, 0, 0, 0);
-        /** @hidden */
-        _this.onClipboardCopy = function (rawEvt) {
-            var evt = rawEvt;
-            var ev = new ClipboardInfo(ClipboardEventTypes.COPY, evt);
-            _this.onClipboardObservable.notifyObservers(ev);
-            evt.preventDefault();
-        };
-        /** @hidden */
-        _this.onClipboardCut = function (rawEvt) {
-            var evt = rawEvt;
-            var ev = new ClipboardInfo(ClipboardEventTypes.CUT, evt);
-            _this.onClipboardObservable.notifyObservers(ev);
-            evt.preventDefault();
-        };
-        /** @hidden */
-        _this.onClipboardPaste = function (rawEvt) {
-            var evt = rawEvt;
-            var ev = new ClipboardInfo(ClipboardEventTypes.PASTE, evt);
-            _this.onClipboardObservable.notifyObservers(ev);
-            evt.preventDefault();
-        };
-        scene = _this.getScene();
-        if (!scene || !_this._texture) {
-            return _this;
-        }
-        _this.applyYInversionOnUpdate = invertY;
-        _this._rootElement = scene.getEngine().getInputElement();
-        _this._renderObserver = scene.onBeforeCameraRenderObservable.add(function (camera) { return _this._checkUpdate(camera); });
-        _this._preKeyboardObserver = scene.onPreKeyboardObservable.add(function (info) {
-            if (!_this._focusedControl) {
-                return;
-            }
-            if (info.type === KeyboardEventTypes.KEYDOWN) {
-                _this._focusedControl.processKeyboard(info.event);
-            }
-            info.skipOnPointerObservable = true;
-        });
-        _this._rootContainer._link(_this);
-        _this.hasAlpha = true;
-        if (!width || !height) {
-            _this._resizeObserver = scene.getEngine().onResizeObservable.add(function () { return _this._onResize(); });
-            _this._onResize();
-        }
-        _this._texture.isReady = true;
-        return _this;
-    }
-    Object.defineProperty(AdvancedDynamicTexture.prototype, "numLayoutCalls", {
-        /** Gets the number of layout calls made the last time the ADT has been rendered */
-        get: function () {
-            return this._numLayoutCalls;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AdvancedDynamicTexture.prototype, "numRenderCalls", {
-        /** Gets the number of render calls made the last time the ADT has been rendered */
-        get: function () {
-            return this._numRenderCalls;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AdvancedDynamicTexture.prototype, "renderScale", {
-        /**
-         * Gets or sets a number used to scale rendering size (2 means that the texture will be twice bigger).
-         * Useful when you want more antialiasing
-         */
-        get: function () {
-            return this._renderScale;
-        },
-        set: function (value) {
-            if (value === this._renderScale) {
-                return;
-            }
-            this._renderScale = value;
-            this._onResize();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AdvancedDynamicTexture.prototype, "background", {
-        /** Gets or sets the background color */
-        get: function () {
-            return this._background;
-        },
-        set: function (value) {
-            if (this._background === value) {
-                return;
-            }
-            this._background = value;
-            this.markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AdvancedDynamicTexture.prototype, "idealWidth", {
-        /**
-         * Gets or sets the ideal width used to design controls.
-         * The GUI will then rescale everything accordingly
-         * @see https://doc.babylonjs.com/how_to/gui#adaptive-scaling
-         */
-        get: function () {
-            return this._idealWidth;
-        },
-        set: function (value) {
-            if (this._idealWidth === value) {
-                return;
-            }
-            this._idealWidth = value;
-            this.markAsDirty();
-            this._rootContainer._markAllAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AdvancedDynamicTexture.prototype, "idealHeight", {
-        /**
-         * Gets or sets the ideal height used to design controls.
-         * The GUI will then rescale everything accordingly
-         * @see https://doc.babylonjs.com/how_to/gui#adaptive-scaling
-         */
-        get: function () {
-            return this._idealHeight;
-        },
-        set: function (value) {
-            if (this._idealHeight === value) {
-                return;
-            }
-            this._idealHeight = value;
-            this.markAsDirty();
-            this._rootContainer._markAllAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AdvancedDynamicTexture.prototype, "useSmallestIdeal", {
-        /**
-         * Gets or sets a boolean indicating if the smallest ideal value must be used if idealWidth and idealHeight are both set
-         * @see https://doc.babylonjs.com/how_to/gui#adaptive-scaling
-         */
-        get: function () {
-            return this._useSmallestIdeal;
-        },
-        set: function (value) {
-            if (this._useSmallestIdeal === value) {
-                return;
-            }
-            this._useSmallestIdeal = value;
-            this.markAsDirty();
-            this._rootContainer._markAllAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AdvancedDynamicTexture.prototype, "renderAtIdealSize", {
-        /**
-         * Gets or sets a boolean indicating if adaptive scaling must be used
-         * @see https://doc.babylonjs.com/how_to/gui#adaptive-scaling
-         */
-        get: function () {
-            return this._renderAtIdealSize;
-        },
-        set: function (value) {
-            if (this._renderAtIdealSize === value) {
-                return;
-            }
-            this._renderAtIdealSize = value;
-            this._onResize();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AdvancedDynamicTexture.prototype, "idealRatio", {
-        /**
-         * Gets the ratio used when in "ideal mode"
-         * @see https://doc.babylonjs.com/how_to/gui#adaptive-scaling
-         * */
-        get: function () {
-            var rwidth = 0;
-            var rheight = 0;
-            if (this._idealWidth) {
-                rwidth = this.getSize().width / this._idealWidth;
-            }
-            if (this._idealHeight) {
-                rheight = this.getSize().height / this._idealHeight;
-            }
-            if (this._useSmallestIdeal && this._idealWidth && this._idealHeight) {
-                return window.innerWidth < window.innerHeight ? rwidth : rheight;
-            }
-            if (this._idealWidth) {
-                // horizontal
-                return rwidth;
-            }
-            if (this._idealHeight) {
-                // vertical
-                return rheight;
-            }
-            return 1;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AdvancedDynamicTexture.prototype, "layer", {
-        /**
-         * Gets the underlying layer used to render the texture when in fullscreen mode
-         */
-        get: function () {
-            return this._layerToDispose;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AdvancedDynamicTexture.prototype, "rootContainer", {
-        /**
-         * Gets the root container control
-         */
-        get: function () {
-            return this._rootContainer;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Returns an array containing the root container.
-     * This is mostly used to let the Inspector introspects the ADT
-     * @returns an array containing the rootContainer
-     */
-    AdvancedDynamicTexture.prototype.getChildren = function () {
-        return [this._rootContainer];
-    };
-    /**
-     * Will return all controls that are inside this texture
-     * @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
-     */
-    AdvancedDynamicTexture.prototype.getDescendants = function (directDescendantsOnly, predicate) {
-        return this._rootContainer.getDescendants(directDescendantsOnly, predicate);
-    };
-    /**
-     * Will return all controls with the given type name
-     * @param typeName defines the type name to search for
-     * @returns an array of all controls found
-     */
-    AdvancedDynamicTexture.prototype.getControlsByType = function (typeName) {
-        return this._rootContainer.getDescendants(false, function (control) { return control.typeName === typeName; });
-    };
-    /**
-     * Will return the first control with the given name
-     * @param name defines the name to search for
-     * @return the first control found or null
-     */
-    AdvancedDynamicTexture.prototype.getControlByName = function (name) {
-        return this._getControlByKey("name", name);
-    };
-    AdvancedDynamicTexture.prototype._getControlByKey = function (key, value) {
-        return this._rootContainer.getDescendants().find(function (control) { return control[key] === value; }) || null;
-    };
-    Object.defineProperty(AdvancedDynamicTexture.prototype, "focusedControl", {
-        /**
-         * Gets or sets the current focused control
-         */
-        get: function () {
-            return this._focusedControl;
-        },
-        set: function (control) {
-            if (this._focusedControl == control) {
-                return;
-            }
-            if (this._focusedControl) {
-                this._focusedControl.onBlur();
-            }
-            if (control) {
-                control.onFocus();
-            }
-            this._focusedControl = control;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AdvancedDynamicTexture.prototype, "isForeground", {
-        /**
-         * Gets or sets a boolean indicating if the texture must be rendered in background or foreground when in fullscreen mode
-         */
-        get: function () {
-            if (!this.layer) {
-                return true;
-            }
-            return !this.layer.isBackground;
-        },
-        set: function (value) {
-            if (!this.layer) {
-                return;
-            }
-            if (this.layer.isBackground === !value) {
-                return;
-            }
-            this.layer.isBackground = !value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AdvancedDynamicTexture.prototype, "clipboardData", {
-        /**
-         * Gets or set information about clipboardData
-         */
-        get: function () {
-            return this._clipboardData;
-        },
-        set: function (value) {
-            this._clipboardData = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Get the current class name of the texture useful for serialization or dynamic coding.
-     * @returns "AdvancedDynamicTexture"
-     */
-    AdvancedDynamicTexture.prototype.getClassName = function () {
-        return "AdvancedDynamicTexture";
-    };
-    /**
-     * Function used to execute a function on all controls
-     * @param func defines the function to execute
-     * @param container defines the container where controls belong. If null the root container will be used
-     */
-    AdvancedDynamicTexture.prototype.executeOnAllControls = function (func, container) {
-        if (!container) {
-            container = this._rootContainer;
-        }
-        func(container);
-        for (var _i = 0, _a = container.children; _i < _a.length; _i++) {
-            var child = _a[_i];
-            if (child.children) {
-                this.executeOnAllControls(func, child);
-                continue;
-            }
-            func(child);
-        }
-    };
-    Object.defineProperty(AdvancedDynamicTexture.prototype, "useInvalidateRectOptimization", {
-        /**
-         * Gets or sets a boolean indicating if the InvalidateRect optimization should be turned on
-         */
-        get: function () {
-            return this._useInvalidateRectOptimization;
-        },
-        set: function (value) {
-            this._useInvalidateRectOptimization = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Invalidates a rectangle area on the gui texture
-     * @param invalidMinX left most position of the rectangle to invalidate in the texture
-     * @param invalidMinY top most position of the rectangle to invalidate in the texture
-     * @param invalidMaxX right most position of the rectangle to invalidate in the texture
-     * @param invalidMaxY bottom most position of the rectangle to invalidate in the texture
-     */
-    AdvancedDynamicTexture.prototype.invalidateRect = function (invalidMinX, invalidMinY, invalidMaxX, invalidMaxY) {
-        if (!this._useInvalidateRectOptimization) {
-            return;
-        }
-        if (!this._invalidatedRectangle) {
-            this._invalidatedRectangle = new Measure(invalidMinX, invalidMinY, invalidMaxX - invalidMinX + 1, invalidMaxY - invalidMinY + 1);
-        }
-        else {
-            // Compute intersection
-            var maxX = Math.ceil(Math.max(this._invalidatedRectangle.left + this._invalidatedRectangle.width - 1, invalidMaxX));
-            var maxY = Math.ceil(Math.max(this._invalidatedRectangle.top + this._invalidatedRectangle.height - 1, invalidMaxY));
-            this._invalidatedRectangle.left = Math.floor(Math.min(this._invalidatedRectangle.left, invalidMinX));
-            this._invalidatedRectangle.top = Math.floor(Math.min(this._invalidatedRectangle.top, invalidMinY));
-            this._invalidatedRectangle.width = maxX - this._invalidatedRectangle.left + 1;
-            this._invalidatedRectangle.height = maxY - this._invalidatedRectangle.top + 1;
-        }
-    };
-    /**
-     * Marks the texture as dirty forcing a complete update
-     */
-    AdvancedDynamicTexture.prototype.markAsDirty = function () {
-        this._isDirty = true;
-    };
-    /**
-     * Helper function used to create a new style
-     * @returns a new style
-     * @see https://doc.babylonjs.com/how_to/gui#styles
-     */
-    AdvancedDynamicTexture.prototype.createStyle = function () {
-        return new Style(this);
-    };
-    /**
-     * Adds a new control to the root container
-     * @param control defines the control to add
-     * @returns the current texture
-     */
-    AdvancedDynamicTexture.prototype.addControl = function (control) {
-        this._rootContainer.addControl(control);
-        return this;
-    };
-    /**
-     * Removes a control from the root container
-     * @param control defines the control to remove
-     * @returns the current texture
-     */
-    AdvancedDynamicTexture.prototype.removeControl = function (control) {
-        this._rootContainer.removeControl(control);
-        return this;
-    };
-    /**
-     * Moves overlapped controls towards a position where it is not overlapping anymore.
-     * Please note that this method alters linkOffsetXInPixels and linkOffsetYInPixels.
-     * @param overlapGroup the overlap group which will be processed or undefined to process all overlap groups
-     * @param deltaStep the step size (speed) to reach the target non overlapping position (default 0.1)
-     * @param repelFactor how much is the control repelled by other controls
-     */
-    AdvancedDynamicTexture.prototype.moveToNonOverlappedPosition = function (overlapGroup, deltaStep, repelFactor) {
-        if (deltaStep === void 0) { deltaStep = 1; }
-        if (repelFactor === void 0) { repelFactor = 1; }
-        var controlsForGroup;
-        if (Array.isArray(overlapGroup)) {
-            controlsForGroup = overlapGroup;
-        }
-        else {
-            var descendants = this.getDescendants(true);
-            // get only the controls with an overlapGroup property set
-            // if the overlapGroup parameter is set, filter the controls and get only the controls belonging to that overlapGroup
-            controlsForGroup = overlapGroup === undefined ? descendants.filter(function (c) { return c.overlapGroup !== undefined; }) : descendants.filter(function (c) { return c.overlapGroup === overlapGroup; });
-        }
-        controlsForGroup.forEach(function (control1) {
-            var _a;
-            var velocity = Vector2.Zero();
-            var center = new Vector2(control1.centerX, control1.centerY);
-            controlsForGroup.forEach(function (control2) {
-                if (control1 !== control2 && AdvancedDynamicTexture._Overlaps(control1, control2)) {
-                    // if the two controls overlaps get a direction vector from one control's center to another control's center
-                    var diff = center.subtract(new Vector2(control2.centerX, control2.centerY));
-                    var diffLength = diff.length();
-                    if (diffLength > 0) {
-                        // calculate the velocity
-                        velocity = velocity.add(diff.normalize().scale(repelFactor / diffLength));
-                    }
-                }
-            });
-            if (velocity.length() > 0) {
-                // move the control along the direction vector away from the overlapping control
-                velocity = velocity.normalize().scale(deltaStep * ((_a = control1.overlapDeltaMultiplier) !== null && _a !== void 0 ? _a : 1));
-                control1.linkOffsetXInPixels += velocity.x;
-                control1.linkOffsetYInPixels += velocity.y;
-            }
-        });
-    };
-    /**
-     * Release all resources
-     */
-    AdvancedDynamicTexture.prototype.dispose = function () {
-        var scene = this.getScene();
-        if (!scene) {
-            return;
-        }
-        this._rootElement = null;
-        scene.onBeforeCameraRenderObservable.remove(this._renderObserver);
-        if (this._resizeObserver) {
-            scene.getEngine().onResizeObservable.remove(this._resizeObserver);
-        }
-        if (this._pointerMoveObserver) {
-            scene.onPrePointerObservable.remove(this._pointerMoveObserver);
-        }
-        if (this._sceneRenderObserver) {
-            scene.onBeforeRenderObservable.remove(this._sceneRenderObserver);
-        }
-        if (this._pointerObserver) {
-            scene.onPointerObservable.remove(this._pointerObserver);
-        }
-        if (this._preKeyboardObserver) {
-            scene.onPreKeyboardObservable.remove(this._preKeyboardObserver);
-        }
-        if (this._canvasPointerOutObserver) {
-            scene.getEngine().onCanvasPointerOutObservable.remove(this._canvasPointerOutObserver);
-        }
-        if (this._canvasBlurObserver) {
-            scene.getEngine().onCanvasBlurObservable.remove(this._canvasBlurObserver);
-        }
-        if (this._layerToDispose) {
-            this._layerToDispose.texture = null;
-            this._layerToDispose.dispose();
-            this._layerToDispose = null;
-        }
-        this._rootContainer.dispose();
-        this.onClipboardObservable.clear();
-        this.onControlPickedObservable.clear();
-        this.onBeginRenderObservable.clear();
-        this.onEndRenderObservable.clear();
-        this.onBeginLayoutObservable.clear();
-        this.onEndLayoutObservable.clear();
-        _super.prototype.dispose.call(this);
-    };
-    AdvancedDynamicTexture.prototype._onResize = function () {
-        var scene = this.getScene();
-        if (!scene) {
-            return;
-        }
-        // Check size
-        var engine = scene.getEngine();
-        var textureSize = this.getSize();
-        var renderWidth = engine.getRenderWidth() * this._renderScale;
-        var renderHeight = engine.getRenderHeight() * this._renderScale;
-        if (this._renderAtIdealSize) {
-            if (this._idealWidth) {
-                renderHeight = (renderHeight * this._idealWidth) / renderWidth;
-                renderWidth = this._idealWidth;
-            }
-            else if (this._idealHeight) {
-                renderWidth = (renderWidth * this._idealHeight) / renderHeight;
-                renderHeight = this._idealHeight;
-            }
-        }
-        if (textureSize.width !== renderWidth || textureSize.height !== renderHeight) {
-            this.scaleTo(renderWidth, renderHeight);
-            this.markAsDirty();
-            if (this._idealWidth || this._idealHeight) {
-                this._rootContainer._markAllAsDirty();
-            }
-        }
-        this.invalidateRect(0, 0, textureSize.width - 1, textureSize.height - 1);
-    };
-    /** @hidden */
-    AdvancedDynamicTexture.prototype._getGlobalViewport = function () {
-        var size = this.getSize();
-        var globalViewPort = this._fullscreenViewport.toGlobal(size.width, size.height);
-        var targetX = Math.round(globalViewPort.width * (1 / this.rootContainer.scaleX));
-        var targetY = Math.round(globalViewPort.height * (1 / this.rootContainer.scaleY));
-        globalViewPort.x += (globalViewPort.width - targetX) / 2;
-        globalViewPort.y += (globalViewPort.height - targetY) / 2;
-        globalViewPort.width = targetX;
-        globalViewPort.height = targetY;
-        return globalViewPort;
-    };
-    /**
-     * Get screen coordinates for a vector3
-     * @param position defines the position to project
-     * @param worldMatrix defines the world matrix to use
-     * @returns the projected position
-     */
-    AdvancedDynamicTexture.prototype.getProjectedPosition = function (position, worldMatrix) {
-        var result = this.getProjectedPositionWithZ(position, worldMatrix);
-        return new Vector2(result.x, result.y);
-    };
-    /**
-     * Get screen coordinates for a vector3
-     * @param position defines the position to project
-     * @param worldMatrix defines the world matrix to use
-     * @returns the projected position with Z
-     */
-    AdvancedDynamicTexture.prototype.getProjectedPositionWithZ = function (position, worldMatrix) {
-        var scene = this.getScene();
-        if (!scene) {
-            return Vector3.Zero();
-        }
-        var globalViewport = this._getGlobalViewport();
-        var projectedPosition = Vector3.Project(position, worldMatrix, scene.getTransformMatrix(), globalViewport);
-        return new Vector3(projectedPosition.x, projectedPosition.y, projectedPosition.z);
-    };
-    AdvancedDynamicTexture.prototype._checkUpdate = function (camera) {
-        if (this._layerToDispose) {
-            if ((camera.layerMask & this._layerToDispose.layerMask) === 0) {
-                return;
-            }
-        }
-        if (this._isFullscreen && this._linkedControls.length) {
-            var scene = this.getScene();
-            if (!scene) {
-                return;
-            }
-            var globalViewport = this._getGlobalViewport();
-            var _loop_1 = function (control) {
-                if (!control.isVisible) {
-                    return "continue";
-                }
-                var mesh = control._linkedMesh;
-                if (!mesh || mesh.isDisposed()) {
-                    Tools.SetImmediate(function () {
-                        control.linkWithMesh(null);
-                    });
-                    return "continue";
-                }
-                var position = mesh.getBoundingInfo ? mesh.getBoundingInfo().boundingSphere.center : Vector3.ZeroReadOnly;
-                var projectedPosition = Vector3.Project(position, mesh.getWorldMatrix(), scene.getTransformMatrix(), globalViewport);
-                if (projectedPosition.z < 0 || projectedPosition.z > 1) {
-                    control.notRenderable = true;
-                    return "continue";
-                }
-                control.notRenderable = false;
-                control._moveToProjectedPosition(projectedPosition);
-            };
-            for (var _i = 0, _a = this._linkedControls; _i < _a.length; _i++) {
-                var control = _a[_i];
-                _loop_1(control);
-            }
-        }
-        if (!this._isDirty && !this._rootContainer.isDirty) {
-            return;
-        }
-        this._isDirty = false;
-        this._render();
-        this.update(this.applyYInversionOnUpdate, this.premulAlpha, AdvancedDynamicTexture.AllowGPUOptimizations);
-    };
-    AdvancedDynamicTexture.prototype._render = function () {
-        var textureSize = this.getSize();
-        var renderWidth = textureSize.width;
-        var renderHeight = textureSize.height;
-        var context = this.getContext();
-        context.font = "18px Arial";
-        context.strokeStyle = "white";
-        // Layout
-        this.onBeginLayoutObservable.notifyObservers(this);
-        var measure = new Measure(0, 0, renderWidth, renderHeight);
-        this._numLayoutCalls = 0;
-        this._rootContainer._layout(measure, context);
-        this.onEndLayoutObservable.notifyObservers(this);
-        this._isDirty = false; // Restoring the dirty state that could have been set by controls during layout processing
-        // Clear
-        if (this._invalidatedRectangle) {
-            this._clearMeasure.copyFrom(this._invalidatedRectangle);
-        }
-        else {
-            this._clearMeasure.copyFromFloats(0, 0, renderWidth, renderHeight);
-        }
-        context.clearRect(this._clearMeasure.left, this._clearMeasure.top, this._clearMeasure.width, this._clearMeasure.height);
-        if (this._background) {
-            context.save();
-            context.fillStyle = this._background;
-            context.fillRect(this._clearMeasure.left, this._clearMeasure.top, this._clearMeasure.width, this._clearMeasure.height);
-            context.restore();
-        }
-        // Render
-        this.onBeginRenderObservable.notifyObservers(this);
-        this._numRenderCalls = 0;
-        this._rootContainer._render(context, this._invalidatedRectangle);
-        this.onEndRenderObservable.notifyObservers(this);
-        this._invalidatedRectangle = null;
-    };
-    /** @hidden */
-    AdvancedDynamicTexture.prototype._changeCursor = function (cursor) {
-        if (this._rootElement) {
-            this._rootElement.style.cursor = cursor;
-            this._cursorChanged = true;
-        }
-    };
-    /** @hidden */
-    AdvancedDynamicTexture.prototype._registerLastControlDown = function (control, pointerId) {
-        this._lastControlDown[pointerId] = control;
-        this.onControlPickedObservable.notifyObservers(control);
-    };
-    AdvancedDynamicTexture.prototype._doPicking = function (x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY) {
-        var scene = this.getScene();
-        if (!scene) {
-            return;
-        }
-        var engine = scene.getEngine();
-        var textureSize = this.getSize();
-        if (this._isFullscreen) {
-            var camera = scene.cameraToUseForPointers || scene.activeCamera;
-            if (!camera) {
-                return;
-            }
-            var viewport = camera.viewport;
-            x = x * (textureSize.width / (engine.getRenderWidth() * viewport.width));
-            y = y * (textureSize.height / (engine.getRenderHeight() * viewport.height));
-        }
-        if (this._capturingControl[pointerId]) {
-            this._capturingControl[pointerId]._processObservables(type, x, y, pi, pointerId, buttonIndex);
-            return;
-        }
-        this._cursorChanged = false;
-        if (!this._rootContainer._processPicking(x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY)) {
-            if (!scene.doNotHandleCursors) {
-                this._changeCursor("");
-            }
-            if (type === PointerEventTypes.POINTERMOVE) {
-                if (this._lastControlOver[pointerId]) {
-                    this._lastControlOver[pointerId]._onPointerOut(this._lastControlOver[pointerId], pi);
-                    delete this._lastControlOver[pointerId];
-                }
-            }
-        }
-        if (!this._cursorChanged && !scene.doNotHandleCursors) {
-            this._changeCursor("");
-        }
-        this._manageFocus();
-    };
-    /** @hidden */
-    AdvancedDynamicTexture.prototype._cleanControlAfterRemovalFromList = function (list, control) {
-        for (var pointerId in list) {
-            if (!list.hasOwnProperty(pointerId)) {
-                continue;
-            }
-            var lastControlOver = list[pointerId];
-            if (lastControlOver === control) {
-                delete list[pointerId];
-            }
-        }
-    };
-    /** @hidden */
-    AdvancedDynamicTexture.prototype._cleanControlAfterRemoval = function (control) {
-        this._cleanControlAfterRemovalFromList(this._lastControlDown, control);
-        this._cleanControlAfterRemovalFromList(this._lastControlOver, control);
-    };
-    AdvancedDynamicTexture.prototype._translateToPicking = function (scene, tempViewport, pi) {
-        var camera = scene.cameraToUseForPointers || scene.activeCamera;
-        var engine = scene.getEngine();
-        var originalCameraToUseForPointers = scene.cameraToUseForPointers;
-        if (!camera) {
-            tempViewport.x = 0;
-            tempViewport.y = 0;
-            tempViewport.width = engine.getRenderWidth();
-            tempViewport.height = engine.getRenderHeight();
-        }
-        else {
-            if (camera.rigCameras.length) {
-                // rig camera - we need to find the camera to use for this event
-                var rigViewport_1 = new Viewport(0, 0, 1, 1);
-                camera.rigCameras.forEach(function (rigCamera) {
-                    // generate the viewport of this camera
-                    rigCamera.viewport.toGlobalToRef(engine.getRenderWidth(), engine.getRenderHeight(), rigViewport_1);
-                    var x = scene.pointerX / engine.getHardwareScalingLevel() - rigViewport_1.x;
-                    var y = scene.pointerY / engine.getHardwareScalingLevel() - (engine.getRenderHeight() - rigViewport_1.y - rigViewport_1.height);
-                    // check if the pointer is in the camera's viewport
-                    if (x < 0 || y < 0 || x > rigViewport_1.width || y > rigViewport_1.height) {
-                        // out of viewport - don't use this camera
-                        return;
-                    }
-                    // set the camera to use for pointers until this pointer loop is over
-                    scene.cameraToUseForPointers = rigCamera;
-                    // set the viewport
-                    tempViewport.x = rigViewport_1.x;
-                    tempViewport.y = rigViewport_1.y;
-                    tempViewport.width = rigViewport_1.width;
-                    tempViewport.height = rigViewport_1.height;
-                });
-            }
-            else {
-                camera.viewport.toGlobalToRef(engine.getRenderWidth(), engine.getRenderHeight(), tempViewport);
-            }
-        }
-        var x = scene.pointerX / engine.getHardwareScalingLevel() - tempViewport.x;
-        var y = scene.pointerY / engine.getHardwareScalingLevel() - (engine.getRenderHeight() - tempViewport.y - tempViewport.height);
-        this._shouldBlockPointer = false;
-        // Do picking modifies _shouldBlockPointer
-        if (pi) {
-            var pointerId = pi.event.pointerId || this._defaultMousePointerId;
-            this._doPicking(x, y, pi, pi.type, pointerId, pi.event.button, pi.event.deltaX, pi.event.deltaY);
-            // Avoid overwriting a true skipOnPointerObservable to false
-            if (this._shouldBlockPointer) {
-                pi.skipOnPointerObservable = this._shouldBlockPointer;
-            }
-        }
-        else {
-            this._doPicking(x, y, null, PointerEventTypes.POINTERMOVE, this._defaultMousePointerId, 0);
-        }
-        // if overridden by a rig camera - reset back to the original value
-        scene.cameraToUseForPointers = originalCameraToUseForPointers;
-    };
-    /** Attach to all scene events required to support pointer events */
-    AdvancedDynamicTexture.prototype.attach = function () {
-        var _this = this;
-        var scene = this.getScene();
-        if (!scene) {
-            return;
-        }
-        var tempViewport = new Viewport(0, 0, 0, 0);
-        this._pointerMoveObserver = scene.onPrePointerObservable.add(function (pi, state) {
-            if (scene.isPointerCaptured(pi.event.pointerId)) {
-                return;
-            }
-            if (pi.type !== PointerEventTypes.POINTERMOVE &&
-                pi.type !== PointerEventTypes.POINTERUP &&
-                pi.type !== PointerEventTypes.POINTERDOWN &&
-                pi.type !== PointerEventTypes.POINTERWHEEL) {
-                return;
-            }
-            if (pi.type === PointerEventTypes.POINTERMOVE && pi.event.pointerId) {
-                _this._defaultMousePointerId = pi.event.pointerId; // This is required to make sure we have the correct pointer ID for wheel
-            }
-            _this._translateToPicking(scene, tempViewport, pi);
-        });
-        this._attachPickingToSceneRender(scene, function () { return _this._translateToPicking(scene, tempViewport, null); }, false);
-        this._attachToOnPointerOut(scene);
-        this._attachToOnBlur(scene);
-    };
-    /**
-     * Register the clipboard Events onto the canvas
-     */
-    AdvancedDynamicTexture.prototype.registerClipboardEvents = function () {
-        self.addEventListener("copy", this.onClipboardCopy, false);
-        self.addEventListener("cut", this.onClipboardCut, false);
-        self.addEventListener("paste", this.onClipboardPaste, false);
-    };
-    /**
-     * Unregister the clipboard Events from the canvas
-     */
-    AdvancedDynamicTexture.prototype.unRegisterClipboardEvents = function () {
-        self.removeEventListener("copy", this.onClipboardCopy);
-        self.removeEventListener("cut", this.onClipboardCut);
-        self.removeEventListener("paste", this.onClipboardPaste);
-    };
-    /**
-     * Connect the texture to a hosting mesh to enable interactions
-     * @param mesh defines the mesh to attach to
-     * @param supportPointerMove defines a boolean indicating if pointer move events must be catched as well
-     */
-    AdvancedDynamicTexture.prototype.attachToMesh = function (mesh, supportPointerMove) {
-        var _this = this;
-        if (supportPointerMove === void 0) { supportPointerMove = true; }
-        var scene = this.getScene();
-        if (!scene) {
-            return;
-        }
-        this._pointerObserver = scene.onPointerObservable.add(function (pi, state) {
-            if (pi.type !== PointerEventTypes.POINTERMOVE &&
-                pi.type !== PointerEventTypes.POINTERUP &&
-                pi.type !== PointerEventTypes.POINTERDOWN &&
-                pi.type !== PointerEventTypes.POINTERWHEEL) {
-                return;
-            }
-            if (pi.type === PointerEventTypes.POINTERMOVE && pi.event.pointerId) {
-                _this._defaultMousePointerId = pi.event.pointerId; // This is required to make sure we have the correct pointer ID for wheel
-            }
-            var pointerId = pi.event.pointerId || _this._defaultMousePointerId;
-            if (pi.pickInfo && pi.pickInfo.hit && pi.pickInfo.pickedMesh === mesh) {
-                var uv = pi.pickInfo.getTextureCoordinates();
-                if (uv) {
-                    var size = _this.getSize();
-                    _this._doPicking(uv.x * size.width, (_this.applyYInversionOnUpdate ? 1.0 - uv.y : uv.y) * size.height, pi, pi.type, pointerId, pi.event.button, pi.event.deltaX, pi.event.deltaY);
-                }
-            }
-            else if (pi.type === PointerEventTypes.POINTERUP) {
-                if (_this._lastControlDown[pointerId]) {
-                    _this._lastControlDown[pointerId]._forcePointerUp(pointerId);
-                }
-                delete _this._lastControlDown[pointerId];
-                if (_this.focusedControl) {
-                    var friendlyControls = _this.focusedControl.keepsFocusWith();
-                    var canMoveFocus = true;
-                    if (friendlyControls) {
-                        for (var _i = 0, friendlyControls_1 = friendlyControls; _i < friendlyControls_1.length; _i++) {
-                            var control = friendlyControls_1[_i];
-                            // Same host, no need to keep the focus
-                            if (_this === control._host) {
-                                continue;
-                            }
-                            // Different hosts
-                            var otherHost = control._host;
-                            if (otherHost._lastControlOver[pointerId] && otherHost._lastControlOver[pointerId].isAscendant(control)) {
-                                canMoveFocus = false;
-                                break;
-                            }
-                        }
-                    }
-                    if (canMoveFocus) {
-                        _this.focusedControl = null;
-                    }
-                }
-            }
-            else if (pi.type === PointerEventTypes.POINTERMOVE) {
-                if (_this._lastControlOver[pointerId]) {
-                    _this._lastControlOver[pointerId]._onPointerOut(_this._lastControlOver[pointerId], pi, true);
-                }
-                delete _this._lastControlOver[pointerId];
-            }
-        });
-        mesh.enablePointerMoveEvents = supportPointerMove;
-        this._attachPickingToSceneRender(scene, function () {
-            var pointerId = _this._defaultMousePointerId;
-            var pick = scene === null || scene === void 0 ? void 0 : scene.pick(scene.pointerX, scene.pointerY);
-            if (pick && pick.hit && pick.pickedMesh === mesh) {
-                var uv = pick.getTextureCoordinates();
-                if (uv) {
-                    var size = _this.getSize();
-                    _this._doPicking(uv.x * size.width, (_this.applyYInversionOnUpdate ? 1.0 - uv.y : uv.y) * size.height, null, PointerEventTypes.POINTERMOVE, pointerId, 0);
-                }
-            }
-            else {
-                if (_this._lastControlOver[pointerId]) {
-                    _this._lastControlOver[pointerId]._onPointerOut(_this._lastControlOver[pointerId], null, true);
-                }
-                delete _this._lastControlOver[pointerId];
-            }
-        }, true);
-        this._attachToOnPointerOut(scene);
-        this._attachToOnBlur(scene);
-    };
-    /**
-     * Move the focus to a specific control
-     * @param control defines the control which will receive the focus
-     */
-    AdvancedDynamicTexture.prototype.moveFocusToControl = function (control) {
-        this.focusedControl = control;
-        this._lastPickedControl = control;
-        this._blockNextFocusCheck = true;
-    };
-    AdvancedDynamicTexture.prototype._manageFocus = function () {
-        if (this._blockNextFocusCheck) {
-            this._blockNextFocusCheck = false;
-            this._lastPickedControl = this._focusedControl;
-            return;
-        }
-        // Focus management
-        if (this._focusedControl) {
-            if (this._focusedControl !== this._lastPickedControl) {
-                if (this._lastPickedControl.isFocusInvisible) {
-                    return;
-                }
-                this.focusedControl = null;
-            }
-        }
-    };
-    AdvancedDynamicTexture.prototype._attachPickingToSceneRender = function (scene, pickFunction, forcePicking) {
-        var _this = this;
-        this._sceneRenderObserver = scene.onBeforeRenderObservable.add(function () {
-            if (!_this.checkPointerEveryFrame) {
-                return;
-            }
-            if (_this._linkedControls.length > 0 || forcePicking) {
-                pickFunction();
-            }
-        });
-    };
-    AdvancedDynamicTexture.prototype._attachToOnPointerOut = function (scene) {
-        var _this = this;
-        this._canvasPointerOutObserver = scene.getEngine().onCanvasPointerOutObservable.add(function (pointerEvent) {
-            if (_this._lastControlOver[pointerEvent.pointerId]) {
-                _this._lastControlOver[pointerEvent.pointerId]._onPointerOut(_this._lastControlOver[pointerEvent.pointerId], null);
-            }
-            delete _this._lastControlOver[pointerEvent.pointerId];
-            if (_this._lastControlDown[pointerEvent.pointerId] && _this._lastControlDown[pointerEvent.pointerId] !== _this._capturingControl[pointerEvent.pointerId]) {
-                _this._lastControlDown[pointerEvent.pointerId]._forcePointerUp();
-                delete _this._lastControlDown[pointerEvent.pointerId];
-            }
-        });
-    };
-    AdvancedDynamicTexture.prototype._attachToOnBlur = function (scene) {
-        var _this = this;
-        this._canvasBlurObserver = scene.getEngine().onCanvasBlurObservable.add(function (pointerEvent) {
-            Object.entries(_this._lastControlDown).forEach(function (_a) {
-                var key = _a[0], value = _a[1];
-                value._onCanvasBlur();
-            });
-            _this.focusedControl = null;
-            _this._lastControlDown = {};
-        });
-    };
-    /**
-     * Serializes the entire GUI system
-     * @returns an object with the JSON serialized data
-     */
-    AdvancedDynamicTexture.prototype.serializeContent = function () {
-        var size = this.getSize();
-        var serializationObject = {
-            root: {},
-            width: size.width,
-            height: size.height,
-        };
-        this._rootContainer.serialize(serializationObject.root);
-        return serializationObject;
-    };
-    /**
-     * Recreate the content of the ADT from a JSON object
-     * @param serializedObject define the JSON serialized object to restore from
-     * @param scaleToSize defines whether to scale to texture to the saved size
-     */
-    AdvancedDynamicTexture.prototype.parseContent = function (serializedObject, scaleToSize) {
-        this._rootContainer = Control.Parse(serializedObject.root, this);
-        if (scaleToSize) {
-            var width = serializedObject.width;
-            var height = serializedObject.height;
-            if (typeof width === "number" && typeof height === "number" && width >= 0 && height >= 0) {
-                this.scaleTo(width, height);
-            }
-            else {
-                // scales the GUI to a default size if none was available in the serialized content
-                this.scaleTo(1920, 1080);
-            }
-        }
-    };
-    /**
-     * Recreate the content of the ADT from a snippet saved by the GUI editor
-     * @param snippetId defines the snippet to load
-     * @param scaleToSize defines whether to scale to texture to the saved size
-     * @returns a promise that will resolve on success
-     */
-    AdvancedDynamicTexture.prototype.parseFromSnippetAsync = function (snippetId, scaleToSize) {
-        var _this = this;
-        if (snippetId === "_BLANK") {
-            return Promise.resolve();
-        }
-        return new Promise(function (resolve, reject) {
-            var request = new WebRequest();
-            request.addEventListener("readystatechange", function () {
-                if (request.readyState == 4) {
-                    if (request.status == 200) {
-                        var snippet = JSON.parse(JSON.parse(request.responseText).jsonPayload);
-                        var serializationObject = JSON.parse(snippet.gui);
-                        _this.parseContent(serializationObject, scaleToSize);
-                        _this.snippetId = snippetId;
-                        resolve();
-                    }
-                    else {
-                        reject("Unable to load the snippet " + snippetId);
-                    }
-                }
-            });
-            request.open("GET", AdvancedDynamicTexture.SnippetUrl + "/" + snippetId.replace(/#/g, "/"));
-            request.send();
-        });
-    };
-    /**
-     * Recreate the content of the ADT from a url json
-     * @param url defines the url to load
-     * @param scaleToSize defines whether to scale to texture to the saved size
-     * @returns a promise that will resolve on success
-     */
-    AdvancedDynamicTexture.prototype.parseFromURLAsync = function (url, scaleToSize) {
-        var _this = this;
-        if (url === "") {
-            return Promise.resolve();
-        }
-        return new Promise(function (resolve, reject) {
-            var request = new WebRequest();
-            request.addEventListener("readystatechange", function () {
-                if (request.readyState == 4) {
-                    if (request.status == 200) {
-                        var gui = request.responseText;
-                        var serializationObject = JSON.parse(gui);
-                        _this.parseContent(serializationObject, scaleToSize);
-                        resolve();
-                    }
-                    else {
-                        reject("Unable to load");
-                    }
-                }
-            });
-            request.open("GET", url);
-            request.send();
-        });
-    };
-    // Statics
-    /**
-     * Compares two rectangle based controls for pixel overlap
-     * @param control1 The first control to compare
-     * @param control2 The second control to compare
-     * @returns true if overlaps, otherwise false
-     */
-    AdvancedDynamicTexture._Overlaps = function (control1, control2) {
-        return !(control1.centerX > control2.centerX + control2.widthInPixels ||
-            control1.centerX + control1.widthInPixels < control2.centerX ||
-            control1.centerY + control1.heightInPixels < control2.centerY ||
-            control1.centerY > control2.centerY + control2.heightInPixels);
-    };
-    /**
-     * Creates a new AdvancedDynamicTexture in projected mode (ie. attached to a mesh)
-     * @param mesh defines the mesh which will receive the texture
-     * @param width defines the texture width (1024 by default)
-     * @param height defines the texture height (1024 by default)
-     * @param supportPointerMove defines a boolean indicating if the texture must capture move events (true by default)
-     * @param onlyAlphaTesting defines a boolean indicating that alpha blending will not be used (only alpha testing) (false by default)
-     * @param invertY defines if the texture needs to be inverted on the y axis during loading (true by default)
-     * @returns a new AdvancedDynamicTexture
-     */
-    AdvancedDynamicTexture.CreateForMesh = function (mesh, width, height, supportPointerMove, onlyAlphaTesting, invertY) {
-        if (width === void 0) { width = 1024; }
-        if (height === void 0) { height = 1024; }
-        if (supportPointerMove === void 0) { supportPointerMove = true; }
-        if (onlyAlphaTesting === void 0) { onlyAlphaTesting = false; }
-        // use a unique ID in name so serialization will work even if you create two ADTs for a single mesh
-        var uniqueId = RandomGUID();
-        var result = new AdvancedDynamicTexture("AdvancedDynamicTexture for ".concat(mesh.name, " [").concat(uniqueId, "]"), width, height, mesh.getScene(), true, Texture.TRILINEAR_SAMPLINGMODE, invertY);
-        var material = new StandardMaterial("AdvancedDynamicTextureMaterial for ".concat(mesh.name, " [").concat(uniqueId, "]"), mesh.getScene());
-        material.backFaceCulling = false;
-        material.diffuseColor = Color3.Black();
-        material.specularColor = Color3.Black();
-        if (onlyAlphaTesting) {
-            material.diffuseTexture = result;
-            material.emissiveTexture = result;
-            result.hasAlpha = true;
-        }
-        else {
-            material.emissiveTexture = result;
-            material.opacityTexture = result;
-        }
-        mesh.material = material;
-        result.attachToMesh(mesh, supportPointerMove);
-        return result;
-    };
-    /**
-     * Creates a new AdvancedDynamicTexture in projected mode (ie. attached to a mesh) BUT do not create a new material for the mesh. You will be responsible for connecting the texture
-     * @param mesh defines the mesh which will receive the texture
-     * @param width defines the texture width (1024 by default)
-     * @param height defines the texture height (1024 by default)
-     * @param supportPointerMove defines a boolean indicating if the texture must capture move events (true by default)
-     * @param invertY defines if the texture needs to be inverted on the y axis during loading (true by default)
-     * @returns a new AdvancedDynamicTexture
-     */
-    AdvancedDynamicTexture.CreateForMeshTexture = function (mesh, width, height, supportPointerMove, invertY) {
-        if (width === void 0) { width = 1024; }
-        if (height === void 0) { height = 1024; }
-        if (supportPointerMove === void 0) { supportPointerMove = true; }
-        var result = new AdvancedDynamicTexture(mesh.name + " AdvancedDynamicTexture", width, height, mesh.getScene(), true, Texture.TRILINEAR_SAMPLINGMODE, invertY);
-        result.attachToMesh(mesh, supportPointerMove);
-        return result;
-    };
-    /**
-     * Creates a new AdvancedDynamicTexture in fullscreen mode.
-     * In this mode the texture will rely on a layer for its rendering.
-     * This allows it to be treated like any other layer.
-     * As such, if you have a multi camera setup, you can set the layerMask on the GUI as well.
-     * LayerMask is set through advancedTexture.layer.layerMask
-     * @param name defines name for the texture
-     * @param foreground defines a boolean indicating if the texture must be rendered in foreground (default is true)
-     * @param scene defines the hosting scene
-     * @param sampling defines the texture sampling mode (Texture.BILINEAR_SAMPLINGMODE by default)
-     * @param adaptiveScaling defines whether to automatically scale root to match hardwarescaling (false by default)
-     * @returns a new AdvancedDynamicTexture
-     */
-    AdvancedDynamicTexture.CreateFullscreenUI = function (name, foreground, scene, sampling, adaptiveScaling) {
-        if (foreground === void 0) { foreground = true; }
-        if (scene === void 0) { scene = null; }
-        if (sampling === void 0) { sampling = Texture.BILINEAR_SAMPLINGMODE; }
-        if (adaptiveScaling === void 0) { adaptiveScaling = false; }
-        var result = new AdvancedDynamicTexture(name, 0, 0, scene, false, sampling);
-        // Display
-        var resultScene = result.getScene();
-        var layer = new Layer(name + "_layer", null, resultScene, !foreground);
-        layer.texture = result;
-        result._layerToDispose = layer;
-        result._isFullscreen = true;
-        if (adaptiveScaling && resultScene) {
-            var newScale = 1 / resultScene.getEngine().getHardwareScalingLevel();
-            result._rootContainer.scaleX = newScale;
-            result._rootContainer.scaleY = newScale;
-        }
-        // Attach
-        result.attach();
-        return result;
-    };
-    /**
-     * Scales the texture
-     * @param ratio the scale factor to apply to both width and height
-     */
-    AdvancedDynamicTexture.prototype.scale = function (ratio) {
-        _super.prototype.scale.call(this, ratio);
-        this.markAsDirty();
-    };
-    /**
-     * Resizes the texture
-     * @param width the new width
-     * @param height the new height
-     */
-    AdvancedDynamicTexture.prototype.scaleTo = function (width, height) {
-        _super.prototype.scaleTo.call(this, width, height);
-        this.markAsDirty();
-    };
-    /** Define the Uurl to load snippets */
-    AdvancedDynamicTexture.SnippetUrl = "https://snippet.babylonjs.com";
-    /** Indicates if some optimizations can be performed in GUI GPU management (the downside is additional memory/GPU texture memory used) */
-    AdvancedDynamicTexture.AllowGPUOptimizations = true;
-    return AdvancedDynamicTexture;
-}(DynamicTexture));
-export { AdvancedDynamicTexture };
+import { __extends } from "tslib";
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import { Vector2, Vector3 } from "@babylonjs/core/Maths/math.vector.js";
+import { Tools } from "@babylonjs/core/Misc/tools.js";
+import { PointerEventTypes } from "@babylonjs/core/Events/pointerEvents.js";
+import { ClipboardEventTypes, ClipboardInfo } from "@babylonjs/core/Events/clipboardEvents.js";
+import { KeyboardEventTypes } from "@babylonjs/core/Events/keyboardEvents.js";
+import { Texture } from "@babylonjs/core/Materials/Textures/texture.js";
+import { DynamicTexture } from "@babylonjs/core/Materials/Textures/dynamicTexture.js";
+import { Layer } from "@babylonjs/core/Layers/layer.js";
+import { Container } from "./controls/container";
+import { Control } from "./controls/control";
+import { Style } from "./style";
+import { Measure } from "./measure";
+import { Constants } from "@babylonjs/core/Engines/constants.js";
+import { Viewport } from "@babylonjs/core/Maths/math.viewport.js";
+import { Color3 } from "@babylonjs/core/Maths/math.color.js";
+import { WebRequest } from "@babylonjs/core/Misc/webRequest.js";
+import { RandomGUID } from "@babylonjs/core/Misc/guid.js";
+import { GetClass } from "@babylonjs/core/Misc/typeStore.js";
+/**
+ * Class used to create texture to support 2D GUI elements
+ * @see https://doc.babylonjs.com/how_to/gui
+ */
+var AdvancedDynamicTexture = /** @class */ (function (_super) {
+    __extends(AdvancedDynamicTexture, _super);
+    /**
+     * Creates a new AdvancedDynamicTexture
+     * @param name defines the name of the texture
+     * @param width defines the width of the texture
+     * @param height defines the height of the texture
+     * @param scene defines the hosting scene
+     * @param generateMipMaps defines a boolean indicating if mipmaps must be generated (false by default)
+     * @param samplingMode defines the texture sampling mode (Texture.NEAREST_SAMPLINGMODE by default)
+     * @param invertY defines if the texture needs to be inverted on the y axis during loading (true by default)
+     */
+    function AdvancedDynamicTexture(name, width, height, scene, generateMipMaps, samplingMode, invertY) {
+        if (width === void 0) { width = 0; }
+        if (height === void 0) { height = 0; }
+        if (generateMipMaps === void 0) { generateMipMaps = false; }
+        if (samplingMode === void 0) { samplingMode = Texture.NEAREST_SAMPLINGMODE; }
+        if (invertY === void 0) { invertY = true; }
+        var _this = _super.call(this, name, { width: width, height: height }, scene, generateMipMaps, samplingMode, Constants.TEXTUREFORMAT_RGBA, invertY) || this;
+        _this._isDirty = false;
+        /** @hidden */
+        _this._rootContainer = new Container("root");
+        /** @hidden */
+        _this._lastControlOver = {};
+        /** @hidden */
+        _this._lastControlDown = {};
+        /** @hidden */
+        _this._capturingControl = {};
+        /** @hidden */
+        _this._linkedControls = new Array();
+        _this._isFullscreen = false;
+        _this._fullscreenViewport = new Viewport(0, 0, 1, 1);
+        _this._idealWidth = 0;
+        _this._idealHeight = 0;
+        _this._useSmallestIdeal = false;
+        _this._renderAtIdealSize = false;
+        _this._blockNextFocusCheck = false;
+        _this._renderScale = 1;
+        _this._cursorChanged = false;
+        _this._defaultMousePointerId = 0;
+        /** @hidden */
+        _this._numLayoutCalls = 0;
+        /** @hidden */
+        _this._numRenderCalls = 0;
+        /**
+         * Define type to string to ensure compatibility across browsers
+         * Safari doesn't support DataTransfer constructor
+         */
+        _this._clipboardData = "";
+        /**
+         * Observable event triggered each time an clipboard event is received from the rendering canvas
+         */
+        _this.onClipboardObservable = new Observable();
+        /**
+         * Observable event triggered each time a pointer down is intercepted by a control
+         */
+        _this.onControlPickedObservable = new Observable();
+        /**
+         * Observable event triggered before layout is evaluated
+         */
+        _this.onBeginLayoutObservable = new Observable();
+        /**
+         * Observable event triggered after the layout was evaluated
+         */
+        _this.onEndLayoutObservable = new Observable();
+        /**
+         * Observable event triggered before the texture is rendered
+         */
+        _this.onBeginRenderObservable = new Observable();
+        /**
+         * Observable event triggered after the texture was rendered
+         */
+        _this.onEndRenderObservable = new Observable();
+        /**
+         * Gets or sets a boolean defining if alpha is stored as premultiplied
+         */
+        _this.premulAlpha = false;
+        /**
+         * Gets or sets a boolean indicating that the canvas must be reverted on Y when updating the texture
+         */
+        _this.applyYInversionOnUpdate = true;
+        /**
+         * If set to true, every scene render will trigger a pointer event for the GUI
+         * if it is linked to a mesh or has controls linked to a mesh. This will allow
+         * you to catch the pointer moving around the GUI due to camera or mesh movements,
+         * but it has a performance cost.
+         */
+        _this.checkPointerEveryFrame = false;
+        _this._useInvalidateRectOptimization = true;
+        // Invalidated rectangle which is the combination of all invalidated controls after they have been rotated into absolute position
+        _this._invalidatedRectangle = null;
+        _this._clearMeasure = new Measure(0, 0, 0, 0);
+        /**
+         * @param rawEvt
+         * @hidden
+         */
+        _this._onClipboardCopy = function (rawEvt) {
+            var evt = rawEvt;
+            var ev = new ClipboardInfo(ClipboardEventTypes.COPY, evt);
+            _this.onClipboardObservable.notifyObservers(ev);
+            evt.preventDefault();
+        };
+        /**
+         * @param rawEvt
+         * @hidden
+         */
+        _this._onClipboardCut = function (rawEvt) {
+            var evt = rawEvt;
+            var ev = new ClipboardInfo(ClipboardEventTypes.CUT, evt);
+            _this.onClipboardObservable.notifyObservers(ev);
+            evt.preventDefault();
+        };
+        /**
+         * @param rawEvt
+         * @hidden
+         */
+        _this._onClipboardPaste = function (rawEvt) {
+            var evt = rawEvt;
+            var ev = new ClipboardInfo(ClipboardEventTypes.PASTE, evt);
+            _this.onClipboardObservable.notifyObservers(ev);
+            evt.preventDefault();
+        };
+        scene = _this.getScene();
+        if (!scene || !_this._texture) {
+            return _this;
+        }
+        _this.applyYInversionOnUpdate = invertY;
+        _this._rootElement = scene.getEngine().getInputElement();
+        _this._renderObserver = scene.onBeforeCameraRenderObservable.add(function (camera) { return _this._checkUpdate(camera); });
+        _this._preKeyboardObserver = scene.onPreKeyboardObservable.add(function (info) {
+            if (!_this._focusedControl) {
+                return;
+            }
+            if (info.type === KeyboardEventTypes.KEYDOWN) {
+                _this._focusedControl.processKeyboard(info.event);
+            }
+            info.skipOnPointerObservable = true;
+        });
+        _this._rootContainer._link(_this);
+        _this.hasAlpha = true;
+        if (!width || !height) {
+            _this._resizeObserver = scene.getEngine().onResizeObservable.add(function () { return _this._onResize(); });
+            _this._onResize();
+        }
+        _this._texture.isReady = true;
+        return _this;
+    }
+    Object.defineProperty(AdvancedDynamicTexture.prototype, "numLayoutCalls", {
+        /** Gets the number of layout calls made the last time the ADT has been rendered */
+        get: function () {
+            return this._numLayoutCalls;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AdvancedDynamicTexture.prototype, "numRenderCalls", {
+        /** Gets the number of render calls made the last time the ADT has been rendered */
+        get: function () {
+            return this._numRenderCalls;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AdvancedDynamicTexture.prototype, "renderScale", {
+        /**
+         * Gets or sets a number used to scale rendering size (2 means that the texture will be twice bigger).
+         * Useful when you want more antialiasing
+         */
+        get: function () {
+            return this._renderScale;
+        },
+        set: function (value) {
+            if (value === this._renderScale) {
+                return;
+            }
+            this._renderScale = value;
+            this._onResize();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AdvancedDynamicTexture.prototype, "background", {
+        /** Gets or sets the background color */
+        get: function () {
+            return this._background;
+        },
+        set: function (value) {
+            if (this._background === value) {
+                return;
+            }
+            this._background = value;
+            this.markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AdvancedDynamicTexture.prototype, "idealWidth", {
+        /**
+         * Gets or sets the ideal width used to design controls.
+         * The GUI will then rescale everything accordingly
+         * @see https://doc.babylonjs.com/how_to/gui#adaptive-scaling
+         */
+        get: function () {
+            return this._idealWidth;
+        },
+        set: function (value) {
+            if (this._idealWidth === value) {
+                return;
+            }
+            this._idealWidth = value;
+            this.markAsDirty();
+            this._rootContainer._markAllAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AdvancedDynamicTexture.prototype, "idealHeight", {
+        /**
+         * Gets or sets the ideal height used to design controls.
+         * The GUI will then rescale everything accordingly
+         * @see https://doc.babylonjs.com/how_to/gui#adaptive-scaling
+         */
+        get: function () {
+            return this._idealHeight;
+        },
+        set: function (value) {
+            if (this._idealHeight === value) {
+                return;
+            }
+            this._idealHeight = value;
+            this.markAsDirty();
+            this._rootContainer._markAllAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AdvancedDynamicTexture.prototype, "useSmallestIdeal", {
+        /**
+         * Gets or sets a boolean indicating if the smallest ideal value must be used if idealWidth and idealHeight are both set
+         * @see https://doc.babylonjs.com/how_to/gui#adaptive-scaling
+         */
+        get: function () {
+            return this._useSmallestIdeal;
+        },
+        set: function (value) {
+            if (this._useSmallestIdeal === value) {
+                return;
+            }
+            this._useSmallestIdeal = value;
+            this.markAsDirty();
+            this._rootContainer._markAllAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AdvancedDynamicTexture.prototype, "renderAtIdealSize", {
+        /**
+         * Gets or sets a boolean indicating if adaptive scaling must be used
+         * @see https://doc.babylonjs.com/how_to/gui#adaptive-scaling
+         */
+        get: function () {
+            return this._renderAtIdealSize;
+        },
+        set: function (value) {
+            if (this._renderAtIdealSize === value) {
+                return;
+            }
+            this._renderAtIdealSize = value;
+            this._onResize();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AdvancedDynamicTexture.prototype, "idealRatio", {
+        /**
+         * Gets the ratio used when in "ideal mode"
+         * @see https://doc.babylonjs.com/how_to/gui#adaptive-scaling
+         * */
+        get: function () {
+            var rwidth = 0;
+            var rheight = 0;
+            if (this._idealWidth) {
+                rwidth = this.getSize().width / this._idealWidth;
+            }
+            if (this._idealHeight) {
+                rheight = this.getSize().height / this._idealHeight;
+            }
+            if (this._useSmallestIdeal && this._idealWidth && this._idealHeight) {
+                return window.innerWidth < window.innerHeight ? rwidth : rheight;
+            }
+            if (this._idealWidth) {
+                // horizontal
+                return rwidth;
+            }
+            if (this._idealHeight) {
+                // vertical
+                return rheight;
+            }
+            return 1;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AdvancedDynamicTexture.prototype, "layer", {
+        /**
+         * Gets the underlying layer used to render the texture when in fullscreen mode
+         */
+        get: function () {
+            return this._layerToDispose;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AdvancedDynamicTexture.prototype, "rootContainer", {
+        /**
+         * Gets the root container control
+         */
+        get: function () {
+            return this._rootContainer;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Returns an array containing the root container.
+     * This is mostly used to let the Inspector introspects the ADT
+     * @returns an array containing the rootContainer
+     */
+    AdvancedDynamicTexture.prototype.getChildren = function () {
+        return [this._rootContainer];
+    };
+    /**
+     * Will return all controls that are inside this texture
+     * @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
+     */
+    AdvancedDynamicTexture.prototype.getDescendants = function (directDescendantsOnly, predicate) {
+        return this._rootContainer.getDescendants(directDescendantsOnly, predicate);
+    };
+    /**
+     * Will return all controls with the given type name
+     * @param typeName defines the type name to search for
+     * @returns an array of all controls found
+     */
+    AdvancedDynamicTexture.prototype.getControlsByType = function (typeName) {
+        return this._rootContainer.getDescendants(false, function (control) { return control.typeName === typeName; });
+    };
+    /**
+     * Will return the first control with the given name
+     * @param name defines the name to search for
+     * @return the first control found or null
+     */
+    AdvancedDynamicTexture.prototype.getControlByName = function (name) {
+        return this._getControlByKey("name", name);
+    };
+    AdvancedDynamicTexture.prototype._getControlByKey = function (key, value) {
+        return this._rootContainer.getDescendants().find(function (control) { return control[key] === value; }) || null;
+    };
+    Object.defineProperty(AdvancedDynamicTexture.prototype, "focusedControl", {
+        /**
+         * Gets or sets the current focused control
+         */
+        get: function () {
+            return this._focusedControl;
+        },
+        set: function (control) {
+            if (this._focusedControl == control) {
+                return;
+            }
+            if (this._focusedControl) {
+                this._focusedControl.onBlur();
+            }
+            if (control) {
+                control.onFocus();
+            }
+            this._focusedControl = control;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AdvancedDynamicTexture.prototype, "isForeground", {
+        /**
+         * Gets or sets a boolean indicating if the texture must be rendered in background or foreground when in fullscreen mode
+         */
+        get: function () {
+            if (!this.layer) {
+                return true;
+            }
+            return !this.layer.isBackground;
+        },
+        set: function (value) {
+            if (!this.layer) {
+                return;
+            }
+            if (this.layer.isBackground === !value) {
+                return;
+            }
+            this.layer.isBackground = !value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AdvancedDynamicTexture.prototype, "clipboardData", {
+        /**
+         * Gets or set information about clipboardData
+         */
+        get: function () {
+            return this._clipboardData;
+        },
+        set: function (value) {
+            this._clipboardData = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Get the current class name of the texture useful for serialization or dynamic coding.
+     * @returns "AdvancedDynamicTexture"
+     */
+    AdvancedDynamicTexture.prototype.getClassName = function () {
+        return "AdvancedDynamicTexture";
+    };
+    /**
+     * Function used to execute a function on all controls
+     * @param func defines the function to execute
+     * @param container defines the container where controls belong. If null the root container will be used
+     */
+    AdvancedDynamicTexture.prototype.executeOnAllControls = function (func, container) {
+        if (!container) {
+            container = this._rootContainer;
+        }
+        func(container);
+        for (var _i = 0, _a = container.children; _i < _a.length; _i++) {
+            var child = _a[_i];
+            if (child.children) {
+                this.executeOnAllControls(func, child);
+                continue;
+            }
+            func(child);
+        }
+    };
+    Object.defineProperty(AdvancedDynamicTexture.prototype, "useInvalidateRectOptimization", {
+        /**
+         * Gets or sets a boolean indicating if the InvalidateRect optimization should be turned on
+         */
+        get: function () {
+            return this._useInvalidateRectOptimization;
+        },
+        set: function (value) {
+            this._useInvalidateRectOptimization = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Invalidates a rectangle area on the gui texture
+     * @param invalidMinX left most position of the rectangle to invalidate in the texture
+     * @param invalidMinY top most position of the rectangle to invalidate in the texture
+     * @param invalidMaxX right most position of the rectangle to invalidate in the texture
+     * @param invalidMaxY bottom most position of the rectangle to invalidate in the texture
+     */
+    AdvancedDynamicTexture.prototype.invalidateRect = function (invalidMinX, invalidMinY, invalidMaxX, invalidMaxY) {
+        if (!this._useInvalidateRectOptimization) {
+            return;
+        }
+        if (!this._invalidatedRectangle) {
+            this._invalidatedRectangle = new Measure(invalidMinX, invalidMinY, invalidMaxX - invalidMinX + 1, invalidMaxY - invalidMinY + 1);
+        }
+        else {
+            // Compute intersection
+            var maxX = Math.ceil(Math.max(this._invalidatedRectangle.left + this._invalidatedRectangle.width - 1, invalidMaxX));
+            var maxY = Math.ceil(Math.max(this._invalidatedRectangle.top + this._invalidatedRectangle.height - 1, invalidMaxY));
+            this._invalidatedRectangle.left = Math.floor(Math.min(this._invalidatedRectangle.left, invalidMinX));
+            this._invalidatedRectangle.top = Math.floor(Math.min(this._invalidatedRectangle.top, invalidMinY));
+            this._invalidatedRectangle.width = maxX - this._invalidatedRectangle.left + 1;
+            this._invalidatedRectangle.height = maxY - this._invalidatedRectangle.top + 1;
+        }
+    };
+    /**
+     * Marks the texture as dirty forcing a complete update
+     */
+    AdvancedDynamicTexture.prototype.markAsDirty = function () {
+        this._isDirty = true;
+    };
+    /**
+     * Helper function used to create a new style
+     * @returns a new style
+     * @see https://doc.babylonjs.com/how_to/gui#styles
+     */
+    AdvancedDynamicTexture.prototype.createStyle = function () {
+        return new Style(this);
+    };
+    /**
+     * Adds a new control to the root container
+     * @param control defines the control to add
+     * @returns the current texture
+     */
+    AdvancedDynamicTexture.prototype.addControl = function (control) {
+        this._rootContainer.addControl(control);
+        return this;
+    };
+    /**
+     * Removes a control from the root container
+     * @param control defines the control to remove
+     * @returns the current texture
+     */
+    AdvancedDynamicTexture.prototype.removeControl = function (control) {
+        this._rootContainer.removeControl(control);
+        return this;
+    };
+    /**
+     * Moves overlapped controls towards a position where it is not overlapping anymore.
+     * Please note that this method alters linkOffsetXInPixels and linkOffsetYInPixels.
+     * @param overlapGroup the overlap group which will be processed or undefined to process all overlap groups
+     * @param deltaStep the step size (speed) to reach the target non overlapping position (default 0.1)
+     * @param repelFactor how much is the control repelled by other controls
+     */
+    AdvancedDynamicTexture.prototype.moveToNonOverlappedPosition = function (overlapGroup, deltaStep, repelFactor) {
+        if (deltaStep === void 0) { deltaStep = 1; }
+        if (repelFactor === void 0) { repelFactor = 1; }
+        var controlsForGroup;
+        if (Array.isArray(overlapGroup)) {
+            controlsForGroup = overlapGroup;
+        }
+        else {
+            var descendants = this.getDescendants(true);
+            // get only the controls with an overlapGroup property set
+            // if the overlapGroup parameter is set, filter the controls and get only the controls belonging to that overlapGroup
+            controlsForGroup = overlapGroup === undefined ? descendants.filter(function (c) { return c.overlapGroup !== undefined; }) : descendants.filter(function (c) { return c.overlapGroup === overlapGroup; });
+        }
+        controlsForGroup.forEach(function (control1) {
+            var _a;
+            var velocity = Vector2.Zero();
+            var center = new Vector2(control1.centerX, control1.centerY);
+            controlsForGroup.forEach(function (control2) {
+                if (control1 !== control2 && AdvancedDynamicTexture._Overlaps(control1, control2)) {
+                    // if the two controls overlaps get a direction vector from one control's center to another control's center
+                    var diff = center.subtract(new Vector2(control2.centerX, control2.centerY));
+                    var diffLength = diff.length();
+                    if (diffLength > 0) {
+                        // calculate the velocity
+                        velocity = velocity.add(diff.normalize().scale(repelFactor / diffLength));
+                    }
+                }
+            });
+            if (velocity.length() > 0) {
+                // move the control along the direction vector away from the overlapping control
+                velocity = velocity.normalize().scale(deltaStep * ((_a = control1.overlapDeltaMultiplier) !== null && _a !== void 0 ? _a : 1));
+                control1.linkOffsetXInPixels += velocity.x;
+                control1.linkOffsetYInPixels += velocity.y;
+            }
+        });
+    };
+    /**
+     * Release all resources
+     */
+    AdvancedDynamicTexture.prototype.dispose = function () {
+        var scene = this.getScene();
+        if (!scene) {
+            return;
+        }
+        this._rootElement = null;
+        scene.onBeforeCameraRenderObservable.remove(this._renderObserver);
+        if (this._resizeObserver) {
+            scene.getEngine().onResizeObservable.remove(this._resizeObserver);
+        }
+        if (this._pointerMoveObserver) {
+            scene.onPrePointerObservable.remove(this._pointerMoveObserver);
+        }
+        if (this._sceneRenderObserver) {
+            scene.onBeforeRenderObservable.remove(this._sceneRenderObserver);
+        }
+        if (this._pointerObserver) {
+            scene.onPointerObservable.remove(this._pointerObserver);
+        }
+        if (this._preKeyboardObserver) {
+            scene.onPreKeyboardObservable.remove(this._preKeyboardObserver);
+        }
+        if (this._canvasPointerOutObserver) {
+            scene.getEngine().onCanvasPointerOutObservable.remove(this._canvasPointerOutObserver);
+        }
+        if (this._canvasBlurObserver) {
+            scene.getEngine().onCanvasBlurObservable.remove(this._canvasBlurObserver);
+        }
+        if (this._layerToDispose) {
+            this._layerToDispose.texture = null;
+            this._layerToDispose.dispose();
+            this._layerToDispose = null;
+        }
+        this._rootContainer.dispose();
+        this.onClipboardObservable.clear();
+        this.onControlPickedObservable.clear();
+        this.onBeginRenderObservable.clear();
+        this.onEndRenderObservable.clear();
+        this.onBeginLayoutObservable.clear();
+        this.onEndLayoutObservable.clear();
+        _super.prototype.dispose.call(this);
+    };
+    AdvancedDynamicTexture.prototype._onResize = function () {
+        var scene = this.getScene();
+        if (!scene) {
+            return;
+        }
+        // Check size
+        var engine = scene.getEngine();
+        var textureSize = this.getSize();
+        var renderWidth = engine.getRenderWidth() * this._renderScale;
+        var renderHeight = engine.getRenderHeight() * this._renderScale;
+        if (this._renderAtIdealSize) {
+            if (this._idealWidth) {
+                renderHeight = (renderHeight * this._idealWidth) / renderWidth;
+                renderWidth = this._idealWidth;
+            }
+            else if (this._idealHeight) {
+                renderWidth = (renderWidth * this._idealHeight) / renderHeight;
+                renderHeight = this._idealHeight;
+            }
+        }
+        if (textureSize.width !== renderWidth || textureSize.height !== renderHeight) {
+            this.scaleTo(renderWidth, renderHeight);
+            this.markAsDirty();
+            if (this._idealWidth || this._idealHeight) {
+                this._rootContainer._markAllAsDirty();
+            }
+        }
+        this.invalidateRect(0, 0, textureSize.width - 1, textureSize.height - 1);
+    };
+    /** @hidden */
+    AdvancedDynamicTexture.prototype._getGlobalViewport = function () {
+        var size = this.getSize();
+        var globalViewPort = this._fullscreenViewport.toGlobal(size.width, size.height);
+        var targetX = Math.round(globalViewPort.width * (1 / this.rootContainer.scaleX));
+        var targetY = Math.round(globalViewPort.height * (1 / this.rootContainer.scaleY));
+        globalViewPort.x += (globalViewPort.width - targetX) / 2;
+        globalViewPort.y += (globalViewPort.height - targetY) / 2;
+        globalViewPort.width = targetX;
+        globalViewPort.height = targetY;
+        return globalViewPort;
+    };
+    /**
+     * Get screen coordinates for a vector3
+     * @param position defines the position to project
+     * @param worldMatrix defines the world matrix to use
+     * @returns the projected position
+     */
+    AdvancedDynamicTexture.prototype.getProjectedPosition = function (position, worldMatrix) {
+        var result = this.getProjectedPositionWithZ(position, worldMatrix);
+        return new Vector2(result.x, result.y);
+    };
+    /**
+     * Get screen coordinates for a vector3
+     * @param position defines the position to project
+     * @param worldMatrix defines the world matrix to use
+     * @returns the projected position with Z
+     */
+    AdvancedDynamicTexture.prototype.getProjectedPositionWithZ = function (position, worldMatrix) {
+        var scene = this.getScene();
+        if (!scene) {
+            return Vector3.Zero();
+        }
+        var globalViewport = this._getGlobalViewport();
+        var projectedPosition = Vector3.Project(position, worldMatrix, scene.getTransformMatrix(), globalViewport);
+        return new Vector3(projectedPosition.x, projectedPosition.y, projectedPosition.z);
+    };
+    AdvancedDynamicTexture.prototype._checkUpdate = function (camera) {
+        if (this._layerToDispose) {
+            if ((camera.layerMask & this._layerToDispose.layerMask) === 0) {
+                return;
+            }
+        }
+        if (this._isFullscreen && this._linkedControls.length) {
+            var scene = this.getScene();
+            if (!scene) {
+                return;
+            }
+            var globalViewport = this._getGlobalViewport();
+            var _loop_1 = function (control) {
+                if (!control.isVisible) {
+                    return "continue";
+                }
+                var mesh = control._linkedMesh;
+                if (!mesh || mesh.isDisposed()) {
+                    Tools.SetImmediate(function () {
+                        control.linkWithMesh(null);
+                    });
+                    return "continue";
+                }
+                var position = mesh.getBoundingInfo ? mesh.getBoundingInfo().boundingSphere.center : Vector3.ZeroReadOnly;
+                var projectedPosition = Vector3.Project(position, mesh.getWorldMatrix(), scene.getTransformMatrix(), globalViewport);
+                if (projectedPosition.z < 0 || projectedPosition.z > 1) {
+                    control.notRenderable = true;
+                    return "continue";
+                }
+                control.notRenderable = false;
+                control._moveToProjectedPosition(projectedPosition);
+            };
+            for (var _i = 0, _a = this._linkedControls; _i < _a.length; _i++) {
+                var control = _a[_i];
+                _loop_1(control);
+            }
+        }
+        if (!this._isDirty && !this._rootContainer.isDirty) {
+            return;
+        }
+        this._isDirty = false;
+        this._render();
+        this.update(this.applyYInversionOnUpdate, this.premulAlpha, AdvancedDynamicTexture.AllowGPUOptimizations);
+    };
+    AdvancedDynamicTexture.prototype._render = function () {
+        var textureSize = this.getSize();
+        var renderWidth = textureSize.width;
+        var renderHeight = textureSize.height;
+        var context = this.getContext();
+        context.font = "18px Arial";
+        context.strokeStyle = "white";
+        // Layout
+        this.onBeginLayoutObservable.notifyObservers(this);
+        var measure = new Measure(0, 0, renderWidth, renderHeight);
+        this._numLayoutCalls = 0;
+        this._rootContainer._layout(measure, context);
+        this.onEndLayoutObservable.notifyObservers(this);
+        this._isDirty = false; // Restoring the dirty state that could have been set by controls during layout processing
+        // Clear
+        if (this._invalidatedRectangle) {
+            this._clearMeasure.copyFrom(this._invalidatedRectangle);
+        }
+        else {
+            this._clearMeasure.copyFromFloats(0, 0, renderWidth, renderHeight);
+        }
+        context.clearRect(this._clearMeasure.left, this._clearMeasure.top, this._clearMeasure.width, this._clearMeasure.height);
+        if (this._background) {
+            context.save();
+            context.fillStyle = this._background;
+            context.fillRect(this._clearMeasure.left, this._clearMeasure.top, this._clearMeasure.width, this._clearMeasure.height);
+            context.restore();
+        }
+        // Render
+        this.onBeginRenderObservable.notifyObservers(this);
+        this._numRenderCalls = 0;
+        this._rootContainer._render(context, this._invalidatedRectangle);
+        this.onEndRenderObservable.notifyObservers(this);
+        this._invalidatedRectangle = null;
+    };
+    /**
+     * @param cursor
+     * @hidden
+     */
+    AdvancedDynamicTexture.prototype._changeCursor = function (cursor) {
+        if (this._rootElement) {
+            this._rootElement.style.cursor = cursor;
+            this._cursorChanged = true;
+        }
+    };
+    /**
+     * @param control
+     * @param pointerId
+     * @hidden
+     */
+    AdvancedDynamicTexture.prototype._registerLastControlDown = function (control, pointerId) {
+        this._lastControlDown[pointerId] = control;
+        this.onControlPickedObservable.notifyObservers(control);
+    };
+    AdvancedDynamicTexture.prototype._doPicking = function (x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY) {
+        var scene = this.getScene();
+        if (!scene) {
+            return;
+        }
+        var engine = scene.getEngine();
+        var textureSize = this.getSize();
+        if (this._isFullscreen) {
+            var camera = scene.cameraToUseForPointers || scene.activeCamera;
+            if (!camera) {
+                return;
+            }
+            var viewport = camera.viewport;
+            x = x * (textureSize.width / (engine.getRenderWidth() * viewport.width));
+            y = y * (textureSize.height / (engine.getRenderHeight() * viewport.height));
+        }
+        if (this._capturingControl[pointerId]) {
+            this._capturingControl[pointerId]._processObservables(type, x, y, pi, pointerId, buttonIndex);
+            return;
+        }
+        this._cursorChanged = false;
+        if (!this._rootContainer._processPicking(x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY)) {
+            if (!scene.doNotHandleCursors) {
+                this._changeCursor("");
+            }
+            if (type === PointerEventTypes.POINTERMOVE) {
+                if (this._lastControlOver[pointerId]) {
+                    this._lastControlOver[pointerId]._onPointerOut(this._lastControlOver[pointerId], pi);
+                    delete this._lastControlOver[pointerId];
+                }
+            }
+        }
+        if (!this._cursorChanged && !scene.doNotHandleCursors) {
+            this._changeCursor("");
+        }
+        this._manageFocus();
+    };
+    /**
+     * @param list
+     * @param control
+     * @hidden
+     */
+    AdvancedDynamicTexture.prototype._cleanControlAfterRemovalFromList = function (list, control) {
+        for (var pointerId in list) {
+            if (!Object.prototype.hasOwnProperty.call(list, pointerId)) {
+                continue;
+            }
+            var lastControlOver = list[pointerId];
+            if (lastControlOver === control) {
+                delete list[pointerId];
+            }
+        }
+    };
+    /**
+     * @param control
+     * @hidden
+     */
+    AdvancedDynamicTexture.prototype._cleanControlAfterRemoval = function (control) {
+        this._cleanControlAfterRemovalFromList(this._lastControlDown, control);
+        this._cleanControlAfterRemovalFromList(this._lastControlOver, control);
+    };
+    AdvancedDynamicTexture.prototype._translateToPicking = function (scene, tempViewport, pi) {
+        var camera = scene.cameraToUseForPointers || scene.activeCamera;
+        var engine = scene.getEngine();
+        var originalCameraToUseForPointers = scene.cameraToUseForPointers;
+        if (!camera) {
+            tempViewport.x = 0;
+            tempViewport.y = 0;
+            tempViewport.width = engine.getRenderWidth();
+            tempViewport.height = engine.getRenderHeight();
+        }
+        else {
+            if (camera.rigCameras.length) {
+                // rig camera - we need to find the camera to use for this event
+                var rigViewport_1 = new Viewport(0, 0, 1, 1);
+                camera.rigCameras.forEach(function (rigCamera) {
+                    // generate the viewport of this camera
+                    rigCamera.viewport.toGlobalToRef(engine.getRenderWidth(), engine.getRenderHeight(), rigViewport_1);
+                    var x = scene.pointerX / engine.getHardwareScalingLevel() - rigViewport_1.x;
+                    var y = scene.pointerY / engine.getHardwareScalingLevel() - (engine.getRenderHeight() - rigViewport_1.y - rigViewport_1.height);
+                    // check if the pointer is in the camera's viewport
+                    if (x < 0 || y < 0 || x > rigViewport_1.width || y > rigViewport_1.height) {
+                        // out of viewport - don't use this camera
+                        return;
+                    }
+                    // set the camera to use for pointers until this pointer loop is over
+                    scene.cameraToUseForPointers = rigCamera;
+                    // set the viewport
+                    tempViewport.x = rigViewport_1.x;
+                    tempViewport.y = rigViewport_1.y;
+                    tempViewport.width = rigViewport_1.width;
+                    tempViewport.height = rigViewport_1.height;
+                });
+            }
+            else {
+                camera.viewport.toGlobalToRef(engine.getRenderWidth(), engine.getRenderHeight(), tempViewport);
+            }
+        }
+        var x = scene.pointerX / engine.getHardwareScalingLevel() - tempViewport.x;
+        var y = scene.pointerY / engine.getHardwareScalingLevel() - (engine.getRenderHeight() - tempViewport.y - tempViewport.height);
+        this._shouldBlockPointer = false;
+        // Do picking modifies _shouldBlockPointer
+        if (pi) {
+            var pointerId = pi.event.pointerId || this._defaultMousePointerId;
+            this._doPicking(x, y, pi, pi.type, pointerId, pi.event.button, pi.event.deltaX, pi.event.deltaY);
+            // Avoid overwriting a true skipOnPointerObservable to false
+            if (this._shouldBlockPointer) {
+                pi.skipOnPointerObservable = this._shouldBlockPointer;
+            }
+        }
+        else {
+            this._doPicking(x, y, null, PointerEventTypes.POINTERMOVE, this._defaultMousePointerId, 0);
+        }
+        // if overridden by a rig camera - reset back to the original value
+        scene.cameraToUseForPointers = originalCameraToUseForPointers;
+    };
+    /** Attach to all scene events required to support pointer events */
+    AdvancedDynamicTexture.prototype.attach = function () {
+        var _this = this;
+        var scene = this.getScene();
+        if (!scene) {
+            return;
+        }
+        var tempViewport = new Viewport(0, 0, 0, 0);
+        this._pointerMoveObserver = scene.onPrePointerObservable.add(function (pi) {
+            if (scene.isPointerCaptured(pi.event.pointerId)) {
+                return;
+            }
+            if (pi.type !== PointerEventTypes.POINTERMOVE &&
+                pi.type !== PointerEventTypes.POINTERUP &&
+                pi.type !== PointerEventTypes.POINTERDOWN &&
+                pi.type !== PointerEventTypes.POINTERWHEEL) {
+                return;
+            }
+            if (pi.type === PointerEventTypes.POINTERMOVE && pi.event.pointerId) {
+                _this._defaultMousePointerId = pi.event.pointerId; // This is required to make sure we have the correct pointer ID for wheel
+            }
+            _this._translateToPicking(scene, tempViewport, pi);
+        });
+        this._attachPickingToSceneRender(scene, function () { return _this._translateToPicking(scene, tempViewport, null); }, false);
+        this._attachToOnPointerOut(scene);
+        this._attachToOnBlur(scene);
+    };
+    /**
+     * Register the clipboard Events onto the canvas
+     */
+    AdvancedDynamicTexture.prototype.registerClipboardEvents = function () {
+        self.addEventListener("copy", this._onClipboardCopy, false);
+        self.addEventListener("cut", this._onClipboardCut, false);
+        self.addEventListener("paste", this._onClipboardPaste, false);
+    };
+    /**
+     * Unregister the clipboard Events from the canvas
+     */
+    AdvancedDynamicTexture.prototype.unRegisterClipboardEvents = function () {
+        self.removeEventListener("copy", this._onClipboardCopy);
+        self.removeEventListener("cut", this._onClipboardCut);
+        self.removeEventListener("paste", this._onClipboardPaste);
+    };
+    /**
+     * Connect the texture to a hosting mesh to enable interactions
+     * @param mesh defines the mesh to attach to
+     * @param supportPointerMove defines a boolean indicating if pointer move events must be catched as well
+     */
+    AdvancedDynamicTexture.prototype.attachToMesh = function (mesh, supportPointerMove) {
+        var _this = this;
+        if (supportPointerMove === void 0) { supportPointerMove = true; }
+        var scene = this.getScene();
+        if (!scene) {
+            return;
+        }
+        this._pointerObserver = scene.onPointerObservable.add(function (pi) {
+            if (pi.type !== PointerEventTypes.POINTERMOVE &&
+                pi.type !== PointerEventTypes.POINTERUP &&
+                pi.type !== PointerEventTypes.POINTERDOWN &&
+                pi.type !== PointerEventTypes.POINTERWHEEL) {
+                return;
+            }
+            if (pi.type === PointerEventTypes.POINTERMOVE && pi.event.pointerId) {
+                _this._defaultMousePointerId = pi.event.pointerId; // This is required to make sure we have the correct pointer ID for wheel
+            }
+            var pointerId = pi.event.pointerId || _this._defaultMousePointerId;
+            if (pi.pickInfo && pi.pickInfo.hit && pi.pickInfo.pickedMesh === mesh) {
+                var uv = pi.pickInfo.getTextureCoordinates();
+                if (uv) {
+                    var size = _this.getSize();
+                    _this._doPicking(uv.x * size.width, (_this.applyYInversionOnUpdate ? 1.0 - uv.y : uv.y) * size.height, pi, pi.type, pointerId, pi.event.button, pi.event.deltaX, pi.event.deltaY);
+                }
+            }
+            else if (pi.type === PointerEventTypes.POINTERUP) {
+                if (_this._lastControlDown[pointerId]) {
+                    _this._lastControlDown[pointerId]._forcePointerUp(pointerId);
+                }
+                delete _this._lastControlDown[pointerId];
+                if (_this.focusedControl) {
+                    var friendlyControls = _this.focusedControl.keepsFocusWith();
+                    var canMoveFocus = true;
+                    if (friendlyControls) {
+                        for (var _i = 0, friendlyControls_1 = friendlyControls; _i < friendlyControls_1.length; _i++) {
+                            var control = friendlyControls_1[_i];
+                            // Same host, no need to keep the focus
+                            if (_this === control._host) {
+                                continue;
+                            }
+                            // Different hosts
+                            var otherHost = control._host;
+                            if (otherHost._lastControlOver[pointerId] && otherHost._lastControlOver[pointerId].isAscendant(control)) {
+                                canMoveFocus = false;
+                                break;
+                            }
+                        }
+                    }
+                    if (canMoveFocus) {
+                        _this.focusedControl = null;
+                    }
+                }
+            }
+            else if (pi.type === PointerEventTypes.POINTERMOVE) {
+                if (_this._lastControlOver[pointerId]) {
+                    _this._lastControlOver[pointerId]._onPointerOut(_this._lastControlOver[pointerId], pi, true);
+                }
+                delete _this._lastControlOver[pointerId];
+            }
+        });
+        mesh.enablePointerMoveEvents = supportPointerMove;
+        this._attachPickingToSceneRender(scene, function () {
+            var pointerId = _this._defaultMousePointerId;
+            var pick = scene === null || scene === void 0 ? void 0 : scene.pick(scene.pointerX, scene.pointerY);
+            if (pick && pick.hit && pick.pickedMesh === mesh) {
+                var uv = pick.getTextureCoordinates();
+                if (uv) {
+                    var size = _this.getSize();
+                    _this._doPicking(uv.x * size.width, (_this.applyYInversionOnUpdate ? 1.0 - uv.y : uv.y) * size.height, null, PointerEventTypes.POINTERMOVE, pointerId, 0);
+                }
+            }
+            else {
+                if (_this._lastControlOver[pointerId]) {
+                    _this._lastControlOver[pointerId]._onPointerOut(_this._lastControlOver[pointerId], null, true);
+                }
+                delete _this._lastControlOver[pointerId];
+            }
+        }, true);
+        this._attachToOnPointerOut(scene);
+        this._attachToOnBlur(scene);
+    };
+    /**
+     * Move the focus to a specific control
+     * @param control defines the control which will receive the focus
+     */
+    AdvancedDynamicTexture.prototype.moveFocusToControl = function (control) {
+        this.focusedControl = control;
+        this._lastPickedControl = control;
+        this._blockNextFocusCheck = true;
+    };
+    AdvancedDynamicTexture.prototype._manageFocus = function () {
+        if (this._blockNextFocusCheck) {
+            this._blockNextFocusCheck = false;
+            this._lastPickedControl = this._focusedControl;
+            return;
+        }
+        // Focus management
+        if (this._focusedControl) {
+            if (this._focusedControl !== this._lastPickedControl) {
+                if (this._lastPickedControl.isFocusInvisible) {
+                    return;
+                }
+                this.focusedControl = null;
+            }
+        }
+    };
+    AdvancedDynamicTexture.prototype._attachPickingToSceneRender = function (scene, pickFunction, forcePicking) {
+        var _this = this;
+        this._sceneRenderObserver = scene.onBeforeRenderObservable.add(function () {
+            if (!_this.checkPointerEveryFrame) {
+                return;
+            }
+            if (_this._linkedControls.length > 0 || forcePicking) {
+                pickFunction();
+            }
+        });
+    };
+    AdvancedDynamicTexture.prototype._attachToOnPointerOut = function (scene) {
+        var _this = this;
+        this._canvasPointerOutObserver = scene.getEngine().onCanvasPointerOutObservable.add(function (pointerEvent) {
+            if (_this._lastControlOver[pointerEvent.pointerId]) {
+                _this._lastControlOver[pointerEvent.pointerId]._onPointerOut(_this._lastControlOver[pointerEvent.pointerId], null);
+            }
+            delete _this._lastControlOver[pointerEvent.pointerId];
+            if (_this._lastControlDown[pointerEvent.pointerId] && _this._lastControlDown[pointerEvent.pointerId] !== _this._capturingControl[pointerEvent.pointerId]) {
+                _this._lastControlDown[pointerEvent.pointerId]._forcePointerUp();
+                delete _this._lastControlDown[pointerEvent.pointerId];
+            }
+        });
+    };
+    AdvancedDynamicTexture.prototype._attachToOnBlur = function (scene) {
+        var _this = this;
+        this._canvasBlurObserver = scene.getEngine().onCanvasBlurObservable.add(function () {
+            Object.entries(_this._lastControlDown).forEach(function (_a) {
+                var value = _a[1];
+                value._onCanvasBlur();
+            });
+            _this.focusedControl = null;
+            _this._lastControlDown = {};
+        });
+    };
+    /**
+     * Serializes the entire GUI system
+     * @returns an object with the JSON serialized data
+     */
+    AdvancedDynamicTexture.prototype.serializeContent = function () {
+        var size = this.getSize();
+        var serializationObject = {
+            root: {},
+            width: size.width,
+            height: size.height,
+        };
+        this._rootContainer.serialize(serializationObject.root);
+        return serializationObject;
+    };
+    /**
+     * Recreate the content of the ADT from a JSON object
+     * @param serializedObject define the JSON serialized object to restore from
+     * @param scaleToSize defines whether to scale to texture to the saved size
+     */
+    AdvancedDynamicTexture.prototype.parseContent = function (serializedObject, scaleToSize) {
+        this._rootContainer = Control.Parse(serializedObject.root, this);
+        if (scaleToSize) {
+            var width = serializedObject.width;
+            var height = serializedObject.height;
+            if (typeof width === "number" && typeof height === "number" && width >= 0 && height >= 0) {
+                this.scaleTo(width, height);
+            }
+            else {
+                // scales the GUI to a default size if none was available in the serialized content
+                this.scaleTo(1920, 1080);
+            }
+        }
+    };
+    /**
+     * Recreate the content of the ADT from a snippet saved by the GUI editor
+     * @param snippetId defines the snippet to load
+     * @param scaleToSize defines whether to scale to texture to the saved size
+     * @returns a promise that will resolve on success
+     */
+    AdvancedDynamicTexture.prototype.parseFromSnippetAsync = function (snippetId, scaleToSize) {
+        var _this = this;
+        if (snippetId === "_BLANK") {
+            return Promise.resolve();
+        }
+        return new Promise(function (resolve, reject) {
+            var request = new WebRequest();
+            request.addEventListener("readystatechange", function () {
+                if (request.readyState == 4) {
+                    if (request.status == 200) {
+                        var snippet = JSON.parse(JSON.parse(request.responseText).jsonPayload);
+                        var serializationObject = JSON.parse(snippet.gui);
+                        _this.parseContent(serializationObject, scaleToSize);
+                        _this.snippetId = snippetId;
+                        resolve();
+                    }
+                    else {
+                        reject("Unable to load the snippet " + snippetId);
+                    }
+                }
+            });
+            request.open("GET", AdvancedDynamicTexture.SnippetUrl + "/" + snippetId.replace(/#/g, "/"));
+            request.send();
+        });
+    };
+    /**
+     * Recreate the content of the ADT from a url json
+     * @param url defines the url to load
+     * @param scaleToSize defines whether to scale to texture to the saved size
+     * @returns a promise that will resolve on success
+     */
+    AdvancedDynamicTexture.prototype.parseFromURLAsync = function (url, scaleToSize) {
+        var _this = this;
+        if (url === "") {
+            return Promise.resolve();
+        }
+        return new Promise(function (resolve, reject) {
+            var request = new WebRequest();
+            request.addEventListener("readystatechange", function () {
+                if (request.readyState == 4) {
+                    if (request.status == 200) {
+                        var gui = request.responseText;
+                        var serializationObject = JSON.parse(gui);
+                        _this.parseContent(serializationObject, scaleToSize);
+                        resolve();
+                    }
+                    else {
+                        reject("Unable to load");
+                    }
+                }
+            });
+            request.open("GET", url);
+            request.send();
+        });
+    };
+    // Statics
+    /**
+     * Compares two rectangle based controls for pixel overlap
+     * @param control1 The first control to compare
+     * @param control2 The second control to compare
+     * @returns true if overlaps, otherwise false
+     */
+    AdvancedDynamicTexture._Overlaps = function (control1, control2) {
+        return !(control1.centerX > control2.centerX + control2.widthInPixels ||
+            control1.centerX + control1.widthInPixels < control2.centerX ||
+            control1.centerY + control1.heightInPixels < control2.centerY ||
+            control1.centerY > control2.centerY + control2.heightInPixels);
+    };
+    /**
+     * Creates a new AdvancedDynamicTexture in projected mode (ie. attached to a mesh)
+     * @param mesh defines the mesh which will receive the texture
+     * @param width defines the texture width (1024 by default)
+     * @param height defines the texture height (1024 by default)
+     * @param supportPointerMove defines a boolean indicating if the texture must capture move events (true by default)
+     * @param onlyAlphaTesting defines a boolean indicating that alpha blending will not be used (only alpha testing) (false by default)
+     * @param invertY defines if the texture needs to be inverted on the y axis during loading (true by default)
+     * @param materialSetupCallback defines a custom way of creating and setting up the material on the mesh
+     * @returns a new AdvancedDynamicTexture
+     */
+    AdvancedDynamicTexture.CreateForMesh = function (mesh, width, height, supportPointerMove, onlyAlphaTesting, invertY, materialSetupCallback) {
+        if (width === void 0) { width = 1024; }
+        if (height === void 0) { height = 1024; }
+        if (supportPointerMove === void 0) { supportPointerMove = true; }
+        if (onlyAlphaTesting === void 0) { onlyAlphaTesting = false; }
+        if (materialSetupCallback === void 0) { materialSetupCallback = this._CreateMaterial; }
+        // use a unique ID in name so serialization will work even if you create two ADTs for a single mesh
+        var uniqueId = RandomGUID();
+        var result = new AdvancedDynamicTexture("AdvancedDynamicTexture for ".concat(mesh.name, " [").concat(uniqueId, "]"), width, height, mesh.getScene(), true, Texture.TRILINEAR_SAMPLINGMODE, invertY);
+        materialSetupCallback(mesh, uniqueId, result, onlyAlphaTesting);
+        result.attachToMesh(mesh, supportPointerMove);
+        return result;
+    };
+    AdvancedDynamicTexture._CreateMaterial = function (mesh, uniqueId, texture, onlyAlphaTesting) {
+        var internalClassType = GetClass("BABYLON.StandardMaterial");
+        if (!internalClassType) {
+            throw "StandardMaterial needs to be imported before as it contains a side-effect required by your code.";
+        }
+        var material = new internalClassType("AdvancedDynamicTextureMaterial for ".concat(mesh.name, " [").concat(uniqueId, "]"), mesh.getScene());
+        material.backFaceCulling = false;
+        material.diffuseColor = Color3.Black();
+        material.specularColor = Color3.Black();
+        if (onlyAlphaTesting) {
+            material.diffuseTexture = texture;
+            material.emissiveTexture = texture;
+            texture.hasAlpha = true;
+        }
+        else {
+            material.emissiveTexture = texture;
+            material.opacityTexture = texture;
+        }
+        mesh.material = material;
+    };
+    /**
+     * Creates a new AdvancedDynamicTexture in projected mode (ie. attached to a mesh) BUT do not create a new material for the mesh. You will be responsible for connecting the texture
+     * @param mesh defines the mesh which will receive the texture
+     * @param width defines the texture width (1024 by default)
+     * @param height defines the texture height (1024 by default)
+     * @param supportPointerMove defines a boolean indicating if the texture must capture move events (true by default)
+     * @param invertY defines if the texture needs to be inverted on the y axis during loading (true by default)
+     * @returns a new AdvancedDynamicTexture
+     */
+    AdvancedDynamicTexture.CreateForMeshTexture = function (mesh, width, height, supportPointerMove, invertY) {
+        if (width === void 0) { width = 1024; }
+        if (height === void 0) { height = 1024; }
+        if (supportPointerMove === void 0) { supportPointerMove = true; }
+        var result = new AdvancedDynamicTexture(mesh.name + " AdvancedDynamicTexture", width, height, mesh.getScene(), true, Texture.TRILINEAR_SAMPLINGMODE, invertY);
+        result.attachToMesh(mesh, supportPointerMove);
+        return result;
+    };
+    /**
+     * Creates a new AdvancedDynamicTexture in fullscreen mode.
+     * In this mode the texture will rely on a layer for its rendering.
+     * This allows it to be treated like any other layer.
+     * As such, if you have a multi camera setup, you can set the layerMask on the GUI as well.
+     * LayerMask is set through advancedTexture.layer.layerMask
+     * @param name defines name for the texture
+     * @param foreground defines a boolean indicating if the texture must be rendered in foreground (default is true)
+     * @param scene defines the hosting scene
+     * @param sampling defines the texture sampling mode (Texture.BILINEAR_SAMPLINGMODE by default)
+     * @param adaptiveScaling defines whether to automatically scale root to match hardwarescaling (false by default)
+     * @returns a new AdvancedDynamicTexture
+     */
+    AdvancedDynamicTexture.CreateFullscreenUI = function (name, foreground, scene, sampling, adaptiveScaling) {
+        if (foreground === void 0) { foreground = true; }
+        if (scene === void 0) { scene = null; }
+        if (sampling === void 0) { sampling = Texture.BILINEAR_SAMPLINGMODE; }
+        if (adaptiveScaling === void 0) { adaptiveScaling = false; }
+        var result = new AdvancedDynamicTexture(name, 0, 0, scene, false, sampling);
+        // Display
+        var resultScene = result.getScene();
+        var layer = new Layer(name + "_layer", null, resultScene, !foreground);
+        layer.texture = result;
+        result._layerToDispose = layer;
+        result._isFullscreen = true;
+        if (adaptiveScaling && resultScene) {
+            var newScale = 1 / resultScene.getEngine().getHardwareScalingLevel();
+            result._rootContainer.scaleX = newScale;
+            result._rootContainer.scaleY = newScale;
+        }
+        // Attach
+        result.attach();
+        return result;
+    };
+    /**
+     * Scales the texture
+     * @param ratio the scale factor to apply to both width and height
+     */
+    AdvancedDynamicTexture.prototype.scale = function (ratio) {
+        _super.prototype.scale.call(this, ratio);
+        this.markAsDirty();
+    };
+    /**
+     * Resizes the texture
+     * @param width the new width
+     * @param height the new height
+     */
+    AdvancedDynamicTexture.prototype.scaleTo = function (width, height) {
+        _super.prototype.scaleTo.call(this, width, height);
+        this.markAsDirty();
+    };
+    /** Define the Uurl to load snippets */
+    AdvancedDynamicTexture.SnippetUrl = "https://snippet.babylonjs.com";
+    /** Indicates if some optimizations can be performed in GUI GPU management (the downside is additional memory/GPU texture memory used) */
+    AdvancedDynamicTexture.AllowGPUOptimizations = true;
+    return AdvancedDynamicTexture;
+}(DynamicTexture));
+export { AdvancedDynamicTexture };
 //# sourceMappingURL=advancedDynamicTexture.js.map