openSourceRemote/mind-map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化节点文本编辑

Browse Source
This commit is contained in:
wanglin2 2023-02-20 11:02:04 +08:00
parent 161ef7590c
commit 46e11649b0
2 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
simple-mind-map/src/Style.js
View File

@ -140,6 +140,8 @@ class Style {
node.style.fontFamily = this.merge('fontFamily') node.style.fontFamily = this.merge('fontFamily')
node.style.fontSize = this.merge('fontSize') * fontSizeScale + 'px' node.style.fontSize = this.merge('fontSize') * fontSizeScale + 'px'
node.style.fontWeight = this.merge('fontWeight') || 'normal' node.style.fontWeight = this.merge('fontWeight') || 'normal'
node.style.lineHeight = this.merge('lineHeight')
node.style.fontStyle = this.merge('fontStyle')
} }
// 标签文字 // 标签文字

10
simple-mind-map/src/TextEdit.js
View File

@ -59,14 +59,17 @@ export default class TextEdit {
this.registerTmpShortcut() this.registerTmpShortcut()
if (!this.textEditNode) { if (!this.textEditNode) {
this.textEditNode = document.createElement('div') this.textEditNode = document.createElement('div')
this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);padding: 3px 5px;margin-left: -5px;margin-top: -3px;outline: none;` this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);padding: 3px 5px;margin-left: -5px;margin-top: -3px;outline: none; word-break: break-all;`
this.textEditNode.setAttribute('contenteditable', true) this.textEditNode.setAttribute('contenteditable', true)
this.textEditNode.addEventListener('keyup', e => { this.textEditNode.addEventListener('keyup', e => {
e.stopPropagation() e.stopPropagation()
}) })
document.body.appendChild(this.textEditNode) document.body.appendChild(this.textEditNode)
} }
node.style.domText(this.textEditNode, this.mindMap.view.scale) let scale = this.mindMap.view.scale
let lineHeight = node.style.merge('lineHeight')
let fontSize = node.style.merge('fontSize')
node.style.domText(this.textEditNode, scale)
this.textEditNode.innerHTML = node.nodeData.data.text this.textEditNode.innerHTML = node.nodeData.data.text
.split(/\n/gim) .split(/\n/gim)
.join('<br>') .join('<br>')
@ -75,7 +78,8 @@ export default class TextEdit {
this.textEditNode.style.left = rect.left + 'px' this.textEditNode.style.left = rect.left + 'px'
this.textEditNode.style.top = rect.top + 'px' this.textEditNode.style.top = rect.top + 'px'
this.textEditNode.style.display = 'block' this.textEditNode.style.display = 'block'
this.textEditNode.style.maxWidth = this.mindMap.opt.textAutoWrapWidth * this.mindMap.view.scale + 'px' this.textEditNode.style.maxWidth = this.mindMap.opt.textAutoWrapWidth * scale + 'px'
this.textEditNode.style.transform = `translateY(${-(lineHeight * fontSize - fontSize) / 2 * scale}px)`
this.showTextEdit = true this.showTextEdit = true
// 选中文本 // 选中文本
this.selectNodeText() this.selectNodeText()