完善关联线文本编辑

simple-mind-map/src/AssociativeLine.js

@@ -97,6 +97,8 @@ class AssociativeLine {
     window.addEventListener('mouseup', e => {
       this.onControlPointMouseup(e)
     })
+    // 缩放事件
+    this.mindMap.on('scale', this.onScale)
   }
 
   // 创建箭头

simple-mind-map/src/utils/associativeLineText.js

@@ -4,11 +4,7 @@ import { getStrWithBrFromHtml } from './index'
 // 创建文字节点
 function createText(data) {
   let g = this.draw.group()
-  g.click(e => {
+  const setActive = () => {
-    e.stopPropagation()
-  })
-  g.on('dblclick', e => {
-    e.stopPropagation()
     if (
       !this.activeLine ||
       this.activeLine[3] !== data.node ||
@@ -19,6 +15,14 @@ function createText(data) {
         text: g
       })
     }
+  }
+  g.click(e => {
+    e.stopPropagation()
+    setActive()
+  })
+  g.on('dblclick', e => {
+    e.stopPropagation()
+    setActive()
     if (!this.activeLine) return
     this.showEditTextBox(g)
   })
@@ -50,13 +54,14 @@ function showEditTextBox(g) {
     associativeLineTextFontFamily,
     associativeLineTextLineHeight
   } = this.mindMap.themeConfig
+  let scale = this.mindMap.view.scale
   let [, , , node, toNode] = this.activeLine
   let textLines = (
     this.getText(node, toNode) || this.mindMap.opt.defaultAssociativeLineText
   ).split(/\n/gim)
   this.textEditNode.style.fontFamily = associativeLineTextFontFamily
-  this.textEditNode.style.fontSize = associativeLineTextFontSize + 'px'
+  this.textEditNode.style.fontSize = associativeLineTextFontSize * scale + 'px'
-  this.textEditNode.style.lineHeight = associativeLineTextLineHeight
+  this.textEditNode.style.lineHeight = textLines.length > 1 ? associativeLineTextLineHeight : 'normal'
   this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex
   this.textEditNode.innerHTML = textLines.join('<br>')
   this.textEditNode.style.display = 'block'
@@ -64,6 +69,11 @@ function showEditTextBox(g) {
   this.showTextEdit = true
 }
 
+// 处理画布缩放
+function onScale() {
+  this.hideEditTextBox()
+}
+
 // 更新文本编辑框位置
 function updateTextEditBoxPos(g) {
   let rect = g.node.getBoundingClientRect()
@@ -148,6 +158,7 @@ export default {
   getText,
   createText,
   styleText,
+  onScale,
   showEditTextBox,
   hideEditTextBox,
   updateTextEditBoxPos,

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

@@ -295,6 +295,67 @@
           </el-select>
         </div>
       </div>
+      <!-- 关联线文字 -->
+      <div class="title noTop">关联线文字</div>
+      <div class="row">
+        <div class="rowItem">
+          <span class="name">字体</span>
+          <el-select
+            size="mini"
+            v-model="style.associativeLineTextFontFamily"
+            placeholder=""
+            @change="update('associativeLineTextFontFamily', $event)"
+          >
+            <el-option
+              v-for="item in fontFamilyList"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"
+              :style="{ fontFamily: item.value }"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="row">
+        <div class="rowItem">
+          <span class="name">颜色</span>
+          <span
+            class="block"
+            v-popover:popover6
+            :style="{ backgroundColor: style.associativeLineTextColor }"
+          ></span>
+          <el-popover ref="popover6" placement="bottom" trigger="click">
+            <Color
+              :color="style.associativeLineTextColor"
+              @change="
+                color => {
+                  update('associativeLineTextColor', color)
+                }
+              "
+            ></Color>
+          </el-popover>
+        </div>
+        <div class="rowItem">
+          <span class="name">字号</span>
+          <el-select
+            size="mini"
+            style="width: 80px"
+            v-model="style.associativeLineTextFontSize"
+            placeholder=""
+            @change="update('associativeLineTextFontSize', $event)"
+          >
+            <el-option
+              v-for="item in fontSizeList"
+              :key="item"
+              :label="item"
+              :value="item"
+              :style="{ fontSize: item + 'px' }"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
       <!-- 节点边框风格 -->
       <div class="title noTop">{{ $t('baseStyle.nodeBorderType') }}</div>
       <div class="row">
@@ -546,7 +607,7 @@
 <script>
 import Sidebar from './Sidebar'
 import Color from './Color'
-import { lineWidthList, lineStyleList, backgroundRepeatList, backgroundPositionList, backgroundSizeList } from '@/config'
+import { lineWidthList, lineStyleList, backgroundRepeatList, backgroundPositionList, backgroundSizeList, fontFamilyList, fontSizeList } from '@/config'
 import ImgUpload from '@/components/ImgUpload'
 import { storeConfig } from '@/api'
 import { mapState, mapMutations } from 'vuex'
@@ -575,6 +636,7 @@ export default {
   data() {
     return {
       lineWidthList,
+      fontSizeList,
       activeTab: 'color',
       marginActiveTab: 'second',
       style: {
@@ -588,6 +650,9 @@ export default {
         associativeLineWidth: 0,
         associativeLineActiveWidth: 0,
         associativeLineActiveColor: '',
+        associativeLineTextFontSize: 0,
+        associativeLineTextColor: '',
+        associativeLineTextFontFamily: '',
         paddingX: 0,
         paddingY: 0,
         imgMaxWidth: 0,
@@ -636,6 +701,9 @@ export default {
     backgroundSizeList() {
       return backgroundSizeList[this.$i18n.locale] || backgroundSizeList.zh
     },
+    fontFamilyList() {
+      return fontFamilyList[this.$i18n.locale] || fontFamilyList.zh
+    },
   },
   watch: {
     activeSidebar(val) {
@@ -673,6 +741,9 @@ export default {
         'associativeLineWidth',
         'associativeLineActiveWidth',
         'associativeLineActiveColor',
+        'associativeLineTextFontSize',
+        'associativeLineTextColor',
+        'associativeLineTextFontFamily',
         'paddingX',
         'paddingY',
         'imgMaxWidth',