diff --git a/packages/g6/__tests__/demos/bug-tooltip-resize.ts b/packages/g6/__tests__/demos/bug-tooltip-resize.ts new file mode 100644 index 00000000000..fec9b6a339b --- /dev/null +++ b/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('#container')!.style.width = `${newWidth}px`; + graph.resize(); + graph.fitView(); + }, + }, + 'resize', + ), + ]; + }; + + return graph; +}; diff --git a/packages/g6/__tests__/demos/index.ts b/packages/g6/__tests__/demos/index.ts index 025c7f86d42..faaac7c9cb7 100644 --- a/packages/g6/__tests__/demos/index.ts +++ b/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'; diff --git a/packages/g6/src/plugins/tooltip.ts b/packages/g6/src/plugins/tooltip.ts index 392a4073120..2bf52b76d88 100644 --- a/packages/g6/src/plugins/tooltip.ts +++ b/packages/g6/src/plugins/tooltip.ts @@ -271,6 +271,7 @@ export class Tooltip extends BasePlugin { }; } this.tooltipElement.update({ + ...this.tooltipStyleProps, x, y, style: { @@ -300,7 +301,7 @@ export class Tooltip extends BasePlugin { this.tooltipElement.hide(x, y); }; - private initTooltip = () => { + private get tooltipStyleProps() { const { canvas } = this.context; const { center } = canvas.getBounds(); const $container = canvas.getContainer() as HTMLElement; @@ -308,24 +309,24 @@ export class Tooltip extends BasePlugin { 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; diff --git a/tests/g6/plugins/plugins-tooltip.spec.ts b/tests/g6/plugins/plugins-tooltip.spec.ts new file mode 100644 index 00000000000..0a1f996c93e --- /dev/null +++ b/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 }); + }); +}); diff --git a/tests/g6/plugins/plugins-tooltip.spec.ts-snapshots/plugin-tooltip-bug-tooltip-should-has-correct-position-after-graph-resize-1-chromium-darwin.png b/tests/g6/plugins/plugins-tooltip.spec.ts-snapshots/plugin-tooltip-bug-tooltip-should-has-correct-position-after-graph-resize-1-chromium-darwin.png new file mode 100644 index 00000000000..ec99e429312 Binary files /dev/null and b/tests/g6/plugins/plugins-tooltip.spec.ts-snapshots/plugin-tooltip-bug-tooltip-should-has-correct-position-after-graph-resize-1-chromium-darwin.png differ diff --git a/tests/g6/plugins/plugins-tooltip.spec.ts-snapshots/plugin-tooltip-bug-tooltip-should-has-correct-position-after-graph-resize-2-chromium-darwin.png b/tests/g6/plugins/plugins-tooltip.spec.ts-snapshots/plugin-tooltip-bug-tooltip-should-has-correct-position-after-graph-resize-2-chromium-darwin.png new file mode 100644 index 00000000000..276fc5a17ef Binary files /dev/null and b/tests/g6/plugins/plugins-tooltip.spec.ts-snapshots/plugin-tooltip-bug-tooltip-should-has-correct-position-after-graph-resize-2-chromium-darwin.png differ