georgealways / lil-gui

Makes a floating panel for controllers on the web. Works as a drop-in replacement for dat.gui in most projects.
https://lil-gui.georgealways.com/
MIT License
1.13k stars 43 forks source link

Nested controllers without a folder #139

Closed Peque closed 1 month ago

Peque commented 3 months ago

Not sure if there is a way to do this currently. Otherwise, this would be a feature request. :blush:

Use case

Some controllers that are related together are hidden until another controller enables them.

For example, there is a "DSM" option, initially disabled, so the next controller bellow happens to be a folder:

Screenshot from 2024-05-29 21-46-56

Now, when the user clicks on the controller to enable it, some other controllers appear that are directly related to "DSM", and only exist when "DSM" is enabled:

Screenshot from 2024-05-29 21-47-06

While the direct association between "DSM" and the three "Adjust" controllers may be intuitive when clicking to enable "DSM", this may not be so intuitive without that interaction (imagine DSM was already enabled and the user just saw a list of consecutive controllers that maybe are not even related).

Proposed approach

It would be great to be able to define the "Adjust" controllers as nested like:

nested

Note that they would be nested without having a collapsible folder with a title. To make them hide, the user would need to click on DSM to disable it completely.

georgealways commented 3 months ago

That's a somewhat common pattern, but there's no support for this out of the box. My suggestion would be to keep the "nested" controllers in an array and do something like this:

bool.onChange( v => {
  // enable( v ) would work too
  controllers.forEach( c => c.show( v ) );
} );

You could also use a folder and hide the title with css.

Peque commented 3 months ago

Thanks @georgealways !

Yeah, hidding/showing them by just iterating through the controllers and calling .show() on each one is not an issue, the goal would be to display the nested vertical line separator on them:

334946362-c50311a2-6204-4dce-b49b-347844d0b67e

I'll try the CSS-title-hide workaround to see if I can make it work, thanks! :blush: