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');