From 72d8900b59cb0b6e1016fdf2c8ab2cd2e5fe767c Mon Sep 17 00:00:00 2001 From: Bairui Su Date: Wed, 20 Mar 2024 14:03:53 +0800 Subject: [PATCH] fix: tooltip for custom element (#6140) --- .../tooltip/alphabet-text/step0.html | 69 +++++++++++++++++++ __tests__/plots/tooltip/alphabet-text.ts | 19 +++++ __tests__/plots/tooltip/index.ts | 1 + src/interaction/event.ts | 8 +-- src/interaction/tooltip.ts | 14 +++- src/interaction/utils.ts | 7 ++ 6 files changed, 108 insertions(+), 10 deletions(-) create mode 100644 __tests__/integration/snapshots/tooltip/alphabet-text/step0.html create mode 100644 __tests__/plots/tooltip/alphabet-text.ts diff --git a/__tests__/integration/snapshots/tooltip/alphabet-text/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-text/step0.html new file mode 100644 index 0000000000..349559a28c --- /dev/null +++ b/__tests__/integration/snapshots/tooltip/alphabet-text/step0.html @@ -0,0 +1,69 @@ +
+ +
\ No newline at end of file diff --git a/__tests__/plots/tooltip/alphabet-text.ts b/__tests__/plots/tooltip/alphabet-text.ts new file mode 100644 index 0000000000..6f1aba0e5b --- /dev/null +++ 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 index a6049c3a90..808bfe7e53 100644 --- 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 index 6fbf2a4b97..2195af89d3 100644 --- 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 index 1dccb57347..35dc65aaa3 100644 --- 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, ) { 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 index dd3428fcd1..2697204012 100644 --- 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; +}