From 411e1f49ad6829728b63400058d4796eb4ab33b6 Mon Sep 17 00:00:00 2001
From: Bairui Su <subairui@icloud.com>
Date: Thu, 21 Mar 2024 15:44:33 +0800
Subject: [PATCH] fix: tooltip for multi view (#6142)

---
 .../api/chart-emit-series-tooltip/step0.html  |  2 +-
 .../api/chart-emit-series-tooltip/step1.html  |  2 +-
 .../tooltip/mock-line-flex/step0.html         | 46 ++++++++++++
 __tests__/plots/tooltip/index.ts              |  1 +
 __tests__/plots/tooltip/mock-line-flex.ts     | 72 +++++++++++++++++++
 src/interaction/utils.ts                      | 15 ++--
 6 files changed, 131 insertions(+), 7 deletions(-)
 create mode 100644 __tests__/integration/snapshots/tooltip/mock-line-flex/step0.html
 create mode 100644 __tests__/plots/tooltip/mock-line-flex.ts

diff --git a/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step0.html b/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step0.html
index 83a5092c55..1f5242c2fc 100644
--- a/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step0.html
+++ b/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step0.html
@@ -1,7 +1,7 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
   class="g2-tooltip"
-  style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 475.82118555285933px; top: 215.5857864376269px;"
+  style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 475.8211855528594px; top: 215.5857864376269px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step1.html b/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step1.html
index 93ba512e4f..1232b23b6a 100644
--- a/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step1.html
+++ b/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step1.html
@@ -1,7 +1,7 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
   class="g2-tooltip"
-  style="pointer-events: none; position: absolute; visibility: hidden; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 475.82118555285933px; top: 215.5857864376269px;"
+  style="pointer-events: none; position: absolute; visibility: hidden; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 475.8211855528594px; top: 215.5857864376269px;"
 >
   <div
     class="g2-tooltip-title"
diff --git a/__tests__/integration/snapshots/tooltip/mock-line-flex/step0.html b/__tests__/integration/snapshots/tooltip/mock-line-flex/step0.html
new file mode 100644
index 0000000000..277ec6a4a4
--- /dev/null
+++ b/__tests__/integration/snapshots/tooltip/mock-line-flex/step0.html
@@ -0,0 +1,46 @@
+<div
+  xmlns="http://www.w3.org/1999/xhtml"
+  class="g2-tooltip"
+  style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 610px; top: 60px;"
+>
+  <div
+    class="g2-tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    2
+  </div>
+  <ul
+    class="g2-tooltip-list"
+    style="margin: 0px; list-style-type: none; padding: 0px;"
+  >
+    <li
+      class="g2-tooltip-list-item"
+      data-index="0"
+      style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
+    >
+      <span
+        class="g2-tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="g2-tooltip-list-item-marker"
+          style="background: rgb(23, 131, 255); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="y"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          y
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="6"
+        style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+      >
+        6
+      </span>
+    </li>
+  </ul>
+</div>
\ No newline at end of file
diff --git a/__tests__/plots/tooltip/index.ts b/__tests__/plots/tooltip/index.ts
index 808bfe7e53..45c27b7408 100644
--- a/__tests__/plots/tooltip/index.ts
+++ b/__tests__/plots/tooltip/index.ts
@@ -74,3 +74,4 @@ export { moviesIntervalScaleKeyScrollbar } from './movies-interval-scale-key-scr
 export { oneElementLine } from './one-element-line';
 export { disastersPointSlider } from './disasters-point-slider';
 export { alphabetText } from './alphabet-text';
+export { mockLineFlex } from './mock-line-flex';
diff --git a/__tests__/plots/tooltip/mock-line-flex.ts b/__tests__/plots/tooltip/mock-line-flex.ts
new file mode 100644
index 0000000000..778674ebf4
--- /dev/null
+++ b/__tests__/plots/tooltip/mock-line-flex.ts
@@ -0,0 +1,72 @@
+import { CustomEvent } from '@antv/g';
+import { G2Spec, PLOT_CLASS_NAME } from '../../../src';
+
+export function mockLineFlex(): G2Spec {
+  return {
+    type: 'spaceFlex',
+    width: 928,
+    height: 320,
+    paddingLeft: 90,
+    paddingBottom: 60,
+    children: [
+      {
+        type: 'view',
+        data: [
+          { x: 1, y: 2 },
+          { x: 2, y: 6 },
+          { x: 3, y: 4 },
+          { x: 4, y: 9 },
+        ],
+        axis: {
+          x: { title: 'X', line: true, lineLineWidth: 1, grid: false },
+          y: {
+            title: 'Y',
+            line: true,
+            lineLineWidth: 1,
+            grid: true,
+            gridLineWidth: 2,
+          },
+        },
+        children: [{ type: 'line', encode: { x: 'x', y: 'y' } }],
+      },
+      {
+        type: 'view',
+        data: [
+          { x: 1, y: 3 },
+          { x: 2, y: 6 },
+          { x: 3, y: 7 },
+          { x: 4, y: 9 },
+        ],
+        axis: {
+          x: { title: 'X', line: true, lineLineWidth: 1, grid: false },
+          y: {
+            title: 'Y',
+            line: true,
+            lineLineWidth: 1,
+            grid: true,
+            gridLineWidth: 2,
+          },
+        },
+        children: [{ type: 'line', encode: { x: 'x', y: 'y' } }],
+      },
+    ],
+  };
+}
+
+mockLineFlex.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const plot = document.getElementsByClassName(PLOT_CLASS_NAME)[1];
+  return [
+    {
+      changeState: async () => {
+        plot.dispatchEvent(
+          // @ts-ignore
+          new CustomEvent('pointermove', {
+            offsetX: 600,
+            offsetY: 50,
+          }),
+        );
+      },
+    },
+  ];
+};
diff --git a/src/interaction/utils.ts b/src/interaction/utils.ts
index 2697204012..144300fe72 100644
--- a/src/interaction/utils.ts
+++ b/src/interaction/utils.ts
@@ -1,4 +1,4 @@
-import { DisplayObject, Path } from '@antv/g';
+import { DisplayObject, Path, AABB } from '@antv/g';
 import { path as d3Path } from 'd3-path';
 import { sort } from 'd3-array';
 import { Vector2 } from '@antv/coord';
@@ -44,10 +44,15 @@ export function selectPlotArea(root: DisplayObject): DisplayObject {
   return select(root).select(`.${PLOT_CLASS_NAME}`).node();
 }
 
-export function bboxOf(node) {
-  if (node.nodeName !== 'rect') return node.getRenderBounds();
-  const { x, y, width, height } = node.style;
-  return { min: [x, y], max: [x + width, y + height] };
+export function bboxOf(element: DisplayObject) {
+  // The geometry bounds of a group is empty, so return the render bounds.
+  if (element.tagName === 'g') return element.getRenderBounds();
+
+  // Compute the geometry bounds related to the parent.
+  const bounds = element.getGeometryBounds();
+  const aabb = new AABB();
+  aabb.setFromTransformedAABB(bounds, element.getWorldTransform());
+  return aabb;
 }
 
 export function mousePosition(target, event) {