Parameters: Add .addFolder() and addColor(), fix slider default value

Author: sunag

examples/jsm/inspector/tabs/Parameters.js

@@ -2,7 +2,7 @@ import { Tab } from '../ui/Tab.js';
 import { List } from '../ui/List.js';
 import { Item } from '../ui/Item.js';
 import { createValueSpan } from '../ui/utils.js';
-import { ValueNumber, ValueSlider, ValueSelect, ValueCheckbox } from '../ui/Values.js';
+import { ValueNumber, ValueSlider, ValueSelect, ValueCheckbox, ValueColor } from '../ui/Values.js';
 
 class ParametersGroup {
 
@@ -11,7 +11,15 @@ class ParametersGroup {
 		this.parameters = parameters;
 		this.name = name;
 
-		this.item = new Item( name );
+		this.paramList = new Item( name );
+
+	}
+
+	close() {
+
+		this.paramList.close();
+
+		return this;
 
 	}
 
@@ -48,6 +56,16 @@ class ParametersGroup {
 
 	}
 
+	addFolder( name ) {
+
+		const group = new ParametersGroup( this.parameters, name );
+
+		this.paramList.add( group.paramList );
+
+		return group;
+
+	}
+
 	addBoolean( object, property ) {
 
 		const value = object[ property ];
@@ -63,7 +81,7 @@ class ParametersGroup {
 		description.textContent = property;
 
 		const subItem = new Item( description, editor.domElement );
-		this.item.add( subItem );
+		this.paramList.add( subItem );
 
 		// extends logic to toggle checkbox when clicking on the row
 
@@ -114,7 +132,41 @@ class ParametersGroup {
 		description.textContent = property;
 
 		const subItem = new Item( description, editor.domElement );
-		this.item.add( subItem );
+		this.paramList.add( subItem );
+
+		const itemRow = subItem.domElement.firstChild;
+		itemRow.classList.add( 'actionable' );
+
+		// extend object property
+
+		editor.name = ( name ) => {
+
+			description.textContent = name;
+
+			return editor;
+
+		};
+
+		return editor;
+
+	}
+
+	addColor( object, property ) {
+
+		const value = object[ property ];
+
+		const editor = new ValueColor( { value } );
+		editor.addEventListener( 'change', ( { value } ) => {
+
+			object[ property ] = value;
+
+		} );
+
+		const description = createValueSpan();
+		description.textContent = property;
+
+		const subItem = new Item( description, editor.domElement );
+		this.paramList.add( subItem );
 
 		const itemRow = subItem.domElement.firstChild;
 		itemRow.classList.add( 'actionable' );
@@ -148,7 +200,7 @@ class ParametersGroup {
 		description.textContent = property;
 
 		const subItem = new Item( description, editor.domElement );
-		this.item.add( subItem );
+		this.paramList.add( subItem );
 
 		const itemRow = subItem.domElement.firstChild;
 		itemRow.classList.add( 'actionable' );
@@ -183,7 +235,7 @@ class ParametersGroup {
 		description.textContent = property;
 
 		const subItem = new Item( description, editor.domElement );
-		this.item.add( subItem );
+		this.paramList.add( subItem );
 
 		const itemRow = subItem.domElement.firstChild;
 		itemRow.classList.add( 'actionable' );
@@ -226,9 +278,9 @@ class Parameters extends Tab {
 
 	createGroup( name ) {
 
-		const group = new ParametersGroup( this.parameters, name );
+		const group = new ParametersGroup( this, name );
 
-		this.paramList.add( group.item );
+		this.paramList.add( group.paramList );
 
 		return group;
 

examples/jsm/inspector/ui/Item.js

@@ -66,6 +66,7 @@ export class Item {
 
 			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 );
 
@@ -141,10 +142,16 @@ export class Item {
 
 	toggle() {
 
-		if ( ! this.childrenContainer ) return;
 		this.isOpen = ! this.isOpen;
 		this.itemRow.classList.toggle( 'open', this.isOpen );
-		this.childrenContainer.classList.toggle( 'closed', ! this.isOpen );
+
+		if ( this.childrenContainer ) {
+
+			this.childrenContainer.classList.toggle( 'closed', ! this.isOpen );
+
+		}
+
+		return this;
 
 	}
 

examples/jsm/inspector/ui/Values.js

@@ -209,7 +209,6 @@ class ValueSlider extends Value {
 
 		this.slider = document.createElement( 'input' );
 		this.slider.type = 'range';
-		this.slider.value = value;
 		this.slider.min = min;
 		this.slider.max = max;
 		this.slider.step = step;
@@ -219,6 +218,8 @@ class ValueSlider extends Value {
 		this.numberInput.style.width = '60px';
 		this.numberInput.style.flexShrink = '0';
 
+		this.slider.value = value;
+
 		this.domElement.append( this.slider, this.numberInput );
 
 		this.slider.addEventListener( 'input', () => {
@@ -318,4 +319,69 @@ class ValueSelect extends Value {
 
 }
 
-export { Value, ValueNumber, ValueCheckbox, ValueSlider, ValueSelect };
+class ValueColor extends Value {
+
+	constructor( { value = '#ffffff' } ) {
+
+		super();
+
+		const colorInput = document.createElement( 'input' );
+		colorInput.type = 'color';
+		colorInput.value = this._getColorHex( value );
+		this.colorInput = colorInput;
+
+		this._value = value;
+
+		colorInput.addEventListener( 'input', () => {
+
+			const colorValue = colorInput.value;
+
+			if ( this._value.isColor ) {
+
+				this._value.setHex( parseInt( colorValue.slice( 1 ), 16 ) );
+
+			} else {
+
+				this._value = colorValue;
+
+			}
+
+			this.dispatchChange();
+
+		} );
+
+		this.domElement.appendChild( colorInput );
+
+	}
+
+	_getColorHex( color ) {
+
+		if ( color.isColor ) {
+
+			color = color.getHex();
+
+		}
+
+		if ( typeof color === 'number' ) {
+
+			color = `#${ color.toString( 16 ) }`;
+
+		} else {
+
+			color = color;
+
+		}
+
+		return color;
+
+	}
+
+	getValue() {
+
+		return this._value;
+
+	}
+
+}
+
+export { Value, ValueNumber, ValueCheckbox, ValueSlider, ValueSelect, ValueColor };