Connection Preview layout not optimal

Connetion Preview not optimal

I am implementing a preview functionality of a created connection. In this case, I create a message flow (MF) between two flow nodes. However, the preview of the MF starts in the middle of each flow-node:


When I finally created the MF (modeling.connect(...)), it is shown as expected.

How can I create a correct preview?
My current code is the following, where source and target are the flow nodes shown above.

const connection = elementFactory.createConnection({
  type: "bpmn:MessageFlow",
connection.waypoints = layouter.layoutConnection(connection, {
  created: [connection],

Thanks in advance!

Does anyone know how to fix this?

You’d want to compute the intersection between source shape/connection and target shape/connection and only render that sub-portion of the connection.

We do the same, cf. ConnectionPreview#cropWaypoints.

1 Like

Thanks that’s works perfectly for me!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.