Fix gui 3d pointerout bug

dist/preview release/babylon.max.js

@@ -96789,6 +96789,11 @@ var BABYLON;
                             else if (prePointerInfo.type === BABYLON.PointerEventTypes.POINTERDOWN) {
                                 _this._pointerCaptures[pointerEvent_1.pointerId] = true;
                             }
+                            else if (_this._lastPointerEvents[pointerEvent_1.pointerId]) {
+                                // We need to send a last pointerup to the utilityLayerScene to make sure animations can complete
+                                _this.onPointerOutObservable.notifyObservers(pointerEvent_1.pointerId);
+                                delete _this._lastPointerEvents[pointerEvent_1.pointerId];
+                            }
                         }
                         else if (!_this._pointerCaptures[pointerEvent_1.pointerId] && (utilityScenePick.distance < originalScenePick.distance || originalScenePick.distance === 0)) {
                             // We pick something in utility scene or the pick in utility is closer than the one in main scene
@@ -96865,7 +96870,7 @@ var BABYLON;
         UtilityLayerRenderer.prototype._notifyObservers = function (prePointerInfo, pickInfo, pointerEvent) {
             if (!prePointerInfo.skipOnPointerObservable) {
                 this.utilityLayerScene.onPointerObservable.notifyObservers(new BABYLON.PointerInfo(prePointerInfo.type, prePointerInfo.event, pickInfo));
-                this._lastPointerEvents[pointerEvent.pointerId] = parseInt(pointerEvent.pointerType);
+                this._lastPointerEvents[pointerEvent.pointerId] = true;
             }
         };
         /**

dist/preview release/babylon.no-module.max.js

@@ -96756,6 +96756,11 @@ var BABYLON;
                             else if (prePointerInfo.type === BABYLON.PointerEventTypes.POINTERDOWN) {
                                 _this._pointerCaptures[pointerEvent_1.pointerId] = true;
                             }
+                            else if (_this._lastPointerEvents[pointerEvent_1.pointerId]) {
+                                // We need to send a last pointerup to the utilityLayerScene to make sure animations can complete
+                                _this.onPointerOutObservable.notifyObservers(pointerEvent_1.pointerId);
+                                delete _this._lastPointerEvents[pointerEvent_1.pointerId];
+                            }
                         }
                         else if (!_this._pointerCaptures[pointerEvent_1.pointerId] && (utilityScenePick.distance < originalScenePick.distance || originalScenePick.distance === 0)) {
                             // We pick something in utility scene or the pick in utility is closer than the one in main scene
@@ -96832,7 +96837,7 @@ var BABYLON;
         UtilityLayerRenderer.prototype._notifyObservers = function (prePointerInfo, pickInfo, pointerEvent) {
             if (!prePointerInfo.skipOnPointerObservable) {
                 this.utilityLayerScene.onPointerObservable.notifyObservers(new BABYLON.PointerInfo(prePointerInfo.type, prePointerInfo.event, pickInfo));
-                this._lastPointerEvents[pointerEvent.pointerId] = parseInt(pointerEvent.pointerType);
+                this._lastPointerEvents[pointerEvent.pointerId] = true;
             }
         };
         /**

dist/preview release/es6.js

@@ -96756,6 +96756,11 @@ var BABYLON;
                             else if (prePointerInfo.type === BABYLON.PointerEventTypes.POINTERDOWN) {
                                 _this._pointerCaptures[pointerEvent_1.pointerId] = true;
                             }
+                            else if (_this._lastPointerEvents[pointerEvent_1.pointerId]) {
+                                // We need to send a last pointerup to the utilityLayerScene to make sure animations can complete
+                                _this.onPointerOutObservable.notifyObservers(pointerEvent_1.pointerId);
+                                delete _this._lastPointerEvents[pointerEvent_1.pointerId];
+                            }
                         }
                         else if (!_this._pointerCaptures[pointerEvent_1.pointerId] && (utilityScenePick.distance < originalScenePick.distance || originalScenePick.distance === 0)) {
                             // We pick something in utility scene or the pick in utility is closer than the one in main scene
@@ -96832,7 +96837,7 @@ var BABYLON;
         UtilityLayerRenderer.prototype._notifyObservers = function (prePointerInfo, pickInfo, pointerEvent) {
             if (!prePointerInfo.skipOnPointerObservable) {
                 this.utilityLayerScene.onPointerObservable.notifyObservers(new BABYLON.PointerInfo(prePointerInfo.type, prePointerInfo.event, pickInfo));
-                this._lastPointerEvents[pointerEvent.pointerId] = parseInt(pointerEvent.pointerType);
+                this._lastPointerEvents[pointerEvent.pointerId] = true;
             }
         };
         /**

dist/preview release/viewer/babylon.viewer.d.ts

@@ -168,11 +168,11 @@ declare module BabylonViewer {
                 * Mainly used for help and errors
                 * @param subScreen the name of the subScreen. Those can be defined in the configuration object
                 */
-            showOverlayScreen(subScreen: string): Promise<Template> | Promise<string>;
+            showOverlayScreen(subScreen: string): Promise<string> | Promise<Template>;
             /**
                 * Hide the overlay screen.
                 */
-            hideOverlayScreen(): Promise<Template> | Promise<string>;
+            hideOverlayScreen(): Promise<string> | Promise<Template>;
             /**
                 * show the viewer (in case it was hidden)
                 *
@@ -189,11 +189,11 @@ declare module BabylonViewer {
                 * Show the loading screen.
                 * The loading screen can be configured using the configuration object
                 */
-            showLoadingScreen(): Promise<Template> | Promise<string>;
+            showLoadingScreen(): Promise<string> | Promise<Template>;
             /**
                 * Hide the loading screen
                 */
-            hideLoadingScreen(): Promise<Template> | Promise<string>;
+            hideLoadingScreen(): Promise<string> | Promise<Template>;
             dispose(): void;
             protected _onConfigurationLoaded(configuration: ViewerConfiguration): void;
     }
@@ -924,7 +924,7 @@ declare module BabylonViewer {
       * @param name the name of the custom optimizer configuration
       * @param upgrade set to true if you want to upgrade optimizer and false if you want to degrade
       */
-    export function getCustomOptimizerByName(name: string, upgrade?: boolean): typeof extendedUpgrade;
+    export function getCustomOptimizerByName(name: string, upgrade?: boolean): (sceneManager: SceneManager) => boolean;
     export function registerCustomOptimizer(name: string, optimizer: (sceneManager: SceneManager) => boolean): void;
 }
 declare module BabylonViewer {
@@ -1558,20 +1558,6 @@ declare module BabylonViewer {
     export function addLoaderPlugin(name: string, plugin: ILoaderPlugin): void;
 }
 declare module BabylonViewer {
-    /**
-        * A custom upgrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedUpgrade(sceneManager: SceneManager): boolean;
-    /**
-        * A custom degrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedDegrade(sceneManager: SceneManager): boolean;
-}
-declare module BabylonViewer {
 }
 declare module BabylonViewer {
     export interface IEnvironmentMapConfiguration {

dist/preview release/viewer/babylon.viewer.module.d.ts

@@ -200,11 +200,11 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
                 * Mainly used for help and errors
                 * @param subScreen the name of the subScreen. Those can be defined in the configuration object
                 */
-            showOverlayScreen(subScreen: string): Promise<Template> | Promise<string>;
+            showOverlayScreen(subScreen: string): Promise<string> | Promise<Template>;
             /**
                 * Hide the overlay screen.
                 */
-            hideOverlayScreen(): Promise<Template> | Promise<string>;
+            hideOverlayScreen(): Promise<string> | Promise<Template>;
             /**
                 * show the viewer (in case it was hidden)
                 *
@@ -221,11 +221,11 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
                 * Show the loading screen.
                 * The loading screen can be configured using the configuration object
                 */
-            showLoadingScreen(): Promise<Template> | Promise<string>;
+            showLoadingScreen(): Promise<string> | Promise<Template>;
             /**
                 * Hide the loading screen
                 */
-            hideLoadingScreen(): Promise<Template> | Promise<string>;
+            hideLoadingScreen(): Promise<string> | Promise<Template>;
             dispose(): void;
             protected _onConfigurationLoaded(configuration: ViewerConfiguration): void;
     }
@@ -985,14 +985,13 @@ declare module 'babylonjs-viewer/templating/viewerTemplatePlugin' {
 }
 
 declare module 'babylonjs-viewer/optimizer/custom' {
-    import { extendedUpgrade } from "babylonjs-viewer/optimizer/custom/extended";
     import { SceneManager } from "babylonjs-viewer/managers/sceneManager";
     /**
       *
       * @param name the name of the custom optimizer configuration
       * @param upgrade set to true if you want to upgrade optimizer and false if you want to degrade
       */
-    export function getCustomOptimizerByName(name: string, upgrade?: boolean): typeof extendedUpgrade;
+    export function getCustomOptimizerByName(name: string, upgrade?: boolean): (sceneManager: SceneManager) => boolean;
     export function registerCustomOptimizer(name: string, optimizer: (sceneManager: SceneManager) => boolean): void;
 }
 
@@ -1663,22 +1662,6 @@ declare module 'babylonjs-viewer/loader/plugins' {
     export function addLoaderPlugin(name: string, plugin: ILoaderPlugin): void;
 }
 
-declare module 'babylonjs-viewer/optimizer/custom/extended' {
-    import { SceneManager } from 'babylonjs-viewer/managers/sceneManager';
-    /**
-        * A custom upgrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedUpgrade(sceneManager: SceneManager): boolean;
-    /**
-        * A custom degrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedDegrade(sceneManager: SceneManager): boolean;
-}
-
 declare module 'babylonjs-viewer/configuration/interfaces' {
     export * from 'babylonjs-viewer/configuration/interfaces/cameraConfiguration';
     export * from 'babylonjs-viewer/configuration/interfaces/colorGradingConfiguration';

src/Rendering/babylon.utilityLayerRenderer.ts

@@ -3,17 +3,17 @@ module BABYLON {
      * Renders a layer on top of an existing scene
      */
     export class UtilityLayerRenderer implements IDisposable {
-        private _pointerCaptures: {[pointerId:number]: boolean} = {};
-        private _lastPointerEvents: {[pointerId:number]: number} = {};
-        private static _DefaultUtilityLayer:Nullable<UtilityLayerRenderer> = null;
-        private static _DefaultKeepDepthUtilityLayer:Nullable<UtilityLayerRenderer> = null;
+        private _pointerCaptures: { [pointerId: number]: boolean } = {};
+        private _lastPointerEvents: { [pointerId: number]: boolean } = {};
+        private static _DefaultUtilityLayer: Nullable<UtilityLayerRenderer> = null;
+        private static _DefaultKeepDepthUtilityLayer: Nullable<UtilityLayerRenderer> = null;
         /** 
          * A shared utility layer that can be used to overlay objects into a scene (Depth map of the previous scene is cleared before drawing on top of it)
-         */ 
-        public static get DefaultUtilityLayer():UtilityLayerRenderer{
-            if(UtilityLayerRenderer._DefaultUtilityLayer == null){
+         */
+        public static get DefaultUtilityLayer(): UtilityLayerRenderer {
+            if (UtilityLayerRenderer._DefaultUtilityLayer == null) {
                 UtilityLayerRenderer._DefaultUtilityLayer = new UtilityLayerRenderer(BABYLON.Engine.LastCreatedScene!);
-                UtilityLayerRenderer._DefaultUtilityLayer.originalScene.onDisposeObservable.addOnce(()=>{
+                UtilityLayerRenderer._DefaultUtilityLayer.originalScene.onDisposeObservable.addOnce(() => {
                     UtilityLayerRenderer._DefaultUtilityLayer = null;
                 });
             }
@@ -21,12 +21,12 @@ module BABYLON {
         }
         /** 
          * A shared utility layer that can be used to embed objects into a scene (Depth map of the previous scene is not cleared before drawing on top of it)
-         */ 
-        public static get DefaultKeepDepthUtilityLayer():UtilityLayerRenderer{
-            if(UtilityLayerRenderer._DefaultKeepDepthUtilityLayer == null){
+         */
+        public static get DefaultKeepDepthUtilityLayer(): UtilityLayerRenderer {
+            if (UtilityLayerRenderer._DefaultKeepDepthUtilityLayer == null) {
                 UtilityLayerRenderer._DefaultKeepDepthUtilityLayer = new UtilityLayerRenderer(BABYLON.Engine.LastCreatedScene!);
                 UtilityLayerRenderer._DefaultKeepDepthUtilityLayer.utilityLayerScene.autoClearDepthAndStencil = false;
-                UtilityLayerRenderer._DefaultKeepDepthUtilityLayer.originalScene.onDisposeObservable.addOnce(()=>{
+                UtilityLayerRenderer._DefaultKeepDepthUtilityLayer.originalScene.onDisposeObservable.addOnce(() => {
                     UtilityLayerRenderer._DefaultKeepDepthUtilityLayer = null;
                 });
             }
@@ -35,13 +35,13 @@ module BABYLON {
 
         /** 
          * The scene that is rendered on top of the original scene
-         */ 
-        public utilityLayerScene:Scene;
+         */
+        public utilityLayerScene: Scene;
 
         /**
          *  If the utility layer should automatically be rendered on top of existing scene
         */
-        public shouldRender:boolean = true;
+        public shouldRender: boolean = true;
         /**
          * If set to true, only pointer down onPointerObservable events will be blocked when picking is occluded by original scene
          */
@@ -60,26 +60,26 @@ module BABYLON {
         /** Gets or sets a predicate that will be used to indicate utility meshes present in the main scene */
         public mainSceneTrackerPredicate: (mesh: Nullable<AbstractMesh>) => boolean;
 
-        private _afterRenderObserver:Nullable<Observer<Scene>>;
-        private _sceneDisposeObserver:Nullable<Observer<Scene>>;
-        private _originalPointerObserver:Nullable<Observer<PointerInfoPre>>;
+        private _afterRenderObserver: Nullable<Observer<Scene>>;
+        private _sceneDisposeObserver: Nullable<Observer<Scene>>;
+        private _originalPointerObserver: Nullable<Observer<PointerInfoPre>>;
         /**
          * Instantiates a UtilityLayerRenderer
          * @param originalScene the original scene that will be rendered on top of
          */
         constructor(
-            /** the original scene that will be rendered on top of */ 
-            public originalScene: Scene){
+            /** the original scene that will be rendered on top of */
+            public originalScene: Scene) {
             // Create scene which will be rendered in the foreground and remove it from being referenced by engine to avoid interfering with existing app
             this.utilityLayerScene = new BABYLON.Scene(originalScene.getEngine());
             this.utilityLayerScene.useRightHandedSystem = originalScene.useRightHandedSystem;
             this.utilityLayerScene._allowPostProcessClearColor = false;
             originalScene.getEngine().scenes.pop();
-      
+
             // Detach controls on utility scene, events will be fired by logic below to handle picking priority
             this.utilityLayerScene.detachControl();
             this._originalPointerObserver = originalScene.onPrePointerObservable.add((prePointerInfo, eventState) => {
-                
+
                 if (!this.processAllEvents) {
                     if (prePointerInfo.type !== BABYLON.PointerEventTypes.POINTERMOVE
                         && prePointerInfo.type !== BABYLON.PointerEventTypes.POINTERUP
@@ -95,7 +95,7 @@ module BABYLON {
                 }
 
                 var utilityScenePick = prePointerInfo.ray ? this.utilityLayerScene.pickWithRay(prePointerInfo.ray) : this.utilityLayerScene.pick(originalScene.pointerX, originalScene.pointerY);
-                if(!prePointerInfo.ray && utilityScenePick){
+                if (!prePointerInfo.ray && utilityScenePick) {
                     prePointerInfo.ray = utilityScenePick.ray;
                 }
 
@@ -103,8 +103,8 @@ module BABYLON {
                 this.utilityLayerScene.onPrePointerObservable.notifyObservers(prePointerInfo)
 
                 // allow every non pointer down event to flow to the utility layer
-                if(this.onlyCheckPointerDownEvents && prePointerInfo.type != BABYLON.PointerEventTypes.POINTERDOWN){
-                    if(!prePointerInfo.skipOnPointerObservable){
+                if (this.onlyCheckPointerDownEvents && prePointerInfo.type != BABYLON.PointerEventTypes.POINTERDOWN) {
+                    if (!prePointerInfo.skipOnPointerObservable) {
                         this.utilityLayerScene.onPointerObservable.notifyObservers(new PointerInfo(prePointerInfo.type, prePointerInfo.event, utilityScenePick))
                     }
                     if (prePointerInfo.type === BABYLON.PointerEventTypes.POINTERUP && this._pointerCaptures[pointerEvent.pointerId]) {
@@ -112,37 +112,41 @@ module BABYLON {
                     }
                     return;
                 }
-                
-                if(this.utilityLayerScene.autoClearDepthAndStencil){
+
+                if (this.utilityLayerScene.autoClearDepthAndStencil) {
                     // If this layer is an overlay, check if this layer was hit and if so, skip pointer events for the main scene
-                    if(utilityScenePick && utilityScenePick.hit){
-                        
-                        if(!prePointerInfo.skipOnPointerObservable){
+                    if (utilityScenePick && utilityScenePick.hit) {
+
+                        if (!prePointerInfo.skipOnPointerObservable) {
                             this.utilityLayerScene.onPointerObservable.notifyObservers(new PointerInfo(prePointerInfo.type, prePointerInfo.event, utilityScenePick))
                         }
                         prePointerInfo.skipOnPointerObservable = true;
                     }
-                }else{
+                } else {
                     var originalScenePick = prePointerInfo.ray ? originalScene.pickWithRay(prePointerInfo.ray) : originalScene.pick(originalScene.pointerX, originalScene.pointerY);
                     let pointerEvent = <PointerEvent>(prePointerInfo.event);
 
                     // If the layer can be occluded by the original scene, only fire pointer events to the first layer that hit they ray
-                    if (originalScenePick && utilityScenePick){
-                        
+                    if (originalScenePick && utilityScenePick) {
+
                         // No pick in utility scene
                         if (utilityScenePick.distance === 0 && originalScenePick.pickedMesh) {
                             if (this.mainSceneTrackerPredicate && this.mainSceneTrackerPredicate(originalScenePick.pickedMesh)) {
                                 // We touched an utility mesh present in the main scene
                                 this._notifyObservers(prePointerInfo, originalScenePick, pointerEvent);
-                                prePointerInfo.skipOnPointerObservable = true;                             
+                                prePointerInfo.skipOnPointerObservable = true;
                             } else if (prePointerInfo.type === BABYLON.PointerEventTypes.POINTERDOWN) {
                                 this._pointerCaptures[pointerEvent.pointerId] = true;
-                            } 
-                        } else if (!this._pointerCaptures[pointerEvent.pointerId] && (utilityScenePick.distance < originalScenePick.distance || originalScenePick.distance === 0)){  
+                            } else if (this._lastPointerEvents[pointerEvent.pointerId]) {
+                                // We need to send a last pointerup to the utilityLayerScene to make sure animations can complete
+                                this.onPointerOutObservable.notifyObservers(pointerEvent.pointerId);
+                                delete this._lastPointerEvents[pointerEvent.pointerId];
+                            }
+                        } else if (!this._pointerCaptures[pointerEvent.pointerId] && (utilityScenePick.distance < originalScenePick.distance || originalScenePick.distance === 0)) {
                             // We pick something in utility scene or the pick in utility is closer than the one in main scene
                             this._notifyObservers(prePointerInfo, utilityScenePick, pointerEvent);
                             // If a previous utility layer set this, do not unset this
-                            if(!prePointerInfo.skipOnPointerObservable){
+                            if (!prePointerInfo.skipOnPointerObservable) {
                                 prePointerInfo.skipOnPointerObservable = utilityScenePick.distance > 0;
                             }
                         } else if (!this._pointerCaptures[pointerEvent.pointerId] && (utilityScenePick.distance > originalScenePick.distance)) {
@@ -151,59 +155,59 @@ module BABYLON {
                             // We touched an utility mesh present in the main scene
                             if (this.mainSceneTrackerPredicate && this.mainSceneTrackerPredicate(originalScenePick.pickedMesh)) {
                                 this._notifyObservers(prePointerInfo, originalScenePick, pointerEvent);
-                                prePointerInfo.skipOnPointerObservable = true;                             
+                                prePointerInfo.skipOnPointerObservable = true;
                             } else if (this._lastPointerEvents[pointerEvent.pointerId]) {
                                 // We need to send a last pointerup to the utilityLayerScene to make sure animations can complete
                                 this.onPointerOutObservable.notifyObservers(pointerEvent.pointerId);
                                 delete this._lastPointerEvents[pointerEvent.pointerId];
                             }
                         }
-                        
+
                         if (prePointerInfo.type === BABYLON.PointerEventTypes.POINTERUP && this._pointerCaptures[pointerEvent.pointerId]) {
                             this._pointerCaptures[pointerEvent.pointerId] = false;
                         }
                     }
                 }
-                
+
             })
 
             // Render directly on top of existing scene without clearing
             this.utilityLayerScene.autoClear = false;
 
-            this._afterRenderObserver = this.originalScene.onAfterRenderObservable.add(()=>{
-                if(this.shouldRender){
+            this._afterRenderObserver = this.originalScene.onAfterRenderObservable.add(() => {
+                if (this.shouldRender) {
                     this.render();
                 }
             });
 
-            this._sceneDisposeObserver = this.originalScene.onDisposeObservable.add(()=>{
+            this._sceneDisposeObserver = this.originalScene.onDisposeObservable.add(() => {
                 this.dispose();
             })
-            
+
             this._updateCamera();
         }
 
         private _notifyObservers(prePointerInfo: PointerInfoPre, pickInfo: PickingInfo, pointerEvent: PointerEvent) {
-            if (!prePointerInfo.skipOnPointerObservable){
+            if (!prePointerInfo.skipOnPointerObservable) {
                 this.utilityLayerScene.onPointerObservable.notifyObservers(new PointerInfo(prePointerInfo.type, prePointerInfo.event, pickInfo))
-                this._lastPointerEvents[pointerEvent.pointerId] = parseInt(pointerEvent.pointerType);
+                this._lastPointerEvents[pointerEvent.pointerId] = true;
             }
         }
 
         /**
          * Renders the utility layers scene on top of the original scene
          */
-        public render(){
+        public render() {
             this._updateCamera();
-            if(this.utilityLayerScene.activeCamera){
+            if (this.utilityLayerScene.activeCamera) {
                 // Set the camera's scene to utility layers scene
                 var oldScene = this.utilityLayerScene.activeCamera.getScene();
                 var camera = this.utilityLayerScene.activeCamera;
                 camera._scene = this.utilityLayerScene;
-                if(camera.leftCamera){
+                if (camera.leftCamera) {
                     camera.leftCamera._scene = this.utilityLayerScene;
                 }
-                if(camera.rightCamera){
+                if (camera.rightCamera) {
                     camera.rightCamera._scene = this.utilityLayerScene;
                 }
 
@@ -211,35 +215,35 @@ module BABYLON {
 
                 // Reset camera's scene back to original
                 camera._scene = oldScene;
-                if(camera.leftCamera){
+                if (camera.leftCamera) {
                     camera.leftCamera._scene = oldScene;
                 }
-                if(camera.rightCamera){
+                if (camera.rightCamera) {
                     camera.rightCamera._scene = oldScene;
                 }
             }
-            
+
         }
 
         /**
          * Disposes of the renderer
          */
-        public dispose(){
+        public dispose() {
             this.onPointerOutObservable.clear();
 
-            if(this._afterRenderObserver){
+            if (this._afterRenderObserver) {
                 this.originalScene.onAfterRenderObservable.remove(this._afterRenderObserver);
             }
-            if(this._sceneDisposeObserver){
+            if (this._sceneDisposeObserver) {
                 this.originalScene.onDisposeObservable.remove(this._sceneDisposeObserver);
             }
-            if(this._originalPointerObserver){
+            if (this._originalPointerObserver) {
                 this.originalScene.onPrePointerObservable.remove(this._originalPointerObserver);
             }
             this.utilityLayerScene.dispose();
         }
 
-        private _updateCamera(){
+        private _updateCamera() {
             this.utilityLayerScene.activeCamera = this.originalScene.activeCamera;
         }
     }