Browse Source

feat: add mousewheel to zoom in/out graph

master
smallstonesk 5 years ago
parent
commit
740c8887af
  1. 2
      packages/core/package.json
  2. 3
      packages/core/src/common/const.ts
  3. 5
      packages/core/src/common/shortcuts.ts
  4. 13
      packages/core/src/mods/flowChart/createFlowChart.ts

2
packages/core/package.json

@ -37,7 +37,7 @@
}, },
"dependencies": { "dependencies": {
"@ant-design/icons": "^4.0.6", "@ant-design/icons": "^4.0.6",
"@antv/x6": "^0.12.0", "@antv/x6": "^0.13.0",
"ace-builds": "^1.4.12", "ace-builds": "^1.4.12",
"antd": "^4.5.3", "antd": "^4.5.3",
"react-ace": "^9.1.3", "react-ace": "^9.1.3",

3
packages/core/src/common/const.ts

@ -0,0 +1,3 @@
export const MIN_ZOOM = 0.5;
export const MAX_ZOOM = 1.5;
export const ZOOM_STEP = 0.1;

5
packages/core/src/common/shortcuts.ts

@ -1,16 +1,13 @@
import {safeGet} from '../utils'; import {safeGet} from '../utils';
import {localSave} from '../api'; import {localSave} from '../api';
import {Cell, Edge, Graph, Node} from '@antv/x6'; import {Cell, Edge, Graph, Node} from '@antv/x6';
import {MIN_ZOOM, MAX_ZOOM, ZOOM_STEP} from './const';
interface Shortcut { interface Shortcut {
keys: string | string[]; keys: string | string[];
handler: (flowChart: Graph) => void; handler: (flowChart: Graph) => void;
} }
const MIN_ZOOM = 0.5;
const MAX_ZOOM = 1.5;
const ZOOM_STEP = 0.1;
const shortcuts: {[key: string]: Shortcut} = { const shortcuts: {[key: string]: Shortcut} = {
save: { save: {
keys: `meta + s`, keys: `meta + s`,

13
packages/core/src/mods/flowChart/createFlowChart.ts

@ -1,5 +1,6 @@
import shortcuts from '../../common/shortcuts'; import shortcuts from '../../common/shortcuts';
import {Cell, Edge, Graph, Node} from '@antv/x6'; import {Cell, Edge, Graph, Node} from '@antv/x6';
import {MIN_ZOOM, MAX_ZOOM} from '../../common/const';
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'; import MiniMapSimpleNode from '../../components/miniMapSimpleNode';
@ -123,8 +124,8 @@ const createFlowChart = (container: HTMLDivElement, miniMapContainer: HTMLDivEle
minimap: { minimap: {
width: 150 * container.offsetWidth / container.offsetHeight, width: 150 * container.offsetWidth / container.offsetHeight,
height: 150, height: 150,
minScale: 0.5, minScale: MIN_ZOOM,
maxScale: 1.5, maxScale: MAX_ZOOM,
enabled: true, enabled: true,
scalable: false, scalable: false,
container: miniMapContainer, container: miniMapContainer,
@ -145,7 +146,13 @@ const createFlowChart = (container: HTMLDivElement, miniMapContainer: HTMLDivEle
// https://x6.antv.vision/zh/docs/tutorial/basic/scroller // https://x6.antv.vision/zh/docs/tutorial/basic/scroller
scroller: { scroller: {
enabled: true enabled: true
} },
mousewheel: {
enabled: true,
minScale: MIN_ZOOM,
maxScale: MAX_ZOOM,
modifiers: ['ctrl', 'meta']
},
}); });
registerEvents(flowChart); registerEvents(flowChart);
registerShortcuts(flowChart); registerShortcuts(flowChart);

Loading…
Cancel
Save