fix(ellipsis-test) tooltip show must need update region (#5436)

* fix(ellipsis-test) tooltip show must need update region

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

* test(5409-spec) 增加单测

Author: Darsoon

src/interaction/action/component/tooltip/ellipsis-text.ts

@@ -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

tests/bugs/5409-spec.ts

@@ -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);
+  });
+});