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

Fix：修复一些情况下，节点显示时的文本区域宽度和编辑时的宽度不一致导致的文本换行不一致的问题

Browse Source
This commit is contained in:
街角小林 2024-01-05 15:16:38 +08:00
parent 3593990f9b
commit b52497b3f6
2 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
simple-mind-map/src/core/render/node/nodeCreateContents.js
View File

@ -159,7 +159,7 @@ function createRichTextNode() {
height = elTmp.getBoundingClientRect().height height = elTmp.getBoundingClientRect().height
div.innerHTML = html div.innerHTML = html
} }
width = Math.ceil(width) + 1 // 修复getBoundingClientRect方法对实际宽度是小数的元素获取到的值是整数，导致宽度不够文本发生换行的问题 width = Math.min(Math.ceil(width) + 1, textAutoWrapWidth) // 修复getBoundingClientRect方法对实际宽度是小数的元素获取到的值是整数，导致宽度不够文本发生换行的问题
height = Math.ceil(height) height = Math.ceil(height)
g.attr('data-width', width) g.attr('data-width', width)
g.attr('data-height', height) g.attr('data-height', height)
@ -222,7 +222,7 @@ function createTextNode() {
g.add(node) g.add(node)
}) })
let { width, height } = g.bbox() let { width, height } = g.bbox()
width = Math.ceil(width) width = Math.min(Math.ceil(width), maxWidth)
height = Math.ceil(height) height = Math.ceil(height)
g.attr('data-width', width) g.attr('data-width', width)
g.attr('data-height', height) g.attr('data-height', height)

3
simple-mind-map/src/plugins/RichText.js
View File

@ -201,7 +201,8 @@ class RichText {
box-shadow: 0 0 20px rgba(0,0,0,.5); box-shadow: 0 0 20px rgba(0,0,0,.5);
outline: none; outline: none;
word-break: word-break:
break-all;padding: ${paddingY}px ${paddingX}px; break-all;
padding: ${paddingY}px ${paddingX}px;
` `
this.textEditNode.addEventListener('click', e => { this.textEditNode.addEventListener('click', e => {
e.stopPropagation() e.stopPropagation()