diff --git a/demos/custom-tree-graph.html b/demos/custom-tree-graph.html
index ae9aa9ba63..65b43f0ccd 100644
--- a/demos/custom-tree-graph.html
+++ b/demos/custom-tree-graph.html
@@ -78,7 +78,7 @@ G6.registerNode('tree-node', {
return rect;
}
}, 'single-shape');
-const minimap = new Minimap({ size: [200, 150] });
+const minimap = new Minimap({ size: [200, 150], type: 'delegate', delegateStyle: { fill: '#fff', stroke: '#666' } });
const graph = new G6.TreeGraph({
container: 'mountNode',
width: 800,
diff --git a/plugins/minimap/index.js b/plugins/minimap/index.js
index 1a2b8f7996..1c1b98525a 100644
--- a/plugins/minimap/index.js
+++ b/plugins/minimap/index.js
@@ -8,6 +8,10 @@ const each = require('@antv/util/lib/each');
const max = Math.max;
+const DEFAULT_MODE = 'default';
+const KEYSHAPE_MODE = 'keyShape';
+const DELEGATE_MODE = 'delegate';
+
class Minimap extends Base {
init(graph) {
super.init(graph);
@@ -18,8 +22,12 @@ class Minimap extends Base {
container: null,
className: 'g6-minimap',
viewportClassName: 'g6-minimap-viewport',
- keyShapeOnly: false,
- size: [ 200, 120 ]
+ type: 'default', // 可选 default, delegate, keyShape
+ size: [ 200, 120 ],
+ delegateStyle: {
+ fill: '#40a9ff',
+ stroke: '#096dd9'
+ }
};
}
getEvents() {
@@ -132,11 +140,19 @@ class Minimap extends Base {
const size = this.get('size');
const graph = this.get('graph');
const canvas = this.get('canvas');
- // 根据cfgs更新画布内容
- if (this.get('keyShapeOnly')) {
- this._updateKeyShapes();
- } else {
- this._updateGraphShapes();
+ const type = this.get('type');
+ switch (type) {
+ case DEFAULT_MODE:
+ this._updateGraphShapes();
+ break;
+ case KEYSHAPE_MODE:
+ this._updateKeyShapes();
+ break;
+ case DELEGATE_MODE:
+ this._updateDelegateShapes();
+ break;
+ default:
+ this._updateGraphShapes();
}
const bbox = canvas.getBBox();
// 刷新后bbox可能会变,需要重置画布矩阵以缩放到合适的大小
@@ -161,12 +177,8 @@ class Minimap extends Base {
const canvas = this.get('canvas');
const group = canvas.get('children')[0] || canvas.addGroup();
const nodes = graph.getNodes();
- const edges = graph.getEdges();
group.clear();
- // 边可以直接使用keyShape
- each(edges, edge => {
- group.add(edge.get('keyShape').clone());
- });
+ this._getGraphEdgeKeyShape(group);
// 节点需要group配合keyShape
each(nodes, node => {
const parent = group.addGroup();
@@ -183,6 +195,33 @@ class Minimap extends Base {
clonedGroup.resetMatrix();
canvas.get('children')[0] = clonedGroup;
}
+ // 将主图上的node用
+ _updateDelegateShapes() {
+ const graph = this._cfgs.graph;
+ const canvas = this.get('canvas');
+ const group = canvas.get('children')[0] || canvas.addGroup();
+ const delegateStyle = this.get('delegateStyle');
+ group.clear();
+ this._getGraphEdgeKeyShape(group);
+ each(graph.getNodes(), node => {
+ const bbox = node.getBBox();
+ group.addShape('rect', {
+ attrs: {
+ x: bbox.minX,
+ y: bbox.minY,
+ width: bbox.width,
+ height: bbox.height,
+ ...delegateStyle
+ }
+ });
+ });
+ }
+ _getGraphEdgeKeyShape(group) {
+ const graph = this.get('graph');
+ each(graph.getEdges(), edge => {
+ group.add(edge.get('keyShape').clone());
+ });
+ }
// 绘制minimap视口
_updateViewport(ratio, dx, dy) {
const graph = this.get('graph');
diff --git a/test/unit/plugins/minimap-spec.js b/test/unit/plugins/minimap-spec.js
index d1d3fd9ebf..43c173e4e2 100644
--- a/test/unit/plugins/minimap-spec.js
+++ b/test/unit/plugins/minimap-spec.js
@@ -122,6 +122,25 @@ describe('minimap', () => {
}, 50);
}, 50);
});
+ it('delegate type of minimap', () => {
+ const minimap = new Minimap({ size: [ 200, 200 ], type: 'delegate', delegateStyle: { fill: '#fff' } });
+ const graph = new G6.Graph({
+ container: div,
+ width: 500,
+ height: 500,
+ plugins: [ minimap ]
+ });
+ const nodeBBox = graph.addItem('node', { id: 'node', x: 100, y: 100, size: 16 }).getBBox();
+ const canvas = minimap.getCanvas();
+ const delegateShape = canvas.get('children')[0].get('children')[0];
+ expect(delegateShape.attr('x')).to.equal(nodeBBox.minX);
+ expect(delegateShape.attr('y')).to.equal(nodeBBox.minY);
+ expect(delegateShape.attr('width')).to.equal(nodeBBox.width);
+ expect(delegateShape.attr('height')).to.equal(nodeBBox.height);
+ expect(delegateShape.attr('fill')).to.equal('#fff');
+ expect(delegateShape.attr('stroke')).to.equal('#096dd9');
+ graph.destroy();
+ });
it('minimap container', () => {
const minimap = new Minimap({ container, size: [ 200, 200 ], className: 'test-className' });
const graph = new G6.Graph({
@@ -147,7 +166,7 @@ describe('minimap', () => {
graph.destroy();
});
it('keyShapeOnly minimap', () => {
- const minimap = new Minimap({ size: [ 200, 200 ], keyShapeOnly: true });
+ const minimap = new Minimap({ size: [ 200, 200 ], type: 'keyShape' });
const graph = new G6.Graph({
container: div,
width: 500,