lavrton
commented
1 year ago Hello. I would like to have additional information about your use cases. The current store and elements are "event-less" intentionally.
store.on('change') to include { pageId(s), elementId(s) } that were changed? also including creation and deletion as a change.
I will need to find if I can give a patch object. As workaround you can always compare previous JSON with the new JSON and change what is changed.
store.on('load')
Load of what? Right now, it is designed as:
// import data
store.loadJSON(json);
// wait for loading
await store.waitLoading();
// do export
const url = await store.toDataURL();page.on('change'), page.on('focus'), page.on('blur')
Why do you need to listen to change on a specific page? For focus event you can technically use this:
import { reaction } from 'mobx';
reaction(() => store.activePage, () => {
console.log('active pages is changed');
});But still, I am not certain why you may need that. If you want to highlight something in UI, it is better to use observer and reactive nature of the store:
import { observer } from 'mobx-react-lite';
const App = observer(({ store }) => {
return (
<div>
{store.pages.map(page => {
cosnt isActive = page === store.activePage;
return <div style={{ border: isActive ? 'solid 1px red' : 'none' }} />
})}
</div>
);
});element.on('select'), element.on('unselect'), store.on('selectionChanged')
Similar to page, you can react on any change on store.selectedElements property.
element.on('hover'), element.on('dbl-click')
Why do you need it? By design an SDK user shouldn't listen to UI events. Only "data" events, such as "change" and react to any changes in model with observer.
iamsterdam800
Hi Anton,
Trying to extend your editor with custom UX logic, and I find it quite challenging to add logic due to missing information about user actions. Would it be feasible to extend the event API in the following directions?:
store.on('change')to include{ pageId(s), elementId(s) }that were changed? also including creation and deletion as a change.store.on('load')page.on('change'),page.on('focus'),page.on('blur')element.on('select'),element.on('unselect'),store.on('selectionChanged')element.on('hover'),element.on('dbl-click')element.on('change'),element.on('delete')