Demo：支持配置节点连线的流动效果

web/src/lang/en_us.js

@@ -253,7 +253,12 @@ export default {
     arrowDir: 'Arrow dir',
     arrowDirStart: 'Start',
     arrowDirEnd: 'End',
-    direction: 'Direction'
+    direction: 'Direction',
+    selectNodeTip: 'Please select a node',
+    openLineFlow: 'Open line flow',
+    lineFlowDuration: 'Line flow duration',
+    forward: 'Forward',
+    reverse: 'Reverse'
   },
   theme: {
     title: 'Theme',

web/src/lang/zh_cn.js

@@ -249,7 +249,12 @@ export default {
     arrowDir: '箭头位置',
     arrowDirStart: '头部',
     arrowDirEnd: '尾部',
-    direction: '方向'
+    direction: '方向',
+    selectNodeTip: '请选择一个节点',
+    openLineFlow: '开启流动效果',
+    lineFlowDuration: '一个流动周期的时间',
+    forward: '正向',
+    reverse: '反向'
   },
   theme: {
     title: '主题',

web/src/lang/zh_tw.js

@@ -249,7 +249,12 @@ export default {
     endColor: '結束',
     arrowDir: '箭頭位置',
     arrowDirStart: '頭部',
-    arrowDirEnd: '尾部'
+    arrowDirEnd: '尾部',
+    selectNodeTip: '請選擇壹個節點',
+    openLineFlow: '開啓流動效果',
+    lineFlowDuration: '一個流動周期的時間',
+    forward: '正向',
+    reverse: '反向'
   },
   theme: {
     title: '主題',

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

@@ -273,6 +273,61 @@
           >
         </div>
       </div>
+      <!-- 流动效果 -->
+      <div class="row" v-if="supportLineFlow">
+        <div class="rowItem">
+          <span class="name">{{ $t('style.openLineFlow') }}</span>
+          <el-checkbox
+            v-model="style.lineFlow"
+            @change="
+              value => {
+                update('lineFlow', value)
+              }
+            "
+          ></el-checkbox>
+        </div>
+        <div class="rowItem">
+          <span class="name">{{ $t('style.direction') }}</span>
+          <el-select
+            size="mini"
+            style="width: 80px"
+            v-model="style.lineFlowForward"
+            placeholder=""
+            @change="
+              value => {
+                update('lineFlowForward', value)
+              }
+            "
+          >
+            <el-option
+              key="1"
+              :label="$t('style.forward')"
+              :value="true"
+            ></el-option>
+            <el-option
+              key="2"
+              :label="$t('style.reverse')"
+              :value="false"
+            ></el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="row" v-if="supportLineFlow">
+        <div class="rowItem">
+          <span class="name">{{ $t('style.lineFlowDuration') }}</span>
+          <el-input-number
+            v-model="style.lineFlowDuration"
+            @change="
+              value => {
+                update('lineFlowDuration', value)
+              }
+            "
+            :min="0.1"
+            size="mini"
+            :step="0.5"
+          ></el-input-number>
+        </div>
+      </div>
       <!-- 彩虹线条 -->
       <div class="title noTop">{{ $t('baseStyle.rainbowLines') }}</div>
       <div class="row">
@@ -811,6 +866,9 @@ export default {
         rootLineKeepSameInCurve: '',
         rootLineStartPositionKeepSameInCurve: '',
         lineRadius: 0,
+        lineFlow: false,
+        lineFlowForward: true,
+        lineFlowDuration: 1,
         generalizationLineWidth: '',
         generalizationLineColor: '',
         associativeLineColor: '',
@@ -847,7 +905,8 @@ export default {
     ...mapState({
       activeSidebar: state => state.activeSidebar,
       localConfig: state => state.localConfig,
-      isDark: state => state.localConfig.isDark
+      isDark: state => state.localConfig.isDark,
+      supportLineFlow: state => state.supportLineFlow
     }),
     lineStyleList() {
       return lineStyleList[this.$i18n.locale] || lineStyleList.zh
@@ -947,36 +1006,7 @@ export default {
 
     // 初始样式
     initStyle() {
-      ;[
+      Object.keys(this.style).forEach(key => {
-        'backgroundColor',
-        'lineWidth',
-        'lineStyle',
-        'showLineMarker',
-        'rootLineKeepSameInCurve',
-        'rootLineStartPositionKeepSameInCurve',
-        'lineRadius',
-        'lineColor',
-        'generalizationLineWidth',
-        'generalizationLineColor',
-        'associativeLineColor',
-        'associativeLineWidth',
-        'associativeLineActiveWidth',
-        'associativeLineDasharray',
-        'associativeLineActiveColor',
-        'associativeLineTextFontSize',
-        'associativeLineTextColor',
-        'associativeLineTextFontFamily',
-        'paddingX',
-        'paddingY',
-        'imgMaxWidth',
-        'imgMaxHeight',
-        'iconSize',
-        'backgroundImage',
-        'backgroundRepeat',
-        'backgroundPosition',
-        'backgroundSize',
-        'nodeUseLineStyle'
-      ].forEach(key => {
         this.style[key] = this.mindMap.getThemeConfig(key)
         if (key === 'backgroundImage' && this.style[key] === 'none') {
           this.style[key] = ''

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

@@ -75,14 +75,15 @@ import OuterFrame from 'simple-mind-map/src/plugins/OuterFrame.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'
 // import Freemind from 'simple-mind-map-plugin-freemind'
 // import Excel from 'simple-mind-map-plugin-excel'
 // import Checkbox from 'simple-mind-map-plugin-checkbox'
-// 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
+// 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 OutlineSidebar from './OutlineSidebar'
 import Style from './Style'
 import BaseStyle from './BaseStyle'
@@ -581,6 +582,10 @@ export default {
         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()
       })

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

@@ -415,6 +415,49 @@
             </el-select>
           </div>
         </div>
+        <!-- 流动效果 -->
+        <div class="row" v-if="supportLineFlow">
+          <div class="rowItem">
+            <span class="name">{{ $t('style.openLineFlow') }}</span>
+            <el-checkbox
+              v-model="style.lineFlow"
+              @change="update('lineFlow')"
+            ></el-checkbox>
+          </div>
+          <div class="rowItem">
+            <span class="name">{{ $t('style.direction') }}</span>
+            <el-select
+              size="mini"
+              style="width: 80px"
+              v-model="style.lineFlowForward"
+              placeholder=""
+              @change="update('lineFlowForward')"
+            >
+              <el-option
+                key="1"
+                :label="$t('style.forward')"
+                :value="true"
+              ></el-option>
+              <el-option
+                key="2"
+                :label="$t('style.reverse')"
+                :value="false"
+              ></el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="row" v-if="supportLineFlow">
+          <div class="rowItem">
+            <span class="name">{{ $t('style.lineFlowDuration') }}</span>
+            <el-input-number
+              v-model="style.lineFlowDuration"
+              @change="update('lineFlowDuration')"
+              :min="0.1"
+              size="mini"
+              :step="0.5"
+            ></el-input-number>
+          </div>
+        </div>
         <!-- 节点内边距 -->
         <div class="title noTop">{{ $t('style.nodePadding') }}</div>
         <div class="row">
@@ -441,7 +484,7 @@
     </div>
     <div class="tipBox" v-else>
       <div class="tipIcon iconfont icontianjiazijiedian"></div>
-      <div class="tipText">请选择一个节点</div>
+      <div class="tipText">{{ $t('style.selectNodeTip') }}</div>
     </div>
   </Sidebar>
 </template>
@@ -500,14 +543,18 @@ export default {
         gradientStyle: false,
         startColor: '',
         endColor: '',
-        linearGradientDir: ''
+        linearGradientDir: '',
+        lineFlow: false,
+        lineFlowForward: true,
+        lineFlowDuration: 1
       }
     }
   },
   computed: {
     ...mapState({
       isDark: state => state.localConfig.isDark,
-      activeSidebar: state => state.activeSidebar
+      activeSidebar: state => state.activeSidebar,
+      supportLineFlow: state => state.supportLineFlow
     }),
     fontFamilyList() {
       return fontFamilyList[this.$i18n.locale] || fontFamilyList.zh
@@ -564,29 +611,7 @@ export default {
       if (this.activeNodes.length <= 0) {
         return
       }
-      ;[
+      Object.keys(this.style).forEach(item => {
-        'shape',
-        'paddingX',
-        'paddingY',
-        'color',
-        'fontFamily',
-        'fontSize',
-        'textDecoration',
-        'fontWeight',
-        'fontStyle',
-        'borderWidth',
-        'borderColor',
-        'fillColor',
-        'borderDasharray',
-        'borderRadius',
-        'lineColor',
-        'lineDasharray',
-        'lineWidth',
-        'lineMarkerDir',
-        'gradientStyle',
-        'startColor',
-        'endColor'
-      ].forEach(item => {
         this.style[item] = this.activeNodes[0].getStyle(item, false)
       })
       this.initLinearGradientDir()

web/src/store.js

@@ -34,6 +34,7 @@ const store = new Vuex.Store({
     supportFreemind: false, // 是否支持Freemind插件
     supportExcel: false, // 是否支持Excel插件
     supportCheckbox: false, // 是否支持Checkbox插件
+    supportLineFlow: false, // 是否支持LineFlow插件
     isDragOutlineTreeNode: false // 当前是否正在拖拽大纲树的节点
   },
   mutations: {
@@ -111,6 +112,11 @@ const store = new Vuex.Store({
       state.supportCheckbox = data
     },
 
+    // 设置是否支持Lineflow插件
+    setSupportLineFlow(state, data) {
+      state.supportLineFlow = data
+    },
+
     // 设置树节点拖拽
     setIsDragOutlineTreeNode(state, data) {
       state.isDragOutlineTreeNode = data