How to update shapes on pure diagram-js without command stack etc

[catcher]

Hi,
I’d like to update shapes (create them or update some props like names, descriptions, etc.) without using the command stack.
Currently, I’m using this approach:

export default class MyModeling extends BaseModeling {
  ...  
  getHandlers() {
    const handlers = super.getHandlers();
    handlers['element.updateProperties'] = UpdatePropertiesHandler;
    return handlers;
  }
  ...
}

export default class UpdatePropertiesHandler {
  ...
  execute(context) {
    ...
    context.changed = [element];
    return context.changed;
  }
  ...
}

And this is working fine when I’m explicitly invoking element.updateProperties. It also updates undo/redo stack which is good in this case.

However, I faced new requirements where data about shapes (also new shapes) can pop up asynchronously from the backend. I should be able to visualize those changes on a diagram, but without affecting undo/redo stack. Just force rendered to redraw particular elements.
Is this possible to achieve with pure diagram-js?

Thanks for your help in advance.

Regards,
Michal

[catcher]

I think I found how to refresh elements without affecting the command stack.
It looks to me that firing an event ‘elements.changed’ with {elemenets} does the job.

eventBus.fire('elements.changed', { elements });

However still not sure if this is the proper way, so you are welcome to comment on this.
Thanks.

[nikku]

@catcher This is the proper way.

Under the hood diagram-js uses a simple redraw loop.

--> change EL (usually via command stack)
--> remember EL as changed (marked as changed what gets returned from command handlers)
--> emit `elements.changed` [ ..., EL ] (responsibility of the command stack)
--> redraw everything that changed (change support takes on this)