Sequence Flow names aligning properly

[philippfromme]

Let’s move on to the next chapter in your layout story. We can throw in some more bpmn-js magic to move all labels to the end of their connection:

connections.forEach((connection) => {
  // ...

  if (connection.label) {
    const labelMid = getMid(connection.label),
      lastWaypoint = connection.waypoints[connection.waypoints.length - 1];

    const offset = {
      x: 10,
      y: 10
    };

    const delta = {
      x: lastWaypoint.x - labelMid.x - offset.x,
      y: lastWaypoint.y - labelMid.y - offset.y
    };

    modeling.moveElements([connection.label], delta);
  }
});

CodeSandbox: https://codesandbox.io/s/layout-magic-eyvt0?file=/src/index.js:748-1471

Before

After