lil-gui icon indicating copy to clipboard operation
lil-gui copied to clipboard

Call onChange on clicking Function buttons

Open optimus007 opened this issue 2 years ago • 2 comments

dat.gui used to call on change would be nice to have it here also

optimus007 avatar Jun 28 '22 15:06 optimus007

I'll consider it, thanks!

georgealways avatar Jun 28 '22 15:06 georgealways

Duplicate of #34

georgealways avatar Jun 28 '22 15:06 georgealways

I alse need this feature. Thanks in advance

pavank61295 avatar Nov 08 '22 12:11 pavank61295

Question for those requesting this feature: can you tell me why your "onChange" behavior isn't already part of the function you've bound to the controller? cc @miketucker

georgealways avatar Nov 13 '22 18:11 georgealways

For me it's Just a way of writing started in the "dat.gui" days which helped keep variable initialization and execution logic separated, & helps with quicker iterations when developing

eg: A params dictionary is initialied with

const params={
    number:0,
    color:#ff00ff
    button:()=>{//does nothing}
}

and in the gui part

gui.add( params,'number' 0,1,0.001).onChange( (num)=>{ // logic when number is changed goes here })
gui.addColor( params,'color').onChange( (hex)=>{ // logic when hex color is changed goes here })
gui.add( params,'button').onChange( ()=>{ // logic when button is clicked will go here ! })

right now i have to write the logic inside the params dictionary which breaks this flow

another use case is for testing/calling another function with parameters gui.add( params,'button').onChange(()=>{ anotherFunction(param.number, param.color) })

& finally, this i rarely use but it works nicely

gui.add( params,'button').name("AA").onChange(()=>{ //do A) })
gui.add( params,'button').name("BB").onChange(()=>{ //do B) })
gui.add( params,'button').name("CC").onChange(()=>{ //do C) })

optimus007 avatar Nov 14 '22 16:11 optimus007

As of 0.18, buttons call their onChange handlers on click. There's still some minutiae I want to figure out though:

Currently this triggers the gui.onChange handler of any folder above that button (like any other controller would). I went back and forth on that, so I'd appreciate any thoughts there. It also begs the question of whether buttons should support onFinishChange for symmetry like boolean controllers do.

Anyway, let me know how that's working!

georgealways avatar Feb 11 '23 14:02 georgealways