Draw a new layer on top of diagram

Developers
1

Hi,

I try to draw a new layer on top of bpmn diagram to add some specific information in this layer.

I was able to create a new layer:

var canvas = viewer.get('canvas'); 
var layer=canvas.getLayer("TestLayer");

But layer is not placed on top of diagram and has width and height with 0.
How is it possible to place layer directly on top of last layer with same size to add specific content on diagram?

Best regards,

Markus

2

The layer will always have the width and height of the contained elements. If you’d like the diagram to be a click trap I’d suggest you a different solution. Otherwise, just add elements on it and you’ll be fine.

There is one caveat for the moment: The layer needs to be instantiated / fetched after the canvas imported elements. Otherwise it will indeed go below the existing layers.

3

Hi nikku,

what I try to achieve is to paint a canvas on top of the BPMN Diagram. Elements of the canvas should be painted on specific BPMN Elements (similar to overlays) but I am not sure how to get X and Y coordinates of BPMN elements.

I know that I can get elements by using var elementService = viewer.get(‘elementRegistry’);
There are some X and Y coordinates at this elements but I can not use them to draw my canvas because these are not the window coordinates.

Any hints?

Best regards,

Markus

4

The coordinates are relative to the diagram container + viewbox adjustment. You should be able to calculate the window coordinates using that information.

  • Canvas#viewbox gets you the current canvas adjustment (move in / out / left / right)
  • someEl.offsetLeft and someEl.offsetTop will give you the position of an element (could be the diagram parent) to the next non-static positioned element
5

Hi nikku,

thanks for reply. I am not sure if i missunderstood you but neither an element

var element = elementRegistry.get('someId');

nor its graphic

var element = elementRegistry.getGraphics('someId');

have offsetLeft or offsetTop properties.

Or what do you mean by ‘someEl’?

Best regards,

Markus

6

Sorry for the confusion: someEl refers to the Canvas.