New event connect to existing gateway

Hi I am trying to create an new event and connect it to existing gateway. Looks like I am doing something wrong because shapes are created but diagram xml looks wrong.

here is code bpmn-js Sandbox (forked) - CodeSandbox

Run, click connect and click export after to see generated xml on console.

See that it creates shape with empty dc:Bounds object.

     <bpmndi:BPMNShape id="Event_126g3wh_di" bpmnElement="Event_126g3wh">
        <dc:Bounds />
      </bpmndi:BPMNShape>

Please help!

I see that in your codesandbox, we use canvas to directly add shapes on canvas. This won’t work if you want to export XML afterwards. What you should do instead is to use the Modeling API.

Fortunately, there is a great example which should direct you in the right way. Please check out bpmn-js-examples/modeling-api at master · bpmn-io/bpmn-js-examples · GitHub

1 Like

Thanks a lot. I moved to modeling API and it is so easy.

I am wondering:

  • If you have a documentation outline the different API and their difference.
  • When I add a new event I have to set up x and y for it. How can I identify an empty space on canvas with a specified distance to a gateway to what I want to connect the new event?

If you have a documentation outline the different API and their difference

I like to point to this guide and graphic that explains the difference between diagram-js and bpmn-js and goes over which modules belong where.

How can I identify an empty space on canvas with a specified distance to a gateway to what I want to connect the new event?

not directly, but you can use the autoPlace feature to specify an element you want to append the shape to. The code would look like this:

autoPlace.append(elementToAppendAfter, newShape);

Thanks for reply.

  • I saw this documentation page and it is good to start but too short to get details.

  • I use autoPlace API in our application but it does not work for this particular use case because I need to connect new shape to existing element not other way around. I am creating an new event and adding it to existing gateway.

image