Sequence Flow names aligning properly

Developers
1

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

2

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 /* ... */);
  });
3

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
4

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.

5

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.

6

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

7

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

8

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.

9

something went wrong with sandbox link. i can’t open it
Could you clarify where exactly this code should be executed?