feat(tooltip): add 'datum[]' param to the enable function (#6637)

packages/g6/__tests__/demos/index.ts

@@ -142,6 +142,7 @@ export { pluginToolbarBuildIn } from './plugin-toolbar-build-in';
 export { pluginToolbarIconfont } from './plugin-toolbar-iconfont';
 export { pluginTooltip } from './plugin-tooltip';
 export { pluginTooltipDual } from './plugin-tooltip-dual';
+export { pluginTooltipEnable } from './plugin-tooltip-enable';
 export { pluginWatermark } from './plugin-watermark';
 export { pluginWatermarkImage } from './plugin-watermark-image';
 export { theme } from './theme';

packages/g6/__tests__/demos/plugin-tooltip-enable.ts

@@ -0,0 +1,37 @@
+import type { ElementDatum, IElementEvent } from '@antv/g6';
+import { Graph } from '@antv/g6';
+
+export const pluginTooltipEnable: TestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    data: {
+      nodes: [
+        { id: 'node1', style: { x: 150, y: 100 }, data: { type: 'test1', desc: 'This is a tooltip' } },
+        { id: 'node2', style: { x: 150, y: 200 }, data: { type: 'test1', desc: '' } },
+        { id: 'node3', style: { x: 150, y: 300 }, data: { type: 'test2', desc: 'This is a tooltip' } },
+      ],
+    },
+    node: {
+      style: {
+        labelText: (d) => d.id,
+      },
+    },
+    plugins: [
+      {
+        key: 'tooltip',
+        type: 'tooltip',
+        trigger: 'click',
+        enable: (e: IElementEvent, items: ElementDatum[]) => {
+          return items[0].data?.type === 'test1';
+        },
+        getContent: (evt: IElementEvent, items: ElementDatum[]) => {
+          return items[0].data?.desc || '';
+        },
+      },
+    ],
+  });
+
+  await graph.render();
+
+  return graph;
+};

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 } from '@@/demos';
+import { pluginTooltip, pluginTooltipEnable } from '@@/demos';
 import { createDemoGraph } from '@@/utils';
 
 describe('plugin tooltip', () => {
@@ -50,4 +50,29 @@ describe('plugin tooltip', () => {
     await expect(graph).toMatchSnapshot(__filename, 'show-tooltip-by-id');
     graph.destroy();
   });
+
+  it('enable', async () => {
+    const graph = await createDemoGraph(pluginTooltipEnable);
+    const container = graph.getCanvas().getContainer()!;
+    const el = container.querySelector('.tooltip') as HTMLDivElement;
+
+    graph.emit(NodeEvent.CLICK, { targetType: 'node', target: { id: 'node3' } });
+    expect(el.style.visibility).toBe('hidden');
+
+    graph.emit(NodeEvent.CLICK, { targetType: 'node', target: { id: 'node1' } });
+    expect(el.style.visibility).toBe('visible');
+
+    graph.destroy();
+  });
+
+  it('get content null', async () => {
+    const graph = await createDemoGraph(pluginTooltipEnable);
+    const container = graph.getCanvas().getContainer()!;
+    const el = container.querySelector('.tooltip') as HTMLDivElement;
+
+    graph.emit(NodeEvent.CLICK, { targetType: 'node', target: { id: 'node2' } });
+    expect(el.style.visibility).toBe('hidden');
+
+    graph.destroy();
+  });
 });

packages/g6/src/plugins/tooltip.ts

@@ -38,7 +38,7 @@ export interface TooltipOptions
    *  <en/> Is enable
    *  @defaultValue true
    */
-  enable?: boolean | ((event: IElementEvent) => boolean);
+  enable?: boolean | ((event: IElementEvent, items: ElementDatum[]) => boolean);
   /**
    * <zh/> 显示隐藏的回调
    *
@@ -147,10 +147,10 @@ export class Tooltip extends BasePlugin<TooltipOptions> {
     });
   }
 
-  private isEnable = (event: IElementEvent) => {
+  private isEnable = (event: IElementEvent, items: ElementDatum[]) => {
     const { enable } = this.options;
     if (typeof enable === 'function') {
-      return enable(event);
+      return enable(event, items);
     }
     return enable;
   };
@@ -249,25 +249,17 @@ export class Tooltip extends BasePlugin<TooltipOptions> {
       target: { id },
     } = event;
     if (isToBeDestroyed(event.target)) return;
-    if (!this.tooltipElement || !this.isEnable(event)) return;
 
     const targetType = this.context.graph.getElementType(id);
     const { getContent, title } = this.options;
-    this.currentTarget = id;
     const items: ElementDatum[] = this.getElementData(id, targetType as ElementType);
-    let x;
-    let y;
-    if (client) {
-      x = client.x;
-      y = client.y;
-    } else {
-      const style = get(items, '0.style', { x: 0, y: 0 });
-      x = style.x;
-      y = style.y;
-    }
+
+    if (!this.tooltipElement || !this.isEnable(event, items)) return;
+
     let tooltipContent: { [key: string]: unknown } = {};
     if (getContent) {
       tooltipContent.content = getContent(event, items);
+      if (!tooltipContent.content) return;
     } else {
       const style = this.context.graph.getElementRenderStyle(id);
       const color = targetType === 'node' ? style.fill : style.stroke;
@@ -282,6 +274,20 @@ export class Tooltip extends BasePlugin<TooltipOptions> {
         }),
       };
     }
+
+    this.currentTarget = id;
+
+    let x;
+    let y;
+    if (client) {
+      x = client.x;
+      y = client.y;
+    } else {
+      const style = get(items, '0.style', { x: 0, y: 0 });
+      x = style.x;
+      y = style.y;
+    }
+
     this.options.onOpenChange?.(true);
     this.tooltipElement.update({
       ...this.tooltipStyleProps,