Sequence Flow names aligning properly

HI.

I am trying to create a BPMN diagram using Jaxb. Created diagram successfully but there are some conditions with gateway, and these sequence flow names are appearing one by one. Is there any chance can I make them appear at the end of the arrow or before the task?

image

Generally, we can not automatically fix broken diagrams coming from somewhere (e.g. a Jaxb generator). I’d whether try to fix it where the XML got created.

We have provide APIs to move elements to a given position. You could move those labels after import if you can find out the correct positions.

modeler
  .importXML(diagram)
  .then(() => {
    const elementRegistry = modeler.get('elementRegistry');

    // get all labels
    const labels = elementRegistry.filter(function (element) {
      return !!element.labelTarget;
    });

    const modeling = modeler.get('modeling');

    // calculate delta

    // move labels
    modeling.moveElements(labels /* ... */);
  });

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

image

After

image

1 Like

It worked for my small layouts, but mine is a bigger one with lot of steps.

image

I think I should use tooltip to avoid overlaps. Will research little bit on this part.

Well, if your layout is completely broken or really crammed with lots of overlaps there is only so much we can fix. You’d need to generate a better layout to begin with.

as I said, I will work on displaying tooltips when user places mouse on connector.
Layout looks really good now except the texts.

Do you handle those tooltips via labels? Or did I misunderstand something?

No…I thought I should develop something to display tooltiptext. No solution yet. Will post as a reply, if I figure it out to help others.