From 89fd59adecd60ef6e9326fbdc5fe5f7213a9f90f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A1=97=E8=A7=92=E5=B0=8F=E6=9E=97?= <1013335014@qq.com>
Date: Fri, 19 Jan 2024 16:29:50 +0800
Subject: [PATCH] =?UTF-8?q?Demo=EF=BC=9A=E6=94=AF=E6=8C=81=E5=BC=80?=
 =?UTF-8?q?=E5=90=AF=E6=89=8B=E7=BB=98=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/lang/en_us.js                       |  3 ++-
 web/src/lang/zh_cn.js                       |  3 ++-
 web/src/pages/Edit/components/BaseStyle.vue | 15 +++++++++++--
 web/src/pages/Edit/components/Edit.vue      | 25 ++++++++++++++++++++-
 web/src/store.js                            |  4 +++-
 5 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js
index c76ecfad..6286843b 100644
--- a/web/src/lang/en_us.js
+++ b/web/src/lang/en_us.js
@@ -58,7 +58,8 @@ export default {
     associativeLineText: 'Associative line text',
     fontFamily: 'Font family',
     fontSize: 'Font size',
-    isShowScrollbar: 'Is show scrollbar'
+    isShowScrollbar: 'Is show scrollbar',
+    isUseHandDrawnLikeStyle: 'Is use hand drawn like style'
   },
   color: {
     moreColor: 'More color'
diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js
index e3a43a21..631f4bb4 100644
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@@ -58,7 +58,8 @@ export default {
     associativeLineText: '关联线文字',
     fontFamily: '字体',
     fontSize: '字号',
-    isShowScrollbar: '是否显示滚动条'
+    isShowScrollbar: '是否显示滚动条',
+    isUseHandDrawnLikeStyle: '是否开启手绘风格'
   },
   color: {
     moreColor: '更多颜色'
diff --git a/web/src/pages/Edit/components/BaseStyle.vue b/web/src/pages/Edit/components/BaseStyle.vue
index 997926d0..29e742f0 100644
--- a/web/src/pages/Edit/components/BaseStyle.vue
+++ b/web/src/pages/Edit/components/BaseStyle.vue
@@ -845,6 +845,16 @@
           >
         </div>
       </div>
+      <!-- 是否开启手绘风格 -->
+      <!-- <div class="row">
+        <div class="rowItem">
+          <el-checkbox
+            v-model="localConfigs.isUseHandDrawnLikeStyle"
+            @change="updateLocalConfig('isUseHandDrawnLikeStyle', $event)"
+            >{{ $t('baseStyle.isUseHandDrawnLikeStyle') }}</el-checkbox
+          >
+        </div>
+      </div> -->
     </div>
   </Sidebar>
 </template>
@@ -952,7 +962,8 @@ export default {
       updateWatermarkTimer: null,
       enableNodeRichText: true,
       localConfigs: {
-        isShowScrollbar: false
+        isShowScrollbar: false,
+        isUseHandDrawnLikeStyle: false
       },
       currentLayout: '' // 当前结构
     }
@@ -1112,7 +1123,7 @@ export default {
       this.enableNodeRichText = this.localConfig.openNodeRichText
       this.mousewheelAction = this.localConfig.mousewheelAction
       this.mousewheelZoomActionReverse = this.localConfig.mousewheelZoomActionReverse
-      ;['isShowScrollbar'].forEach(key => {
+      ;['isShowScrollbar', 'isUseHandDrawnLikeStyle'].forEach(key => {
         this.localConfigs[key] = this.localConfig[key]
       })
     },
diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue
index cd199527..78d550c4 100644
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@@ -46,6 +46,7 @@ import Painter from 'simple-mind-map/src/plugins/Painter.js'
 import ScrollbarPlugin from 'simple-mind-map/src/plugins/Scrollbar.js'
 import Formula from 'simple-mind-map/src/plugins/Formula.js'
 import Cooperate from 'simple-mind-map/src/plugins/Cooperate.js'
+// import HandDrawnLikeStyle from 'simple-mind-map-plugin-handdrawnlikestyle'
 import OutlineSidebar from './OutlineSidebar'
 import Style from './Style'
 import BaseStyle from './BaseStyle'
@@ -147,7 +148,8 @@ export default {
       isShowScrollbar: state => state.localConfig.isShowScrollbar,
       useLeftKeySelectionRightKeyDrag: state =>
         state.localConfig.useLeftKeySelectionRightKeyDrag,
-      isShowScrollbar: state => state.localConfig.isShowScrollbar
+      isUseHandDrawnLikeStyle: state =>
+        state.localConfig.isUseHandDrawnLikeStyle
     })
   },
   watch: {
@@ -164,6 +166,13 @@ export default {
       } else {
         this.removeScrollbarPlugin()
       }
+    },
+    isUseHandDrawnLikeStyle() {
+      if (this.isUseHandDrawnLikeStyle) {
+        this.addHandDrawnLikeStylePlugin()
+      } else {
+        this.removeHandDrawnLikeStylePlugin()
+      }
     }
   },
   mounted() {
@@ -400,6 +409,7 @@ export default {
       })
       if (this.openNodeRichText) this.addRichTextPlugin()
       if (this.isShowScrollbar) this.addScrollbarPlugin()
+      if (this.isUseHandDrawnLikeStyle) this.addHandDrawnLikeStylePlugin()
       this.mindMap.keyCommand.addShortcut('Control+s', () => {
         this.manualSave()
       })
@@ -558,6 +568,19 @@ export default {
       this.mindMap.removePlugin(ScrollbarPlugin)
     },
 
+    // 加载手绘风格插件
+    addHandDrawnLikeStylePlugin() {
+      if (!this.mindMap) return
+      this.mindMap.addPlugin(HandDrawnLikeStyle)
+      this.mindMap.reRender()
+    },
+
+    // 移除手绘风格插件
+    removeHandDrawnLikeStylePlugin() {
+      this.mindMap.removePlugin(HandDrawnLikeStyle)
+      this.mindMap.reRender()
+    },
+
     // 测试动态插入节点
     testDynamicCreateNodes() {
       // return
diff --git a/web/src/store.js b/web/src/store.js
index 1fd286c5..2e6bb3b4 100644
--- a/web/src/store.js
+++ b/web/src/store.js
@@ -17,7 +17,9 @@ const store = new Vuex.Store({
       // 鼠标行为
       useLeftKeySelectionRightKeyDrag: false,
       // 是否显示滚动条
-      isShowScrollbar: false
+      isShowScrollbar: false,
+      // 是否开启手绘风格
+      isUseHandDrawnLikeStyle: false
     },
     activeSidebar: '', // 当前显示的侧边栏
     isDark: false, // 是否是暗黑模式