Browse Source

feat: optimize minimap's config

master
smallstonesk 4 years ago
parent
commit
b487509a24
  1. 31
      packages/core/src/components/miniMapSimpleNode/index.tsx
  2. 6
      packages/core/src/mods/flowChart/index.module.less
  3. 27
      packages/core/src/utils/createGraph.ts
  4. 1
      packages/core/tsconfig.json

31
packages/core/src/components/miniMapSimpleNode/index.tsx

@ -0,0 +1,31 @@
import {NodeView, Markup} from '@antv/x6';
class MiniMapSimpleNode extends NodeView {
protected body: SVGRectElement | undefined;
protected readonly markup: Markup.JSONMarkup = {
tagName: 'rect',
selector: 'body',
attrs: {
fill: '#D9D9D9'
}
};
updateNodeSize() {
var size = this.cell.getSize();
this.setAttrs(size, this.body);
}
render() {
this.empty();
const doc = this.parseJSONMarkup(this.markup, this.container);
this.body = doc.selectors.body as SVGRectElement;
this.container.append(doc.fragment);
this.updateNodeSize();
this.updateTransform();
return this;
}
}
export default MiniMapSimpleNode;

6
packages/core/src/mods/flowChart/index.module.less

@ -15,5 +15,11 @@
position: absolute; position: absolute;
right: 40px; right: 40px;
bottom: 40px; bottom: 40px;
:global {
.x6-widget-minimap-viewport {
border: 1px solid #E0E0E0;
}
}
} }
} }

27
packages/core/src/utils/createGraph.ts

@ -1,7 +1,8 @@
import {Graph} from '@antv/x6'; import {Graph, Cell} from '@antv/x6';
import shortcuts from '../common/shortcuts'; import shortcuts from '../common/shortcuts';
import baseCellSchemaMap from '../common/baseCell'; import baseCellSchemaMap from '../common/baseCell';
import previewCellSchemaMap from '../common/previewCell'; import previewCellSchemaMap from '../common/previewCell';
import MiniMapSimpleNode from '../components/miniMapSimpleNode';
// X6 register base/preview cell shape // X6 register base/preview cell shape
[baseCellSchemaMap, previewCellSchemaMap] [baseCellSchemaMap, previewCellSchemaMap]
@ -12,6 +13,9 @@ import previewCellSchemaMap from '../common/previewCell';
const createGraph = (container: HTMLDivElement, miniMapContainer: HTMLDivElement): Graph => { const createGraph = (container: HTMLDivElement, miniMapContainer: HTMLDivElement): Graph => {
// NOTE: calculate the width/height ratio of flowchart
const ratio = container.offsetWidth / container.offsetHeight;
// create graph instance // create graph instance
const graph = new Graph({ const graph = new Graph({
container, container,
@ -62,13 +66,26 @@ const createGraph = (container: HTMLDivElement, miniMapContainer: HTMLDivElement
}, },
// https://x6.antv.vision/zh/docs/tutorial/basic/minimap // https://x6.antv.vision/zh/docs/tutorial/basic/minimap
minimap: { minimap: {
enabled: true, width: 150 * ratio,
padding: 0, height: 150,
width: 200,
height: 160,
minScale: 0.5, minScale: 0.5,
maxScale: 1.5, maxScale: 1.5,
enabled: true,
scalable: false,
container: miniMapContainer, container: miniMapContainer,
graphOptions: {
async: true,
getCellView(cell: Cell) {
if(cell.isNode()){
return MiniMapSimpleNode;
}
},
createCellView(cell: Cell) {
if (cell.isEdge()) {
return null;
}
}
}
}, },
// https://x6.antv.vision/zh/docs/tutorial/basic/scroller // https://x6.antv.vision/zh/docs/tutorial/basic/scroller
scroller: { scroller: {

1
packages/core/tsconfig.json

@ -1,6 +1,7 @@
{ {
"extends": "../../tsconfig", "extends": "../../tsconfig",
"compilerOptions": { "compilerOptions": {
"target": "ESNext",
"outDir": "dist/types", "outDir": "dist/types",
"jsx": "react", "jsx": "react",
"esModuleInterop": true "esModuleInterop": true

Loading…
Cancel
Save