Skip to content

Commit

Permalink
fix: tooltip for multi view (#6142)
Browse files Browse the repository at this point in the history
  • Loading branch information
pearmini committed Mar 21, 2024
1 parent 72d8900 commit 411e1f4
Show file tree
Hide file tree
Showing 6 changed files with 131 additions and 7 deletions.
@@ -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"
Expand Down
@@ -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"
Expand Down
46 changes: 46 additions & 0 deletions __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>
1 change: 1 addition & 0 deletions __tests__/plots/tooltip/index.ts
Expand Up @@ -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';
72 changes: 72 additions & 0 deletions __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,
}),
);
},
},
];
};
15 changes: 10 additions & 5 deletions 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';
Expand Down Expand Up @@ -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) {
Expand Down

0 comments on commit 411e1f4

Please sign in to comment.