Fix：修复前进后退没有触发data_change事件的问题；Feature：鼠标滚轮事件支持自定义

simple-mind-map/index.js

@@ -61,7 +61,14 @@ const defaultOpt = {
     }
   },
   // 达到该宽度文本自动换行
-  textAutoWrapWidth: 500
+  textAutoWrapWidth: 500,
+  // 自定义鼠标滚轮事件处理
+  // 可以传一个函数，回调参数为事件对象
+  customHandleMousewheel: null,
+  // 鼠标滚动的行为，如果customHandleMousewheel传了自定义函数，这个属性不生效
+  mousewheelAction: 'zoom',// zoom（放大缩小）、move（上下移动）
+  // 当mousewheelAction设为move时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位px
+  mousewheelMoveStep: 100
 }
 
 //  思维导图

simple-mind-map/src/Command.js

@@ -98,7 +98,9 @@ class Command {
         this.activeHistoryIndex,
         this.history.length
       )
-      return simpleDeepClone(this.history[this.activeHistoryIndex])
+      let data = simpleDeepClone(this.history[this.activeHistoryIndex])
+      this.mindMap.emit('data_change', data)
+      return data
     }
   }
 
@@ -111,7 +113,9 @@ class Command {
     if (this.activeHistoryIndex + step <= len - 1) {
       this.activeHistoryIndex += step
       this.mindMap.emit('back_forward', this.activeHistoryIndex)
-      return simpleDeepClone(this.history[this.activeHistoryIndex])
+      let data = simpleDeepClone(this.history[this.activeHistoryIndex])
+      this.mindMap.emit('data_change', data)
+      return data
     }
   }
 

simple-mind-map/src/View.js

@@ -55,12 +55,25 @@ class View {
     })
     // 放大缩小视图
     this.mindMap.event.on('mousewheel', (e, dir) => {
-      // // 放大
-      if (dir === 'down') {
-        this.enlarge()
+      if (this.mindMap.opt.customHandleMousewheel && typeof this.mindMap.opt.customHandleMousewheel === 'function') {
+        return this.mindMap.opt.customHandleMousewheel(e)
+      }
+      if (this.mindMap.opt.mousewheelAction === 'zoom') {
+        // 放大
+        if (dir === 'down') {
+          this.enlarge()
+        } else {
+          // 缩小
+          this.narrow()
+        }
       } else {
-        // 缩小
-        this.narrow()
+        // 上移
+        if (dir === 'down') {
+          this.translateY(-this.mindMap.opt.mousewheelMoveStep)
+        } else {
+          // 下移
+          this.translateY(this.mindMap.opt.mousewheelMoveStep)
+        }
       }
     })
   }

web/src/lang/en_us.js

@@ -35,7 +35,10 @@ export default {
     watermarkAngle: 'Angle',
     watermarkTextOpacity: 'Text opacity',
     watermarkTextFontSize: 'Font size',
-    isEnableNodeRichText: 'Enable node rich text editing'
+    isEnableNodeRichText: 'Enable node rich text editing',
+    mousewheelAction: 'Mouse wheel behavior',
+    zoomView: 'Zoom view',
+    moveViewUpDown: 'Move view up and down'
   },
   color: {
     moreColor: 'More color'

web/src/lang/zh_cn.js

@@ -35,7 +35,10 @@ export default {
     watermarkAngle: '旋转角度',
     watermarkTextOpacity: '文字透明度',
     watermarkTextFontSize: '文字字号',
-    isEnableNodeRichText: '是否开启节点富文本编辑'
+    isEnableNodeRichText: '是否开启节点富文本编辑',
+    mousewheelAction: '鼠标滚轮行为',
+    zoomView: '缩放视图',
+    moveViewUpDown: '上下移动视图'
   },
   color: {
     moreColor: '更多颜色'

web/src/pages/Edit/components/BaseStyle.vue

@@ -431,7 +431,26 @@
       </div>
       <div class="row">
         <div class="rowItem">
-          <el-checkbox v-model="enableNodeRichText" @change="enableNodeRichTextChange">{{ this.$t('baseStyle.isEnableNodeRichText') }}</el-checkbox>
+          <el-checkbox v-model="enableNodeRichText" @change="enableNodeRichTextChange">{{ $t('baseStyle.isEnableNodeRichText') }}</el-checkbox>
+        </div>
+      </div>
+      <div class="row">
+        <div class="rowItem">
+          <span class="name">{{ $t('baseStyle.mousewheelAction') }}</span>
+          <el-select
+            size="mini"
+            style="width: 120px"
+            v-model="config.mousewheelAction"
+            placeholder=""
+            @change="
+              value => {
+                updateOtherConfig('mousewheelAction', value)
+              }
+            "
+          >
+            <el-option :label="$t('baseStyle.zoomView') " value="zoom"></el-option>
+            <el-option :label="$t('baseStyle.moveViewUpDown') " value="move"></el-option>
+          </el-select>
         </div>
       </div>
     </div>
@@ -493,7 +512,8 @@ export default {
         nodeUseLineStyle: false
       },
       config: {
-        enableFreeDrag: false
+        enableFreeDrag: false,
+        mousewheelAction: 'zoom'
       },
       watermarkConfig: {
         show: false,
@@ -541,6 +561,7 @@ export default {
   },
   created () {
     this.enableNodeRichText = this.localConfig.openNodeRichText
+    this.mousewheelAction = this.localConfig.mousewheelAction
   },
   methods: {
     ...mapMutations(['setLocalConfig']),
@@ -579,7 +600,7 @@ export default {
 
     // 初始化其他配置
     initConfig() {
-      ;['enableFreeDrag'].forEach(key => {
+      ;['enableFreeDrag', 'mousewheelAction'].forEach(key => {
         this.config[key] = this.mindMap.getConfig(key)
       })
     },
@@ -686,7 +707,15 @@ export default {
       this.setLocalConfig({
         openNodeRichText: e
       })
-    }
+    },
+
+    // 切换鼠标滚轮的行为
+    mousewheelActionChange(e) {
+      this.setLocalConfig({
+        mousewheelAction: e
+      })
+      this.mindMap.updateConfig
+    },
   }
 }
 </script>