From 69a7deedd7da73365aa70b71887ecbf241bfebd2 Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Sun, 17 Dec 2023 21:32:13 +0800
Subject: [PATCH] =?UTF-8?q?Feat:=E4=BF=AE=E6=94=B9mousewheel=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6,dir=E6=A0=87=E5=BF=97=E4=BF=AE=E6=94=B9=E4=B8=BAdirs,?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=AD=98=E5=82=A8=E5=A4=9A=E4=B8=AA=E6=96=B9?=
 =?UTF-8?q?=E5=90=91,=E4=BC=98=E5=8C=96=E8=A7=A6=E6=8E=A7=E6=9D=BF?=
 =?UTF-8?q?=E7=9A=84=E5=8F=8C=E6=8C=87=E7=A7=BB=E5=8A=A8=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 simple-mind-map/src/core/event/Event.js | 14 +++---
 simple-mind-map/src/core/view/View.js   | 62 ++++++++++++++-----------
 2 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/simple-mind-map/src/core/event/Event.js b/simple-mind-map/src/core/event/Event.js
index abb176f6..c3f03183 100644
--- a/simple-mind-map/src/core/event/Event.js
+++ b/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)
   }
 
   //  鼠标右键菜单事件
diff --git a/simple-mind-map/src/core/view/View.js b/simple-mind-map/src/core/view/View.js
index f9a9eb87..27244e5a 100644
--- a/simple-mind-map/src/core/view/View.js
+++ b/simple-mind-map/src/core/view/View.js
@@ -55,7 +55,7 @@ class View {
       this.firstDrag = true
     })
     // 放大缩小视图
-    this.mindMap.event.on('mousewheel', (e, dir, event, isTouchPad) => {
+    this.mindMap.event.on('mousewheel', (e, dirs, event, isTouchPad) => {
       const {
         customHandleMousewheel,
         mousewheelAction,
@@ -71,7 +71,7 @@ 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(
@@ -80,46 +80,52 @@ class View {
         )
         const cx = mouseScaleCenterUseMousePosition ? clientX : undefined
         const cy = mouseScaleCenterUseMousePosition ? clientY : undefined
-        switch (dir) {
+        // 如果来自触控板，那么过滤掉左右的移动
+        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)
       }
     })
   }