From 7503b1610c1c8f9de935842871a9ccedd3e688e2 Mon Sep 17 00:00:00 2001 From: hustcc Date: Wed, 11 Oct 2023 14:54:53 +0800 Subject: [PATCH] fix: tooltip enterable --- .../alphabet-interval-enterable/step0.html | 46 +++++++++++++++++++ .../tooltip/alphabet-interval-enterable.ts | 34 ++++++++++++++ __tests__/plots/tooltip/index.ts | 1 + src/interaction/tooltip.ts | 37 +++++++++------ src/spec/interaction.ts | 2 +- 5 files changed, 105 insertions(+), 15 deletions(-) create mode 100644 __tests__/integration/snapshots/tooltip/alphabet-interval-enterable/step0.html create mode 100644 __tests__/plots/tooltip/alphabet-interval-enterable.ts diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-enterable/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-enterable/step0.html new file mode 100644 index 0000000000..354c77e062 --- /dev/null +++ b/__tests__/integration/snapshots/tooltip/alphabet-interval-enterable/step0.html @@ -0,0 +1,46 @@ +
+
+ A +
+ +
\ No newline at end of file diff --git a/__tests__/plots/tooltip/alphabet-interval-enterable.ts b/__tests__/plots/tooltip/alphabet-interval-enterable.ts new file mode 100644 index 0000000000..997966dfd9 --- /dev/null +++ b/__tests__/plots/tooltip/alphabet-interval-enterable.ts @@ -0,0 +1,34 @@ +import { CustomEvent } from '@antv/g'; +import { G2Spec, PLOT_CLASS_NAME } from '../../../src'; +import { tooltipSteps } from './utils'; + +export function alphabetIntervalEnterable(): G2Spec { + return { + type: 'view', + children: [ + { + type: 'interval', + padding: 0, + data: { + type: 'fetch', + value: 'data/alphabet.csv', + }, + axis: false, + legend: false, + encode: { + x: 'letter', + y: 'frequency', + color: 'steelblue', + }, + interaction: { + tooltip: { + enterable: true, + }, + }, + }, + ], + }; +} + +// TOOD: this test case does not test the `enterable` feature. +alphabetIntervalEnterable.steps = tooltipSteps(0); diff --git a/__tests__/plots/tooltip/index.ts b/__tests__/plots/tooltip/index.ts index 3640ab993f..bf9823ba13 100644 --- a/__tests__/plots/tooltip/index.ts +++ b/__tests__/plots/tooltip/index.ts @@ -4,6 +4,7 @@ export { bodyPoint2d } from './body-point-2d'; export { cars3LineXd } from './cars3-line-xd'; export { alphabetIntervalMulti } from './alphabet-interval-multi'; export { alphabetIntervalTitle } from './alphabet-interval-title'; +export { alphabetIntervalEnterable } from './alphabet-interval-enterable'; export { aaplLine } from './aapl-line'; export { indicesLine } from './indices-line'; export { temperaturesLineDiscrete } from './temperatures-line-discrete'; diff --git a/src/interaction/tooltip.ts b/src/interaction/tooltip.ts index a00154f8d9..7b32cf457b 100644 --- a/src/interaction/tooltip.ts +++ b/src/interaction/tooltip.ts @@ -144,7 +144,13 @@ function showTooltip({ parent.tooltipElement = tooltipElement; } -function hideTooltip({ root, single, emitter, nativeEvent = true }) { +function hideTooltip({ + root, + single, + emitter, + nativeEvent = true, + event = null, +}) { if (nativeEvent) { emitter.emit('tooltip:hide', { nativeEvent }); } @@ -152,7 +158,8 @@ function hideTooltip({ root, single, emitter, nativeEvent = true }) { const parent = single ? canvasContainer : root; const { tooltipElement } = parent; if (tooltipElement) { - tooltipElement.hide(); + // Must be clientX, clientY. + tooltipElement.hide(event?.clientX, event?.clientY); } } @@ -429,7 +436,7 @@ export function seriesTooltip( groupName, emitter, wait = 50, - leading = true, + leading = false, trailing = false, startX = 0, startY = 0, @@ -619,7 +626,7 @@ export function seriesTooltip( // Hide tooltip with no selected tooltip. if (selectedElements.length === 0 || isEmptyTooltipData(tooltipData)) { - hide(); + hide(event); return; } @@ -677,8 +684,9 @@ export function seriesTooltip( { leading, trailing }, ) as (...args: any[]) => void; - const hide = () => { - hideTooltip({ root, single, emitter }); + const hide = (event: MouseEvent) => { + console.log(111, 'hide'); + hideTooltip({ root, single, emitter, event }); if (crosshairs) hideRuleY(root); if (marker) hideMarker(root); }; @@ -791,7 +799,7 @@ export function tooltip( (event) => { const { target: element } = event; if (!elementSet.has(element)) { - hideTooltip({ root, single, emitter }); + hideTooltip({ root, single, emitter, event }); return; } const k = groupKey(element); @@ -810,7 +818,7 @@ export function tooltip( } if (isEmptyTooltipData(data)) { - hideTooltip({ root, single, emitter }); + hideTooltip({ root, single, emitter, event }); return; } @@ -844,17 +852,18 @@ export function tooltip( { leading, trailing }, ) as (...args: any[]) => void; - const pointerout = (event) => { - const { target: element } = event; - if (!elementSet.has(element)) return; - hideTooltip({ root, single, emitter }); + const pointerleave = (event) => { + // const { target: element } = event; + console.log(1112, 'leave'); + // if (!elementSet.has(element)) return; + hideTooltip({ root, single, emitter, event }); }; const addEventListeners = () => { if (!disableNative) { root.addEventListener('pointerover', pointerover); root.addEventListener('pointermove', pointerover); - root.addEventListener('pointerout', pointerout); + root.addEventListener('pointerleave', pointerleave); } }; @@ -862,7 +871,7 @@ export function tooltip( if (!disableNative) { root.removeEventListener('pointerover', pointerover); root.removeEventListener('pointermove', pointerover); - root.removeEventListener('pointerout', pointerout); + root.removeEventListener('pointerleave', pointerleave); } }; diff --git a/src/spec/interaction.ts b/src/spec/interaction.ts index f73991c4b6..3b2e95bd5c 100644 --- a/src/spec/interaction.ts +++ b/src/spec/interaction.ts @@ -181,7 +181,7 @@ export type TooltipInteraction = { bounding?: BBox; mount?: string | HTMLElement; css?: Record; // @todo - // enterable?: boolean; + enterable?: boolean; sort?: (d: TooltipItemValue) => any; filter?: (d: TooltipItemValue) => any; render?: (