cocopon / tweakpane

:control_knobs: Compact GUI for fine-tuning parameters and monitoring value changes
https://tweakpane.github.io/docs/
MIT License
3.43k stars 86 forks source link

Question: conditional rendering #388

Closed afternoon2 closed 2 years ago

afternoon2 commented 2 years ago

Hello! I'd like to ask if there is a possibility to conditionally render (and rerender) the Pane's or folder's content depending on the input's value? For example:

const ui = new Pane({
    title: 'ettings',
    expanded: true,
    container: document.getElementById('tweakpane-container'),
  });

const control = ui.addInput({ 'Param': 'Value A' }, 'Param' {
  options: {
    'Value A': 'Value A',
    'Value B': 'Value B'
   },
 });

const optionsFolder = ui.addFolder({
  title: 'Options',
});

control.on('change', ev => {
  // possible input removal API?
  optionsFolder.removeInputs();
  switch (ev.value) {
    case 'Value A':
      // add set of inputs for 'Value A' type
      break;
    case 'Value B':
    default:
      // add set of inputs for 'Value B' type
    break;
  }
})
cocopon commented 2 years ago

You can use optionsFolder.remove() or optionsFolder.children[n].dispose() to remove inputs. See API reference for details:

https://cocopon.github.io/tweakpane/api/classes/index.folderapi.html

afternoon2 commented 2 years ago

oh dear, my apologies, I totally didn't notice it (neither my VSCode Typescript plugin did!) 🤦