@babylonjs/gui 5.0.0-alpha.6 → 5.0.0-alpha.60

package/2D/adtInstrumentation.js

@@ -1,4 +1,4 @@
-import { PerfCounter } from "@babylonjs/core/Misc/perfCounter";
+import { PerfCounter } from "@babylonjs/core/Misc/perfCounter.js";
 /**
  * This class can be used to get instrumentation data from a AdvancedDynamicTexture object
  */

package/2D/advancedDynamicTexture.d.ts

@@ -170,6 +170,19 @@ export declare class AdvancedDynamicTexture extends DynamicTexture {
     */
     getDescendants(directDescendantsOnly?: boolean, predicate?: (control: Control) => boolean): Control[];
     /**
+    * 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
+    */
+    getControlsByType(typeName: string): Control[];
+    /**
+    * Will return the first control with the given name
+    * @param name defines the name to search for
+    * @return the first control found or null
+    */
+    getControlByName(name: string): Nullable<Control>;
+    private _getControlByKey;
+    /**
     * Gets or sets the current focused control
     */
     get focusedControl(): Nullable<IFocusableControl>;
@@ -249,7 +262,7 @@ export declare class AdvancedDynamicTexture extends DynamicTexture {
     dispose(): void;
     private _onResize;
     /** @hidden */
-    _getGlobalViewport(scene: Scene): Viewport;
+    _getGlobalViewport(): Viewport;
     /**
     * Get screen coordinates for a vector3
     * @param position defines the position to project
@@ -316,14 +329,23 @@ export declare class AdvancedDynamicTexture extends DynamicTexture {
     /**
      * 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
      */
-    parseContent(serializedObject: any): void;
+    parseContent(serializedObject: any, scaleToSize?: boolean): void;
     /**
      * 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
      */
-    parseFromSnippetAsync(snippetId: string): Promise<void>;
+    parseFromSnippetAsync(snippetId: string, scaleToSize?: boolean): Promise<void>;
+    /**
+    * 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
+    */
+    parseFromURLAsync(url: string, scaleToSize?: boolean): Promise<void>;
     /**
      * Creates a new AdvancedDynamicTexture in projected mode (ie. attached to a mesh)
      * @param mesh defines the mesh which will receive the texture
@@ -353,7 +375,7 @@ export declare class AdvancedDynamicTexture extends DynamicTexture {
     * 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 scene defines the hosting scene
     * @param sampling defines the texture sampling mode (Texture.BILINEAR_SAMPLINGMODE by default)
     * @returns a new AdvancedDynamicTexture
     */

package/2D/advancedDynamicTexture.js

@@ -1,22 +1,22 @@
 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";
 /**
 * Class used to create texture to support 2D GUI elements
 * @see https://doc.babylonjs.com/how_to/gui
@@ -38,6 +38,7 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         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 */
@@ -130,6 +131,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) {
@@ -341,6 +343,25 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
     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
@@ -565,9 +586,9 @@ 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();
+        return this._fullscreenViewport.toGlobal(size.width, size.height);
     };
     /**
     * Get screen coordinates for a vector3
@@ -576,14 +597,8 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
     * @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
@@ -596,9 +611,8 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         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 +626,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 +645,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);
@@ -704,6 +715,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 +728,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 +738,7 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
                 }
             }
         }
-        if (!this._cursorChanged) {
+        if (!this._cursorChanged && !scene.doNotHandleCursors) {
             this._changeCursor("");
         }
         this._manageFocus();
@@ -762,9 +778,6 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
                 && pi.type !== PointerEventTypes.POINTERWHEEL) {
                 return;
             }
-            if (!scene) {
-                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
             }
@@ -824,15 +837,19 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         this._pointerObserver = scene.onPointerObservable.add(function (pi, state) {
             if (pi.type !== PointerEventTypes.POINTERMOVE
                 && pi.type !== PointerEventTypes.POINTERUP
-                && pi.type !== PointerEventTypes.POINTERDOWN) {
+                && 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) {
@@ -919,6 +936,7 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
                 var key = _a[0], value = _a[1];
                 value._onCanvasBlur();
             });
+            _this.focusedControl = null;
             _this._lastControlDown = {};
         });
     };
@@ -927,8 +945,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 +957,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 +987,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,6 +1000,36 @@ 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
     /**
      * Creates a new AdvancedDynamicTexture in projected mode (ie. attached to a mesh)
@@ -1029,7 +1089,7 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
     * 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 scene defines the hosting scene
     * @param sampling defines the texture sampling mode (Texture.BILINEAR_SAMPLINGMODE by default)
     * @returns a new AdvancedDynamicTexture
     */