separator

[jonlepage]

need natvie way for add separator title

	addSeparator( f: GUI, title?: string ) {
		const separator = f.add( { l:100 }, 'l' );
		const el = separator.domElement;
		const style: Partial<CSSStyleDeclaration> = {
			borderTop:`1px solid #aaaaaa50`,
			margin: '6px 10%',
			justifyContent: 'center',
			fontSize: 'x-small',
			paddingBottom: '6px',
			opacity: '0.7',
		};
		Object.assign( el.style, style );
		while( el.firstChild ) el.removeChild( el.firstChild ); // remove all childs
		// add title in middle
		if( title ) {
			const titleDiv = document.createElement( 'div' );
			titleDiv.style.position = 'sticky';
			titleDiv.style.backgroundColor = 'inherit';
			titleDiv.innerText = title;
			separator.domElement.appendChild( titleDiv );
		}
	}

ex:

		const f0 = gui.addFolder( 'camera' );
		( this.addSeparator( f0, 'BASE' ) );
		f0.add( obj, 'sceneW' ).listen().disable();
		f0.add( obj, 'sceneH' ).listen().disable();

[georgealways]

I had a feature like this in mind at one point, but I felt like you could accomplish the same things with a folder. I'm curious—why don't you want to use folders for "BASE" and "FOV" in your screenshot? Is it because they're already in a folder? Ultimately I left "separators" out to keep the library small, but I'd consider adding them if there were enough requests.

[jonlepage]

these purely aesthetic :) for me, folder represente a coupling property instance inside a class. (example new component tranform, position,euler....) and title separator is to represent field props groups,categories...

Some library have a design pattern type GodClass, and i feel like i need to sort some props.