Inspector: Improve folder renaming, color/select value updates, and visibility controls (#33853)

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 ) {

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 );

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 ];
+
+	}
+
 }

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,

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;