Merge branch 'feature' of https://github.com/wanglin2/mind-map into feature

simple-mind-map/src/core/event/Event.js

@@ -128,22 +128,22 @@ class Event extends EventEmitter {
     this.emit('mouseup', e, this)
   }
 
-  //  鼠标滚动
+  //  鼠标滚动/触控板滑动
   onMousewheel(e) {
     e.stopPropagation()
     e.preventDefault()
-    let dir
-    if (e.deltaY < 0) dir = CONSTANTS.DIR.UP
-    if (e.deltaY > 0) dir = CONSTANTS.DIR.DOWN
-    if (e.deltaX < 0) dir = CONSTANTS.DIR.LEFT
-    if (e.deltaX > 0) dir = CONSTANTS.DIR.RIGHT
+    const dirs = []
+    if (e.deltaY < 0) dirs.push(CONSTANTS.DIR.UP)
+    if (e.deltaY > 0) dirs.push(CONSTANTS.DIR.DOWN)
+    if (e.deltaX < 0) dirs.push(CONSTANTS.DIR.LEFT)
+    if (e.deltaX > 0) dirs.push(CONSTANTS.DIR.RIGHT)
     // 判断是否是触控板
     let isTouchPad = false
     // mac、windows
     if (e.wheelDeltaY === e.deltaY * -3 || Math.abs(e.wheelDeltaY) <= 10) {
       isTouchPad = true
     }
-    this.emit('mousewheel', e, dir, this, isTouchPad)
+    this.emit('mousewheel', e, dirs, this, isTouchPad)
   }
 
   //  鼠标右键菜单事件

simple-mind-map/src/core/view/View.js

@@ -37,7 +37,7 @@ class View {
     this.mindMap.event.on('drag', (e, event) => {
       // 按住ctrl键拖动为多选
       // 禁用拖拽
-      if (e.ctrlKey || this.mindMap.opt.isDisableDrag) {        
+      if (e.ctrlKey || this.mindMap.opt.isDisableDrag) {
         return
       }
       if (this.firstDrag) {
@@ -55,8 +55,8 @@ class View {
       this.firstDrag = true
     })
     // 放大缩小视图
-    this.mindMap.event.on('mousewheel', (e, dir, event, isTouchPad) => {
-      let {
+    this.mindMap.event.on('mousewheel', (e, dirs, event, isTouchPad) => {
+      const {
         customHandleMousewheel,
         mousewheelAction,
         mouseScaleCenterUseMousePosition,
@@ -71,55 +71,61 @@ class View {
       ) {
         return customHandleMousewheel(e)
       }
-      // 鼠标滚轮事件控制缩放
+      // 1.鼠标滚轮事件控制缩放
       if (mousewheelAction === CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM || e.ctrlKey) {
         if (disableMouseWheelZoom) return
         const { x: clientX, y: clientY } = this.mindMap.toPos(
           e.clientX,
           e.clientY
         )
-        let cx = mouseScaleCenterUseMousePosition ? clientX : undefined
-        let cy = mouseScaleCenterUseMousePosition ? clientY : undefined
-        switch (dir) {
+        const cx = mouseScaleCenterUseMousePosition ? clientX : undefined
+        const cy = mouseScaleCenterUseMousePosition ? clientY : undefined
+        // 如果来自触控板，那么过滤掉左右的移动
+        if (
+          isTouchPad &&
+          (dirs.includes(CONSTANTS.DIR.LEFT) ||
+            dirs.includes(CONSTANTS.DIR.RIGHT))
+        ) {
+          dirs = dirs.filter(dir => {
+            return ![CONSTANTS.DIR.LEFT, CONSTANTS.DIR.RIGHT].includes(dir)
+          })
+        }
+        switch (true) {
           // 鼠标滚轮，向上和向左，都是缩小
-          case CONSTANTS.DIR.UP:
-          case CONSTANTS.DIR.LEFT:
+          case dirs.includes(CONSTANTS.DIR.UP || CONSTANTS.DIR.LEFT):
             mousewheelZoomActionReverse
               ? this.enlarge(cx, cy, isTouchPad)
               : this.narrow(cx, cy, isTouchPad)
             break
           // 鼠标滚轮，向下和向右，都是放大
-          case CONSTANTS.DIR.DOWN:
-          case CONSTANTS.DIR.RIGHT:
+          case dirs.includes(CONSTANTS.DIR.DOWN || CONSTANTS.DIR.RIGHT):
             mousewheelZoomActionReverse
               ? this.narrow(cx, cy, isTouchPad)
               : this.enlarge(cx, cy, isTouchPad)
             break
         }
       } else {
-        // 鼠标滚轮事件控制画布移动
-        let step = mousewheelMoveStep
-        if (isTouchPad) {
-          step = 5
+        // 2.鼠标滚轮事件控制画布移动
+        const step = isTouchPad ? 5 : mousewheelMoveStep
+        let mx = 0
+        let my = 0
+        // 上移
+        if (dirs.includes(CONSTANTS.DIR.DOWN)) {
+          my = -step
         }
-        switch (dir) {
-          // 上移
-          case CONSTANTS.DIR.DOWN:
-            this.translateY(-step)
-            break
-          // 下移
-          case CONSTANTS.DIR.UP:
-            this.translateY(step)
-            break
-          // 右移
-          case CONSTANTS.DIR.LEFT:
-            this.translateX(-step)
-            break
-          // 左移
-          case CONSTANTS.DIR.RIGHT:
-            this.translateX(step)
-            break
+        // 下移
+        if (dirs.includes(CONSTANTS.DIR.UP)) {
+          my = step
         }
+        // 右移
+        if (dirs.includes(CONSTANTS.DIR.LEFT)) {
+          mx = step
+        }
+        // 左移
+        if (dirs.includes(CONSTANTS.DIR.RIGHT)) {
+          mx = -step
+        }
+        this.translateXY(mx, my)
       }
     })
   }
@@ -261,8 +267,7 @@ class View {
     let drawWidth = rect.width / origTransform.scaleX
     let drawHeight = rect.height / origTransform.scaleY
     let drawRatio = drawWidth / drawHeight
-    let { width: elWidth, height: elHeight } =
-      this.mindMap.elRect
+    let { width: elWidth, height: elHeight } = this.mindMap.elRect
     elWidth = elWidth - fitPadding * 2
     elHeight = elHeight - fitPadding * 2
     let elRatio = elWidth / elHeight