Skip to content

Commit

Permalink
fix(ellipsis-test) tooltip show must need update region (antvis#5436)
Browse files Browse the repository at this point in the history
* fix(ellipsis-test) tooltip show must need update region

tooltip 中根据 region 和 curLoc 来处理最终显示位置,目前 region 只在首次 renderTooltip 时才会设置,导致后续 height 发生变更,tooltip 显示位置有误

* test(5409-spec) 增加单测
  • Loading branch information
Darsoon authored Aug 23, 2023
1 parent dcd27ec commit eda7fc2
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 0 deletions.
9 changes: 9 additions & 0 deletions src/interaction/action/component/tooltip/ellipsis-text.ts
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,15 @@ export default class EllipsisText extends Action {
if (target && target.get('tip')) {
if (!this.tooltip) {
this.renderTooltip(); // 延迟生成
} else {
// 更新时需要重新获取 region 赋值,避免画布缩放后 tooltip 位置不对
const view = context.view;
const canvas = view.canvas;
const region = {
start: { x: 0, y: 0 },
end: { x: canvas.get('width'), y: canvas.get('height') },
}
this.tooltip.set('region', region)
}
const tipContent = target.get('tip');
// 展示 tooltip
Expand Down
60 changes: 60 additions & 0 deletions tests/bugs/5409-spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import { Chart } from '../../src';
import { COMPONENT_TYPE } from '../../src/constant';
import { createDiv } from '../util/dom';

describe('#5409', () => {
const data = [
{ type: '我是一段很长很长很长很长很长的文本', value: 654, percent: 0.02 },
{ type: '18-24 岁', value: 4400, percent: 0.2 },
{ type: '25-29 岁', value: 5300, percent: 0.24 },
{ type: '30-39 岁', value: 6200, percent: 0.28 },
{ type: '40-49 岁', value: 3300, percent: 0.14 },
{ type: '50 岁以上', value: 1500, percent: 0.06 },
{ type: '未知', value: 654, percent: 0.02 },
];
const container = createDiv();
const chart = new Chart({
container,
width: 400,
height: 300,
autoFit: true,
});
chart.data(data);
chart.interval().position('type*value').color('type');
chart.render();
it('legend tooltip position should be changed when chart resize', async () => {
const legend = chart.getComponents().filter((co) => co.type === COMPONENT_TYPE.LEGEND)[0];
const legendTarget = legend.component
.get('container')
.findById('-legend-item-我是一段很长很长很长很长很长的文本-name');

chart.emit('legend-item-name:mousemove', {
x: 50,
y: 330,
target: legendTarget,
});

const tooltipDom = container.getElementsByClassName('g2-tooltip')[0] as HTMLElement;
expect(tooltipDom.style.visibility).toBe('visible');

const top = tooltipDom.style.top;
chart.emit('legend-item-name:mouseleave', {
target: legendTarget,
});
// 等待 render 完毕
await new Promise((resolve) => {
setTimeout(() => {
resolve('');
}, 100);
});
chart.changeSize(400, 500);
chart.emit('legend-item-name:mousemove', {
x: 50,
y: 480,
target: legendTarget,
});
expect(tooltipDom.style.visibility).toBe('visible');
// top 应该不一致
expect(tooltipDom.style.top).not.toBe(top);
});
});

0 comments on commit eda7fc2

Please sign in to comment.