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

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.


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.'elements.changed', { elements });

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

1 Like

@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)
1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.