💄 style: 优化 minimap 样式

arvinxx · Mar 16, 2021 · 536c8df · 536c8df
1 parent 033549c
commit 536c8df
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 8 deletions.
diff --git a/packages/mindflow/src/definition/graphOpts.ts b/packages/mindflow/src/definition/graphOpts.ts
@@ -11,8 +11,11 @@ export const graphOpts = (container, minimapCtn): Partial<Options.Manual> => ({
   background: {
     color: '#fafafa',
   },
-  panning: true,
   mousewheel: true,
-  scroller: true,
+  scroller: {
+    enabled: true,
+    pannable: true,
+    autoResize: true,
+  },
   minimap: minimapOpts(minimapCtn),
 });
diff --git a/packages/mindflow/src/definition/minimapOpts.ts b/packages/mindflow/src/definition/minimapOpts.ts
@@ -1,10 +1,13 @@
 import { MinimaNode } from './shapes';
+import type { MiniMapManager } from '@antv/x6/lib/graph/minimap';
 
-export const minimapOpts = (container) => ({
+export const minimapOpts = (container): Partial<MiniMapManager.Options> => ({
   container,
   enabled: true,
   maxScale: 1,
   scalable: false,
+  width: 120,
+  height: 100,
   graphOptions: {
     async: true,
     // 用指定的 View 替换节点默认的 View

diff --git a/packages/mindflow/src/index.tsx b/packages/mindflow/src/index.tsx
@@ -4,6 +4,8 @@ import { useGraph } from './hooks/useGraph';
 import ErrorBoundary from './components/ErrorBoundary';
 import type { GraphData } from './types';
 
+import './style.less';
+
 export * from './types';
 
 export interface MindflowProps {
@@ -25,11 +27,13 @@ const Mindflow: FC<MindflowProps> = ({ data, width, height }) => {
 
   return (
     <ErrorBoundary>
-      <div
-        ref={container}
-        style={{ width: width || '100%', height: height || 400 }}
-      />
-      <div ref={minimapContainer} />
+      <div className="mindflow-container">
+        <div
+          ref={container}
+          style={{ width: width || '100%', height: height || 400 }}
+        />
+        <div ref={minimapContainer} className="mindflow-minimap" />
+      </div>
     </ErrorBoundary>
   );
 };

diff --git a/packages/mindflow/src/style.less b/packages/mindflow/src/style.less
@@ -0,0 +1,17 @@
+.mindflow {
+  &-container {
+    position: relative;
+  }
+  &-minimap {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    border: 1px solid #eee;
+    border-radius: 2px;
+  }
+}
+
+.x6-widget-minimap-viewport {
+  border-color: rgba(24, 144, 255, 0.5);
+}