Feat:1.非富文本输入框进入编辑状态时取消默认全选;2.存在一个激活节点时,支持按下中文、数字、英文按键时自动进入文本编辑模式

This commit is contained in:
wanglin2 2023-08-09 18:26:50 +08:00
parent 69e192ea9d
commit bbf424c6d2
3 changed files with 55 additions and 8 deletions

View File

@ -126,5 +126,10 @@ export const defaultOpt = {
// 指定内部一些元素节点文本编辑元素、节点备注显示元素、关联线文本编辑元素、节点图片调整按钮元素添加到的位置默认添加到document.body下 // 指定内部一些元素节点文本编辑元素、节点备注显示元素、关联线文本编辑元素、节点图片调整按钮元素添加到的位置默认添加到document.body下
customInnerElsAppendTo: null, customInnerElsAppendTo: null,
// 拖拽元素时,指示元素新位置的块的最大高度 // 拖拽元素时,指示元素新位置的块的最大高度
nodeDragPlaceholderMaxSize: 20 nodeDragPlaceholderMaxSize: 20,
// 是否允许创建一个隐藏的输入框,该输入框会在节点激活时聚焦,用于粘贴数据和自动进入文本编辑状态
enableCreateHiddenInput: true,
// 是否在存在一个激活节点时,当按下中文、英文、数字按键时自动进入文本编辑模式
// 该配置在enableCreateHiddenInput设为true时生效
enableAutoEnterTextEditWhenKeydown: true
} }

View File

@ -108,6 +108,11 @@ export default class KeyCommand {
return arr return arr
} }
// 判断是否按下了组合键
hasCombinationKey(e) {
return e.ctrlKey || e.metaKey || e.altKey || e.shiftKey
}
// 获取快捷键对应的键值数组 // 获取快捷键对应的键值数组
getKeyCodeArr(key) { getKeyCodeArr(key) {
let keyArr = key.split(/\s*\+\s*/) let keyArr = key.split(/\s*\+\s*/)

View File

@ -67,7 +67,9 @@ export default class TextEdit {
// 创建一个隐藏的文本输入框 // 创建一个隐藏的文本输入框
createHiddenInput() { createHiddenInput() {
if (this.hiddenInputEl || isMobile()) return const { enableCreateHiddenInput, enableAutoEnterTextEditWhenKeydown } =
this.mindMap.opt
if (this.hiddenInputEl || isMobile() || !enableCreateHiddenInput) return
this.hiddenInputEl = document.createElement('input') this.hiddenInputEl = document.createElement('input')
this.hiddenInputEl.type = 'text' this.hiddenInputEl.type = 'text'
this.hiddenInputEl.style.cssText = ` this.hiddenInputEl.style.cssText = `
@ -75,6 +77,25 @@ export default class TextEdit {
left: -99999px; left: -99999px;
top: -99999px; top: -99999px;
` `
// 监听按键事件
if (enableAutoEnterTextEditWhenKeydown) {
this.hiddenInputEl.addEventListener('keydown', e => {
const activeNodeList = this.mindMap.renderer.activeNodeList
if (activeNodeList.length <= 0 || activeNodeList.length > 1) return
const node = activeNodeList[0]
// 当正在输入中文或英文或数字时,如果没有按下组合键,那么自动进入文本编辑模式
const keyCode = e.keyCode
if (
node &&
(keyCode === 229 ||
(keyCode >= 65 && keyCode <= 90) ||
(keyCode >= 48 && keyCode <= 57)) &&
!this.mindMap.keyCommand.hasCombinationKey(e)
) {
this.show(node)
}
})
}
// 监听粘贴事件 // 监听粘贴事件
this.hiddenInputEl.addEventListener('paste', async event => { this.hiddenInputEl.addEventListener('paste', async event => {
event.preventDefault() event.preventDefault()
@ -106,7 +127,7 @@ export default class TextEdit {
stopFocusOnNodeActive() { stopFocusOnNodeActive() {
this.enableFocus = false this.enableFocus = false
} }
// 开启默认聚焦 // 开启默认聚焦
openFocusOnNodeActive() { openFocusOnNodeActive() {
this.enableFocus = true this.enableFocus = true
@ -148,7 +169,7 @@ export default class TextEdit {
this.mindMap.richText.showEditText(node, rect, isInserting) this.mindMap.richText.showEditText(node, rect, isInserting)
return return
} }
this.showEditTextBox(node, rect) this.showEditTextBox(node, rect, isInserting)
} }
// 处理画布缩放 // 处理画布缩放
@ -166,7 +187,7 @@ export default class TextEdit {
} }
// 显示文本编辑框 // 显示文本编辑框
showEditTextBox(node, rect) { showEditTextBox(node, rect, isInserting) {
this.mindMap.emit('before_show_text_edit') this.mindMap.emit('before_show_text_edit')
this.registerTmpShortcut() this.registerTmpShortcut()
if (!this.textEditNode) { if (!this.textEditNode) {
@ -179,10 +200,11 @@ export default class TextEdit {
this.textEditNode.addEventListener('click', e => { this.textEditNode.addEventListener('click', e => {
e.stopPropagation() e.stopPropagation()
}) })
this.textEditNode.addEventListener('mousedown', (e) => { this.textEditNode.addEventListener('mousedown', e => {
e.stopPropagation() e.stopPropagation()
}) })
const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body const targetNode =
this.mindMap.opt.customInnerElsAppendTo || document.body
targetNode.appendChild(this.textEditNode) targetNode.appendChild(this.textEditNode)
} }
let scale = this.mindMap.view.scale let scale = this.mindMap.view.scale
@ -209,12 +231,27 @@ export default class TextEdit {
} }
this.showTextEdit = true this.showTextEdit = true
// 选中文本 // 选中文本
if (!this.cacheEditingText) { // if (!this.cacheEditingText) {
// this.selectNodeText()
// }
if (isInserting) {
this.selectNodeText() this.selectNodeText()
} else {
this.focus()
} }
this.cacheEditingText = '' this.cacheEditingText = ''
} }
// 聚焦
focus() {
let selection = window.getSelection()
let range = document.createRange()
range.selectNodeContents(this.textEditNode)
range.collapse()
selection.removeAllRanges()
selection.addRange(range)
}
// 选中文本 // 选中文本
selectNodeText() { selectNodeText() {
let selection = window.getSelection() let selection = window.getSelection()