Feat：支持配置鼠标滚轮方向对应的缩放行为

simple-mind-map/src/constants/defaultOptions.js

@@ -61,6 +61,8 @@ export const defaultOpt = {
   mousewheelAction: CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM, // zoom（放大缩小）、move（上下移动）
   // 当mousewheelAction设为move时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位px
   mousewheelMoveStep: 100,
+  // 当mousewheelAction设为zoom时，默认向前滚动是缩小，向后滚动是放大，如果该属性设为true，那么会反过来
+  mousewheelZoomActionReverse: false,
   // 默认插入的二级节点的文字
   defaultInsertSecondLevelNodeText: '二级节点',
   // 默认插入的二级以下节点的文字

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

@@ -64,7 +64,8 @@ class View {
         customHandleMousewheel,
         mousewheelAction,
         mouseScaleCenterUseMousePosition,
-        mousewheelMoveStep
+        mousewheelMoveStep,
+        mousewheelZoomActionReverse
       } = this.mindMap.opt
       // 是否自定义鼠标滚轮事件
       if (
@@ -81,12 +82,12 @@ class View {
           // 鼠标滚轮，向上和向左，都是缩小
           case CONSTANTS.DIR.UP:
           case CONSTANTS.DIR.LEFT:
-            this.narrow(cx, cy)
+            mousewheelZoomActionReverse ? this.enlarge(cx, cy) : this.narrow(cx, cy)
             break
           // 鼠标滚轮，向下和向右，都是放大
           case CONSTANTS.DIR.DOWN:
           case CONSTANTS.DIR.RIGHT:
-            this.enlarge(cx, cy)
+            mousewheelZoomActionReverse ? this.narrow(cx, cy) : this.enlarge(cx, cy)
             break
         }
       } else {// 鼠标滚轮事件控制画布移动

web/src/lang/en_us.js

@@ -43,7 +43,10 @@ export default {
     associativeLineWidth: 'Width',
     associativeLineColor: 'Color',
     associativeLineActiveWidth: 'Active width',
-    associativeLineActiveColor: 'Active color'
+    associativeLineActiveColor: 'Active color',
+    mousewheelZoomActionReverse: 'Mouse Wheel Zoom',
+    mousewheelZoomActionReverse1: 'Zoom out forward and zoom in back',
+    mousewheelZoomActionReverse2: 'Zoom in forward and zoom out back'
   },
   color: {
     moreColor: 'More color'

web/src/lang/zh_cn.js

@@ -43,7 +43,10 @@ export default {
     associativeLineWidth: '粗细',
     associativeLineColor: '颜色',
     associativeLineActiveWidth: '激活粗细',
-    associativeLineActiveColor: '激活颜色'
+    associativeLineActiveColor: '激活颜色',
+    mousewheelZoomActionReverse: '鼠标滚轮缩放',
+    mousewheelZoomActionReverse1: '向前缩小向后放大',
+    mousewheelZoomActionReverse2: '向前放大向后缩小'
   },
   color: {
     moreColor: '更多颜色'

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

@@ -567,6 +567,7 @@
       </template>
       <!-- 其他配置 -->
       <div class="title noTop">{{ $t('baseStyle.otherConfig') }}</div>
+      <!-- 配置开启自由拖拽 -->
       <div class="row">
         <div class="rowItem">
           <el-checkbox v-model="config.enableFreeDrag" @change="
@@ -576,11 +577,13 @@
             ">{{ $t('baseStyle.enableFreeDrag') }}</el-checkbox>
         </div>
       </div>
+      <!-- 配置是否启用富文本编辑 -->
       <div class="row">
         <div class="rowItem">
           <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>
@@ -600,6 +603,26 @@
           </el-select>
         </div>
       </div>
+      <!-- 配置鼠标缩放行为 -->
+      <div class="row" v-if="config.mousewheelAction === 'zoom'">
+        <div class="rowItem">
+          <span class="name">{{ $t('baseStyle.mousewheelZoomActionReverse') }}</span>
+          <el-select
+            size="mini"
+            style="width: 120px"
+            v-model="config.mousewheelZoomActionReverse"
+            placeholder=""
+            @change="
+              value => {
+                updateOtherConfig('mousewheelZoomActionReverse', value)
+              }
+            "
+          >
+            <el-option :label="$t('baseStyle.mousewheelZoomActionReverse1') " :value="false"></el-option>
+            <el-option :label="$t('baseStyle.mousewheelZoomActionReverse2') " :value="true"></el-option>
+          </el-select>
+        </div>
+      </div>
     </div>
   </Sidebar>
 </template>
@@ -668,7 +691,8 @@ export default {
       },
       config: {
         enableFreeDrag: false,
-        mousewheelAction: 'zoom'
+        mousewheelAction: 'zoom',
+        mousewheelZoomActionReverse: false
       },
       watermarkConfig: {
         show: false,
@@ -720,6 +744,7 @@ export default {
   created () {
     this.enableNodeRichText = this.localConfig.openNodeRichText
     this.mousewheelAction = this.localConfig.mousewheelAction
+    this.mousewheelZoomActionReverse = this.localConfig.mousewheelZoomActionReverse
   },
   methods: {
     ...mapMutations(['setLocalConfig']),
@@ -765,7 +790,7 @@ export default {
 
     // 初始化其他配置
     initConfig() {
-      ;['enableFreeDrag', 'mousewheelAction'].forEach(key => {
+      ;['enableFreeDrag', 'mousewheelAction', 'mousewheelZoomActionReverse'].forEach(key => {
         this.config[key] = this.mindMap.getConfig(key)
       })
     },