gui: Fixed dispose issue

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

@@ -5,12 +5,13 @@ declare module BABYLON.GUI {
         private _renderObserver;
         private _resizeObserver;
         private _pointerMoveObserver;
+        private _pointerObserver;
         private _background;
         _rootContainer: Container;
         _lastControlOver: Control;
         _lastControlDown: Control;
         _shouldBlockPointer: boolean;
-        _toDispose: IDisposable;
+        _layerToDispose: Layer;
         _linkedControls: Control[];
         private _isFullscreen;
         background: string;
@@ -24,6 +25,7 @@ declare module BABYLON.GUI {
         private _render();
         private _doPicking(x, y, type);
         attach(): void;
+        attachToMesh(mesh: AbstractMesh): void;
         static CreateForMesh(mesh: AbstractMesh, width?: number, height?: number): AdvancedDynamicTexture;
         static CreateFullscreenUI(name: string, foreground: boolean, scene: Scene): AdvancedDynamicTexture;
     }

dist/preview release/gui/babylon.gui.js

@@ -67,9 +67,13 @@ var BABYLON;
                 if (this._pointerMoveObserver) {
                     this.getScene().onPrePointerObservable.remove(this._pointerMoveObserver);
                 }
-                if (this._toDispose) {
-                    this._toDispose.dispose();
-                    this._toDispose = null;
+                if (this._pointerObserver) {
+                    this.getScene().onPointerObservable.remove(this._pointerObserver);
+                }
+                if (this._layerToDispose) {
+                    this._layerToDispose.texture = null;
+                    this._layerToDispose.dispose();
+                    this._layerToDispose = null;
                 }
                 _super.prototype.dispose.call(this);
             };
@@ -147,6 +151,20 @@ var BABYLON;
                     pi.skipOnPointerObservable = _this._shouldBlockPointer && pi.type !== BABYLON.PointerEventTypes.POINTERUP;
                 });
             };
+            AdvancedDynamicTexture.prototype.attachToMesh = function (mesh) {
+                var _this = this;
+                var scene = this.getScene();
+                this._pointerObserver = scene.onPointerObservable.add(function (pi, state) {
+                    if (pi.type !== BABYLON.PointerEventTypes.POINTERUP && pi.type !== BABYLON.PointerEventTypes.POINTERDOWN) {
+                        return;
+                    }
+                    if (pi.pickInfo.hit && pi.pickInfo.pickedMesh === mesh) {
+                        var uv = pi.pickInfo.getTextureCoordinates();
+                        var size = _this.getSize();
+                        _this._doPicking(uv.x * size.width, (1.0 - uv.y) * size.height, pi.type);
+                    }
+                });
+            };
             // Statics
             AdvancedDynamicTexture.CreateForMesh = function (mesh, width, height) {
                 if (width === void 0) { width = 1024; }
@@ -159,15 +177,7 @@ var BABYLON;
                 material.emissiveTexture = result;
                 material.opacityTexture = result;
                 mesh.material = material;
-                mesh.getScene().onPointerObservable.add(function (pi, state) {
-                    if (pi.type !== BABYLON.PointerEventTypes.POINTERUP && pi.type !== BABYLON.PointerEventTypes.POINTERDOWN) {
-                        return;
-                    }
-                    if (pi.pickInfo.hit && pi.pickInfo.pickedMesh === mesh) {
-                        var uv = pi.pickInfo.getTextureCoordinates();
-                        result._doPicking(uv.x * width, (1.0 - uv.y) * height, pi.type);
-                    }
-                });
+                result.attachToMesh(mesh);
                 return result;
             };
             AdvancedDynamicTexture.CreateFullscreenUI = function (name, foreground, scene) {
@@ -176,7 +186,7 @@ var BABYLON;
                 // Display
                 var layer = new BABYLON.Layer(name + "_layer", null, scene, !foreground);
                 layer.texture = result;
-                result._toDispose = layer;
+                result._layerToDispose = layer;
                 result._isFullscreen = true;
                 // Attach
                 result.attach();
@@ -2074,11 +2084,11 @@ var BABYLON;
                 return true;
             };
             Button.prototype._onPointerEnter = function () {
-                this.alpha -= 0.2;
+                this.alpha -= 0.1;
                 _super.prototype._onPointerEnter.call(this);
             };
             Button.prototype._onPointerOut = function () {
-                this.alpha += 0.2;
+                this.alpha += 0.1;
                 _super.prototype._onPointerOut.call(this);
             };
             Button.prototype._onPointerDown = function () {

gui/src/advancedDynamicTexture.ts

@@ -6,12 +6,13 @@ module BABYLON.GUI {
         private _renderObserver: Observer<Camera>;
         private _resizeObserver: Observer<Engine>;
         private _pointerMoveObserver: Observer<PointerInfoPre>;
+        private _pointerObserver: Observer<PointerInfo>;
         private _background: string;
         public _rootContainer = new Container("root");
         public _lastControlOver: Control;
         public _lastControlDown: Control;
         public _shouldBlockPointer: boolean;
-        public _toDispose: IDisposable;
+        public _layerToDispose: Layer;
         public _linkedControls = new Array<Control>();
         private _isFullscreen = false;
 
@@ -69,9 +70,14 @@ module BABYLON.GUI {
                 this.getScene().onPrePointerObservable.remove(this._pointerMoveObserver);
             }
 
-            if (this._toDispose) {
-                this._toDispose.dispose();
-                this._toDispose = null;
+            if (this._pointerObserver) {
+                this.getScene().onPointerObservable.remove(this._pointerObserver);
+            }
+
+            if (this._layerToDispose) {
+                this._layerToDispose.texture = null;
+                this._layerToDispose.dispose();
+                this._layerToDispose = null;
             }
 
             super.dispose();
@@ -166,6 +172,21 @@ module BABYLON.GUI {
             });
         }
 
+        public attachToMesh(mesh: AbstractMesh): void {
+            var scene = this.getScene();
+            this._pointerObserver = scene.onPointerObservable.add((pi, state) => {
+                if (pi.type !== BABYLON.PointerEventTypes.POINTERUP && pi.type !== BABYLON.PointerEventTypes.POINTERDOWN) {
+                    return;
+                }
+
+                if (pi.pickInfo.hit && pi.pickInfo.pickedMesh === mesh) {
+                    var uv = pi.pickInfo.getTextureCoordinates();
+                    var size = this.getSize();
+                    this._doPicking(uv.x * size.width, (1.0 - uv.y) * size.height, pi.type);
+                }
+            });
+        }
+
         // Statics
         public static CreateForMesh(mesh: AbstractMesh, width = 1024, height = 1024): AdvancedDynamicTexture {
             var result = new AdvancedDynamicTexture(mesh.name + " AdvancedDynamicTexture", width, height, mesh.getScene(), true, Texture.TRILINEAR_SAMPLINGMODE);
@@ -179,16 +200,7 @@ module BABYLON.GUI {
 
             mesh.material = material;
 
-            mesh.getScene().onPointerObservable.add(function(pi, state) {
-                if (pi.type !== BABYLON.PointerEventTypes.POINTERUP && pi.type !== BABYLON.PointerEventTypes.POINTERDOWN) {
-                    return;
-                }
-
-                if (pi.pickInfo.hit && pi.pickInfo.pickedMesh === mesh) {
-                    var uv = pi.pickInfo.getTextureCoordinates();
-                    result._doPicking(uv.x * width, (1.0 - uv.y) * height, pi.type);
-                }
-            });
+            result.attachToMesh(mesh);
 
             return result;
         }
@@ -200,7 +212,7 @@ module BABYLON.GUI {
             var layer = new BABYLON.Layer(name + "_layer", null, scene, !foreground);
             layer.texture = result;
 
-            result._toDispose = layer;
+            result._layerToDispose = layer;
             result._isFullscreen = true;
 
             // Attach

gui/src/controls/button.ts

@@ -20,12 +20,12 @@ module BABYLON.GUI {
         }
 
         protected _onPointerEnter(): void {
-            this.alpha -= 0.2;
+            this.alpha -= 0.1;
             super._onPointerEnter();
         }
 
         protected _onPointerOut(): void {
-            this.alpha += 0.2;
+            this.alpha += 0.1;
             super._onPointerOut();
         }