feat(minimap): add delegate view type for minimap

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,

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

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,