Проблема выравнивания между BPMN.IO и Heatmap.js - PullRequest
Новая
       16

Проблема выравнивания между BPMN.IO и Heatmap.js

0 голосов
/ 11 ноября 2018

Я пытаюсь наложить поток bpmn, используя bpmn.io, и карту тепла, используя heatmap.js. Если холст установлен на первый и единственный элемент в dom, он на самом деле работает, но как только вы добавите что-нибудь еще, как в моем образце заголовок, система координат между обоими отключится.

Я подготовил скрипку, которая точно показывает, что я имею в виду.

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]
  });

Я полагаю, это связано с вычислением x, y каждого элемента, с установкой коэффициента, но после попытки каждой комбинации, которую я мог придумать, мне не удалось.

спасибо

1 Ответ

0 голосов
/ 12 ноября 2018

Я не уверен, правильно ли я понял, к чему вы стремитесь, но наложение тепловой карты на элементы можно легко выполнить, используя размеры текущего элемента: element.x, element.y, element.width, element.height .

Следующий код помещает тепловую карту в точное положение элементов: 

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]
    });
  }
}

Рабочий пример: https://jsfiddle.net/cr8Lg53a/

...