feat: svg minimap

package.json

@@ -74,7 +74,7 @@
     "@antv/g-base": "^0.3.29",
     "@antv/g-canvas": "^0.3.29",
     "@antv/g-math": "^0.1.1",
-    "@antv/g-svg": "^0.3.22",
+    "@antv/g-svg": "^0.3.24",
     "@antv/hierarchy": "^0.6.1",
     "@antv/matrix-util": "^2.0.4",
     "@antv/path-util": "^2.0.3",

src/plugins/minimap/index.ts

@@ -1,4 +1,5 @@
 import GCanvas from '@antv/g-canvas/lib/canvas';
+import GSVGCanvas from '@antv/g-svg/lib/canvas';
 import Base, { IPluginBaseConfig } from '../base';
 import isString from '@antv/util/lib/is-string';
 import createDOM from '@antv/dom-util/lib/create-dom';
@@ -17,6 +18,8 @@ const { max } = Math;
 const DEFAULT_MODE = 'default';
 const KEYSHAPE_MODE = 'keyShape';
 const DELEGATE_MODE = 'delegate';
+const SVG = 'svg';
+const CANVAS = 'canvas';
 
 interface MiniMapConfig extends IPluginBaseConfig {
   viewportClassName?: string;
@@ -383,13 +386,22 @@ export default class MiniMap extends Base {
       '<div class="g6-minimap-container" style="position: relative;"></div>',
     );
     container.appendChild(containerDOM);
-
-    const canvas = new GCanvas({
-      container: containerDOM,
-      width: size[0],
-      height: size[1],
-    });
-
+    
+    let canvas;
+    const renderer = graph.get('renderer');
+    if(renderer === SVG) {
+      canvas = new GSVGCanvas({
+        container: containerDOM,
+        width: size[0],
+        height: size[1],
+      });
+    } else {
+      canvas = new GCanvas({
+        container: containerDOM,
+        width: size[0],
+        height: size[1],
+      });
+    }
     self.set('canvas', canvas);
     self.updateCanvas();
   }

tests/unit/graph/svg-spec.ts

@@ -1,4 +1,5 @@
 import { Graph, Layout, TreeGraph } from '../../../src';
+import G6 from '../../../src';
 import '../../../src/behavior';
 import { scale, translate } from '../../../src/util/math';
 import Plugin from '../../../src/plugins';
@@ -1926,6 +1927,68 @@ describe('tree graph', () => {
 });
 
 
+describe.only('plugins', () => {
+
+  const data = {
+    nodes: [
+      {
+        id: 'node1'
+      },
+      {
+        id: 'node2'
+      },
+      {
+        id: 'node3'
+      },
+      {
+        id: 'node4'
+      },
+      {
+        id: 'node5'
+      },
+    ],
+    edges: [
+      {
+        source: 'node1',
+        target: 'node2'
+      },
+      {
+        source: 'node2',
+        target: 'node3'
+      },
+      {
+        source: 'node1',
+        target: 'node3'
+      },
+      {
+        source: 'node1',
+        target: 'node4'
+      },
+      {
+        source: 'node4',
+        target: 'node5'
+      },
+    ],
+  };
+
+  it('minimap', () => {
+    const minimap = new G6.Minimap();
+    const graph = new Graph({
+      container: div,
+      width: 500,
+      height: 500,
+      // renderer: 'svg',
+      plugins: [minimap],
+      modes: {
+        defualt: ['drag-node', 'drag-canvas', 'zoom-canvas']
+      }
+    });
+    graph.data(data);
+    graph.render();
+  });
+});
+
+
 // describe.only('custom group', () => {
 //   const data = {
 //     nodes: [