Feature：支持响应鼠标的横向滚动

simple-mind-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-mind-map",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "一个简单的web在线思维导图",
   "authors": [
     {

simple-mind-map/src/Event.js

@@ -109,12 +109,13 @@ class Event extends EventEmitter {
     if (e.ctrlKey) {
       if (e.deltaY > 0) dir = 'up'
       if (e.deltaY < 0) dir = 'down'
+      if (e.deltaX > 0) dir = 'left'
+      if (e.deltaX < 0) dir = 'right'
     } else {
-      if ((e.wheelDeltaY || e.detail) > 0) {
-        dir = 'up'
-      } else {
-        dir = 'down'
-      }
+      if ((e.wheelDeltaY || e.detail) > 0) dir = 'up'
+      if ((e.wheelDeltaY || e.detail) < 0) dir = 'down'
+      if ((e.wheelDeltaX || e.detail) > 0) dir = 'left'
+      if ((e.wheelDeltaX || e.detail) < 0) dir = 'right'
     }
     this.emit('mousewheel', e, dir, this)
   }

simple-mind-map/src/View.js

@@ -59,20 +59,36 @@ class View {
         return this.mindMap.opt.customHandleMousewheel(e)
       }
       if (this.mindMap.opt.mousewheelAction === 'zoom') {
-        // 放大
-        if (dir === 'down') {
-          this.enlarge()
-        } else {
-          // 缩小
-          this.narrow()
+        switch (dir) {
+          // 鼠标滚轮，向上和向左，都是缩小
+          case 'up':
+          case 'left':
+            this.narrow()
+            break
+          // 鼠标滚轮，向下和向右，都是放大
+          case 'down':
+          case 'right':
+            this.enlarge()
+            break
         }
       } else {
-        // 上移
-        if (dir === 'down') {
-          this.translateY(-this.mindMap.opt.mousewheelMoveStep)
-        } else {
+        switch (dir){
+          // 上移
+          case 'down':
+            this.translateY(-this.mindMap.opt.mousewheelMoveStep)
+            break
           // 下移
-          this.translateY(this.mindMap.opt.mousewheelMoveStep)
+          case 'up':
+            this.translateY(this.mindMap.opt.mousewheelMoveStep)
+            break
+          // 右移
+          case 'left':
+            this.translateX(-this.mindMap.opt.mousewheelMoveStep)
+            break
+          // 左移
+          case 'right':
+            this.translateX(this.mindMap.opt.mousewheelMoveStep)
+            break
         }
       }
     })

web/src/pages/Doc/en/changelog/index.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.4.4
+
+New: 1.Support horizontal scrolling in response to the mouse.
+
 ## 0.4.3
 
 Fix: No trigger after forward and backward `data_ Change` event.

web/src/pages/Doc/en/changelog/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<h2>0.4.4</h2>
+<p>New: 1.Support horizontal scrolling in response to the mouse.</p>
 <h2>0.4.3</h2>
 <p>Fix: No trigger after forward and backward <code>data_ Change</code> event.</p>
 <p>New: Support user-defined mouse wheel events; The mouse wheel is adjusted to support zooming and moving the view up and down.</p>

web/src/pages/Doc/zh/changelog/index.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.4.4
+
+新增：1.支持响应鼠标的横向滚动。
+
 ## 0.4.3
 
 修复：前进回退后没有触发`data_change`事件的问题。

web/src/pages/Doc/zh/changelog/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<h2>0.4.4</h2>
+<p>新增：1.支持响应鼠标的横向滚动。</p>
 <h2>0.4.3</h2>
 <p>修复：前进回退后没有触发<code>data_change</code>事件的问题。</p>
 <p>新增：支持自定义鼠标滚轮事件；鼠标滚轮调整为支持缩放视图和上下移动视图。</p>