Merge pull request #2885 from QuentinRillet/master

Fix issue #2827 without slider fonction

inspector/sass/_tabPanel.scss

@@ -1,6 +1,5 @@
 .tab-panel {
-    height:100%;   
-    overflow-y: auto;
+    height:100%;
 
     &.searchable {
         height:calc(100% - #{$searchbar-height} - 10px);   
@@ -12,6 +11,7 @@
     
     .scene-actions {
         overflow-y: auto;
+        padding-left: 5px;
         
         // Action title : Textures/Options/Viewer
         .actions-title {

inspector/src/details/PropertyLine.ts

@@ -83,6 +83,7 @@ module INSPECTOR {
         private _escapeInputHandler: EventListener;
         /** Handler used on focus out */
         private _focusOutInputHandler: EventListener;
+        private _input_checkbox: HTMLInputElement;
         /** Handler used to get mouse position */
         private _onMouseDownHandler: EventListener;
         private _onMouseDragHandler: EventListener;
@@ -106,7 +107,10 @@ module INSPECTOR {
 
             // Value
             this._valueDiv = Helpers.CreateDiv('prop-value', this._div);
-            this._valueDiv.textContent = this._displayValueContent() || '-'; // Init value text node
+
+            if (typeof this.value !== 'boolean') {
+                this._valueDiv.textContent = this._displayValueContent() || '-'; // Init value text node
+            }
 
             this._createElements();
 
@@ -117,17 +121,18 @@ module INSPECTOR {
             this._updateValue();
 
             // If the property type is not simple, add click event to unfold its children
-            if (!this._isSimple()) {
+            if (typeof this.value === 'boolean') {
+                this._checkboxInput();
+            } else if (!this._isSimple()) {
                 this._valueDiv.classList.add('clickable');
                 this._valueDiv.addEventListener('click', this._addDetails.bind(this));
             } else {
                 this._initInput();
                 this._valueDiv.addEventListener('click', this._displayInputHandler);
-                this._input.addEventListener('keypress', this._validateInputHandler);
-                this._input.addEventListener('keydown', this._escapeInputHandler);
                 this._input.addEventListener('focusout', this._focusOutInputHandler);
+                this._input.addEventListener('keydown', this._validateInputHandler);
+                this._input.addEventListener('keydown', this._escapeInputHandler);
             }
-
             // Add this property to the scheduler
             Scheduler.getInstance().add(this);
         }
@@ -158,7 +163,11 @@ module INSPECTOR {
          * On escape : removes the input
          */
         private _validateInput(e: KeyboardEvent) {
-            if (e.keyCode == 13) {
+            this._input.removeEventListener('focusout', this._focusOutInputHandler);
+            if (e.keyCode == 13) { // Enter
+                this.validateInput(this._input.value);
+            } else if (e.keyCode == 9) { // Tab
+                e.preventDefault();
                 this.validateInput(this._input.value);
             } else if (e.keyCode == 27) {
                 // Esc : remove input
@@ -169,9 +178,9 @@ module INSPECTOR {
         public validateInput(value: any): void {
             this.updateObject();
 
-            if(typeof this._property.value === 'number'){
+            if (typeof this._property.value === 'number') {
                 this._property.value = parseFloat(value);
-            }else{
+            } else {
                 this._property.value = value;
             }
             // Remove input
@@ -195,7 +204,9 @@ module INSPECTOR {
         /** Removes the input without validating the new value */
         private _removeInputWithoutValidating() {
             Helpers.CleanDiv(this._valueDiv);
-            this._valueDiv.textContent = "-";
+            if (typeof this.value !== 'boolean') {
+                this._valueDiv.textContent = "-";
+            } 
             // restore elements
             for (let elem of this._elements) {
                 this._valueDiv.appendChild(elem.toHtml());
@@ -208,6 +219,8 @@ module INSPECTOR {
             // Remove the displayInput event listener
             this._valueDiv.removeEventListener('click', this._displayInputHandler);
 
+            
+
             // Set input value
             let valueTxt = this._valueDiv.textContent;
             this._valueDiv.textContent = "";
@@ -215,10 +228,16 @@ module INSPECTOR {
             this._valueDiv.appendChild(this._input);
             this._input.focus();
 
-            if(typeof this.value === 'number') {
+            if (typeof this.value === 'number') {
+                // Slider
+                // let slider = Helpers.CreateDiv('slider-number', this._valueDiv);
+                // slider.style.background = '#303030';
+                // slider.style.cursor = 'ew-resize';
+                // slider.innerHTML = 'HELLO'
                 this._input.addEventListener('mousedown', this._onMouseDownHandler);
             }
             this._input.addEventListener('focusout', this._focusOutInputHandler);
+
             // Pause the scheduler
             Scheduler.getInstance().pause = true;
         }
@@ -283,12 +302,12 @@ module INSPECTOR {
             if (typeof value === 'number') {
                 return Helpers.Trunc(value);
             }
+
             // If it's a string or a boolean, display its value
             if (typeof value === 'string' || typeof value === 'boolean') {
                 return value;
             }
             return PROPERTIES.format(value);
-
         }
 
         /** Delete properly this property line. 
@@ -317,7 +336,11 @@ module INSPECTOR {
             this.updateObject();
             // Then update its value
             // this._valueDiv.textContent = " "; // TOFIX this removes the elements after
-            this._valueDiv.childNodes[0].nodeValue = this._displayValueContent();
+            if (typeof this.value === 'boolean') {
+                 this._checkboxInput();
+            } else {
+                this._valueDiv.childNodes[0].nodeValue = this._displayValueContent();
+            }
             for (let elem of this._elements) {
                 elem.update(this.value);
             }
@@ -394,12 +417,11 @@ module INSPECTOR {
             }
         }
 
-
         /**
          * Refresh mouse position on y axis
          * @param e 
          */
-        private _onMouseDrag(e: MouseEvent): void {      
+        private _onMouseDrag(e: MouseEvent): void {
             const diff = this._prevY - e.clientY;
             this._input.value = (this._preValue + diff).toString();
         }
@@ -413,7 +435,7 @@ module INSPECTOR {
             window.removeEventListener('mouseup', this._onMouseUpHandler);
             this._prevY = e.clientY;
         }
-      
+
         /**
          * Start record mouse position
          * @param e 
@@ -424,5 +446,20 @@ module INSPECTOR {
             window.addEventListener('mousemove', this._onMouseDragHandler);
             window.addEventListener('mouseup', this._onMouseUpHandler);
         }
+
+        /**
+         * Create input entry
+         */
+        private _checkboxInput() {
+            if(this._valueDiv.childElementCount < 1) { // Prevent display two checkbox
+                this._input_checkbox = Helpers.CreateInput('checkbox-element', this._valueDiv);
+                this._input_checkbox.type = 'checkbox'
+                this._input_checkbox.checked = this.value;
+                this._input_checkbox.addEventListener('change', () => {
+                    Scheduler.getInstance().pause = true;
+                    this.validateInput(!this.value)
+                })
+            }            
+        }
     }
 }

inspector/src/helpers/Helpers.ts

@@ -7,6 +7,10 @@ module INSPECTOR {
          * uses getClassName. If nothing is returned, used the type of the constructor
          */
         public static GET_TYPE(obj: any): string {
+            if(typeof obj === 'boolean') {
+                return 'boolean';
+            }
+
             if (obj != null && obj != undefined) {
                 let classname = BABYLON.Tools.GetClassName(obj);
                 if (!classname || classname === 'object') {
@@ -20,8 +24,10 @@ module INSPECTOR {
                 if (!this._CheckIfTypeExists(classname)) {
                     return this._GetTypeFor(obj);
                 }
+                
                 return classname;
             } else {
+                
                 return 'type_not_defined';
             }
         }