Why my custom menuProvider render incorrectly, can you help me?

Developers Modeler
1

Hello, everyone.
I have created one custom element called “register start event” and I added one custom menuProvider for it. I have put my project in my custom-element-demo.
I can drag the custom element from the palette panel and it renders correctly.
image

But when I change the element from menuProvider, it will render incorrectly.
image

What should I do to resolve it?
Thank you in advance.

2 
shape.businessObject.extensionElements = extensionElements;
shape.businessObject.$attrs["flowable:isRSE"] = "true";
console.log("popMenu");
return shape;

This code is problematic. The diagram only rerenders after it was changed by executing a command. You’re monkey-patching the element. No one is notified about the change. After replacing the start event you need to add the extension element using a command interceptor. An example:

class MyCommandInterceptor extends CommandInterceptor {
  constructor(eventBus, moddle, modeling) {
    super(eventBus);

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

      const extensionElements = moddle.create("bpmn:ExtensionElements");

      const extensionElement = moddle.createAny(
        "foo:Bar",
        "https://foobar.com",
        {
          baz: true
        }
      );

      extensionElement.$parent = extensionElements;

      extensionElements.set("values", [extensionElement]);

      modeling.updateProperties(shape, {
        extensionElements
      });

      console.log(shape.businessObject);
    });
  }
}

CodeSandbox: Shape Replace Command Interceptor Example - CodeSandbox

3

It works for me. Thanks for your reply :smile:.

1 Like