Alignment issue between BPMN.IO and Heatmap.js

Question

I'm trying to overlay a bpmn flow using bpmn.io with a heatmap using heatmap.js. If the canvas is set to the first and only element in the dom it actually works, but once you add anything else like in my sample a header, the coordinate system between both gets off.

I've prepared a fiddle that shows exactly what I mean.

https://jsfiddle.net/rafaturtle/qt8Ly4ez/16/

  const rect = canvas.getGraphics(element).getBoundingClientRect();
  const x = (rect.x + rect.width / 2);
  const y = (rect.y + rect.height / 2);

  data.push({
    x: x.toFixed(0),
    y: y.toFixed(0),
    value: stats[element.id]
  });

I believe its on the calculation of x,y of each element, off setting it by a factor but after trying every combination I could think of I didn't manage.

thanks

Answer 1

I am not sure if I misunderstood what you aim for, but laying the heatmap over the elements can be easily achieved by using the dimensions of the current element, element.x, element.y, element.width, element.height.

The following code places the heatmap at the exact position of the elements:

var registry = bpmnJS.get('elementRegistry');
for (var i in registry.getAll()) {
  var element = registry.getAll()[i];
  if (stats[element.id] != null) {
    const centerx = element.x + (element.width / 2 )
    const centery = element.y + (element.height / 2 )
    data.push({
      x: centerx,
      y: centery,
      value: stats[element.id]
    });
  }
}

Working example: https://jsfiddle.net/cr8Lg53a/

Answer 2

const x = (rect.x + rect.width / 2) - canvas.getContainer().getBoundingClientRect().x;
    
const y = (rect.y + rect.height / 2) - canvas.getContainer().getBoundingClientRect().y;

try this