Browse Source

feat: add mousewheel to zoom in/out graph

master
smallstonesk 4 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": {
"@ant-design/icons": "^4.0.6",
"@antv/x6": "^0.12.0",
"@antv/x6": "^0.13.0",
"ace-builds": "^1.4.12",
"antd": "^4.5.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 {localSave} from '../api';
import {Cell, Edge, Graph, Node} from '@antv/x6';
import {MIN_ZOOM, MAX_ZOOM, ZOOM_STEP} from './const';
interface Shortcut {
keys: string | string[];
handler: (flowChart: Graph) => void;
}
const MIN_ZOOM = 0.5;
const MAX_ZOOM = 1.5;
const ZOOM_STEP = 0.1;
const shortcuts: {[key: string]: Shortcut} = {
save: {
keys: `meta + s`,

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

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

Loading…
Cancel
Save