Accessing (X,Y) coordinates of elements

[kickbuttowski]

I am trying to render a canvas (using heatmap.js) on top of the bpmn viewer. I am able to get the (X,Y) coordinates of the elements using the elementRegistry API.

The problem is that I want to get the updated coordinates when the user performs the following operations:

• scroll
• pan
• zoom

I tried using the getBoundingClientRect() API but it’s not giving the right coordinates.

Here’s an example of what I am trying to achieve: bpmn-heatmap - CodeSandbox

[philippfromme]

The corrdinates of the elements do not change. Scrolling, panning and zooming changes the transformation matrix of the canvas (cf. diagram-js/Canvas.js at develop · bpmn-io/diagram-js · GitHub). You’d probably want to add the heatmap using a canvas layer (cf. diagram-js/Canvas.js at develop · bpmn-io/diagram-js · GitHub).

[kickbuttowski]

I never looked into that (transformation matrix) all this time. Thanks for that.
Now I am able to get what I want. This is what I did. (cf. bpmn-heatmap-transform - CodeSandbox)

bpmnViewerRef.current.on("canvas.viewbox.changed", () => {
  const element = document.querySelector(".djs-overlay-container");
  const heatmapCanvas = document.querySelector(".heatmap-canvas");

  if (element && heatmapCanvas) {
    heatmapCanvas.style.transform = element.style.transform;
    heatmapCanvas.style.transformOrigin = element.style.transformOrigin;
  }
});

I tried to hook into the event canvas.viewbox.changing but it didn’t aligned the heatmap with the viewer.

One minor problem with this event canvas.viewbox.changed is that there’s a slight delay before the transformation takes place.

Do you know any better approach to mitigate this?

[philippfromme]

The viewbox.changed event is debounced by 300 ms for performance reasons. I’d suggest you hide the heatmap on viewbox.changing and show it on viewbox.changed. This is how the context pad and other overlays work, too.

[kickbuttowski]

That’s what I ended up doing. Now it looks better. Thanks again for your help.