From b487509a2401acee4e7ec335dd2d7433875a271e Mon Sep 17 00:00:00 2001 From: smallstonesk <575913857@qq.com> Date: Tue, 1 Sep 2020 11:14:42 +0800 Subject: [PATCH] feat: optimize minimap's config --- .../components/miniMapSimpleNode/index.tsx | 31 +++++++++++++++++++ .../core/src/mods/flowChart/index.module.less | 6 ++++ packages/core/src/utils/createGraph.ts | 27 +++++++++++++--- packages/core/tsconfig.json | 1 + 4 files changed, 60 insertions(+), 5 deletions(-) create mode 100644 packages/core/src/components/miniMapSimpleNode/index.tsx diff --git a/packages/core/src/components/miniMapSimpleNode/index.tsx b/packages/core/src/components/miniMapSimpleNode/index.tsx new file mode 100644 index 0000000..1ad306a --- /dev/null +++ b/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; diff --git a/packages/core/src/mods/flowChart/index.module.less b/packages/core/src/mods/flowChart/index.module.less index ee91bed..fff309d 100644 --- a/packages/core/src/mods/flowChart/index.module.less +++ b/packages/core/src/mods/flowChart/index.module.less @@ -15,5 +15,11 @@ position: absolute; right: 40px; bottom: 40px; + + :global { + .x6-widget-minimap-viewport { + border: 1px solid #E0E0E0; + } + } } } \ No newline at end of file diff --git a/packages/core/src/utils/createGraph.ts b/packages/core/src/utils/createGraph.ts index 824ff43..03f02a1 100644 --- a/packages/core/src/utils/createGraph.ts +++ b/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 baseCellSchemaMap from '../common/baseCell'; import previewCellSchemaMap from '../common/previewCell'; +import MiniMapSimpleNode from '../components/miniMapSimpleNode'; // X6 register base/preview cell shape [baseCellSchemaMap, previewCellSchemaMap] @@ -12,6 +13,9 @@ import previewCellSchemaMap from '../common/previewCell'; const createGraph = (container: HTMLDivElement, miniMapContainer: HTMLDivElement): Graph => { + // NOTE: calculate the width/height ratio of flowchart + const ratio = container.offsetWidth / container.offsetHeight; + // create graph instance const graph = new Graph({ container, @@ -62,13 +66,26 @@ const createGraph = (container: HTMLDivElement, miniMapContainer: HTMLDivElement }, // https://x6.antv.vision/zh/docs/tutorial/basic/minimap minimap: { - enabled: true, - padding: 0, - width: 200, - height: 160, + width: 150 * ratio, + height: 150, minScale: 0.5, maxScale: 1.5, + enabled: true, + scalable: false, 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 scroller: { diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json index 621978d..3cc0cb5 100644 --- a/packages/core/tsconfig.json +++ b/packages/core/tsconfig.json @@ -1,6 +1,7 @@ { "extends": "../../tsconfig", "compilerOptions": { + "target": "ESNext", "outDir": "dist/types", "jsx": "react", "esModuleInterop": true