diff --git a/packages/g6/__tests__/demos/plugin-minimap.ts b/packages/g6/__tests__/demos/plugin-minimap.ts index 80f60e166fc..e7a1227bdba 100644 --- a/packages/g6/__tests__/demos/plugin-minimap.ts +++ b/packages/g6/__tests__/demos/plugin-minimap.ts @@ -5,7 +5,7 @@ export const pluginMinimap: TestCase = async (context) => { const graph = new Graph({ ...context, data: { nodes: Array.from({ length: 20 }).map((_, i) => ({ id: `node${i}` })) }, - behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'], + behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'hover-activate'], plugins: [ { key: 'minimap', diff --git a/packages/g6/src/plugins/minimap/index.ts b/packages/g6/src/plugins/minimap/index.ts index 1ff5d0e87e5..edf0fd8884d 100644 --- a/packages/g6/src/plugins/minimap/index.ts +++ b/packages/g6/src/plugins/minimap/index.ts @@ -1,6 +1,6 @@ import { Canvas, DisplayObject, IRenderer, Landmark } from '@antv/g'; import { Renderer } from '@antv/g-canvas'; -import { throttle } from '@antv/util'; +import { debounce, throttle } from '@antv/util'; import { GraphEvent } from '../../constants'; import type { RuntimeContext } from '../../runtime/types'; import { GraphData } from '../../spec'; @@ -93,6 +93,13 @@ export interface MinimapOptions extends BasePluginOptions { * Renderer, default to use Canvas renderer */ renderer?: IRenderer; + /** + * 延迟更新时间(毫秒),用于性能优化 + * + * Delay update time(ms), used for performance optimization + * @defaultValue 128 + */ + delay?: number; } /** @@ -114,15 +121,35 @@ export class Minimap extends BasePlugin { border: '1px solid #ddd', background: '#fff', }, + delay: 128, }; private canvas!: Canvas; constructor(context: RuntimeContext, options: MinimapOptions) { super(context, Object.assign({}, Minimap.defaultOptions, options)); + this.setOnRender(); + this.bindEvents(); + } + + public update(options: Partial): void { + this.unbindEvents(); + super.update(options); + if ('delay' in options) this.setOnRender(); this.bindEvents(); } + private setOnRender() { + this.onRender = debounce( + () => { + this.renderMinimap(); + this.renderMask(); + }, + this.options.delay, + true, + ); + } + private bindEvents() { const { graph } = this.context; graph.on(GraphEvent.AFTER_DRAW, this.onDraw); @@ -142,14 +169,7 @@ export class Minimap extends BasePlugin { this.onRender(); }; - private onRender = throttle( - () => { - this.renderMinimap(); - this.renderMask(); - }, - 32, - { leading: true }, - ) as () => void; + private onRender!: () => void; private shapes = new Map(); @@ -296,7 +316,8 @@ export class Minimap extends BasePlugin { } = this.options; if (this.canvas) { - this.canvas.resize(width, height); + const { width: w, height: h } = this.canvas.getConfig(); + if (width !== w || height !== h) this.canvas.resize(width, height); if (renderer) this.canvas.setRenderer(renderer); } else { const dom = document.createElement('div');