@babylonjs/gui 5.0.0-beta.7 → 5.0.0-rc.0

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;
     /**
@@ -398,4 +408,16 @@ export declare class AdvancedDynamicTexture extends DynamicTexture {
      * @returns a new AdvancedDynamicTexture
      */
     static CreateFullscreenUI(name: string, foreground?: boolean, scene?: Nullable<Scene>, sampling?: number, adaptiveScaling?: boolean): AdvancedDynamicTexture;
+    /**
+     * Scales the texture
+     * @param ratio the scale factor to apply to both width and height
+     */
+    scale(ratio: number): void;
+    /**
+     * Resizes the texture
+     * @param width the new width
+     * @param height the new height
+     */
+    scaleTo(width: number, height: number): void;
 }
+export { IFocusableControl };

package/2D/advancedDynamicTexture.js

@@ -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) {
@@ -1213,6 +1260,23 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         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) */