app/assets/javascripts/diagram.js
// This is not included in the core application.js bundle.
$(function () {
const svg = document.querySelector(".agent-diagram svg.diagram");
const overlay = document.querySelector(".agent-diagram .overlay");
$(overlay).width($(svg).width()).height($(svg).height());
const getTopLeft = function (node) {
const bbox = node.getBBox();
const point = svg.createSVGPoint();
point.x = bbox.x + bbox.width;
point.y = bbox.y;
return point.matrixTransform(node.getCTM());
};
return $(svg)
.find("g.node[data-badge-id]")
.each(function () {
const tl = getTopLeft(this);
$("#" + this.getAttribute("data-badge-id"), overlay).each(function () {
const badge = $(this);
badge
.css({
left: tl.x - badge.outerWidth() * (2 / 3),
top: tl.y - badge.outerHeight() * (1 / 3),
"background-color": badge.find(".label").css("background-color"),
})
.show();
});
});
});