As far as I understand you want to be able to create events with multiple event definitions through the palette, the context pad and the replace menu. bpmn-js can already render all BPMN 2.0 elements so adding support for multiple events is a matter of adding the ability to create them. Note that there is no existing solution for maintaining multiple event definitions. bpmn-js-properties-panel only supports single event definitions.
There’s a general example of customizing all of these: https://github.com/bpmn-io/bpmn-js-examples/tree/master/custom-elements#customize-editor-controls
I’ve created a more specific example that let’s you append end events with multiple event definitions through the context pad:
The crucial part is:
function createMultipleEndEvent() {
const endEvent = bpmnFactory.create("bpmn:EndEvent");
const errorEventDefinition1 = bpmnFactory.create(
"bpmn:ErrorEventDefinition"
);
const errorEventDefinition2 = bpmnFactory.create(
"bpmn:ErrorEventDefinition"
);
endEvent.set("bpmn:eventDefinitions", [
errorEventDefinition1,
errorEventDefinition2
]);
errorEventDefinition1.$parent = endEvent;
errorEventDefinition2.$parent = endEvent;
const shape = elementFactory.createShape({
type: "bpmn:EndEvent",
businessObject: endEvent
});
return shape;
}
CodeSandbox: https://codesandbox.io/s/multiple-event-example-zy3pt