How bpmn recognize one element?

Developers Modeler
1

Hello.
I have one question: How does bpmn.js recognize one element?
I have found it can recognize the bpmn:startEvent because of the bpmn.json. Besides, it can also recognize the flowable:timerEvent based on the flowable descriptor which we can add in the moddleExtensions.
But if I want to define one custom Element which structure is like below:

    <bpmn:startEvent  >
      <bpmn:extensionElements>
        <flowable:eventType >hhh</flowable:eventType>
      </bpmn:extensionElements>
    </bpmn:startEvent>

Can the bpmn.js recognize this structure above? How should I define it correctly?
I have defined one custom Element whose structure is like the above at custom-element-demo.
And its code is like below:

export default class CustomPalette {
  constructor(create, elementFactory, palette, translate) {
    this.create = create;
    this.elementFactory = elementFactory;
    this.translate = translate;

    palette.registerProvider(this);
  }

  getPaletteEntries(element) {
    const { create, elementFactory, translate } = this;

    function createRSE(event) {
      const modeler = document.$modeler;
      const moddle = modeler.get("moddle");
      const shape = elementFactory.create("shape", { type: "bpmn:StartEvent" });
      const flowableEventType = moddle.create("flowable:EventType", {
        "xmlns:flowable": "http://flowable.org/bpmn"
      });
      flowableEventType.body = "";
      let extensionElements = moddle.create("bpmn:ExtensionElements", {
        values: [flowableEventType]
      });
      extensionElements.$parent = shape;
      shape.businessObject.extensionElements = extensionElements;
      shape.businessObject.$attrs["flowable:isRSE"] = "true";
      create.start(event, shape);
    }
    return {
      "create.registry-start-event": {
        type: "bpmn:MessageEventDefinition",
        group: "events",
        className: "bpmn-icon-start-event-message",
        title: translate("Create register start event"),
        action: {
          dragstart: createRSE,
          click: createRSE
        }
      }
    };
  }
}

CustomPalette.$inject = ["create", "elementFactory", "palette", "translate"];

Thank you in advance.

2

What exactly do you mean? Can you show what your model extension looks like?

3

Thank you for your reply.
My confusion is whether bpmnjs can recognize a nested structure like “startEvent>extensionElements>flowable:eventType”, because usually, bpmnjs can only handle two levels of nesting, such as “startEvent>timerEventDefinition”. Can it recognize a three-level nesting structure?

4

Not sure where you got this from. What do you mean by recognize? You can nest as deeply as you want.

5

Is it possible, to recognize it like the way you have explian?