Inspector : #4079 - DebugLayer onChange event

inspector/src/details/Property.ts

@@ -1,41 +1,84 @@
 module INSPECTOR {
-    
+
     /**
      * A property is a link between a data (string) and an object.
      */
     export class Property {
-        
+
         /** The property name */
-        private _property   : string;
+        private _property: string;
         /** The obj this property refers to */
-        private _obj        : any;
-        
-        constructor(prop:string, obj:any) {
+        private _obj: any;
+        /** The obj parent  */
+        private _parentObj: any;
+
+        constructor(prop: string, obj: any, parentObj?: PropertyLine) {
             this._property = prop;
             this._obj = obj;
+            this._parentObj = parentObj || null;
         }
-        
-        public get name() : string {
+
+        public get name(): string {
             return this._property;
         }
-        
-        public get value() : any {
+
+        public get value(): any {
             return this._obj[this._property];
         }
-        public set value(newValue:any) {
+        public set value(newValue: any) {
+            if (newValue != undefined && this._obj[this._property] != undefined) {
+                if (this._obj instanceof BABYLON.Scene) {
+                    (<BABYLON.Scene>this._obj).debugLayer.onGlobalPropertyChangeCallback({
+                        object: this._obj,
+                        property: this._property,
+                        value: newValue,
+                        initialValue: (<any>this._obj)[this._property]
+                    });
+                }
+                else {
+                    if(this._parentObj != null) {
+                        // Object that have "children" properties : Color, Vector, imageProcessingConfiguration
+
+                        if (this._parentObj instanceof BABYLON.Scene) {
+                            (<BABYLON.Scene>this._parentObj).debugLayer.onGlobalPropertyChangeCallback({
+                                object: this._parentObj,
+                                property: this._property,
+                                value: newValue,
+                                initialValue: (<any>this._obj)[this._property]
+                            });
+                        }
+                        else {
+                            this._parentObj.getScene().debugLayer.onGlobalPropertyChangeCallback({
+                                object: this._parentObj,
+                                property: this._property,
+                                value: newValue,
+                                initialValue: this._obj[this._property]
+                            });
+                        }
+                    }
+                    else {
+                        this._obj.getScene().debugLayer.onGlobalPropertyChangeCallback({
+                            object: this._obj,
+                            property: this._property,
+                            value: newValue,
+                            initialValue: this._obj[this._property]
+                        });
+                    }
+                }
+            }
             this._obj[this._property] = newValue;
         }
-        
-        public get type() :string {
+
+        public get type(): string {
             return Helpers.GET_TYPE(this.value);
         }
-        
-        public get obj() : any {
+
+        public get obj(): any {
             return this._obj;
         }
-        public set obj(newObj : any)  {
+        public set obj(newObj: any) {
             this._obj = newObj;
         }
-        
+
     }
 }

inspector/src/details/PropertyLine.ts

@@ -144,8 +144,7 @@ module INSPECTOR {
             } else if (e.keyCode == 9) { // Tab
                 e.preventDefault();
                 this.validateInput(this._input.value);
-            } else if (e.keyCode == 27) {
-                // Esc : remove input
+            } else if (e.keyCode == 27) { // Esc : remove input
                 this.update();
             }
         }
@@ -454,19 +453,19 @@ module INSPECTOR {
                         propToDisplay.sort().reverse();
                     }
                     for (let prop of propToDisplay) {
-                        let infos = new Property(prop, this._property.value);
+                        let infos = new Property(prop, this._property.value, this._property.obj);
                         let child = new PropertyLine(infos, this, this._level + PropertyLine._MARGIN_LEFT);                   
                         this._children.push(child);
                     }
                     //Add the Hexa converter
                     if ((propToDisplay.indexOf('r') && propToDisplay.indexOf('g') && propToDisplay.indexOf('b') && propToDisplay.indexOf('a')) == 0){
                         let hexLineInfos = [];
-                        let hexLinePropCheck = new Property("hexEnable", this._property.value);
+                        let hexLinePropCheck = new Property("hexEnable", this._property.value, this._property.obj);
                         hexLinePropCheck.value = false;
                         let hexLineCheck = new PropertyLine(hexLinePropCheck, this, this._level + PropertyLine._MARGIN_LEFT);
                         this._children.unshift(hexLineCheck);
                         for (let prop of propToDisplay) {
-                                let infos = new Property(prop, this._property.value);
+                                let infos = new Property(prop, this._property.value, this._property.obj);
                                 let  valHex = ((infos.value * 255)|0).toString(16);
                                 hexLineInfos.push(valHex);
                                 if(valHex == "0"){
@@ -477,7 +476,7 @@ module INSPECTOR {
                         hexLineInfos.reverse();
                         let hexLineString = hexLineInfos.join("");
                         
-                        let hexLineProp = new Property("hex", this._property.value);
+                        let hexLineProp = new Property("hex", this._property.value, this._property.obj);
                         hexLineProp.value = hexLineString;
                         let hexLine = new PropertyLine(hexLineProp, this, this._level + PropertyLine._MARGIN_LEFT);
                    

inspector/src/helpers/Helpers.ts

@@ -47,7 +47,6 @@ module INSPECTOR {
          * Returns true if the user browser is edge.
          */
         public static IsBrowserEdge(): boolean {
-            //Detect if we are running on a faulty buggy OS.
             var regexp = /Edge/
             return regexp.test(navigator.userAgent);
         }
@@ -55,7 +54,6 @@ module INSPECTOR {
          * Returns true if the user browser is IE.
          */
         public static IsBrowserIE(): boolean {
-            //Detect if we are running on a faulty buggy OS.
             var regexp = /Trident.*rv\:11\./
             return regexp.test(navigator.userAgent);
         }

inspector/test/index.js

@@ -85,6 +85,12 @@ var Test = (function () {
         scene.createDefaultCameraOrLight(true);
         scene.activeCamera.attachControl(canvas);
         scene.debugLayer.show();
+        scene.debugLayer.onGlobalPropertyChange.push((result) => {
+            console.log(result.object);
+            console.log("Property : " + result.property);
+            console.log("New value : " + result.value);
+            console.log("Old value : " + result.initialValue);
+        });
 
         this.scene = scene;
     };

src/Debug/babylon.debugLayer.ts

@@ -12,10 +12,13 @@ module BABYLON {
 
         private BJSINSPECTOR = typeof INSPECTOR !== 'undefined' ? INSPECTOR : undefined;
 
+        public onGlobalPropertyChange: Array<Function>;
+
         constructor(scene: Scene) {
             this._scene = scene;
             // load inspector using require, if it doesn't exist on the global namespace.
 
+            this.onGlobalPropertyChange = new Array<Function>();
         }
 
         /** Creates the inspector window. */
@@ -113,5 +116,11 @@ module BABYLON {
         public getActiveTab(): number {
             return this._inspector ? this._inspector.getActiveTabIndex() : -1;
         }
+
+        public onGlobalPropertyChangeCallback(result: {}) {
+            this.onGlobalPropertyChange.forEach((callback) => {
+                callback(result);
+            });
+        }
     }
 }