fix(plugins): fix tooltip with incorrect position after graph resize (#…

…6246)

Co-authored-by: antv <[email protected]>

packages/g6/__tests__/demos/bug-tooltip-resize.ts

@@ -0,0 +1,53 @@
+import { Graph } from '@antv/g6';
+
+export const bugTooltipResize: TestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    data: {
+      nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],
+      edges: [
+        { source: 'node1', target: 'node2' },
+        { source: 'node1', target: 'node3' },
+        { source: 'node1', target: 'node4' },
+        { source: 'node2', target: 'node3' },
+        { source: 'node3', target: 'node4' },
+        { source: 'node4', target: 'node5' },
+      ],
+    },
+    layout: {
+      type: 'grid',
+    },
+    plugins: [
+      {
+        type: 'tooltip',
+        style: {
+          ['.tooltip']: {
+            transition: 'none',
+          },
+        },
+      },
+    ],
+  });
+
+  await graph.render();
+
+  bugTooltipResize.form = (panel) => {
+    let width = 500;
+    return [
+      panel.add(
+        {
+          resize: () => {
+            const newWidth = width === 500 ? 300 : 500;
+            width = newWidth;
+            document.querySelector<HTMLDivElement>('#container')!.style.width = `${newWidth}px`;
+            graph.resize();
+            graph.fitView();
+          },
+        },
+        'resize',
+      ),
+    ];
+  };
+
+  return graph;
+};

packages/g6/__tests__/demos/index.ts

@@ -19,6 +19,7 @@ export { behaviorLassoSelect } from './behavior-lasso-select';
 export { behaviorOptimizeViewportTransform } from './behavior-optimize-viewport-transform';
 export { behaviorScrollCanvas } from './behavior-scroll-canvas';
 export { behaviorZoomCanvas } from './behavior-zoom-canvas';
+export { bugTooltipResize } from './bug-tooltip-resize';
 export { canvasCursor } from './canvas-cursor';
 export { caseDecisionTree } from './case-decision-tree';
 export { caseIndentedTree } from './case-indented-tree';

packages/g6/src/plugins/tooltip.ts

@@ -271,6 +271,7 @@ export class Tooltip extends BasePlugin<TooltipOptions> {
       };
     }
     this.tooltipElement.update({
+      ...this.tooltipStyleProps,
       x,
       y,
       style: {
@@ -300,32 +301,32 @@ export class Tooltip extends BasePlugin<TooltipOptions> {
     this.tooltipElement.hide(x, y);
   };
 
-  private initTooltip = () => {
+  private get tooltipStyleProps() {
     const { canvas } = this.context;
     const { center } = canvas.getBounds();
     const $container = canvas.getContainer() as HTMLElement;
     const { top, left } = $container.getBoundingClientRect();
     const { style, position, enterable, container = { x: -left, y: -top }, title, offset } = this.options;
     const [x, y] = center;
     const [width, height] = canvas.getSize();
+
+    return {
+      x,
+      y,
+      container,
+      title,
+      bounding: { x: 0, y: 0, width, height },
+      position,
+      enterable,
+      offset,
+      style,
+    };
+  }
+
+  private initTooltip = () => {
     const tooltipElement = new TooltipComponent({
       className: 'tooltip',
-      style: {
-        x,
-        y,
-        container,
-        title,
-        bounding: {
-          x: 0,
-          y: 0,
-          width,
-          height,
-        },
-        position,
-        enterable,
-        offset,
-        style,
-      },
+      style: this.tooltipStyleProps,
     });
     this.container?.appendChild(tooltipElement.HTMLTooltipElement);
     return tooltipElement;

tests/g6/plugins/plugins-tooltip.spec.ts

@@ -0,0 +1,26 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('plugin tooltip', () => {
+  test('bug: tooltip should has correct position after graph resize', async ({ page }) => {
+    page.goto('/?Demo=bugTooltipResize&Renderer=canvas&GridLine=true&Theme=light&Animation=false');
+
+    await page.waitForSelector('.tooltip');
+
+    const clip = { x: 0, y: 0, width: 500, height: 500 };
+
+    await page.mouse.move(375, 250);
+
+    await expect(page).toHaveScreenshot({ clip });
+
+    await page.mouse.move(250, 250);
+
+    // wait for div content is 'resize'
+    const resize = page.getByRole('button', { name: 'resize' });
+
+    await resize?.click();
+
+    await page.mouse.move(285, 250);
+
+    await expect(page).toHaveScreenshot({ clip });
+  });
+});