feat(component):add MiniMap Component

packages/graphin-components/src/MiniMap/demos/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Graphin, { Utils } from '@antv/graphin';
+import { MiniMap } from '@antv/graphin-components';
+
+import '@antv/graphin/dist/index.css';
+// Do not forget to import CSS
+import '@antv/graphin-components/dist/index.css';
+
+const App = () => {
+  const data = Utils.mock(5).circle().graphin();
+
+  return (
+    <div className="App">
+      <Graphin data={data}>
+        <MiniMap />
+      </Graphin>
+    </div>
+  );
+};
+export default App;

packages/graphin-components/src/MiniMap/index.md

@@ -15,6 +15,8 @@ nav:
 
 MiniMap 小地图导航 是一种常见的交互组件，当数据量很大， 小地图导航可以让用户看到当前画布内容位于全局的什么位置，从而不丢失分析的全局感，是非常有效的组件
 
+<code src='./demos/index.tsx'>
+
 ## 功能特性
 
 - MiniMap 技术底座应该是 G6.MiniMap，可以通过组件内部 didmount 的时候 addPlugins 的方式注入

packages/graphin-components/src/MiniMap/index.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+
+import { GraphinContext, G6 } from '@antv/graphin';
+
+const defaultOptions = {
+  className: 'graphin-minimap',
+  viewportClassName: 'graphin-minimap-viewport',
+  // Minimap 中默认展示和主图一样的内容，KeyShape 只展示节点和边的 key shape 部分，delegate表示展示自定义的rect，用户可自定义样式
+  type: 'default',
+  padding: 50,
+  size: [200, 120],
+  delegateStyle: {
+    fill: '#40a9ff',
+    stroke: '#096dd9',
+  },
+  refresh: true,
+};
+export interface MiniMapProps {
+  /**
+   * @description 是否开启
+   * @default false
+   */
+  visible: boolean;
+  /**
+   * @description MiniMap 配置项
+   * @default
+   */
+  options?: Partial<typeof defaultOptions>;
+
+  style?: React.CSSProperties;
+}
+const styles: {
+  [key: string]: React.CSSProperties;
+} = {
+  container: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    background: '#fff',
+    boxShadow:
+      '0px 8px 10px -5px rgba(0,0,0,0.2), 0px 16px 24px 2px rgba(0,0,0,0.14), 0px 6px 30px 5px rgba(0,0,0,0.12)',
+  },
+};
+let containerRef: null | HTMLDivElement = null;
+const containerHeight = 120;
+const MiniMap: React.FunctionComponent<MiniMapProps> = (props) => {
+  const { graph } = React.useContext(GraphinContext);
+  const { options, style = {} } = props;
+
+  React.useEffect(() => {
+    console.log('graph', graph);
+    const width = graph.getWidth();
+    const height = graph.getHeight();
+    const padding = graph.get('fitViewPadding');
+
+    const containerSize = [((width - padding * 2) / (height - padding * 2)) * containerHeight, containerHeight];
+
+    const miniMapOptions = {
+      container: containerRef,
+      ...defaultOptions,
+      size: containerSize,
+      ...options,
+    };
+
+    const miniMap = new G6.Minimap(miniMapOptions);
+
+    graph.addPlugin(miniMap);
+
+    return () => {
+      graph.removePlugin(miniMap);
+    };
+  }, [options]);
+
+  const mergedStyle = {
+    ...styles.container,
+    ...style,
+  };
+  return (
+    <div
+      ref={(node) => {
+        containerRef = node;
+      }}
+      style={mergedStyle}
+    ></div>
+  );
+};
+
+export default MiniMap;

packages/graphin-components/src/index.ts

@@ -9,3 +9,5 @@ export { default as EdgeBundling } from './EdgeBundling';
 export { default as VisSettingPanel } from './VisSettingPanel';
 export { default as Tooltip } from './Tooltip';
 export { default as FishEye } from './FishEye';
+export { default as Toolbar } from './Toolbar';
+export { default as MiniMap } from './MiniMap';