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

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

0 голосов
/ 31 января 2019

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

Визуально, это то, как далеко должна находиться подсказкаот круга:

Normal

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

Not normal

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

1 Ответ

0 голосов
/ 31 января 2019

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

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

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

...