feat(tooltip): tooltip support get content async (#6660)

antvis · Dec 23, 2024 · 29757b6 · 29757b6
1 parent 59267bf
commit 29757b6
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 10 deletions.
diff --git a/packages/g6/__tests__/demos/index.ts b/packages/g6/__tests__/demos/index.ts
@@ -143,6 +143,7 @@ export { pluginToolbarIconfont } from './plugin-toolbar-iconfont';
 export { pluginTooltip } from './plugin-tooltip';
 export { pluginTooltipDual } from './plugin-tooltip-dual';
 export { pluginTooltipEnable } from './plugin-tooltip-enable';
+export { pluginTooltipAsync } from './plugin-tooltip-async';
 export { pluginWatermark } from './plugin-watermark';
 export { pluginWatermarkImage } from './plugin-watermark-image';
 export { theme } from './theme';

diff --git a/packages/g6/__tests__/demos/plugin-tooltip-async.ts b/packages/g6/__tests__/demos/plugin-tooltip-async.ts
@@ -0,0 +1,34 @@
+import type { ElementDatum, IElementEvent } from '@antv/g6';
+import { Graph } from '@antv/g6';
+
+export const pluginTooltipAsync: TestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    data: {
+      nodes: [
+        { id: 'node1', style: { x: 150, y: 100 }, data: { desc: 'get content async test' } },
+      ],
+    },
+    node: {
+      style: {
+        labelText: (d) => d.id,
+      },
+    },
+    plugins: [
+      {
+        key: 'tooltip',
+        type: 'tooltip',
+        trigger: 'click',
+        getContent: (evt: IElementEvent, items: ElementDatum[]) => {
+          return new Promise((resolve) => {
+            resolve(items[0].data?.desc || '');
+          })
+        },
+      },
+    ],
+  });
+
+  await graph.render();
+
+  return graph;
+};
diff --git a/packages/g6/__tests__/unit/plugins/tooltip.spec.ts b/packages/g6/__tests__/unit/plugins/tooltip.spec.ts
@@ -1,6 +1,6 @@
 import type { Tooltip } from '@/src';
 import { ComboEvent, EdgeEvent, NodeEvent, idOf } from '@/src';
-import { pluginTooltip, pluginTooltipEnable } from '@@/demos';
+import { pluginTooltip, pluginTooltipEnable, pluginTooltipAsync } from '@@/demos';
 import { createDemoGraph } from '@@/utils';
 
 describe('plugin tooltip', () => {
@@ -46,7 +46,7 @@ describe('plugin tooltip', () => {
   it('show tooltip by id', async () => {
     const graph = await createDemoGraph(pluginTooltip);
     const tooltip = graph.getPluginInstance<Tooltip>('tooltip');
-    tooltip.showById('6');
+    await tooltip.showById('6');
     await expect(graph).toMatchSnapshot(__filename, 'show-tooltip-by-id');
     graph.destroy();
   });
@@ -55,11 +55,12 @@ describe('plugin tooltip', () => {
     const graph = await createDemoGraph(pluginTooltipEnable);
     const container = graph.getCanvas().getContainer()!;
     const el = container.querySelector('.tooltip') as HTMLDivElement;
+    const plugin = graph.getPluginInstance<Tooltip>('tooltip');
 
-    graph.emit(NodeEvent.CLICK, { targetType: 'node', target: { id: 'node3' } });
+    await plugin.showById('node3');
     expect(el.style.visibility).toBe('hidden');
 
-    graph.emit(NodeEvent.CLICK, { targetType: 'node', target: { id: 'node1' } });
+    await plugin.showById('node1');
     expect(el.style.visibility).toBe('visible');
 
     graph.destroy();
@@ -69,10 +70,24 @@ describe('plugin tooltip', () => {
     const graph = await createDemoGraph(pluginTooltipEnable);
     const container = graph.getCanvas().getContainer()!;
     const el = container.querySelector('.tooltip') as HTMLDivElement;
+    const plugin = graph.getPluginInstance<Tooltip>('tooltip');
 
-    graph.emit(NodeEvent.CLICK, { targetType: 'node', target: { id: 'node2' } });
+    await plugin.showById('node2');
     expect(el.style.visibility).toBe('hidden');
 
     graph.destroy();
   });
+
+  it('get content async', async () => {
+    const graph = await createDemoGraph(pluginTooltipAsync);
+    const container = graph.getCanvas().getContainer()!;
+    const el = container.querySelector('.tooltip') as HTMLDivElement;
+    const plugin = graph.getPluginInstance<Tooltip>('tooltip');
+
+    await plugin.showById('node1');
+    expect(el.style.visibility).toBe('visible');
+    expect(el.innerHTML).toBe('get content async test');
+
+    graph.destroy();
+  });
 });
diff --git a/packages/g6/src/plugins/tooltip.ts b/packages/g6/src/plugins/tooltip.ts
@@ -31,7 +31,7 @@ export interface TooltipOptions
    *
    *  <en/> Function for getting tooltip content
    */
-  getContent?: (event: IElementEvent, items: ElementDatum[]) => HTMLElement | string;
+  getContent?: (event: IElementEvent, items: ElementDatum[]) => Promise<HTMLElement | string>;
   /**
    *  <zh/> 是否启用
    *
@@ -215,11 +215,11 @@ export class Tooltip extends BasePlugin<TooltipOptions> {
    * <en/> Show tooltip of target element
    * @param id - <zh/> 元素 ID | <en/> element ID
    */
-  public showById = (id: ID) => {
+  public showById = async (id: ID) => {
     const event = {
       target: { id },
     } as IElementEvent;
-    this.show(event);
+    await this.show(event);
   };
 
   private getElementData = (id: ID, targetType: ElementType) => {
@@ -243,7 +243,7 @@ export class Tooltip extends BasePlugin<TooltipOptions> {
    * @param event - <zh/> 目标元素 | <en/> target element
    * @internal
    */
-  public show = (event: IElementEvent) => {
+  public show = async (event: IElementEvent) => {
     const {
       client,
       target: { id },
@@ -258,7 +258,7 @@ export class Tooltip extends BasePlugin<TooltipOptions> {
 
     let tooltipContent: { [key: string]: unknown } = {};
     if (getContent) {
-      tooltipContent.content = getContent(event, items);
+      tooltipContent.content = await getContent(event, items);
       if (!tooltipContent.content) return;
     } else {
       const style = this.context.graph.getElementRenderStyle(id);