diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js index 2c72933e..97560ac6 100644 --- a/simple-mind-map/src/constants/defaultOptions.js +++ b/simple-mind-map/src/constants/defaultOptions.js @@ -126,5 +126,10 @@ export const defaultOpt = { // 指定内部一些元素(节点文本编辑元素、节点备注显示元素、关联线文本编辑元素、节点图片调整按钮元素)添加到的位置,默认添加到document.body下 customInnerElsAppendTo: null, // 拖拽元素时,指示元素新位置的块的最大高度 - nodeDragPlaceholderMaxSize: 20 + nodeDragPlaceholderMaxSize: 20, + // 是否允许创建一个隐藏的输入框,该输入框会在节点激活时聚焦,用于粘贴数据和自动进入文本编辑状态 + enableCreateHiddenInput: true, + // 是否在存在一个激活节点时,当按下中文、英文、数字按键时自动进入文本编辑模式 + // 该配置在enableCreateHiddenInput设为true时生效 + enableAutoEnterTextEditWhenKeydown: true } diff --git a/simple-mind-map/src/core/command/KeyCommand.js b/simple-mind-map/src/core/command/KeyCommand.js index e894516c..4b493fd6 100644 --- a/simple-mind-map/src/core/command/KeyCommand.js +++ b/simple-mind-map/src/core/command/KeyCommand.js @@ -108,6 +108,11 @@ export default class KeyCommand { return arr } + // 判断是否按下了组合键 + hasCombinationKey(e) { + return e.ctrlKey || e.metaKey || e.altKey || e.shiftKey + } + // 获取快捷键对应的键值数组 getKeyCodeArr(key) { let keyArr = key.split(/\s*\+\s*/) diff --git a/simple-mind-map/src/core/render/TextEdit.js b/simple-mind-map/src/core/render/TextEdit.js index 70abc840..92499d98 100644 --- a/simple-mind-map/src/core/render/TextEdit.js +++ b/simple-mind-map/src/core/render/TextEdit.js @@ -67,7 +67,9 @@ export default class TextEdit { // 创建一个隐藏的文本输入框 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.type = 'text' this.hiddenInputEl.style.cssText = ` @@ -75,6 +77,25 @@ export default class TextEdit { left: -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 => { event.preventDefault() @@ -106,7 +127,7 @@ export default class TextEdit { stopFocusOnNodeActive() { this.enableFocus = false } - + // 开启默认聚焦 openFocusOnNodeActive() { this.enableFocus = true @@ -148,7 +169,7 @@ export default class TextEdit { this.mindMap.richText.showEditText(node, rect, isInserting) 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.registerTmpShortcut() if (!this.textEditNode) { @@ -179,10 +200,11 @@ export default class TextEdit { this.textEditNode.addEventListener('click', e => { e.stopPropagation() }) - this.textEditNode.addEventListener('mousedown', (e) => { + this.textEditNode.addEventListener('mousedown', e => { e.stopPropagation() }) - const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body + const targetNode = + this.mindMap.opt.customInnerElsAppendTo || document.body targetNode.appendChild(this.textEditNode) } let scale = this.mindMap.view.scale @@ -209,12 +231,27 @@ export default class TextEdit { } this.showTextEdit = true // 选中文本 - if (!this.cacheEditingText) { + // if (!this.cacheEditingText) { + // this.selectNodeText() + // } + if (isInserting) { this.selectNodeText() + } else { + this.focus() } 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()