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
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'sisFromUI
orisFromRefresh
.
@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
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.
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 |
Issue Title | Created Date | Updated Date |
---|