Overlays Grid diagram? or snap points?

Developers
1

Hi

Is there docs on Overlays for common placement, sizing, etc? Looking for some sort of doc that lays out the overlay sizes of the various elements, common positioning (centre, corners, edges, etc)?

Thanks

2

Hi Stephen,

Can you please tell more about your use case? Perhaps there is a way to help out here without full documentation (which AFAIK does not exist).

You could also check out the source code for snapping:

Best

Maciej

3

@barmac my use case:

Someone is building overlays (example some badges): they have their HTML element but they need to position it on the Bpmn element: they want to say position it one the 4 corners of a task, or bottom center, etc. Then they want to do the same for a gateway and event. It then feels like it is a guessing game on the positions of the overlay.

4

There is currently no API to specify such common points for overlays, so you would have to calculate it. For snapping we have a SnapUtil that calculates these points, which might help.

If you think that could be a valid use case for the overlays, feel free to open an issue for it and we can discuss :+1:

5

I think this can be achieved with the position property. Still, you need to know the size of the overlay up front and if you want to position it in the center, you also need to know the element’s size. However, the latter can be retrieved from the element to which the overlay is added.

Have a look at this codesandbox and please tell me what is missing from your perspective. We will happily accept ideas how to improve the solution.

1 Like