Color picker + better focus management + sliders for numbers

Tools/Gulp/config.json

@@ -1473,6 +1473,7 @@
                     "../../inspector/src/details/Property.ts",
                     "../../inspector/src/details/PropertyLine.ts",
                     "../../inspector/src/gui/ColorElement.ts",
+                    "../../inspector/src/gui/ColorPickerElement.ts",
                     "../../inspector/src/gui/CubeTextureElement.ts",
                     "../../inspector/src/gui/HDRCubeTextureElement.ts",
                     "../../inspector/src/gui/SearchBar.ts",

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

@@ -399,7 +399,6 @@ declare module INSPECTOR {
 
 declare module INSPECTOR {
     class LightAdapter extends Adapter implements IToolVisible {
-        private static _PROPERTIES;
         constructor(obj: BABYLON.Light);
         /** Returns the name displayed in the tree */
         id(): string;
@@ -621,6 +620,22 @@ declare module INSPECTOR {
 
 declare module INSPECTOR {
     /**
+     * Represents a html div element.
+     * The div is built when an instance of BasicElement is created.
+     */
+    class ColorPickerElement {
+        protected _input: HTMLInputElement;
+        constructor(color: BABYLON.Color4 | BABYLON.Color3);
+        /**
+         * Returns the input element
+         */
+        toHtml(): HTMLInputElement;
+        private _toRgba(color);
+    }
+}
+
+declare module INSPECTOR {
+    /**
     * Display a very small div. A new canvas is created, with a new Babylon.js scene, containing only the
     * cube texture in a cube
     */
@@ -733,6 +748,10 @@ declare module INSPECTOR {
          * Useful function used to create a div
          */
         static CreateDiv(className?: string, parent?: HTMLElement): HTMLElement;
+        /**
+         * Useful function used to create a input
+         */
+        static CreateInput(className?: string, parent?: HTMLElement): HTMLInputElement;
         static CreateElement(element: string, className?: string, parent?: HTMLElement): HTMLElement;
         /**
          * Removes all children of the given div.
@@ -744,6 +763,11 @@ declare module INSPECTOR {
         static Css(elem: HTMLElement, cssAttribute: string): string;
         static LoadScript(): void;
         static IsSystemName(name: string): boolean;
+        /**
+         * Return an array of PropertyLine for an obj
+         * @param obj
+         */
+        static GetAllLinesProperties(obj: any): Array<PropertyLine>;
     }
 }
 

dist/preview release/inspector/babylon.inspector.js

@@ -964,21 +964,7 @@ var INSPECTOR;
         };
         /** Returns the list of properties to be displayed for this adapter */
         CameraAdapter.prototype.getProperties = function () {
-            var propertiesLines = [];
-            var camToDisplay = [];
-            // The if is there to work with the min version of babylon
-            if (this._obj instanceof BABYLON.ArcRotateCamera) {
-                camToDisplay = INSPECTOR.PROPERTIES['ArcRotateCamera'].properties;
-            }
-            else if (this._obj instanceof BABYLON.FreeCamera) {
-                camToDisplay = INSPECTOR.PROPERTIES['FreeCamera'].properties;
-            }
-            for (var _i = 0, camToDisplay_1 = camToDisplay; _i < camToDisplay_1.length; _i++) {
-                var dirty = camToDisplay_1[_i];
-                var infos = new INSPECTOR.Property(dirty, this._obj);
-                propertiesLines.push(new INSPECTOR.PropertyLine(infos));
-            }
-            return propertiesLines;
+            return INSPECTOR.Helpers.GetAllLinesProperties(this._obj);
         };
         CameraAdapter.prototype.getTools = function () {
             var tools = [];
@@ -1031,13 +1017,7 @@ var INSPECTOR;
         };
         /** Returns the list of properties to be displayed for this adapter */
         PhysicsImpostorAdapter.prototype.getProperties = function () {
-            var propertiesLines = [];
-            for (var _i = 0, _a = INSPECTOR.PROPERTIES['PhysicsImpostor'].properties; _i < _a.length; _i++) {
-                var dirty = _a[_i];
-                var infos = new INSPECTOR.Property(dirty, this._obj);
-                propertiesLines.push(new INSPECTOR.PropertyLine(infos));
-            }
-            return propertiesLines;
+            return INSPECTOR.Helpers.GetAllLinesProperties(this._obj);
         };
         PhysicsImpostorAdapter.prototype.getTools = function () {
             var tools = [];
@@ -1094,97 +1074,7 @@ var INSPECTOR;
         };
         /** Returns the list of properties to be displayed for this adapter */
         GUIAdapter.prototype.getProperties = function () {
-            var propertiesLines = [];
-            for (var _i = 0, _a = INSPECTOR.PROPERTIES['Control'].properties; _i < _a.length; _i++) {
-                var dirty = _a[_i];
-                var infos = new INSPECTOR.Property(dirty, this._obj);
-                propertiesLines.push(new INSPECTOR.PropertyLine(infos));
-            }
-            if (this._obj instanceof BABYLON.GUI.Button) {
-                for (var _b = 0, _c = INSPECTOR.PROPERTIES['Button'].properties; _b < _c.length; _b++) {
-                    var dirty = _c[_b];
-                    var infos = new INSPECTOR.Property(dirty, this._obj);
-                    propertiesLines.push(new INSPECTOR.PropertyLine(infos));
-                }
-            }
-            if (this._obj instanceof BABYLON.GUI.ColorPicker) {
-                for (var _d = 0, _e = INSPECTOR.PROPERTIES['ColorPicker'].properties; _d < _e.length; _d++) {
-                    var dirty = _e[_d];
-                    var infos = new INSPECTOR.Property(dirty, this._obj);
-                    propertiesLines.push(new INSPECTOR.PropertyLine(infos));
-                }
-            }
-            if (this._obj instanceof BABYLON.GUI.Checkbox) {
-                for (var _f = 0, _g = INSPECTOR.PROPERTIES['Checkbox'].properties; _f < _g.length; _f++) {
-                    var dirty = _g[_f];
-                    var infos = new INSPECTOR.Property(dirty, this._obj);
-                    propertiesLines.push(new INSPECTOR.PropertyLine(infos));
-                }
-            }
-            if (this._obj instanceof BABYLON.GUI.Ellipse) {
-                for (var _h = 0, _j = INSPECTOR.PROPERTIES['Ellipse'].properties; _h < _j.length; _h++) {
-                    var dirty = _j[_h];
-                    var infos = new INSPECTOR.Property(dirty, this._obj);
-                    propertiesLines.push(new INSPECTOR.PropertyLine(infos));
-                }
-            }
-            if (this._obj instanceof BABYLON.GUI.Image) {
-                for (var _k = 0, _l = INSPECTOR.PROPERTIES['Image'].properties; _k < _l.length; _k++) {
-                    var dirty = _l[_k];
-                    var infos = new INSPECTOR.Property(dirty, this._obj);
-                    propertiesLines.push(new INSPECTOR.PropertyLine(infos));
-                }
-            }
-            if (this._obj instanceof BABYLON.GUI.Line) {
-                for (var _m = 0, _o = INSPECTOR.PROPERTIES['Line'].properties; _m < _o.length; _m++) {
-                    var dirty = _o[_m];
-                    var infos = new INSPECTOR.Property(dirty, this._obj);
-                    propertiesLines.push(new INSPECTOR.PropertyLine(infos));
-                }
-            }
-            if (this._obj instanceof BABYLON.GUI.RadioButton) {
-                for (var _p = 0, _q = INSPECTOR.PROPERTIES['RadioButton'].properties; _p < _q.length; _p++) {
-                    var dirty = _q[_p];
-                    var infos = new INSPECTOR.Property(dirty, this._obj);
-                    propertiesLines.push(new INSPECTOR.PropertyLine(infos));
-                }
-            }
-            if (this._obj instanceof BABYLON.GUI.Rectangle) {
-                for (var _r = 0, _s = INSPECTOR.PROPERTIES['Rectangle'].properties; _r < _s.length; _r++) {
-                    var dirty = _s[_r];
-                    var infos = new INSPECTOR.Property(dirty, this._obj);
-                    propertiesLines.push(new INSPECTOR.PropertyLine(infos));
-                }
-            }
-            if (this._obj instanceof BABYLON.GUI.Slider) {
-                for (var _t = 0, _u = INSPECTOR.PROPERTIES['Slider'].properties; _t < _u.length; _t++) {
-                    var dirty = _u[_t];
-                    var infos = new INSPECTOR.Property(dirty, this._obj);
-                    propertiesLines.push(new INSPECTOR.PropertyLine(infos));
-                }
-            }
-            if (this._obj instanceof BABYLON.GUI.StackPanel) {
-                for (var _v = 0, _w = INSPECTOR.PROPERTIES['StackPanel'].properties; _v < _w.length; _v++) {
-                    var dirty = _w[_v];
-                    var infos = new INSPECTOR.Property(dirty, this._obj);
-                    propertiesLines.push(new INSPECTOR.PropertyLine(infos));
-                }
-            }
-            if (this._obj instanceof BABYLON.GUI.TextBlock) {
-                for (var _x = 0, _y = INSPECTOR.PROPERTIES['TextBlock'].properties; _x < _y.length; _x++) {
-                    var dirty = _y[_x];
-                    var infos = new INSPECTOR.Property(dirty, this._obj);
-                    propertiesLines.push(new INSPECTOR.PropertyLine(infos));
-                }
-            }
-            if (this._obj instanceof BABYLON.GUI.Container) {
-                for (var _z = 0, _0 = INSPECTOR.PROPERTIES['Container'].properties; _z < _0.length; _z++) {
-                    var dirty = _0[_z];
-                    var infos = new INSPECTOR.Property(dirty, this._obj);
-                    propertiesLines.push(new INSPECTOR.PropertyLine(infos));
-                }
-            }
-            return propertiesLines;
+            return INSPECTOR.Helpers.GetAllLinesProperties(this._obj);
         };
         GUIAdapter.prototype.getTools = function () {
             var tools = [];
@@ -1235,16 +1125,7 @@ var INSPECTOR;
         };
         /** Returns the list of properties to be displayed for this adapter */
         SoundAdapter.prototype.getProperties = function () {
-            var propertiesLines = [];
-            var camToDisplay = [];
-            // The if is there to work with the min version of babylon
-            var soundProperties = INSPECTOR.PROPERTIES['Sound'].properties;
-            for (var _i = 0, soundProperties_1 = soundProperties; _i < soundProperties_1.length; _i++) {
-                var dirty = soundProperties_1[_i];
-                var infos = new INSPECTOR.Property(dirty, this._obj);
-                propertiesLines.push(new INSPECTOR.PropertyLine(infos));
-            }
-            return propertiesLines;
+            return INSPECTOR.Helpers.GetAllLinesProperties(this._obj);
         };
         SoundAdapter.prototype.getTools = function () {
             var tools = [];
@@ -1346,13 +1227,7 @@ var INSPECTOR;
         };
         /** Returns the list of properties to be displayed for this adapter */
         LightAdapter.prototype.getProperties = function () {
-            var propertiesLines = [];
-            for (var _i = 0, _a = LightAdapter._PROPERTIES; _i < _a.length; _i++) {
-                var dirty = _a[_i];
-                var infos = new INSPECTOR.Property(dirty, this._obj);
-                propertiesLines.push(new INSPECTOR.PropertyLine(infos));
-            }
-            return propertiesLines;
+            return INSPECTOR.Helpers.GetAllLinesProperties(this._obj);
         };
         LightAdapter.prototype.getTools = function () {
             var tools = [];
@@ -1365,14 +1240,6 @@ var INSPECTOR;
         LightAdapter.prototype.isVisible = function () {
             return this._obj.isEnabled();
         };
-        LightAdapter._PROPERTIES = [
-            'position',
-            'diffuse',
-            'intensity',
-            'radius',
-            'range',
-            'specular'
-        ];
         return LightAdapter;
     }(INSPECTOR.Adapter));
     INSPECTOR.LightAdapter = LightAdapter;
@@ -1411,21 +1278,7 @@ var INSPECTOR;
         };
         /** Returns the list of properties to be displayed for this adapter */
         MaterialAdapter.prototype.getProperties = function () {
-            var propertiesLines = [];
-            var propToDisplay = [];
-            // The if is there to work with the min version of babylon
-            if (this._obj instanceof BABYLON.StandardMaterial) {
-                propToDisplay = INSPECTOR.PROPERTIES['StandardMaterial'].properties;
-            }
-            else if (this._obj instanceof BABYLON.PBRMaterial) {
-                propToDisplay = INSPECTOR.PROPERTIES['PBRMaterial'].properties;
-            }
-            for (var _i = 0, propToDisplay_1 = propToDisplay; _i < propToDisplay_1.length; _i++) {
-                var dirty = propToDisplay_1[_i];
-                var infos = new INSPECTOR.Property(dirty, this._obj);
-                propertiesLines.push(new INSPECTOR.PropertyLine(infos));
-            }
-            return propertiesLines;
+            return INSPECTOR.Helpers.GetAllLinesProperties(this._obj);
         };
         /** No tools for a material adapter */
         MaterialAdapter.prototype.getTools = function () {
@@ -1472,13 +1325,7 @@ var INSPECTOR;
         };
         /** Returns the list of properties to be displayed for this adapter */
         MeshAdapter.prototype.getProperties = function () {
-            var propertiesLines = [];
-            for (var _i = 0, _a = INSPECTOR.PROPERTIES['Mesh'].properties; _i < _a.length; _i++) {
-                var dirty = _a[_i];
-                var infos = new INSPECTOR.Property(dirty, this._obj);
-                propertiesLines.push(new INSPECTOR.PropertyLine(infos));
-            }
-            return propertiesLines;
+            return INSPECTOR.Helpers.GetAllLinesProperties(this._obj);
         };
         MeshAdapter.prototype.getTools = function () {
             var tools = [];
@@ -1970,6 +1817,7 @@ var INSPECTOR;
         PropertyLine.prototype._createElements = function () {
             // Colors
             if (this.type == 'Color3' || this.type == 'Color4') {
+                console.log('color', new INSPECTOR.ColorPickerElement(this.value));
                 this._elements.push(new INSPECTOR.ColorElement(this.value));
             }
             // Texture
@@ -2164,6 +2012,44 @@ var INSPECTOR;
     INSPECTOR.ColorElement = ColorElement;
 })(INSPECTOR || (INSPECTOR = {}));
 
+var INSPECTOR;
+(function (INSPECTOR) {
+    /**
+     * Represents a html div element.
+     * The div is built when an instance of BasicElement is created.
+     */
+    var ColorPickerElement = (function () {
+        function ColorPickerElement(color) {
+            this._input = INSPECTOR.Helpers.CreateInput();
+            this._input.type = 'color';
+            this._input.value = this._toRgba(color);
+        }
+        /**
+         * Returns the input element
+         */
+        ColorPickerElement.prototype.toHtml = function () {
+            return this._input;
+        };
+        ColorPickerElement.prototype._toRgba = function (color) {
+            if (color) {
+                var r = (color.r * 255) | 0;
+                var g = (color.g * 255) | 0;
+                var b = (color.b * 255) | 0;
+                var a = 1;
+                if (color instanceof BABYLON.Color4) {
+                    var a_1 = color.a;
+                }
+                return "rgba(" + r + ", " + g + ", " + b + ", " + a + ")";
+            }
+            else {
+                return '';
+            }
+        };
+        return ColorPickerElement;
+    }());
+    INSPECTOR.ColorPickerElement = ColorPickerElement;
+})(INSPECTOR || (INSPECTOR = {}));
+
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = Object.setPrototypeOf ||
         ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -2539,6 +2425,12 @@ var INSPECTOR;
         Helpers.CreateDiv = function (className, parent) {
             return Helpers.CreateElement('div', className, parent);
         };
+        /**
+         * Useful function used to create a input
+         */
+        Helpers.CreateInput = function (className, parent) {
+            return Helpers.CreateElement('input', className, parent);
+        };
         Helpers.CreateElement = function (element, className, parent) {
             var elem = INSPECTOR.Inspector.DOCUMENT.createElement(element);
             if (className) {
@@ -2595,6 +2487,23 @@ var INSPECTOR;
             }
             return name.indexOf("###") === 0 && name.lastIndexOf("###") === (name.length - 3);
         };
+        /**
+         * Return an array of PropertyLine for an obj
+         * @param obj
+         */
+        Helpers.GetAllLinesProperties = function (obj) {
+            var propertiesLines = [];
+            for (var prop in obj) {
+                /**
+                 * No private and no function
+                 */
+                if (prop.substring(0, 1) !== '_' && typeof obj[prop] !== 'function') {
+                    var infos = new INSPECTOR.Property(prop, obj);
+                    propertiesLines.push(new INSPECTOR.PropertyLine(infos));
+                }
+            }
+            return propertiesLines;
+        };
         return Helpers;
     }());
     INSPECTOR.Helpers = Helpers;

inspector/sass/main.scss

@@ -97,4 +97,4 @@
   @import "tabbar";
   @import "toolbar";
   @import "searchbar";
-}
+}

inspector/src/details/PropertyLine.ts

@@ -81,13 +81,15 @@ module INSPECTOR {
         private _validateInputHandler: EventListener;
         /** Handler used to validate the input by pressing 'esc' */
         private _escapeInputHandler: EventListener;
+        /** Handler used on focus out */
+        private _focusOutInputHandler: EventListener;
         /** Handler used to get mouse position */
         private _onMouseDownHandler: EventListener;
         private _onMouseDragHandler: EventListener;
         private _onMouseUpHandler: EventListener;
         /** Save previous Y mouse position */
         private _prevY: number;
-        /**Save value while slider in on */
+        /**Save value while slider is on */
         private _preValue: number;
 
         constructor(prop: Property, parent?: PropertyLine, level: number = 0) {
@@ -123,6 +125,7 @@ module INSPECTOR {
                 this._valueDiv.addEventListener('click', this._displayInputHandler);
                 this._input.addEventListener('keypress', this._validateInputHandler);
                 this._input.addEventListener('keydown', this._escapeInputHandler);
+                this._input.addEventListener('focusout', this._focusOutInputHandler);
             }
 
             // Add this property to the scheduler
@@ -135,7 +138,6 @@ module INSPECTOR {
          * - enters updates the property
          */
         private _initInput() {
-
             // Create the input element
             this._input = document.createElement('input') as HTMLInputElement;
             this._input.setAttribute('type', 'text');
@@ -144,6 +146,8 @@ module INSPECTOR {
             this._displayInputHandler = this._displayInput.bind(this);
             this._validateInputHandler = this._validateInput.bind(this);
             this._escapeInputHandler = this._escapeInput.bind(this);
+            this._focusOutInputHandler = this.update.bind(this);
+
             this._onMouseDownHandler = this._onMouseDown.bind(this);
             this._onMouseDragHandler = this._onMouseDrag.bind(this);
             this._onMouseUpHandler = this._onMouseUp.bind(this);
@@ -162,7 +166,7 @@ module INSPECTOR {
             }
         }
 
-        public validateInput(value: any): void {            
+        public validateInput(value: any): void {
             this.updateObject();
 
             if(typeof this._property.value === 'number'){
@@ -180,6 +184,8 @@ module INSPECTOR {
          * On escape : removes the input
          */
         private _escapeInput(e: KeyboardEvent) {
+            // Remove focus out handler
+            this._input.removeEventListener('focusout', this._focusOutInputHandler);
             if (e.keyCode == 27) {
                 // Esc : remove input
                 this.update();
@@ -207,10 +213,12 @@ module INSPECTOR {
             this._valueDiv.textContent = "";
             this._input.value = valueTxt;
             this._valueDiv.appendChild(this._input);
+            this._input.focus();
 
             if(typeof this.value === 'number') {
                 this._input.addEventListener('mousedown', this._onMouseDownHandler);
             }
+            this._input.addEventListener('focusout', this._focusOutInputHandler);
             // Pause the scheduler
             Scheduler.getInstance().pause = true;
         }
@@ -250,6 +258,7 @@ module INSPECTOR {
 
             // Colors
             if (this.type == 'Color3' || this.type == 'Color4') {
+                console.log('colorpicker',this);
                 this._elements.push(new ColorPickerElement(this.value, this));
                 //this._elements.push(new ColorElement(this.value));
             }
@@ -271,7 +280,6 @@ module INSPECTOR {
         // - If the type is complex, but instance of Vector2, Size, display the type and its tostring
         // - If the type is another one, display the Type
         private _displayValueContent() {
-
             let value = this.value;
             // If the value is a number, truncate it if needed
             if (typeof value === 'number') {
@@ -313,6 +321,7 @@ module INSPECTOR {
             // this._valueDiv.textContent = " "; // TOFIX this removes the elements after
             this._valueDiv.childNodes[0].nodeValue = this._displayValueContent();
             for (let elem of this._elements) {
+                console.log('elem', elem);
                 elem.update(this.value);
             }
         }
@@ -388,13 +397,14 @@ module INSPECTOR {
             }
         }
 
+
         /**
          * Refresh mouse position on y axis
          * @param e 
          */
         private _onMouseDrag(e: MouseEvent): void {      
             const diff = this._prevY - e.clientY;
-            this.validateInput(this._preValue + diff);
+            this._input.value = (this._preValue + diff).toString();
         }
 
         /**

inspector/src/gui/ColorElement.ts

@@ -17,7 +17,6 @@
             }
         }
         
-        
         private _toRgba(color:BABYLON.Color4|BABYLON.Color3) : string {
             if (color) {
                 let r = (color.r * 255) | 0;

inspector/src/gui/ColorPickerElement.ts

@@ -0,0 +1,61 @@
+module INSPECTOR {
+    /**
+     * Represents a html div element. 
+     * The div is built when an instance of BasicElement is created.
+     */
+    export class ColorPickerElement extends BasicElement {
+        
+        protected _input : HTMLInputElement;
+        private pline : PropertyLine;
+        
+        constructor(color:BABYLON.Color4|BABYLON.Color3, propertyLine: PropertyLine) {
+            super();
+            let scheduler = Scheduler.getInstance();
+            this._div.className = 'color-element';
+            this._div.style.backgroundColor = this._toRgba(color);
+            this._div.style.top = "5px";
+            this.pline = propertyLine;
+
+            this._input = Helpers.CreateInput();  
+            this._input.type = 'color';
+            this._input.style.opacity = "0";
+            this._input.style.width = '10px';
+            this._input.style.height = '15px';
+            this._input.value = color.toHexString();
+            
+            this._input.addEventListener('input', (e) => {
+                console.log('Color', this._input.value, this.pline)
+                this.pline.validateInput(BABYLON.Color3.FromHexString(this._input.value));
+                scheduler.pause = false;
+            });
+            
+            this._div.appendChild(this._input);
+
+            this._input.addEventListener('click', (e) => {
+                scheduler.pause = true;
+            });
+        }
+
+        public update(color?:BABYLON.Color4|BABYLON.Color3) {
+            if (color) {
+                this._div.style.backgroundColor = this._toRgba(color);
+                this._input.value = color.toHexString();
+            }
+        }
+
+        private _toRgba(color:BABYLON.Color4|BABYLON.Color3) : string {
+            if (color) {
+                let r = (color.r * 255) | 0;
+                let g = (color.g * 255) | 0;
+                let b = (color.b * 255) | 0;
+                let a = 1;
+                if (color instanceof BABYLON.Color4) {
+                    let a = (color as BABYLON.Color4).a;
+                }
+                return `rgba(${r}, ${g}, ${b}, ${a})`;
+            } else {
+                return '';
+            }
+        }
+    }
+}

inspector/src/helpers/Helpers.ts

@@ -98,6 +98,13 @@ module INSPECTOR {
             return Helpers.CreateElement('div', className, parent);
         }
 
+        /**
+         * Useful function used to create a input
+         */
+        public static CreateInput(className?: string, parent?: HTMLElement): HTMLInputElement {
+            return <HTMLInputElement>Helpers.CreateElement('input', className, parent);
+        }
+
         public static CreateElement(element: string, className?: string, parent?: HTMLElement): HTMLElement {
             let elem = Inspector.DOCUMENT.createElement(element);