diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js index 5e4a6806..f856ec24 100644 --- a/simple-mind-map/src/constants/defaultOptions.js +++ b/simple-mind-map/src/constants/defaultOptions.js @@ -130,6 +130,8 @@ export const defaultOpt = { // 是否在存在一个激活节点时,当按下中文、英文、数字按键时自动进入文本编辑模式 // 开启该特性后,需要给你的输入框绑定keydown事件,并禁止冒泡 enableAutoEnterTextEditWhenKeydown: false, + // 是否在存在一个激活节点时,当按下中文、英文、数字按键时自动进入文本编辑模式,且节点文本清空 + enableAutoEmptyTextWhenKeydown: false, // 自定义对剪贴板文本的处理。当按ctrl+v粘贴时会读取用户剪贴板中的文本和图片,默认只会判断文本是否是普通文本和simple-mind-map格式的节点数据,如果你想处理其他思维导图的数据,比如processon、zhixi等,那么可以传递一个函数,接受当前剪贴板中的文本为参数,返回处理后的数据,可以返回两种类型: /* 1.返回一个纯文本,那么会直接以该文本创建一个子节点 diff --git a/simple-mind-map/src/core/render/TextEdit.js b/simple-mind-map/src/core/render/TextEdit.js index ea4292e7..332dbeca 100644 --- a/simple-mind-map/src/core/render/TextEdit.js +++ b/simple-mind-map/src/core/render/TextEdit.js @@ -92,7 +92,7 @@ export default class TextEdit { }) this.mindMap.on('scale', this.onScale) // // 监听按键事件,判断是否自动进入文本编辑模式 - if (this.mindMap.opt.enableAutoEnterTextEditWhenKeydown || this.mindMap.opt.enableAutoEnterTextCoverWhenKeydown) { + if (this.mindMap.opt.enableAutoEnterTextEditWhenKeydown || this.mindMap.opt.enableAutoEmptyTextWhenKeydown) { window.addEventListener('keydown', this.onKeydown) } this.mindMap.on('beforeDestroy', () => { @@ -115,20 +115,11 @@ export default class TextEdit { } if ( opt.enableAutoEnterTextEditWhenKeydown !== - lastOpt.enableAutoEnterTextEditWhenKeydown + lastOpt.enableAutoEnterTextEditWhenKeydown || opt.enableAutoEmptyTextWhenKeydown !== + lastOpt.enableAutoEmptyTextWhenKeydown ) { window[ - opt.enableAutoEnterTextEditWhenKeydown - ? 'addEventListener' - : 'removeEventListener' - ]('keydown', this.onKeydown) - } - if ( - opt.enableAutoEnterTextCoverWhenKeydown !== - lastOpt.enableAutoEnterTextCoverWhenKeydown - ) { - window[ - opt.enableAutoEnterTextCoverWhenKeydown + opt.enableAutoEnterTextEditWhenKeydown || opt.enableAutoEmptyTextWhenKeydown ? 'addEventListener' : 'removeEventListener' ]('keydown', this.onKeydown) @@ -245,8 +236,8 @@ export default class TextEdit { this.textEditNode.style.background = openRealtimeRenderOnNodeTextEdit ? 'transparent' : this.currentNode - ? this.getBackground(this.currentNode) - : '' + ? this.getBackground(this.currentNode) + : '' this.textEditNode.style.boxShadow = openRealtimeRenderOnNodeTextEdit ? 'none' : '0 0 20px rgba(0,0,0,.5)' @@ -277,7 +268,8 @@ export default class TextEdit { nodeTextEditZIndex, textAutoWrapWidth, selectTextOnEnterEditText, - openRealtimeRenderOnNodeTextEdit + openRealtimeRenderOnNodeTextEdit, + enableAutoEmptyTextWhenKeydown } = this.mindMap.opt if (!isFromScale) { this.mindMap.emit('before_show_text_edit') @@ -291,8 +283,8 @@ export default class TextEdit { box-sizing: border-box; ${ openRealtimeRenderOnNodeTextEdit - ? '' - : `box-shadow: 0 0 20px rgba(0,0,0,.5);` + ? '' + : `box-shadow: 0 0 20px rgba(0,0,0,.5);` } padding: ${this.textNodePaddingY}px ${this.textNodePaddingX}px; margin-left: -${this.textNodePaddingX}px; @@ -351,19 +343,9 @@ export default class TextEdit { } this.textEditNode.style.zIndex = nodeTextEditZIndex this.textEditNode.innerHTML = textLines.join('
') - if(this.mindMap.opt.enableAutoEnterTextCoverWhenKeydown){ + if (enableAutoEmptyTextWhenKeydown && isFromKeyDown) { this.textEditNode.innerHTML = '' } - if(this.mindMap.opt.enableAutoSelectAllTextWhenDoubleClick && isFromDbclick){ - console.log('here') - this.textEditNode.innerHTML = textLines.join('
') - const selection = window.getSelection() - // selection.removeAllRanges() - const range = document.createRange() - range.selectNodeContents(this.textEditNode) - selection.addRange(range) - console.log('selection', selection) - } this.textEditNode.style.minWidth = rect.width + this.textNodePaddingX * 2 + 'px' this.textEditNode.style.minHeight = rect.height + 'px' @@ -375,7 +357,7 @@ export default class TextEdit { this.textEditNode.style.lineHeight = noneRichTextNodeLineHeight this.textEditNode.style.transform = `translateY(${ (((noneRichTextNodeLineHeight - 1) * fontSize) / 2) * scale - }px)` + }px)` } else { this.textEditNode.style.lineHeight = 'normal' }