fix: tooltip for custom element (#6140)

antvis · Mar 20, 2024 · 72d8900 · 72d8900
1 parent 3dfb9e7
commit 72d8900
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 10 deletions.
diff --git a/__tests__/integration/snapshots/tooltip/alphabet-text/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-text/step0.html
@@ -0,0 +1,69 @@
+<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: 10px; top: 10px;"
+>
+  <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(29, 33, 41); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="letter"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          letter
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="A"
+        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;"
+      >
+        A
+      </span>
+    </li>
+    <li
+      class="g2-tooltip-list-item"
+      data-index="1"
+      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(29, 33, 41); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="frequency"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          frequency
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="0.08167"
+        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;"
+      >
+        0.08167
+      </span>
+    </li>
+  </ul>
+</div>
diff --git a/__tests__/plots/tooltip/alphabet-text.ts b/__tests__/plots/tooltip/alphabet-text.ts
@@ -0,0 +1,19 @@
+import { G2Spec } from '../../../src';
+import { tooltipSteps } from './utils';
+
+export function alphabetText(): G2Spec {
+  return {
+    type: 'text',
+    data: {
+      type: 'fetch',
+      value: 'data/alphabet.csv',
+    },
+    encode: {
+      x: 'letter',
+      y: 'frequency',
+      text: 'letter',
+    },
+  };
+}
+
+alphabetText.steps = tooltipSteps(0);
diff --git a/__tests__/plots/tooltip/index.ts b/__tests__/plots/tooltip/index.ts
@@ -73,3 +73,4 @@ export { aaplLineOverflow } from './aapl-line-overflow';
 export { moviesIntervalScaleKeyScrollbar } from './movies-interval-scale-key-scrollbar';
 export { oneElementLine } from './one-element-line';
 export { disastersPointSlider } from './disasters-point-slider';
+export { alphabetText } from './alphabet-text';
diff --git a/src/interaction/event.ts b/src/interaction/event.ts
@@ -1,4 +1,5 @@
 import { ChartEvent } from '../utils/event';
+import { maybeRoot } from './utils';
 
 export function dataOf(element, view) {
   const { __data__: datum } = element;
@@ -14,13 +15,6 @@ export function dataOf(element, view) {
   return selectedMark.data[index];
 }
 
-function maybeRoot(node, rootOf) {
-  if (rootOf(node)) return node;
-  let root = node.parent;
-  while (root && !rootOf(root)) root = root.parent;
-  return root;
-}
-
 // For extended component
 function maybeComponentRoot(node) {
   return maybeRoot(node, (node) => node.className === 'component');

diff --git a/src/interaction/tooltip.ts b/src/interaction/tooltip.ts
@@ -17,6 +17,7 @@ import {
   createDatumof,
   selectElementByData,
   bboxOf,
+  maybeRoot,
 } from './utils';
 import { dataOf } from './event';
 
@@ -422,6 +423,13 @@ function hasSeries(markState): boolean {
   );
 }
 
+function findElement(node: DisplayObject) {
+  return maybeRoot(node, (node) => {
+    if (!node.classList) return false;
+    return node.classList.includes('element');
+  });
+}
+
 /**
  * Show tooltip for series item.
  */
@@ -798,13 +806,13 @@ export function tooltip(
   }: Record<string, any>,
 ) {
   const elements = elementsof(root);
-  const elementSet = new Set(elements);
   const keyGroup = group(elements, groupKey);
 
   const pointermove = throttle(
     (event) => {
-      const { target: element } = event;
-      if (!elementSet.has(element)) {
+      const { target } = event;
+      const element = findElement(target);
+      if (!element) {
         hideTooltip({ root, single, emitter, event });
         return;
       }

diff --git a/src/interaction/utils.ts b/src/interaction/utils.ts
@@ -520,3 +520,10 @@ export function getThetaPath(
   }
   return path as PathArray;
 }
+
+export function maybeRoot(node, rootOf) {
+  if (rootOf(node)) return node;
+  let root = node.parent;
+  while (root && !rootOf(root)) root = root.parent;
+  return root;
+}