diff --git a/examples/jsm/inspector/tabs/Parameters.js b/examples/jsm/inspector/tabs/Parameters.js index 64871c08ef5e8a..1724c1d6d100b5 100644 --- a/examples/jsm/inspector/tabs/Parameters.js +++ b/examples/jsm/inspector/tabs/Parameters.js @@ -9,9 +9,9 @@ class ParametersGroup { constructor( parameters, name ) { this.parameters = parameters; - this.name = name; this.paramList = new Item( name ); + this.paramList.setCollapsible( true ); this.objects = []; @@ -25,6 +25,30 @@ class ParametersGroup { } + name( name ) { + + this.paramList.setValue( 0, name ); + + return this; + + } + + show() { + + this.paramList.show(); + + return this; + + } + + hide() { + + this.paramList.hide(); + + return this; + + } + add( object, property, ...params ) { const value = object[ property ]; @@ -129,6 +153,9 @@ class ParametersGroup { this.objects.push( { object: object, key: property, editor: editor, subItem: subItem } ); + editor.addEventListener( 'show', () => subItem.show() ); + editor.addEventListener( 'hide', () => subItem.hide() ); + } addString( object, property ) { diff --git a/examples/jsm/inspector/tabs/Viewer.js b/examples/jsm/inspector/tabs/Viewer.js index 8ab7c6620aa2a8..7028213146b11a 100644 --- a/examples/jsm/inspector/tabs/Viewer.js +++ b/examples/jsm/inspector/tabs/Viewer.js @@ -94,6 +94,7 @@ class Viewer extends Tab { this.content.appendChild( fullViewerContainer ); const nodes = new Item( 'User Defined' ); + nodes.setCollapsible( true ); nodeList.add( nodes ); // @@ -200,6 +201,7 @@ class Viewer extends Tab { if ( folder === undefined ) { folder = new Item( name ); + folder.setCollapsible( true ); this.folderLibrary.set( name, folder ); this.nodeList.add( folder ); diff --git a/examples/jsm/inspector/ui/Item.js b/examples/jsm/inspector/ui/Item.js index 5932a7b5ee0dfd..b64ec2a92c5179 100644 --- a/examples/jsm/inspector/ui/Item.js +++ b/examples/jsm/inspector/ui/Item.js @@ -4,6 +4,7 @@ export class Item { this.children = []; this.isOpen = true; + this.isCollapsible = false; this.childrenContainer = null; this.parent = null; this.domElement = document.createElement( 'div' ); @@ -13,23 +14,15 @@ export class Item { this.userData = {}; - this.data = data; - this.data.forEach( ( cellData ) => { + this.data = []; + data.forEach( ( cellData, index ) => { const cell = document.createElement( 'div' ); cell.className = 'list-item-cell'; - if ( cellData instanceof HTMLElement ) { - - cell.appendChild( cellData ); - - } else { - - cell.append( String( cellData ) ); - - } - this.itemRow.appendChild( cell ); + this.setValue( index, cellData ); + } ); this.domElement.appendChild( this.itemRow ); @@ -116,7 +109,7 @@ export class Item { const firstCell = this.itemRow.querySelector( '.list-item-cell:first-child' ); let toggler = this.itemRow.querySelector( '.item-toggler' ); - if ( this.children.length > 0 ) { + if ( this.children.length > 0 || this.isCollapsible ) { if ( ! toggler ) { @@ -140,6 +133,36 @@ export class Item { } + setCollapsible( collapsible ) { + + this.isCollapsible = collapsible; + + if ( collapsible ) { + + this.itemRow.classList.add( 'collapsible' ); + + if ( ! this.childrenContainer ) { + + this.childrenContainer = document.createElement( 'div' ); + this.childrenContainer.className = 'list-children-container'; + this.childrenContainer.classList.toggle( 'closed', ! this.isOpen ); + this.domElement.appendChild( this.childrenContainer ); + this.itemRow.addEventListener( 'click', this.onItemClick ); + + } + + } else { + + this.itemRow.classList.remove( 'collapsible' ); + + } + + this.updateToggler(); + + return this; + + } + toggle() { this.isOpen = ! this.isOpen; @@ -167,4 +190,60 @@ export class Item { } + show() { + + this.domElement.style.display = ''; + + return this; + + } + + hide() { + + this.domElement.style.display = 'none'; + + return this; + + } + + setValue( index, value ) { + + this.data[ index ] = value; + + const cell = this.itemRow.children[ index ]; + + if ( cell ) { + + const toggler = cell.querySelector( '.item-toggler' ); + + cell.innerHTML = ''; + + if ( toggler ) { + + cell.appendChild( toggler ); + + } + + if ( value instanceof HTMLElement ) { + + cell.appendChild( value ); + + } else { + + cell.append( String( value ) ); + + } + + } + + return this; + + } + + getValue( index ) { + + return this.data[ index ]; + + } + } diff --git a/examples/jsm/inspector/ui/Style.js b/examples/jsm/inspector/ui/Style.js index 813eec7cb618f7..39cf891904e6d0 100644 --- a/examples/jsm/inspector/ui/Style.js +++ b/examples/jsm/inspector/ui/Style.js @@ -505,6 +505,7 @@ export class Style { min-height: 16px; display: flex; align-items: center; + line-height: 1; } .mini-panel-content .collapsible-icon { @@ -1109,7 +1110,6 @@ export class Style { .list-item-wrapper.header-wrapper>.list-item-row>.list-item-cell:first-child { font-weight: 600; - line-height: 1; } .list-item-row.collapsible, diff --git a/examples/jsm/inspector/ui/Values.js b/examples/jsm/inspector/ui/Values.js index f79a13b5315043..8e35397e4e8f95 100644 --- a/examples/jsm/inspector/ui/Values.js +++ b/examples/jsm/inspector/ui/Values.js @@ -53,6 +53,22 @@ class Value extends EventDispatcher { } + show() { + + this.dispatchEvent( { type: 'show' } ); + + return this; + + } + + hide() { + + this.dispatchEvent( { type: 'hide' } ); + + return this; + + } + } class ValueNumber extends Value { @@ -333,6 +349,32 @@ class ValueSelect extends Value { } + setValue( val ) { + + if ( Array.isArray( this.options ) ) { + + this.select.value = val; + + } else { + + const entry = Object.entries( this.options ).find( ( [ , v ] ) => v === val ); + + if ( entry ) { + + this.select.value = entry[ 0 ]; + + } else { + + this.select.value = val; + + } + + } + + return super.setValue( val ); + + } + getValue() { const options = this.options; @@ -386,9 +428,29 @@ class ValueColor extends Value { } + setValue( val ) { + + const colorHex = this._getColorHex( val ); + + this.colorInput.value = colorHex; + + if ( this._value && this._value.isColor ) { + + this._value.setHex( parseInt( colorHex.slice( 1 ), 16 ) ); + + } else { + + this._value = val; + + } + + return super.setValue( val ); + + } + _getColorHex( color ) { - if ( color.isColor ) { + if ( color && color.isColor ) { color = color.getHex(); @@ -396,9 +458,9 @@ class ValueColor extends Value { if ( typeof color === 'number' ) { - color = `#${ color.toString( 16 ) }`; + color = '#' + color.toString( 16 ).padStart( 6, '0' ); - } else if ( color[ 0 ] !== '#' ) { + } else if ( typeof color === 'string' && color[ 0 ] !== '#' ) { color = '#' + color;