demo支持关联线功能

web/src/lang/en_us.js

@@ -38,7 +38,12 @@ export default {
     isEnableNodeRichText: 'Enable node rich text editing',
     mousewheelAction: 'Mouse wheel behavior',
     zoomView: 'Zoom view',
-    moveViewUpDown: 'Move view up and down'
+    moveViewUpDown: 'Move view up and down',
+    associativeLine: 'Associative line',
+    associativeLineWidth: 'Width',
+    associativeLineColor: 'Color',
+    associativeLineActiveWidth: 'Active width',
+    associativeLineActiveColor: 'Active color'
   },
   color: {
     moreColor: 'More color'
@@ -187,7 +192,8 @@ export default {
     saveAs: 'Save as',
     import: 'Import',
     export: 'Export',
-    shortcutKey: 'Shortcut key'
+    shortcutKey: 'Shortcut key',
+    associativeLine: 'Associative line',
   },
   edit: {
     newFeatureNoticeTitle: 'New feature reminder',

web/src/lang/zh_cn.js

@@ -38,7 +38,12 @@ export default {
     isEnableNodeRichText: '是否开启节点富文本编辑',
     mousewheelAction: '鼠标滚轮行为',
     zoomView: '缩放视图',
-    moveViewUpDown: '上下移动视图'
+    moveViewUpDown: '上下移动视图',
+    associativeLine: '关联线',
+    associativeLineWidth: '粗细',
+    associativeLineColor: '颜色',
+    associativeLineActiveWidth: '激活粗细',
+    associativeLineActiveColor: '激活颜色'
   },
   color: {
     moreColor: '更多颜色'
@@ -187,7 +192,8 @@ export default {
     saveAs: '另存为',
     import: '导入',
     export: '导出',
-    shortcutKey: '快捷键'
+    shortcutKey: '快捷键',
+    associativeLine: '关联线',
   },
   edit: {
     newFeatureNoticeTitle: '新特性提醒',

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

@@ -209,6 +209,92 @@
           </el-select>
         </div>
       </div>
+      <!-- 关联线 -->
+      <div class="title noTop">{{ $t('baseStyle.associativeLine') }}</div>
+      <div class="row">
+        <div class="rowItem">
+          <span class="name">{{ $t('baseStyle.associativeLineColor') }}</span>
+          <span
+            class="block"
+            v-popover:popover4
+            :style="{ backgroundColor: style.associativeLineColor }"
+          ></span>
+          <el-popover ref="popover4" placement="bottom" trigger="click">
+            <Color
+              :color="style.associativeLineColor"
+              @change="
+                color => {
+                  update('associativeLineColor', color)
+                }
+              "
+            ></Color>
+          </el-popover>
+        </div>
+        <div class="rowItem">
+          <span class="name">{{ $t('baseStyle.associativeLineWidth') }}</span>
+          <el-select
+            size="mini"
+            style="width: 80px"
+            v-model="style.associativeLineWidth"
+            placeholder=""
+            @change="
+              value => {
+                update('associativeLineWidth', value)
+              }
+            "
+          >
+            <el-option
+              v-for="item in lineWidthList"
+              :key="item"
+              :label="item"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="row">
+        <div class="rowItem">
+          <span class="name">{{ $t('baseStyle.associativeLineActiveColor') }}</span>
+          <span
+            class="block"
+            v-popover:popover5
+            :style="{ backgroundColor: style.associativeLineActiveColor }"
+          ></span>
+          <el-popover ref="popover5" placement="bottom" trigger="click">
+            <Color
+              :color="style.associativeLineActiveColor"
+              @change="
+                color => {
+                  update('associativeLineActiveColor', color)
+                }
+              "
+            ></Color>
+          </el-popover>
+        </div>
+        <div class="rowItem">
+          <span class="name">{{ $t('baseStyle.associativeLineActiveWidth') }}</span>
+          <el-select
+            size="mini"
+            style="width: 80px"
+            v-model="style.associativeLineActiveWidth"
+            placeholder=""
+            @change="
+              value => {
+                update('associativeLineActiveWidth', value)
+              }
+            "
+          >
+            <el-option
+              v-for="item in lineWidthList"
+              :key="item"
+              :label="item"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
       <!-- 节点边框风格 -->
       <div class="title noTop">{{ $t('baseStyle.nodeBorderType') }}</div>
       <div class="row">
@@ -498,6 +584,10 @@ export default {
         lineStyle: '',
         generalizationLineWidth: '',
         generalizationLineColor: '',
+        associativeLineColor: '',
+        associativeLineWidth: 0,
+        associativeLineActiveWidth: 0,
+        associativeLineActiveColor: '',
         paddingX: 0,
         paddingY: 0,
         imgMaxWidth: 0,
@@ -579,6 +669,10 @@ export default {
         'lineColor',
         'generalizationLineWidth',
         'generalizationLineColor',
+        'associativeLineColor',
+        'associativeLineWidth',
+        'associativeLineActiveWidth',
+        'associativeLineActiveColor',
         'paddingX',
         'paddingY',
         'imgMaxWidth',

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

@@ -30,6 +30,7 @@ import Export from 'simple-mind-map/src/Export.js'
 import Drag from 'simple-mind-map/src/Drag.js'
 import Select from 'simple-mind-map/src/Select.js'
 import RichText from 'simple-mind-map/src/RichText.js'
+import AssociativeLine from 'simple-mind-map/src/AssociativeLine.js'
 import Outline from './Outline'
 import Style from './Style'
 import BaseStyle from './BaseStyle'
@@ -56,6 +57,7 @@ MindMap
   .usePlugin(KeyboardNavigation)
   .usePlugin(Export)
   .usePlugin(Select)
+  .usePlugin(AssociativeLine)
 
 // 注册自定义主题
 customThemeList.forEach((item) => {
@@ -121,6 +123,9 @@ export default {
     this.$bus.$on('endTextEdit', () => {
       this.mindMap.renderer.endTextEdit()
     })
+    this.$bus.$on('createAssociativeLine', () => {
+      this.mindMap.associativeLine.createLineFromActiveNode()
+    })
     if (this.openTest) {
       setTimeout(() => {
         this.test()

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

@@ -113,6 +113,16 @@
           <span class="icon iconfont icongaikuozonglan"></span>
           <span class="text">{{ $t('toolbar.summary') }}</span>
         </div>
+        <div
+          class="toolbarBtn"
+          :class="{
+            disabled: activeNodes.length <= 0 || hasGeneralization
+          }"
+          @click="$bus.$emit('createAssociativeLine')"
+        >
+          <span class="icon iconfont iconlianjiexian"></span>
+          <span class="text">{{ $t('toolbar.associativeLine') }}</span>
+        </div>
       </div>
       <!-- 导出 -->
       <div class="toolbarBlock">