Feat:支持双击节点进入编辑状态时全选文本的配置项

This commit is contained in:
wanglin2 2023-09-01 10:16:21 +08:00
parent 1d497b2f13
commit c3a0e09f6d
3 changed files with 20 additions and 14 deletions

View File

@ -180,5 +180,7 @@ export const defaultOpt = {
// 节点鼠标hover和激活时显示的矩形边框的颜色
hoverRectColor: 'rgb(94, 200, 248)',
// 节点鼠标hover和激活时显示的矩形边框距节点内容的距离
hoverRectPadding: 2
hoverRectPadding: 2,
// 双击节点进入节点文本编辑时是否默认选中文本,默认只在创建新节点时会选中
selectTextOnEnterEditText: true
}

View File

@ -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('<br>')
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()

View File

@ -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)