From 443a714549f2c1a775a2c3acc83e12e27ebed684 Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Tue, 27 Jun 2023 16:46:37 +0800
Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A=E6=94=AF=E6=8C=81=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E9=BC=A0=E6=A0=87=E6=BB=9A=E8=BD=AE=E6=96=B9=E5=90=91?=
 =?UTF-8?q?=E5=AF=B9=E5=BA=94=E7=9A=84=E7=BC=A9=E6=94=BE=E8=A1=8C=E4=B8=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/constants/defaultOptions.js           |  2 ++
 simple-mind-map/src/core/view/View.js         |  7 +++--
 web/src/lang/en_us.js                         |  5 +++-
 web/src/lang/zh_cn.js                         |  5 +++-
 web/src/pages/Edit/components/BaseStyle.vue   | 29 +++++++++++++++++--
 5 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js
index 2dd5368d..26abae16 100644
--- a/simple-mind-map/src/constants/defaultOptions.js
+++ b/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: '二级节点',
   // 默认插入的二级以下节点的文字
diff --git a/simple-mind-map/src/core/view/View.js b/simple-mind-map/src/core/view/View.js
index 76eeace2..bafe7645 100644
--- a/simple-mind-map/src/core/view/View.js
+++ b/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 {// 鼠标滚轮事件控制画布移动
diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js
index 7ea75351..c4050794 100644
--- a/web/src/lang/en_us.js
+++ b/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'
diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js
index 858de591..d99a06e3 100644
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@@ -43,7 +43,10 @@ export default {
     associativeLineWidth: '粗细',
     associativeLineColor: '颜色',
     associativeLineActiveWidth: '激活粗细',
-    associativeLineActiveColor: '激活颜色'
+    associativeLineActiveColor: '激活颜色',
+    mousewheelZoomActionReverse: '鼠标滚轮缩放',
+    mousewheelZoomActionReverse1: '向前缩小向后放大',
+    mousewheelZoomActionReverse2: '向前放大向后缩小'
   },
   color: {
     moreColor: '更多颜色'
diff --git a/web/src/pages/Edit/components/BaseStyle.vue b/web/src/pages/Edit/components/BaseStyle.vue
index 78cada26..9c558d9e 100644
--- a/web/src/pages/Edit/components/BaseStyle.vue
+++ b/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)
       })
     },