diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js index 6d039b57..2dd5368d 100644 --- a/simple-mind-map/src/constants/defaultOptions.js +++ b/simple-mind-map/src/constants/defaultOptions.js @@ -14,6 +14,8 @@ export const defaultOpt = { themeConfig: {}, // 放大缩小的增量比例 scaleRatio: 0.2, + // 鼠标缩放是否以鼠标当前位置为中心点,否则以画布中心点 + mouseScaleCenterUseMousePosition: true, // 最多显示几个标签 maxTag: 5, // 导出图片时的内边距 diff --git a/simple-mind-map/src/core/view/View.js b/simple-mind-map/src/core/view/View.js index 5caaccc2..76eeace2 100644 --- a/simple-mind-map/src/core/view/View.js +++ b/simple-mind-map/src/core/view/View.js @@ -60,29 +60,37 @@ class View { }) // 放大缩小视图 this.mindMap.event.on('mousewheel', (e, dir, event, isTouchPad) => { + let { + customHandleMousewheel, + mousewheelAction, + mouseScaleCenterUseMousePosition, + mousewheelMoveStep + } = this.mindMap.opt + // 是否自定义鼠标滚轮事件 if ( - this.mindMap.opt.customHandleMousewheel && - typeof this.mindMap.opt.customHandleMousewheel === 'function' + customHandleMousewheel && + 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) { // 鼠标滚轮,向上和向左,都是缩小 case CONSTANTS.DIR.UP: case CONSTANTS.DIR.LEFT: - this.narrow(e.clientX, e.clientY) + this.narrow(cx, cy) break // 鼠标滚轮,向下和向右,都是放大 case CONSTANTS.DIR.DOWN: case CONSTANTS.DIR.RIGHT: - this.enlarge(e.clientX, e.clientY) + this.enlarge(cx, cy) break } - } else { - let step = this.mindMap.opt.mousewheelMoveStep + } else {// 鼠标滚轮事件控制画布移动 + let step = mousewheelMoveStep if (isTouchPad) { step = 5 }