.on('change') event object should have a source value

This issue has been tracked since 2022-09-29.

It would be nice to know who triggered the change event and be able to distinguish if the change came from the ui or from a manual .refresh() call

The event could have boolean attributes like isFromUI, isFromRefresh or a simple source state with all the posible event trigger sources like 'UI' | 'MANUAL_REFRESH'

pane.addInput(paneParams, 'paneParam')
.on('change', ev => {
  if (ev.isFromUI)
    // Do stuff
  if (ev.isFromRefresh)
    // Do stuff
  if (ev.source !== 'UI') 
    // Do stuff
})

Other option could be that the .refresh() function can receive a param to avoid re-triggering the change event

pane.refresh(false)

This way we can avoid have to create refreshing flags for every blade/pane as was proposed as workaround on #289

cocopon wrote this answer on 2022-10-03

I think it's out of scope of the library. All of refresh() is called by users. It means that users can always know whether it's isFromUI or isFromRefresh.

cocopon wrote this answer on 2022-10-06

Feel free to reopen the issue if you have any updates.

salazarr-js wrote this answer on 2022-10-06

I think it's out of scope of the library. All of refresh() is called by users. It means that users can always know whether it's isFromUI or isFromRefresh.

@cocopon I understand that is out scope, but still think that will improve the developer experience if it avoid unnecesary boilerplate to validate manually with externals boolean flags, more if we have a lot active panes and wanna check all of them.

My particular case is that i'm using vue and firebase, and when i'm having an update from firebase y call the .refresh() func for some active panes, the downside is that triggers the .on('change') event where i push the UI updates back to firesbase, having like 2 or more duplicated requests.

Because of that, having the source that triggers the event inside the event object itself or just the capability to disable temporarily the on('change') event if we call page.refresh(false) or something similar could improve the DX making the event litle more comprehensive

cocopon wrote this answer on 2022-10-15

You can create a utility like this:

// This is just an example, not tested...

class RefreshContainer {
  private readonly pane: Pane;
  private refreshing_ = false;

  constructor(pane: Pane) {
    this.pane = pane;
  }

  get refreshing(): boolean {
    return this.refreshing_;
  }

  public refresh(): void {
    this.refreshing_ = true;
    this.pane.refresh();
    this.refreshing_ = false;
  }
}

// ...

const rc = new RefreshContainer(new Pane());

rc.pane.on('change', (ev) => {
  if (rc.refreshing) {
    // Do something
  }
});

// ...

rc.refresh();

You can also publish this kind of utility as a npm package to avoid copy-pasting the code.

Packages with lots of features may be convenient, but they are less maintainable and sometimes lose their concept, IMO.

webgoto wrote this answer on 2023-02-03

Thanks for the great plugin
I too would like to have a flag like "ev.isFromRefresh".
Please kindly consider this matter.

More Details About Repo
Owner Name cocopon
Repo Name tweakpane
Full Name cocopon/tweakpane
Language TypeScript
Created Date 2016-05-10
Updated Date 2023-03-17
Star Count 2603
Watcher Count 19
Fork Count 71
Issue Count 11

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date