diff --git a/packages/g6/__tests__/demos/index.ts b/packages/g6/__tests__/demos/index.ts index accb02e85de..40c9a695216 100644 --- a/packages/g6/__tests__/demos/index.ts +++ b/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'; diff --git a/packages/g6/__tests__/demos/plugin-tooltip-enable.ts b/packages/g6/__tests__/demos/plugin-tooltip-enable.ts new file mode 100644 index 00000000000..bfdda87c687 --- /dev/null +++ b/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; +}; diff --git a/packages/g6/__tests__/unit/plugins/tooltip.spec.ts b/packages/g6/__tests__/unit/plugins/tooltip.spec.ts index d65456551eb..ff5ad4b434b 100644 --- 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 } 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(); + }); }); diff --git a/packages/g6/src/plugins/tooltip.ts b/packages/g6/src/plugins/tooltip.ts index d9539a99c0d..536c0759115 100644 --- a/packages/g6/src/plugins/tooltip.ts +++ b/packages/g6/src/plugins/tooltip.ts @@ -38,7 +38,7 @@ export interface TooltipOptions * Is enable * @defaultValue true */ - enable?: boolean | ((event: IElementEvent) => boolean); + enable?: boolean | ((event: IElementEvent, items: ElementDatum[]) => boolean); /** * 显示隐藏的回调 * @@ -147,10 +147,10 @@ export class Tooltip extends BasePlugin { }); } - 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 { 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 { }), }; } + + 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,