@babylonjs/gui 5.0.0-alpha.9 → 5.0.0-beta.4

package/2D/advancedDynamicTexture.js

@@ -1,43 +1,45 @@
 import { __extends } from "tslib";
-import { Observable } from "@babylonjs/core/Misc/observable";
-import { Vector2, Vector3 } from "@babylonjs/core/Maths/math.vector";
-import { Tools } from "@babylonjs/core/Misc/tools";
-import { PointerEventTypes } from '@babylonjs/core/Events/pointerEvents';
-import { ClipboardEventTypes, ClipboardInfo } from "@babylonjs/core/Events/clipboardEvents";
-import { KeyboardEventTypes } from "@babylonjs/core/Events/keyboardEvents";
-import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
-import { Texture } from "@babylonjs/core/Materials/Textures/texture";
-import { DynamicTexture } from "@babylonjs/core/Materials/Textures/dynamicTexture";
-import { Layer } from "@babylonjs/core/Layers/layer";
-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';
-import { Viewport } from '@babylonjs/core/Maths/math.viewport';
-import { Color3 } from '@babylonjs/core/Maths/math.color';
-import { WebRequest } from "@babylonjs/core/Misc/webRequest";
+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
-*/
+ * 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)
-   */
+     * 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 */
@@ -65,37 +67,37 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         /** @hidden */
         _this._numRenderCalls = 0;
         /**
-        * Define type to string to ensure compatibility across browsers
-        * Safari doesn't support DataTransfer constructor
-        */
+         * 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
-        */
+         * 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
-        */
+         * Observable event triggered each time a pointer down is intercepted by a control
+         */
         _this.onControlPickedObservable = new Observable();
         /**
-        * Observable event triggered before layout is evaluated
-        */
+         * Observable event triggered before layout is evaluated
+         */
         _this.onBeginLayoutObservable = new Observable();
         /**
-        * Observable event triggered after the layout was evaluated
-        */
+         * Observable event triggered after the layout was evaluated
+         */
         _this.onEndLayoutObservable = new Observable();
         /**
-        * Observable event triggered before the texture is rendered
-        */
+         * Observable event triggered before the texture is rendered
+         */
         _this.onBeginRenderObservable = new Observable();
         /**
-        * Observable event triggered after the texture was rendered
-        */
+         * Observable event triggered after the texture was rendered
+         */
         _this.onEndRenderObservable = new Observable();
         /**
-        * Gets or sets a boolean defining if alpha is stored as premultiplied
-        */
+         * 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
@@ -130,6 +132,7 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         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) {
@@ -168,9 +171,9 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
     });
     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
-        */
+         * 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;
         },
@@ -201,10 +204,10 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
     });
     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
-        */
+         * 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;
         },
@@ -221,10 +224,10 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
     });
     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
-        */
+         * 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;
         },
@@ -241,9 +244,9 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
     });
     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
-        */
+         * 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;
         },
@@ -260,9 +263,9 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
     });
     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
-        */
+         * 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;
         },
@@ -279,24 +282,26 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
     Object.defineProperty(AdvancedDynamicTexture.prototype, "idealRatio", {
         /**
          * Gets the ratio used when in "ideal mode"
-        * @see https://doc.babylonjs.com/how_to/gui#adaptive-scaling
+         * @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;
+                rwidth = this.getSize().width / this._idealWidth;
             }
             if (this._idealHeight) {
-                rheight = (this.getSize().height) / 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
+            if (this._idealWidth) {
+                // horizontal
                 return rwidth;
             }
-            if (this._idealHeight) { // vertical
+            if (this._idealHeight) {
+                // vertical
                 return rheight;
             }
             return 1;
@@ -306,8 +311,8 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
     });
     Object.defineProperty(AdvancedDynamicTexture.prototype, "layer", {
         /**
-        * Gets the underlying layer used to render the texture when in fullscreen mode
-        */
+         * Gets the underlying layer used to render the texture when in fullscreen mode
+         */
         get: function () {
             return this._layerToDispose;
         },
@@ -316,8 +321,8 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
     });
     Object.defineProperty(AdvancedDynamicTexture.prototype, "rootContainer", {
         /**
-        * Gets the root container control
-        */
+         * Gets the root container control
+         */
         get: function () {
             return this._rootContainer;
         },
@@ -325,26 +330,45 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         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
-    */
+     * 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
-    */
+     * 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
-        */
+         * Gets or sets the current focused control
+         */
         get: function () {
             return this._focusedControl;
         },
@@ -365,13 +389,13 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
     });
     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
-        */
+         * 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);
+            return !this.layer.isBackground;
         },
         set: function (value) {
             if (!this.layer) {
@@ -387,8 +411,8 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
     });
     Object.defineProperty(AdvancedDynamicTexture.prototype, "clipboardData", {
         /**
-        * Gets or set information about clipboardData
-        */
+         * Gets or set information about clipboardData
+         */
         get: function () {
             return this._clipboardData;
         },
@@ -399,17 +423,17 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         configurable: true
     });
     /**
-    * Get the current class name of the texture useful for serialization or dynamic coding.
-    * @returns "AdvancedDynamicTexture"
-    */
+     * 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
-    */
+     * 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;
@@ -462,40 +486,83 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         }
     };
     /**
-    * Marks the texture as dirty forcing a complete update
-    */
+     * 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
-    */
+     * 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
-    */
+     * 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
-    */
+     * 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;
     };
     /**
-    * Release all resources
-    */
+     * 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) {
@@ -565,40 +632,40 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         this.invalidateRect(0, 0, textureSize.width - 1, textureSize.height - 1);
     };
     /** @hidden */
-    AdvancedDynamicTexture.prototype._getGlobalViewport = function (scene) {
-        var engine = scene.getEngine();
-        return this._fullscreenViewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight());
+    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
-    */
+     * 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 scene = this.getScene();
-        if (!scene) {
-            return Vector2.Zero();
-        }
-        var globalViewport = this._getGlobalViewport(scene);
-        var projectedPosition = Vector3.Project(position, worldMatrix, scene.getTransformMatrix(), globalViewport);
-        projectedPosition.scaleInPlace(this.renderScale);
-        return new Vector2(projectedPosition.x, projectedPosition.y);
+        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
-    */
+     * 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(scene);
+        var globalViewport = this._getGlobalViewport();
         var projectedPosition = Vector3.Project(position, worldMatrix, scene.getTransformMatrix(), globalViewport);
-        projectedPosition.scaleInPlace(this.renderScale);
         return new Vector3(projectedPosition.x, projectedPosition.y, projectedPosition.z);
     };
     AdvancedDynamicTexture.prototype._checkUpdate = function (camera) {
@@ -612,7 +679,7 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
             if (!scene) {
                 return;
             }
-            var globalViewport = this._getGlobalViewport(scene);
+            var globalViewport = this._getGlobalViewport();
             var _loop_1 = function (control) {
                 if (!control.isVisible) {
                     return "continue";
@@ -631,11 +698,8 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
                     return "continue";
                 }
                 control.notRenderable = false;
-                // Account for RenderScale.
-                projectedPosition.scaleInPlace(this_1.renderScale);
                 control._moveToProjectedPosition(projectedPosition);
             };
-            var this_1 = this;
             for (var _i = 0, _a = this._linkedControls; _i < _a.length; _i++) {
                 var control = _a[_i];
                 _loop_1(control);
@@ -646,7 +710,7 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         }
         this._isDirty = false;
         this._render();
-        this.update(this.applyYInversionOnUpdate, this.premulAlpha);
+        this.update(this.applyYInversionOnUpdate, this.premulAlpha, AdvancedDynamicTexture.AllowGPUOptimizations);
     };
     AdvancedDynamicTexture.prototype._render = function () {
         var textureSize = this.getSize();
@@ -704,6 +768,9 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         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));
@@ -714,7 +781,9 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         }
         this._cursorChanged = false;
         if (!this._rootContainer._processPicking(x, y, pi, type, pointerId, buttonIndex, deltaX, deltaY)) {
-            this._changeCursor("");
+            if (!scene.doNotHandleCursors) {
+                this._changeCursor("");
+            }
             if (type === PointerEventTypes.POINTERMOVE) {
                 if (this._lastControlOver[pointerId]) {
                     this._lastControlOver[pointerId]._onPointerOut(this._lastControlOver[pointerId], pi);
@@ -722,7 +791,7 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
                 }
             }
         }
-        if (!this._cursorChanged) {
+        if (!this._cursorChanged && !scene.doNotHandleCursors) {
             this._changeCursor("");
         }
         this._manageFocus();
@@ -753,16 +822,13 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         }
         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) {
+            if (scene.isPointerCaptured(pi.event.pointerId)) {
                 return;
             }
-            if (!scene) {
+            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) {
@@ -770,6 +836,7 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
             }
             var camera = scene.cameraToUseForPointers || scene.activeCamera;
             var engine = scene.getEngine();
+            var originalCameraToUseForPointers = scene.cameraToUseForPointers;
             if (!camera) {
                 tempViewport.x = 0;
                 tempViewport.y = 0;
@@ -777,7 +844,31 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
                 tempViewport.height = engine.getRenderHeight();
             }
             else {
-                camera.viewport.toGlobalToRef(engine.getRenderWidth(), engine.getRenderHeight(), tempViewport);
+                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);
@@ -789,13 +880,15 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
             if (_this._shouldBlockPointer) {
                 pi.skipOnPointerObservable = _this._shouldBlockPointer;
             }
+            // if overridden by a rig camera - reset back to the original value
+            scene.cameraToUseForPointers = originalCameraToUseForPointers;
         });
         this._attachToOnPointerOut(scene);
         this._attachToOnBlur(scene);
     };
     /**
-    * Register the clipboard Events onto the canvas
-    */
+     * Register the clipboard Events onto the canvas
+     */
     AdvancedDynamicTexture.prototype.registerClipboardEvents = function () {
         self.addEventListener("copy", this.onClipboardCopy, false);
         self.addEventListener("cut", this.onClipboardCut, false);
@@ -810,10 +903,10 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         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
-    */
+     * 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; }
@@ -822,17 +915,21 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
             return;
         }
         this._pointerObserver = scene.onPointerObservable.add(function (pi, state) {
-            if (pi.type !== PointerEventTypes.POINTERMOVE
-                && pi.type !== PointerEventTypes.POINTERUP
-                && pi.type !== PointerEventTypes.POINTERDOWN) {
+            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);
+                    _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) {
@@ -875,9 +972,9 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         this._attachToOnBlur(scene);
     };
     /**
-    * Move the focus to a specific control
-    * @param control defines the control which will receive the focus
-    */
+     * 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;
@@ -919,6 +1016,7 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
                 var key = _a[0], value = _a[1];
                 value._onCanvasBlur();
             });
+            _this.focusedControl = null;
             _this._lastControlDown = {};
         });
     };
@@ -927,8 +1025,11 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
      * @returns an object with the JSON serialized data
      */
     AdvancedDynamicTexture.prototype.serializeContent = function () {
+        var size = this.getSize();
         var serializationObject = {
-            root: {}
+            root: {},
+            width: size.width,
+            height: size.height,
         };
         this._rootContainer.serialize(serializationObject.root);
         return serializationObject;
@@ -936,16 +1037,25 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
     /**
      * 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) {
+    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);
+            }
+        }
     };
     /**
      * 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) {
+    AdvancedDynamicTexture.prototype.parseFromSnippetAsync = function (snippetId, scaleToSize) {
         var _this = this;
         if (snippetId === "_BLANK") {
             return Promise.resolve();
@@ -957,7 +1067,7 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
                     if (request.status == 200) {
                         var snippet = JSON.parse(JSON.parse(request.responseText).jsonPayload);
                         var serializationObject = JSON.parse(snippet.gui);
-                        _this.parseContent(serializationObject);
+                        _this.parseContent(serializationObject, scaleToSize);
                         _this.snippetId = snippetId;
                         resolve();
                     }
@@ -970,7 +1080,49 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
             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
@@ -986,8 +1138,10 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         if (height === void 0) { height = 1024; }
         if (supportPointerMove === void 0) { supportPointerMove = true; }
         if (onlyAlphaTesting === void 0) { onlyAlphaTesting = false; }
-        var result = new AdvancedDynamicTexture(mesh.name + " AdvancedDynamicTexture", width, height, mesh.getScene(), true, Texture.TRILINEAR_SAMPLINGMODE, invertY);
-        var material = new StandardMaterial("AdvancedDynamicTextureMaterial", mesh.getScene());
+        // 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 " + mesh.name + " [" + uniqueId + "]", width, height, mesh.getScene(), true, Texture.TRILINEAR_SAMPLINGMODE, invertY);
+        var material = new StandardMaterial("AdvancedDynamicTextureMaterial for " + mesh.name + " [" + uniqueId + "]", mesh.getScene());
         material.backFaceCulling = false;
         material.diffuseColor = Color3.Black();
         material.specularColor = Color3.Black();
@@ -1022,33 +1176,43 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         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 hsoting scene
-    * @param sampling defines the texture sampling mode (Texture.BILINEAR_SAMPLINGMODE by default)
-    * @returns a new AdvancedDynamicTexture
-    */
-    AdvancedDynamicTexture.CreateFullscreenUI = function (name, foreground, scene, sampling) {
+     * 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 layer = new Layer(name + "_layer", null, scene, !foreground);
+        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;
     };
     /** 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 };