Feat：1.双击关联线进入关联线文本编辑模式；2.关联线文本为默认文本的话不保存

simple-mind-map/src/core/render/TextEdit.js

@@ -1,4 +1,4 @@
-import { getStrWithBrFromHtml, checkNodeOuter } from '../../utils'
+import { getStrWithBrFromHtml, checkNodeOuter, focusInput, selectAllInput } from '../../utils'
 import { ERROR_TYPES } from '../../constants/constant'
 
 //  节点文字编辑类
@@ -188,35 +188,16 @@ export default class TextEdit {
     this.showTextEdit = true
     // 选中文本
     // if (!this.cacheEditingText) {
-    //   this.selectNodeText()
+    //   selectAllInput(this.textEditNode)
     // }
     if (isInserting || (selectTextOnEnterEditText && !isFromKeyDown)) {
-      this.selectNodeText()
+      selectAllInput(this.textEditNode)
     } else {
-      this.focus()
+      focusInput(this.textEditNode)
     }
     this.cacheEditingText = ''
   }
 
-  // 聚焦
-  focus() {
-    let selection = window.getSelection()
-    let range = document.createRange()
-    range.selectNodeContents(this.textEditNode)
-    range.collapse()
-    selection.removeAllRanges()
-    selection.addRange(range)
-  }
-
-  //  选中文本
-  selectNodeText() {
-    let selection = window.getSelection()
-    let range = document.createRange()
-    range.selectNodeContents(this.textEditNode)
-    selection.removeAllRanges()
-    selection.addRange(range)
-  }
-
   // 获取当前正在编辑的内容
   getEditText() {
     return getStrWithBrFromHtml(this.textEditNode.innerHTML)

simple-mind-map/src/plugins/AssociativeLine.js

@@ -234,6 +234,11 @@ class AssociativeLine {
         controlPoints
       })
     })
+    // 双击进入关联线文本编辑状态
+    clickPath.dblclick(() => {
+      if (!this.activeLine) return
+      this.showEditTextBox(text)
+    })
     // 渲染关联线文字
     this.renderText(this.getText(node, toNode), path, text)
     this.lineList.push([path, clickPath, text, node, toNode])

simple-mind-map/src/plugins/associativeLine/associativeLineText.js

@@ -1,5 +1,9 @@
 import { Text } from '@svgdotjs/svg.js'
-import { getStrWithBrFromHtml } from '../../utils/index'
+import {
+  getStrWithBrFromHtml,
+  focusInput,
+  selectAllInput
+} from '../../utils/index'
 
 // 创建文字节点
 function createText(data) {
@@ -36,7 +40,7 @@ function showEditTextBox(g) {
   this.mindMap.keyCommand.addShortcut('Enter', () => {
     this.hideEditTextBox()
   })
-
+  // 输入框元素没有创建过，则先创建
   if (!this.textEditNode) {
     this.textEditNode = document.createElement('div')
     this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);padding: 3px 5px;margin-left: -5px;margin-top: -3px;outline: none; word-break: break-all;`
@@ -55,20 +59,27 @@ function showEditTextBox(g) {
     associativeLineTextFontFamily,
     associativeLineTextLineHeight
   } = this.mindMap.themeConfig
+  let { defaultAssociativeLineText, nodeTextEditZIndex } = this.mindMap.opt
   let scale = this.mindMap.view.scale
   let [, , , node, toNode] = this.activeLine
-  let textLines = (
-    this.getText(node, toNode) || this.mindMap.opt.defaultAssociativeLineText
-  ).split(/\n/gim)
+  let text = this.getText(node, toNode)
+  let textLines = (text || defaultAssociativeLineText).split(/\n/gim)
   this.textEditNode.style.fontFamily = associativeLineTextFontFamily
   this.textEditNode.style.fontSize = associativeLineTextFontSize * scale + 'px'
   this.textEditNode.style.lineHeight =
     textLines.length > 1 ? associativeLineTextLineHeight : 'normal'
-  this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex
+  this.textEditNode.style.zIndex = nodeTextEditZIndex
   this.textEditNode.innerHTML = textLines.join('<br>')
   this.textEditNode.style.display = 'block'
   this.updateTextEditBoxPos(g)
   this.showTextEdit = true
+  // 如果是默认文本要全选输入框
+  if (text === '' || text === defaultAssociativeLineText) {
+    selectAllInput(this.textEditNode)
+  } else {
+    // 否则聚焦即可
+    focusInput(this.textEditNode)
+  }
 }
 
 // 处理画布缩放
@@ -94,6 +105,9 @@ function hideEditTextBox() {
   }
   let [path, , text, node, toNode] = this.activeLine
   let str = getStrWithBrFromHtml(this.textEditNode.innerHTML)
+  // 如果是默认文本，那么不保存
+  let isDefaultText = str === this.mindMap.opt.defaultAssociativeLineText
+  str = isDefaultText ? '' : str
   this.mindMap.execCommand('SET_NODE_DATA', node, {
     associativeLineText: {
       ...(node.nodeData.data.associativeLineText || {}),

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

@@ -698,3 +698,22 @@ export const checkTwoRectIsOverlap = (
 ) => {
   return maxx1 > minx2 && maxx2 > minx1 && maxy1 > miny2 && maxy2 > miny1
 }
+
+// 聚焦指定输入框
+export const focusInput = el => {
+  let selection = window.getSelection()
+  let range = document.createRange()
+  range.selectNodeContents(el)
+  range.collapse()
+  selection.removeAllRanges()
+  selection.addRange(range)
+}
+
+// 聚焦全选指定输入框
+export const selectAllInput = el => {
+  let selection = window.getSelection()
+  let range = document.createRange()
+  range.selectNodeContents(el)
+  selection.removeAllRanges()
+  selection.addRange(range)
+}