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

package/2D/advancedDynamicTexture.d.ts

@@ -27,6 +27,7 @@ export declare class AdvancedDynamicTexture extends DynamicTexture {
     private _resizeObserver;
     private _preKeyboardObserver;
     private _pointerMoveObserver;
+    private _sceneRenderObserver;
     private _pointerObserver;
     private _canvasPointerOutObserver;
     private _canvasBlurObserver;
@@ -199,6 +200,13 @@ export declare class AdvancedDynamicTexture extends DynamicTexture {
      */
     get clipboardData(): string;
     set clipboardData(value: string);
+    /**
+     * 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.
+     */
+    checkPointerEveryFrame: boolean;
     /**
      * Creates a new AdvancedDynamicTexture
      * @param name defines the name of the texture
@@ -301,6 +309,7 @@ export declare class AdvancedDynamicTexture extends DynamicTexture {
     }, control: Control): void;
     /** @hidden */
     _cleanControlAfterRemoval(control: Control): void;
+    private _translateToPicking;
     /** Attach to all scene events required to support pointer events */
     attach(): void;
     /** @hidden */
@@ -329,6 +338,7 @@ export declare class AdvancedDynamicTexture extends DynamicTexture {
      */
     moveFocusToControl(control: IFocusableControl): void;
     private _manageFocus;
+    private _attachPickingToSceneRender;
     private _attachToOnPointerOut;
     private _attachToOnBlur;
     /**
@@ -371,9 +381,11 @@ export declare class AdvancedDynamicTexture extends DynamicTexture {
      * @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 seting up the material on the mesh
      * @returns a new AdvancedDynamicTexture
      */
-    static CreateForMesh(mesh: AbstractMesh, width?: number, height?: number, supportPointerMove?: boolean, onlyAlphaTesting?: boolean, invertY?: boolean): AdvancedDynamicTexture;
+    static CreateForMesh(mesh: AbstractMesh, width?: number, height?: number, supportPointerMove?: boolean, onlyAlphaTesting?: boolean, invertY?: boolean, materialSetupCallback?: (mesh: AbstractMesh, uniqueId: string, texture: AdvancedDynamicTexture, onlyAlphaTesting: boolean) => void): AdvancedDynamicTexture;
+    private static _CreateMaterial;
     /**
      * 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
@@ -410,3 +422,4 @@ export declare class AdvancedDynamicTexture extends DynamicTexture {
      */
     scaleTo(width: number, height: number): void;
 }
+export { IFocusableControl };

package/2D/advancedDynamicTexture.js

@@ -5,7 +5,6 @@ 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";
@@ -18,6 +17,7 @@ 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
@@ -103,6 +103,13 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
          * 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;
@@ -576,6 +583,9 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         if (this._pointerMoveObserver) {
             scene.onPrePointerObservable.remove(this._pointerMoveObserver);
         }
+        if (this._sceneRenderObserver) {
+            scene.onBeforeRenderObservable.remove(this._sceneRenderObserver);
+        }
         if (this._pointerObserver) {
             scene.onPointerObservable.remove(this._pointerObserver);
         }
@@ -813,6 +823,61 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         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;
@@ -834,55 +899,9 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
             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 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
-            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;
-            }
-            // if overridden by a rig camera - reset back to the original value
-            scene.cameraToUseForPointers = originalCameraToUseForPointers;
+            _this._translateToPicking(scene, tempViewport, pi);
         });
+        this._attachPickingToSceneRender(scene, function () { return _this._translateToPicking(scene, tempViewport, null); }, false);
         this._attachToOnPointerOut(scene);
         this._attachToOnBlur(scene);
     };
@@ -968,6 +987,23 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
             }
         });
         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);
     };
@@ -996,6 +1032,17 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
             }
         }
     };
+    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) {
@@ -1135,32 +1182,41 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
      * @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 seting up the material on the mesh
      * @returns a new AdvancedDynamicTexture
      */
-    AdvancedDynamicTexture.CreateForMesh = function (mesh, width, height, supportPointerMove, onlyAlphaTesting, invertY) {
+    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);
-        var material = new StandardMaterial("AdvancedDynamicTextureMaterial for ".concat(mesh.name, " [").concat(uniqueId, "]"), mesh.getScene());
+        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 = result;
-            material.emissiveTexture = result;
-            result.hasAlpha = true;
+            material.diffuseTexture = texture;
+            material.emissiveTexture = texture;
+            texture.hasAlpha = true;
         }
         else {
-            material.emissiveTexture = result;
-            material.opacityTexture = result;
+            material.emissiveTexture = texture;
+            material.opacityTexture = texture;
         }
         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