Demo：支持设置开启拖动画布的动量效果

web/src/lang/en_us.js

@@ -61,6 +61,7 @@ export default {
       'Enable real-time rendering effect for text editing',
     isShowScrollbar: 'Is show scrollbar',
     isUseHandDrawnLikeStyle: 'Is use hand drawn like style',
+    isUseMomentum: 'Is open drag momentum',
     watermark: 'Watermark',
     showWatermark: 'Is show watermark',
     onlyExport: 'Only export',

web/src/lang/zh_cn.js

@@ -59,6 +59,7 @@ export default {
     openRealtimeRenderOnNodeTextEdit: '开启文本编辑实时渲染效果',
     isShowScrollbar: '是否显示滚动条',
     isUseHandDrawnLikeStyle: '是否开启手绘风格',
+    isUseMomentum: '是否开启拖动画布的动量效果',
     watermark: '水印',
     showWatermark: '是否显示水印',
     watermarkDefaultText: '水印文字',

web/src/lang/zh_tw.js

@@ -62,6 +62,7 @@ export default {
     openRealtimeRenderOnNodeTextEdit: '開啟文本編輯實時渲染效果',
     isShowScrollbar: '顯示捲軸',
     isUseHandDrawnLikeStyle: '使用手繪風格',
+    isUseMomentum: '是否開啓拖動畫布的動量效果',
     watermark: '浮水印',
     showWatermark: '顯示浮水印',
     onlyExport: '僅在匯出時顯示',

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

@@ -84,7 +84,7 @@ import MindMapLayoutPro from 'simple-mind-map/src/plugins/MindMapLayoutPro.js'
 import Themes from 'simple-mind-map-plugin-themes'
 // 协同编辑插件
 // import Cooperate from 'simple-mind-map/src/plugins/Cooperate.js'
-// 以下插件为付费插件，详情请查看开发文档。依次为：手绘风格插件、标记插件、编号插件、Freemind软件格式导入导出插件、Excel软件格式导入导出插件、待办插件、节点连线流动效果插件
+// 以下插件为付费插件，详情请查看开发文档。依次为：手绘风格插件、标记插件、编号插件、Freemind软件格式导入导出插件、Excel软件格式导入导出插件、待办插件、节点连线流动效果插件、动量效果插件
 // import HandDrawnLikeStyle from 'simple-mind-map-plugin-handdrawnlikestyle'
 // import Notation from 'simple-mind-map-plugin-notation'
 // import Numbers from 'simple-mind-map-plugin-numbers'
@@ -92,7 +92,8 @@ import Themes from 'simple-mind-map-plugin-themes'
 // import Excel from 'simple-mind-map-plugin-excel'
 // import Checkbox from 'simple-mind-map-plugin-checkbox'
 // import LineFlow from 'simple-mind-map-plugin-lineflow'
-// npm link simple-mind-map-plugin-excel simple-mind-map-plugin-freemind simple-mind-map-plugin-numbers simple-mind-map-plugin-notation simple-mind-map-plugin-handdrawnlikestyle simple-mind-map-plugin-checkbox simple-mind-map simple-mind-map-plugin-themes simple-mind-map-plugin-lineflow
+// import Momentum from 'simple-mind-map-plugin-momentum'
+// npm link simple-mind-map-plugin-excel simple-mind-map-plugin-freemind simple-mind-map-plugin-numbers simple-mind-map-plugin-notation simple-mind-map-plugin-handdrawnlikestyle simple-mind-map-plugin-checkbox simple-mind-map simple-mind-map-plugin-themes simple-mind-map-plugin-lineflow simple-mind-map-plugin-momentum
 import OutlineSidebar from './OutlineSidebar'
 import Style from './Style'
 import BaseStyle from './BaseStyle'
@@ -208,6 +209,7 @@ export default {
         state.localConfig.useLeftKeySelectionRightKeyDrag,
       isUseHandDrawnLikeStyle: state =>
         state.localConfig.isUseHandDrawnLikeStyle,
+      isUseMomentum: state => state.localConfig.isUseMomentum,
       extraTextOnExport: state => state.extraTextOnExport,
       isDragOutlineTreeNode: state => state.isDragOutlineTreeNode
     })
@@ -233,6 +235,13 @@ export default {
       } else {
         this.removeHandDrawnLikeStylePlugin()
       }
+    },
+    isUseMomentum() {
+      if (this.isUseMomentum) {
+        this.addMomentumPlugin()
+      } else {
+        this.removeMomentumPlugin()
+      }
     }
   },
   mounted() {
@@ -548,38 +557,7 @@ export default {
         //   return el
         // }
       })
-      if (this.openNodeRichText) this.addRichTextPlugin()
+      this.loadPlugins()
-      if (this.isShowScrollbar) this.addScrollbarPlugin()
-      if (this.isUseHandDrawnLikeStyle) this.addHandDrawnLikeStylePlugin()
-      if (typeof HandDrawnLikeStyle !== 'undefined') {
-        this.$store.commit('setSupportHandDrawnLikeStyle', true)
-      }
-      if (typeof Notation !== 'undefined') {
-        this.mindMap.addPlugin(Notation)
-        this.$store.commit('setSupportMark', true)
-      }
-      if (typeof Numbers !== 'undefined') {
-        this.mindMap.addPlugin(Numbers)
-        this.$store.commit('setSupportNumbers', true)
-      }
-      if (typeof Freemind !== 'undefined') {
-        this.mindMap.addPlugin(Freemind)
-        this.$store.commit('setSupportFreemind', true)
-        Vue.prototype.Freemind = Freemind
-      }
-      if (typeof Excel !== 'undefined') {
-        this.mindMap.addPlugin(Excel)
-        this.$store.commit('setSupportExcel', true)
-        Vue.prototype.Excel = Excel
-      }
-      if (typeof Checkbox !== 'undefined') {
-        this.mindMap.addPlugin(Checkbox)
-        this.$store.commit('setSupportCheckbox', true)
-      }
-      if (typeof LineFlow !== 'undefined') {
-        this.mindMap.addPlugin(LineFlow)
-        this.$store.commit('setSupportLineFlow', true)
-      }
       this.mindMap.keyCommand.addShortcut('Control+s', () => {
         this.manualSave()
       })
@@ -651,6 +629,46 @@ export default {
       // }, 5000)
     },
 
+    // 加载相关插件
+    loadPlugins() {
+      if (this.openNodeRichText) this.addRichTextPlugin()
+      if (this.isShowScrollbar) this.addScrollbarPlugin()
+      if (typeof HandDrawnLikeStyle !== 'undefined') {
+        this.$store.commit('setSupportHandDrawnLikeStyle', true)
+        if (this.isUseHandDrawnLikeStyle) this.addHandDrawnLikeStylePlugin()
+      }
+      if (typeof Momentum !== 'undefined') {
+        this.$store.commit('setSupportMomentum', true)
+        if (this.isUseMomentum) this.addMomentumPlugin()
+      }
+      if (typeof Notation !== 'undefined') {
+        this.mindMap.addPlugin(Notation)
+        this.$store.commit('setSupportMark', true)
+      }
+      if (typeof Numbers !== 'undefined') {
+        this.mindMap.addPlugin(Numbers)
+        this.$store.commit('setSupportNumbers', true)
+      }
+      if (typeof Freemind !== 'undefined') {
+        this.mindMap.addPlugin(Freemind)
+        this.$store.commit('setSupportFreemind', true)
+        Vue.prototype.Freemind = Freemind
+      }
+      if (typeof Excel !== 'undefined') {
+        this.mindMap.addPlugin(Excel)
+        this.$store.commit('setSupportExcel', true)
+        Vue.prototype.Excel = Excel
+      }
+      if (typeof Checkbox !== 'undefined') {
+        this.mindMap.addPlugin(Checkbox)
+        this.$store.commit('setSupportCheckbox', true)
+      }
+      if (typeof LineFlow !== 'undefined') {
+        this.mindMap.addPlugin(LineFlow)
+        this.$store.commit('setSupportLineFlow', true)
+      }
+    },
+
     // url中是否存在要打开的文件
     hasFileURL() {
       const fileURL = this.$route.query.fileURL
@@ -766,6 +784,25 @@ export default {
       }
     },
 
+    // 加载动量效果插件
+    addMomentumPlugin() {
+      try {
+        if (!this.mindMap) return
+        this.mindMap.addPlugin(Momentum)
+      } catch (error) {
+        console.log('动量效果插件不存在')
+      }
+    },
+
+    // 移除动量效果插件
+    removeMomentumPlugin() {
+      try {
+        this.mindMap.removePlugin(Momentum)
+      } catch (error) {
+        console.log('动量效果插件不存在')
+      }
+    },
+
     // 测试动态插入节点
     testDynamicCreateNodes() {
       // return

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

@@ -1,6 +1,10 @@
 <template>
   <Sidebar ref="sidebar" :title="$t('setting.title')">
-    <div class="sidebarContent customScrollbar" :class="{ isDark: isDark }" v-if="data">
+    <div
+      class="sidebarContent customScrollbar"
+      :class="{ isDark: isDark }"
+      v-if="data"
+    >
       <!-- 水印 -->
       <div class="row">
         <!-- 是否显示水印 -->
@@ -252,6 +256,16 @@
           >
         </div>
       </div>
+      <!-- 是否开启动量效果 -->
+      <div class="row" v-if="supportMomentum">
+        <div class="rowItem">
+          <el-checkbox
+            v-model="localConfigs.isUseMomentum"
+            @change="updateLocalConfig('isUseMomentum', $event)"
+            >{{ $t('setting.isUseMomentum') }}</el-checkbox
+          >
+        </div>
+      </div>
       <!-- 配置鼠标滚轮行为 -->
       <div class="row">
         <div class="rowItem">
@@ -420,6 +434,7 @@ export default {
       localConfigs: {
         isShowScrollbar: false,
         isUseHandDrawnLikeStyle: false,
+        isUseMomentum: false,
         enableDragImport: false
       }
     }
@@ -429,7 +444,8 @@ export default {
       activeSidebar: state => state.activeSidebar,
       localConfig: state => state.localConfig,
       isDark: state => state.localConfig.isDark,
-      supportHandDrawnLikeStyle: state => state.supportHandDrawnLikeStyle
+      supportHandDrawnLikeStyle: state => state.supportHandDrawnLikeStyle,
+      supportMomentum: state => state.supportMomentum
     })
   },
   watch: {

web/src/store.js

@@ -20,6 +20,8 @@ const store = new Vuex.Store({
       isShowScrollbar: false,
       // 是否开启手绘风格
       isUseHandDrawnLikeStyle: false,
+      // 是否开启动量效果
+      isUseMomentum: true,
       // 是否是暗黑模式
       isDark: false
     },
@@ -35,6 +37,7 @@ const store = new Vuex.Store({
     supportExcel: false, // 是否支持Excel插件
     supportCheckbox: false, // 是否支持Checkbox插件
     supportLineFlow: false, // 是否支持LineFlow插件
+    supportMomentum: false, // 是否支持Momentum插件
     isDragOutlineTreeNode: false // 当前是否正在拖拽大纲树的节点
   },
   mutations: {
@@ -117,6 +120,11 @@ const store = new Vuex.Store({
       state.supportLineFlow = data
     },
 
+    // 设置是否支持Momentum插件
+    setSupportMomentum(state, data) {
+      state.supportMomentum = data
+    },
+
     // 设置树节点拖拽
     setIsDragOutlineTreeNode(state, data) {
       state.isDragOutlineTreeNode = data