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

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';

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