Boundary Event overlay positioning to not overlap with host (Task)

Developers General
1

Hi there,

I’m using custom overlays to add information to boundary events. Is there a way to choose the position of the overlay so that it does not interfere with the BPMN elements?

The code I use is based on the example shown at bpmn.io github.

var overlays = bpmnViewer.get('overlays');

// attach an overlay to a node
overlays.add('SCAN_OK', {
  position: {
    bottom: 0,
    right: 0
  },
  html: '<div>Mixed up the labels?</div>'
});

Maybe it would already be sufficient, if I could determine the value for “bottom” property. Sometimes my boundary events are positioned at the top of a taks, sometimes they are positioned at the bottom.

Thanks for any help.
Cheers, Chris

2

We have no built-in functionality covering this use case.

A solution would be to check the position of a boundary event on the task using Math and create / update the boundary events overlay based on that.

3

Thanks.

Any advice on how to check the position of the boundary event on the task?

4

I found the function

var elementRegistry = viewer.get('elementRegistry');

and call then

elementRegistry.get(name)

I can retrieve my boundary event element with this. But I do not know how to access the “parent” task object.

5

The host property points you to the element the boundary event is attached to:

var task = boundaryShape.host;

From there on you should be able to compute the mid(element) with the x, y, width and height properties of the elements.

If you are fine with using internal API :warning: that may change or get removed any time, you can also use LayoutUtil#getOrientation to do the job for you.

2 Likes
6

Thank you a lot nikku!