1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86
87. 87
88. 88
89. 89
90. 90
91. 91
92. 92
93. 93
94. 94
95. 95
96. 96
97. 97
98. 98
99. 99
100. 100

import { attr, className, svg } from "../dom";

export const CENTER = 0x0;
export const LEFT = 0x1;
export const RIGHT = 0x2;
export const TOP = 0x10;
export const BOTTOM = 0x20;

export const styles = /* css */ `
  .tl-bg {
    stroke: none;
    fill: var(--tooltip-bg);
  }

  .tl-text {
    font-size: var(--tooltip-font-size);
    stroke: none;
    fill: var(--tooltip-fg);
  }
`;

export class TooltipLayer {
  #container: SVGElement;

  get container(): SVGElement {
    return this.#container;
  }

  constructor(container: SVGElement = svg("g")) {
    this.#container = container;
  }

  show(text: string, x: number, y: number, placement: number) {
    // 0 ... center, 1 ... left, 2 ... right
    const hp = placement & 0xf;
    // 0 ... center, 1 ... top,  2 ... bottom
    const vp = (placement & 0xf0) >> 4;

    // Elements should be added to DOM tree as soon as it created:
    // `SVGGraphicsElement.getBBox` does not work for orphan element (does not throw an error!)
    const group = svg("g");
    this.#container.appendChild(group);

    const bg = svg("rect", [attr("rx", "2"), className("tl-bg")]);
    group.appendChild(bg);

    const el = svg(
      "text",
      [
        attr("text-anchor", "middle"),
        // By default, `<text>` locates it's baseline on `y`.
        // This attribute changes that stupid default
        attr("dominant-baseline", "central"),
        className("tl-text"),
      ],
      [text],
    );
    group.appendChild(el);

    const bbox = el.getBBox();

    const margin = bbox.height * 0.25;
    const vPadding = bbox.height * 0.15;
    const hPadding = bbox.height * 0.25;

    const px =
      hp === 1
        ? x - bbox.width * 0.5 - (margin + hPadding)
        : hp === 2
        ? x + bbox.width * 0.5 + (margin + hPadding)
        : x;

    const py =
      vp === 1
        ? y - bbox.height * 0.5 - (margin + vPadding)
        : vp === 2
        ? y + bbox.height * 0.5 + (margin + vPadding)
        : y;

    el.setAttribute("x", px.toString());
    el.setAttribute("y", py.toString());

    bg.setAttribute("x", (px - bbox.width * 0.5 - hPadding).toString());
    bg.setAttribute("y", (py - bbox.height * 0.5 - vPadding).toString());
    bg.setAttribute("width", (bbox.width + hPadding * 2).toString());
    bg.setAttribute("height", (bbox.height + vPadding * 2).toString());

    group.style.transform = `scale(calc(1 / var(--_scale)))`;

    const tox = hp === 1 ? x - margin : hp === 2 ? x + margin : x;

    const toy = vp === 1 ? y - margin : vp === 2 ? y + margin : y;

    group.style.transformOrigin = `${tox}px ${toy}px`;
  }

  clear() {
    this.#container.replaceChildren();
  }
}