mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-21 10:27:44 +08:00
feat: 新增enableAutoEmptyTextWhenKeydown,单击节点键入清空原文本
This commit is contained in:
parent
b28e7227e5
commit
caa11e3c7a
@ -130,6 +130,8 @@ export const defaultOpt = {
|
||||
// 是否在存在一个激活节点时,当按下中文、英文、数字按键时自动进入文本编辑模式
|
||||
// 开启该特性后,需要给你的输入框绑定keydown事件,并禁止冒泡
|
||||
enableAutoEnterTextEditWhenKeydown: false,
|
||||
// 是否在存在一个激活节点时,当按下中文、英文、数字按键时自动进入文本编辑模式,且节点文本清空
|
||||
enableAutoEmptyTextWhenKeydown: false,
|
||||
// 自定义对剪贴板文本的处理。当按ctrl+v粘贴时会读取用户剪贴板中的文本和图片,默认只会判断文本是否是普通文本和simple-mind-map格式的节点数据,如果你想处理其他思维导图的数据,比如processon、zhixi等,那么可以传递一个函数,接受当前剪贴板中的文本为参数,返回处理后的数据,可以返回两种类型:
|
||||
/*
|
||||
1.返回一个纯文本,那么会直接以该文本创建一个子节点
|
||||
|
||||
@ -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('<br>')
|
||||
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('<br>')
|
||||
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'
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user