Bpmn-js: An example of using the command interceptor

[Matteo]

I need an example of using the command interceptor.
In particular, my goal is to change some properties via the “bpmn-js-properties-panel” package and graphically reflect these changes, such as changing a label.
I’m working with React

[philippfromme]

A command interceptor is meant to hook into a command that is being executed. What you’re trying to do sounds more like simply executing commands which in most cases should be done by using the modeling API. Anyway, here’s an example of a command interceptor in action: Command Interceptor Example - CodeSandbox

[Matteo]

Thanks for the example.
But if you recommend to use the modeling API i can try.
But I have no idea how to use it, sorry I’m new to this tool.

[Matteo]

The example doesn’t seem to work with sequence flow arrow.
Could the modeling API work ?

[Matteo]

Nvm, I fixed it.
Thanks a lot !

To change the label of a sequence arrow (or conditional flow) after adding an inline script, I change a few lines of the code you provided, specifically:

This:

this.postExecuted(["shape.create"], ({ context }) => {
      const { shape } = context;

      const { id } = shape;

      modeling.updateLabel(shape, id);
    });

Becomes:

const shape = context.element;

      const id = context.properties.body;

      if (id !== undefined) modeling.updateLabel(shape, id);
    });