Feat:1.非富文本输入框进入编辑状态时取消默认全选;2.存在一个激活节点时,支持按下中文、数字、英文按键时自动进入文本编辑模式
This commit is contained in:
parent
69e192ea9d
commit
bbf424c6d2
@ -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
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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*/)
|
||||||
|
|||||||
@ -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()
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user