Неправильные координаты HTML-элементов, полученных в компонентах

Question

Я добавил настраиваемую подсказку к диаграмме SVG в элементе гридстера (все примеры приведены на стекаблице). Координаты подсказки (div) получаются с помощью nativeElement и установить с помощью Renderer2 ( тривиальный пример - подсказка div смещена на 20px). Однако, когда я проецирую виджет диаграммы внутри элемента гридстера, всплывающая подсказка всегда добавляется в неправильную позицию (см. Полный пример - наведите курсор на круги). Кажется, что для каждого виджета координаты div увеличиваются на то, насколько этот виджет находится далеко от краев окна (слева и сверху).

Визуально, вот как далеко должна быть подсказка от круга:

Но на самом деле (чем больше элемент находится далеко от края экрана, тем дальше располагается подсказка):

Я пытался увидеть, если это проблема с <ng-content> т.е. проекция контента в GridsterItem, но мне не кажется, что когда я делаю собственный компонент, имитирующий это (см. этот пример). Почему координаты фанки внутри элемента гридстера? Является renderer установка координат относительно виджета или document?

Answer 1

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

public mouseEnter($event, data): void {
  const circle = $event.target as HTMLElement;
  const parent = circle.parentElement;
  const circleCoords = circle.getBoundingClientRect();
  const parentCoords = parent.getBoundingClientRect();
  const relativeX = circleCoords.left - parentCoords.left;
  const relativeY = circleCoords.top - parentCoords.top;
  const x = `${relativeX + 20}px`;
  const y = `${relativeY + 20}px`;
  this.renderer.setStyle(this.tooltip.nativeElement, 'left', x);
  this.renderer.setStyle(this.tooltip.nativeElement, 'top', y);
  this.renderer.setStyle(this.tooltip.nativeElement, 'display', 'block');
  this.renderer.setProperty(this.tooltip.nativeElement, 'innerHTML', data);
}

Смотрите этот стек для демонстрации.