From c3a0e09f6d0a675927c53070a15efc04bd7cc795 Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Fri, 1 Sep 2023 10:16:21 +0800 Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A=E6=94=AF=E6=8C=81=E5=8F=8C?= =?UTF-8?q?=E5=87=BB=E8=8A=82=E7=82=B9=E8=BF=9B=E5=85=A5=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=97=B6=E5=85=A8=E9=80=89=E6=96=87=E6=9C=AC?= =?UTF-8?q?=E7=9A=84=E9=85=8D=E7=BD=AE=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/constants/defaultOptions.js | 4 +++- simple-mind-map/src/core/render/TextEdit.js | 20 ++++++++++--------- simple-mind-map/src/plugins/RichText.js | 10 ++++++---- 3 files changed, 20 insertions(+), 14 deletions(-) diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js index 14f8a915..b9e02257 100644 --- a/simple-mind-map/src/constants/defaultOptions.js +++ b/simple-mind-map/src/constants/defaultOptions.js @@ -180,5 +180,7 @@ export const defaultOpt = { // 节点鼠标hover和激活时显示的矩形边框的颜色 hoverRectColor: 'rgb(94, 200, 248)', // 节点鼠标hover和激活时显示的矩形边框距节点内容的距离 - hoverRectPadding: 2 + hoverRectPadding: 2, + // 双击节点进入节点文本编辑时是否默认选中文本，默认只在创建新节点时会选中 + selectTextOnEnterEditText: true } diff --git a/simple-mind-map/src/core/render/TextEdit.js b/simple-mind-map/src/core/render/TextEdit.js index 33569874..fe5faf95 100644 --- a/simple-mind-map/src/core/render/TextEdit.js +++ b/simple-mind-map/src/core/render/TextEdit.js @@ -63,7 +63,7 @@ export default class TextEdit { const node = activeNodeList[0] // 当正在输入中文或英文或数字时，如果没有按下组合键，那么自动进入文本编辑模式 if (node && this.checkIsAutoEnterTextEditKey(e)) { - this.show(node) + this.show(node, e, false, true) } }) } @@ -93,7 +93,8 @@ export default class TextEdit { // 显示文本编辑框 // isInserting：是否是刚创建的节点 - async show(node, e, isInserting = false) { + // isFromKeyDown：是否是在按键事件进入的编辑 + async show(node, e, isInserting = false, isFromKeyDown = false) { // 使用了自定义节点内容那么不响应编辑事件 if (node.isUseCustomNodeContent()) { return @@ -114,10 +115,10 @@ export default class TextEdit { this.mindMap.view.translateXY(offsetLeft, offsetTop) let rect = node._textData.node.node.getBoundingClientRect() if (this.mindMap.richText) { - this.mindMap.richText.showEditText(node, rect, isInserting) + this.mindMap.richText.showEditText(node, rect, isInserting, isFromKeyDown) return } - this.showEditTextBox(node, rect, isInserting) + this.showEditTextBox(node, rect, isInserting, isFromKeyDown) } // 处理画布缩放 @@ -135,8 +136,10 @@ export default class TextEdit { } // 显示文本编辑框 - showEditTextBox(node, rect, isInserting) { + showEditTextBox(node, rect, isInserting, isFromKeyDown) { if (this.showTextEdit) return + const { nodeTextEditZIndex, textAutoWrapWidth, selectTextOnEnterEditText } = + this.mindMap.opt this.mindMap.emit('before_show_text_edit') this.registerTmpShortcut() if (!this.textEditNode) { @@ -169,15 +172,14 @@ export default class TextEdit { ) let isMultiLine = node._textData.node.attr('data-ismultiLine') === 'true' node.style.domText(this.textEditNode, scale, isMultiLine) - this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex + this.textEditNode.style.zIndex = nodeTextEditZIndex this.textEditNode.innerHTML = textLines.join('
') this.textEditNode.style.minWidth = rect.width + 10 + 'px' this.textEditNode.style.minHeight = rect.height + 6 + 'px' this.textEditNode.style.left = rect.left + 'px' this.textEditNode.style.top = rect.top + 'px' this.textEditNode.style.display = 'block' - this.textEditNode.style.maxWidth = - this.mindMap.opt.textAutoWrapWidth * scale + 'px' + this.textEditNode.style.maxWidth = textAutoWrapWidth * scale + 'px' if (isMultiLine && lineHeight !== 1) { this.textEditNode.style.transform = `translateY(${ -((lineHeight * fontSize - fontSize) / 2) * scale @@ -188,7 +190,7 @@ export default class TextEdit { // if (!this.cacheEditingText) { // this.selectNodeText() // } - if (isInserting) { + if (isInserting || (selectTextOnEnterEditText && !isFromKeyDown)) { this.selectNodeText() } else { this.focus() diff --git a/simple-mind-map/src/plugins/RichText.js b/simple-mind-map/src/plugins/RichText.js index 2bd229e2..8c158fba 100644 --- a/simple-mind-map/src/plugins/RichText.js +++ b/simple-mind-map/src/plugins/RichText.js @@ -152,7 +152,7 @@ class RichText { } // 显示文本编辑控件 - showEditText(node, rect, isInserting) { + showEditText(node, rect, isInserting, isFromKeyDown) { if (this.showTextEdit) { return } @@ -160,7 +160,8 @@ class RichText { richTextEditFakeInPlace, customInnerElsAppendTo, nodeTextEditZIndex, - textAutoWrapWidth + textAutoWrapWidth, + selectTextOnEnterEditText } = this.mindMap.opt this.node = node this.isInserting = isInserting @@ -246,8 +247,9 @@ class RichText { this.initQuillEditor() document.querySelector('.ql-editor').style.minHeight = originHeight + 'px' this.showTextEdit = true - // 如果是刚创建的节点，那么默认全选，否则普通激活不全选 - this.focus(isInserting ? 0 : null) + // 如果是刚创建的节点，那么默认全选，否则普通激活不全选，除非selectTextOnEnterEditText配置为true + // 在selectTextOnEnterEditText时，如果是在keydown事件进入的节点编辑，也不需要全选 + this.focus(isInserting || (selectTextOnEnterEditText && !isFromKeyDown) ? 0 : null) if (!node.nodeData.data.richText) { // 如果是非富文本的情况，需要手动应用文本样式 this.setTextStyleIfNotRichText(node)