Demo：支持开启手绘风格

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'

web/src/lang/zh_cn.js

@@ -58,7 +58,8 @@ export default {
     associativeLineText: '关联线文字',
     fontFamily: '字体',
     fontSize: '字号',
-    isShowScrollbar: '是否显示滚动条'
+    isShowScrollbar: '是否显示滚动条',
+    isUseHandDrawnLikeStyle: '是否开启手绘风格'
   },
   color: {
     moreColor: '更多颜色'

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]
       })
     },

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

web/src/store.js

@@ -17,7 +17,9 @@ const store = new Vuex.Store({
       // 鼠标行为
       useLeftKeySelectionRightKeyDrag: false,
       // 是否显示滚动条
-      isShowScrollbar: false
+      isShowScrollbar: false,
+      // 是否开启手绘风格
+      isUseHandDrawnLikeStyle: false
     },
     activeSidebar: '', // 当前显示的侧边栏
     isDark: false, // 是否是暗黑模式