Feat:鼠标滚轮缩放时默认以鼠标当前位置为中心进行缩放,可以通过配置关闭该特性

This commit is contained in:
wanglin2 2023-06-27 09:05:25 +08:00
parent b90d4ddf8a
commit 7821781f20
2 changed files with 20 additions and 10 deletions

View File

@ -14,6 +14,8 @@ export const defaultOpt = {
themeConfig: {}, themeConfig: {},
// 放大缩小的增量比例 // 放大缩小的增量比例
scaleRatio: 0.2, scaleRatio: 0.2,
// 鼠标缩放是否以鼠标当前位置为中心点,否则以画布中心点
mouseScaleCenterUseMousePosition: true,
// 最多显示几个标签 // 最多显示几个标签
maxTag: 5, maxTag: 5,
// 导出图片时的内边距 // 导出图片时的内边距

View File

@ -60,29 +60,37 @@ class View {
}) })
// 放大缩小视图 // 放大缩小视图
this.mindMap.event.on('mousewheel', (e, dir, event, isTouchPad) => { this.mindMap.event.on('mousewheel', (e, dir, event, isTouchPad) => {
let {
customHandleMousewheel,
mousewheelAction,
mouseScaleCenterUseMousePosition,
mousewheelMoveStep
} = this.mindMap.opt
// 是否自定义鼠标滚轮事件
if ( if (
this.mindMap.opt.customHandleMousewheel && customHandleMousewheel &&
typeof this.mindMap.opt.customHandleMousewheel === 'function' typeof customHandleMousewheel === 'function'
) { ) {
return this.mindMap.opt.customHandleMousewheel(e) return customHandleMousewheel(e)
} }
if ( // 鼠标滚轮事件控制缩放
this.mindMap.opt.mousewheelAction === CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM if (mousewheelAction === CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM) {
) { let cx = mouseScaleCenterUseMousePosition ? e.clientX : undefined
let cy = mouseScaleCenterUseMousePosition ? e.clientY : undefined
switch (dir) { switch (dir) {
// 鼠标滚轮,向上和向左,都是缩小 // 鼠标滚轮,向上和向左,都是缩小
case CONSTANTS.DIR.UP: case CONSTANTS.DIR.UP:
case CONSTANTS.DIR.LEFT: case CONSTANTS.DIR.LEFT:
this.narrow(e.clientX, e.clientY) this.narrow(cx, cy)
break break
// 鼠标滚轮,向下和向右,都是放大 // 鼠标滚轮,向下和向右,都是放大
case CONSTANTS.DIR.DOWN: case CONSTANTS.DIR.DOWN:
case CONSTANTS.DIR.RIGHT: case CONSTANTS.DIR.RIGHT:
this.enlarge(e.clientX, e.clientY) this.enlarge(cx, cy)
break break
} }
} else { } else {// 鼠标滚轮事件控制画布移动
let step = this.mindMap.opt.mousewheelMoveStep let step = mousewheelMoveStep
if (isTouchPad) { if (isTouchPad) {
step = 5 step = 5
} }