Merge pull request #3838 from Bloadrick/master

Inspector Improvements v2

inspector/src/details/DetailPanel.ts

@@ -11,6 +11,9 @@
         private _detailRows : Array<PropertyLine> = [];
         // Store the sort direction of each header column
         private _sortDirection : SortDirection = {};
+        // The search bar
+        private _searchDetails : SearchBarDetails;
+        private _details : HTMLElement;
 
         constructor(dr? : Array<PropertyLine>) {
             super();
@@ -23,36 +26,72 @@
         }
 
         set details(detailsRow : Array<PropertyLine>) {
-            this.clean();   
+            this.clean();
+            //add the searchBar
+            this._addSearchBarDetails();
+            this._details = Helpers.CreateDiv('details', this._div);
             this._detailRows = detailsRow;
-            
             // Refresh HTML
             this.update();
         }
-        protected _build() {            
+
+        protected _build() {
             this._div.className = 'insp-details';
             this._div.id = 'insp-details';
-            
             // Create header row
             this._createHeaderRow();
             this._div.appendChild(this._headerRow);
             
-        }
+        } 
         
         /** Updates the HTML of the detail panel */
-        public update() {                 
-            this._sortDetails('name', 1);  
-            this._addDetails();
+        public update(_items?: Array<PropertyLine>) {            
+            this._sortDetails('name', 1);
+            // Check the searchbar
+            if (_items) {
+                this.cleanRow();
+                this._addSearchDetails(_items);
+                //console.log(_items);
+            } else {
+                this._addDetails();
+                //console.log("np");
+            }
+        }
+
+         /** Add the search bar for the details */
+        private _addSearchBarDetails() {
+            let searchDetails = Helpers.CreateDiv('searchbar-details', this._div);
+            // Create search bar
+            this._searchDetails = new SearchBarDetails(this);
+
+            searchDetails.appendChild(this._searchDetails.toHtml());
+            this._div.appendChild(searchDetails);
+        }
+
+        /** Search an element by name  */
+        public searchByName(searchName: string) {
+            let rows = [];
+            for (let row of this._detailRows) {
+                if(row.name.indexOf(searchName) >= 0){
+                    rows.push(row);
+                }
+            }
+            this.update(rows);
         }
 
         /** Add all lines in the html div. Does not sort them! */
         private _addDetails() {
-            let details = Helpers.CreateDiv('details', this._div);
             for (let row of this._detailRows) {
-                details.appendChild(row.toHtml());
+                this._details.appendChild(row.toHtml());
             }
         }
 
+        private _addSearchDetails(_items: Array<PropertyLine>) {
+            for (let row of _items) {
+                this._details.appendChild(row.toHtml());
+            }   
+        }
+
         /**
          * Sort the details row by comparing the given property of each row
          */
@@ -108,18 +147,27 @@
         /**
          * Removes all data in the detail panel but keep the header row
          */
-        public clean() {   
-                        
+        public clean() {         
             // Delete all details row
             for (let pline of this._detailRows) {
                 pline.dispose();
             }
-            
             Helpers.CleanDiv(this._div);
             // Header row
             this._div.appendChild(this._headerRow);
         }
 
+        /**
+         * Clean the rows only
+         */
+        public cleanRow() {           
+            // Delete all details row
+            for (let pline of this._detailRows) {
+                pline.dispose();
+            }
+            Helpers.CleanDiv(this._details);
+        }
+
         /** Overrides basicelement.dispose */
         public dispose() {
             // Delete all details row
@@ -139,7 +187,7 @@
 
                 // Column title - first letter in uppercase
                 let spanName = Inspector.DOCUMENT.createElement('span');
-                spanName.textContent = name.charAt(0).toUpperCase() + name.slice(1); 
+                spanName.textContent = name.charAt(0).toUpperCase() + name.slice(1);
                 
                 // sort direction
                 let spanDirection = Inspector.DOCUMENT.createElement('i');

inspector/src/details/PropertyLine.ts

@@ -223,6 +223,8 @@ module INSPECTOR {
             if (this._parent) {
                 this._property.obj = this._parent.updateObject();
             }
+            
+            
             return this._property.value;
         }
 
@@ -319,6 +321,60 @@ module INSPECTOR {
                 this._rangeInput();
             } else {
                 this._valueDiv.childNodes[0].nodeValue = this._displayValueContent();
+
+            //Doing the Hexa convertion
+            if((this._property.type == "Color3" && this._children.length == 5 && this._children[1].value == true) || (this._property.type == "Color4" && this._children.length == 6 && this._children[1].value == true)){
+                if(this._children[0] != undefined &&  this._children[0].name == "hex"){
+                    let hexLineString = this._children[0].value;
+                    let rValue = (parseInt((hexLineString.slice(1,3)), 16)) * (1/255);
+                    let rValueRound = Math.round(100*rValue)/100 ;
+                    this.value.r = rValueRound;
+                    let gValue = (parseInt((hexLineString.slice(3,5)), 16)) * (1/255);
+                    let gValueRound = Math.round(100*gValue)/100 ;
+                    this.value.g = gValueRound;
+                    let bValue = (parseInt((hexLineString.slice(5,7)), 16)) * (1/255);
+                    let bValueRound = Math.round(100*bValue)/100 ;
+                    this.value.b = bValueRound;
+                        if(this._children[2].name == "a"){
+                            let aValue = (parseInt((hexLineString.slice(7,9)), 16)) * (1/255);
+                            let aValueRound = Math.round(100*aValue)/100;
+                            this.value.a = aValueRound;
+                        }
+                    }
+            }else if(this._property.type == "Color3" || this._property.type == "Color4"){
+                if(this._property.value.hex != undefined && this._property.value.hex != null){
+                    let hexLineInfos = [];
+                    let valHexR = ((this._property.value.r * 255)|0).toString(16);
+                    hexLineInfos.push(valHexR);
+                    if(valHexR == "0"){
+                        hexLineInfos.push("0");
+                    }
+                    let valHexG = ((this._property.value.g * 255)|0).toString(16);
+                    hexLineInfos.push(valHexG);
+                    if(valHexG == "0"){
+                        hexLineInfos.push("0");
+                    }
+                    let valHexB = ((this._property.value.b * 255)|0).toString(16);
+                    hexLineInfos.push(valHexB);
+                    if(valHexB == "0"){
+                        hexLineInfos.push("0");
+                    }
+                    if(this._property.value.a != undefined){
+                        let valHexA = ((this._property.value.a * 255)|0).toString(16);
+                        hexLineInfos.push(valHexA);
+                        if(valHexA == "0"){
+                            hexLineInfos.push("0");
+                        }
+                    }
+                    hexLineInfos.unshift("#");
+                    let hexLineString = hexLineInfos.join("");
+                    this._property.value.hex = hexLineString; 
+                    hexLineInfos.length = 0;
+                }
+
+            }
+            
+
             }
             for (let elem of this._elements) {
                 elem.update(this.value);
@@ -386,22 +442,47 @@ module INSPECTOR {
                 // if children does not exists, generate it
                 this._div.classList.toggle('unfolded');
                 if (this._children.length == 0) {
+                    
                     let objToDetail = this.value;
+                    
                     // Display all properties that are not functions
                     let propToDisplay = Helpers.GetAllLinesPropertiesAsString(objToDetail);
-
                     // special case for color3
                     if ((propToDisplay.indexOf('r') && propToDisplay.indexOf('g') && propToDisplay.indexOf('b')) == 0) {
                         propToDisplay.sort();
                     } else {
                         propToDisplay.sort().reverse();
                     }
-
                     for (let prop of propToDisplay) {
                         let infos = new Property(prop, this._property.value);
-                        let child = new PropertyLine(infos, this, this._level + PropertyLine._MARGIN_LEFT);
+                        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);
+                        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  valHex = ((infos.value * 255)|0).toString(16);
+                                hexLineInfos.push(valHex);
+                                if(valHex == "0"){
+                                    hexLineInfos.push("0");
+                                }
+                        }
+                        hexLineInfos.push("#");
+                        hexLineInfos.reverse();
+                        let hexLineString = hexLineInfos.join("");
+                        
+                        let hexLineProp = new Property("hex", this._property.value);
+                        hexLineProp.value = hexLineString;
+                        let hexLine = new PropertyLine(hexLineProp, this, this._level + PropertyLine._MARGIN_LEFT);
+                   
+                        this._children.unshift(hexLine);
+                    } 
                 }
                 // otherwise display it    
                 if (this._div.parentNode) {

inspector/src/gui/SearchBar.ts

@@ -6,12 +6,12 @@ module INSPECTOR {
      */
     export class SearchBar extends BasicElement {
 
-        private _tab   : PropertyTab;
+        private _propTab   : PropertyTab;
         private _inputElement: HTMLInputElement;
 
         constructor(tab:PropertyTab) {
             super();
-            this._tab = tab;
+            this._propTab = tab;
             this._div.classList.add('searchbar');
             
             let filter = Inspector.DOCUMENT.createElement('i');
@@ -25,7 +25,43 @@ module INSPECTOR {
             
             this._inputElement.addEventListener('keyup', (evt : KeyboardEvent)=> {
                 let filter = this._inputElement.value;
-                this._tab.filter(filter);
+                this._propTab.filter(filter);
+            })
+        }
+
+        /** Delete all characters typped in the input element */
+        public reset() {
+            this._inputElement.value = '';
+        }
+
+        public update() {
+            // Nothing to update
+        }
+
+    }
+
+    export class SearchBarDetails extends BasicElement {
+
+        private _detailTab  : DetailPanel;
+        private _inputElement: HTMLInputElement;
+
+        constructor(tab:DetailPanel) {
+            super();
+            this._detailTab = tab;
+            this._div.classList.add('searchbar');
+            
+            let filter = Inspector.DOCUMENT.createElement('i');
+            filter.className = 'fa fa-search';
+            
+            this._div.appendChild(filter);
+            // Create input
+            this._inputElement = Inspector.DOCUMENT.createElement('input');
+            this._inputElement.placeholder = 'Filter by name...';
+            this._div.appendChild(this._inputElement);
+            
+            this._inputElement.addEventListener('keyup', (evt : KeyboardEvent)=> {
+                let filter = this._inputElement.value;
+                this._detailTab.searchByName(filter);
             })
         }