feat(plugin): minimap

package.json

@@ -3,6 +3,7 @@
   "private": true,
   "repository": "https://github.com/antvis/G6.git",
   "scripts": {
+    "dev": "pnpm --stream --filter=@antv/g6 run dev ",
     "site": "pnpm -r --stream --filter=./packages/site run dev",
     "watch": "pnpm -r --stream --filter=!./site run start",
     "postinstall": "husky install",

packages/g6/__tests__/demo/case/index.ts

@@ -47,6 +47,7 @@ export * from './layout-radial-prevent-overlap-unstrict';
 export * from './layout-radial-sort';
 export * from './plugin-contextmenu';
 export * from './plugin-grid-line';
+export * from './plugin-minimap';
 export * from './plugin-toolbar-build-in';
 export * from './plugin-toolbar-iconfont';
 export * from './plugin-tooltip';

packages/g6/__tests__/demo/case/plugin-minimap.ts

@@ -0,0 +1,21 @@
+import { Graph, register } from '@/src';
+import data from '@@/dataset/cluster.json';
+import { Minimap } from '../../../src/plugins';
+import type { STDTestCase } from '../types';
+
+export const pluginMinimap: STDTestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    autoResize: true,
+    data,
+    layout: { type: 'd3force' },
+    behaviors: ['drag-canvas'],
+    plugins: [{ type: 'minimap', mode: 'delegate' }],
+  });
+  register('plugin', 'minimap', Minimap);
+
+  await graph.render();
+  return graph;
+};
+
+pluginMinimap.form = () => [];

packages/g6/package.json

@@ -62,8 +62,9 @@
     "@antv/g-plugin-dragndrop": "^1.8.22",
     "@antv/graphlib": "^2.0.2",
     "@antv/hierarchy": "latest",
-    "@antv/layout": "^1.2.14-beta.1",
-    "@antv/util": "^3.3.7"
+    "@antv/util": "^3.3.7",
+    "moveable": "^0.53.0",
+    "@antv/layout": "^1.2.14-beta.1"
   },
   "devDependencies": {
     "@antv/g-plugin-3d": "^1.9.34",

packages/g6/src/elements/edges/base-edge.ts

@@ -1,5 +1,6 @@
 import type {
   BaseStyleProps,
+  DisplayObject,
   DisplayObjectConfig,
   Group,
   ImageStyleProps,
@@ -238,6 +239,14 @@ export abstract class BaseEdge extends BaseShape<BaseEdgeStyleProps> {
 
     return result;
   }
+
+  /**
+   * Get the key shape for the node.
+   * @returns Key shape.
+   */
+  public getKey(): DisplayObject {
+    return this.shapeMap.key;
+  }
 }
 
 type SymbolName = 'triangle' | 'circle' | 'diamond' | 'vee' | 'rect' | 'triangleRect' | 'simple';

packages/g6/src/plugins/index.ts

@@ -1,13 +1,15 @@
 export { BasePlugin } from './base-plugin';
 export { Contextmenu } from './contextmenu';
 export { GridLine } from './grid-line';
+export { Minimap } from './minimap';
 export { Toolbar } from './toolbar';
 export { Tooltip } from './tooltip';
 export { Watermark } from './watermark';
 
 export type { BasePluginOptions } from './base-plugin';
 export type { ContextmenuOptions } from './contextmenu';
 export type { GridLineOptions } from './grid-line';
+export type { MinimapOptions } from './minimap';
 export type { ToolbarOptions } from './toolbar';
 export type { TooltipOptions } from './tooltip';
 export type { WatermarkOptions } from './watermark';