From 73e78555752bc2dc119884b5a783f5fc417bc7d2 Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Thu, 21 Sep 2023 09:51:46 +0800 Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A1.=E5=8F=8C=E5=87=BB=E5=85=B3?= =?UTF-8?q?=E8=81=94=E7=BA=BF=E8=BF=9B=E5=85=A5=E5=85=B3=E8=81=94=E7=BA=BF?= =?UTF-8?q?=E6=96=87=E6=9C=AC=E7=BC=96=E8=BE=91=E6=A8=A1=E5=BC=8F=EF=BC=9B?= =?UTF-8?q?2.=E5=85=B3=E8=81=94=E7=BA=BF=E6=96=87=E6=9C=AC=E4=B8=BA?= =?UTF-8?q?=E9=BB=98=E8=AE=A4=E6=96=87=E6=9C=AC=E7=9A=84=E8=AF=9D=E4=B8=8D?= =?UTF-8?q?=E4=BF=9D=E5=AD=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/src/core/render/TextEdit.js | 27 +++---------------- .../src/plugins/AssociativeLine.js | 5 ++++ .../associativeLine/associativeLineText.js | 26 +++++++++++++----- simple-mind-map/src/utils/index.js | 19 +++++++++++++ 4 files changed, 48 insertions(+), 29 deletions(-) diff --git a/simple-mind-map/src/core/render/TextEdit.js b/simple-mind-map/src/core/render/TextEdit.js index fe5faf95..b7a56aa7 100644 --- a/simple-mind-map/src/core/render/TextEdit.js +++ b/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) diff --git a/simple-mind-map/src/plugins/AssociativeLine.js b/simple-mind-map/src/plugins/AssociativeLine.js index 42550286..4dbc4ed2 100644 --- a/simple-mind-map/src/plugins/AssociativeLine.js +++ b/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]) diff --git a/simple-mind-map/src/plugins/associativeLine/associativeLineText.js b/simple-mind-map/src/plugins/associativeLine/associativeLineText.js index b511d4ed..6d37a2c4 100644 --- a/simple-mind-map/src/plugins/associativeLine/associativeLineText.js +++ b/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('
') 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 || {}), diff --git a/simple-mind-map/src/utils/index.js b/simple-mind-map/src/utils/index.js index bc13eba0..5d8c109c 100644 --- a/simple-mind-map/src/utils/index.js +++ b/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) +}