Skip to content

Commit

Permalink
💄 style: 优化 minimap 样式
Browse files Browse the repository at this point in the history
  • Loading branch information
arvinxx committed Mar 16, 2021
1 parent 033549c commit 536c8df
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 8 deletions.
7 changes: 5 additions & 2 deletions packages/mindflow/src/definition/graphOpts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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),
});
5 changes: 4 additions & 1 deletion packages/mindflow/src/definition/minimapOpts.ts
Original file line number Diff line number Diff line change
@@ -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
Expand Down
14 changes: 9 additions & 5 deletions packages/mindflow/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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>
);
};
Expand Down
17 changes: 17 additions & 0 deletions packages/mindflow/src/style.less
Original file line number Diff line number Diff line change
@@ -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);
}

0 comments on commit 536c8df

Please sign in to comment.