diff --git a/simple-mind-map/src/core/render/TextEdit.js b/simple-mind-map/src/core/render/TextEdit.js index 07649c66..d828724b 100644 --- a/simple-mind-map/src/core/render/TextEdit.js +++ b/simple-mind-map/src/core/render/TextEdit.js @@ -6,7 +6,9 @@ import { htmlEscape, handleInputPasteText, checkSmmFormatData, - getTextFromHtml + getTextFromHtml, + isWhite, + getVisibleColorFromTheme } from '../../utils' import { ERROR_TYPES, @@ -218,9 +220,11 @@ export default class TextEdit { openRealtimeRenderOnNodeTextEdit ) { if (!this.textEditNode) return - this.textEditNode.style.backgroundColor = openRealtimeRenderOnNodeTextEdit + this.textEditNode.style.background = openRealtimeRenderOnNodeTextEdit ? 'transparent' - : '#fff' + : this.currentNode + ? this.getBackground(this.currentNode) + : '' this.textEditNode.style.boxShadow = openRealtimeRenderOnNodeTextEdit ? 'none' : '0 0 20px rgba(0,0,0,.5)' @@ -266,14 +270,14 @@ export default class TextEdit { ${ openRealtimeRenderOnNodeTextEdit ? '' - : `background-color:#fff; - 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; margin-top: -${this.textNodePaddingY}px; outline: none; word-break: break-all; + line-break: anywhere; ` this.textEditNode.setAttribute('contenteditable', true) this.textEditNode.addEventListener('keyup', e => { @@ -320,6 +324,9 @@ export default class TextEdit { }) const isMultiLine = node._textData.node.attr('data-ismultiLine') === 'true' node.style.domText(this.textEditNode, scale) + if (!openRealtimeRenderOnNodeTextEdit) { + this.textEditNode.style.background = this.getBackground(node) + } this.textEditNode.style.zIndex = nodeTextEditZIndex this.textEditNode.innerHTML = textLines.join('
') this.textEditNode.style.minWidth = @@ -370,6 +377,27 @@ export default class TextEdit { this.textEditNode.style.top = rect.top + 'px' } + // 获取编辑区域的背景填充 + getBackground(node) { + const gradientStyle = node.style.merge('gradientStyle') + // 当前使用的是渐变色背景 + if (gradientStyle) { + const startColor = node.style.merge('startColor') + const endColor = node.style.merge('endColor') + return `linear-gradient(to right, ${startColor}, ${endColor})` + } else { + // 单色背景 + const bgColor = node.style.merge('fillColor') + const color = node.style.merge('color') + // 默认使用节点的填充色,否则如果节点颜色是白色的话编辑时看不见 + return bgColor === 'transparent' + ? isWhite(color) + ? getVisibleColorFromTheme(this.mindMap.themeConfig) + : '#fff' + : bgColor + } + } + // 删除文本编辑元素 removeTextEditEl() { if (this.mindMap.richText) { diff --git a/simple-mind-map/src/core/render/node/Style.js b/simple-mind-map/src/core/render/node/Style.js index bed7797d..164fb948 100644 --- a/simple-mind-map/src/core/render/node/Style.js +++ b/simple-mind-map/src/core/render/node/Style.js @@ -238,6 +238,8 @@ class Style { fontStyle: this.merge('fontStyle'), textDecoration: this.merge('textDecoration') } + node.style.color = styles.color + node.style.textDecoration = styles.textDecoration node.style.fontFamily = styles.fontFamily node.style.fontSize = styles.fontSize * fontSizeScale + 'px' node.style.fontWeight = styles.fontWeight || 'normal' diff --git a/simple-mind-map/src/plugins/RichText.js b/simple-mind-map/src/plugins/RichText.js index 5fd14e06..81e35042 100644 --- a/simple-mind-map/src/plugins/RichText.js +++ b/simple-mind-map/src/plugins/RichText.js @@ -4,8 +4,6 @@ import 'quill/dist/quill.snow.css' import { walk, getTextFromHtml, - isWhite, - getVisibleColorFromTheme, isUndef, checkSmmFormatData, removeHtmlNodeByClass, @@ -250,7 +248,8 @@ class RichText { this.textEditNode.style.marginTop = `-${paddingY * scaleY}px` this.textEditNode.style.zIndex = nodeTextEditZIndex if (!openRealtimeRenderOnNodeTextEdit) { - this.textEditNode.style.background = this.getBackground(node) + this.textEditNode.style.background = + this.mindMap.renderer.textEdit.getBackground(node) } this.textEditNode.style.minWidth = originWidth + paddingX * 2 + 'px' this.textEditNode.style.minHeight = originHeight + 'px' @@ -312,7 +311,7 @@ class RichText { this.textEditNode.style.background = openRealtimeRenderOnNodeTextEdit ? 'transparent' : this.node - ? this.getBackground(node) + ? this.mindMap.renderer.textEdit.getBackground(this.node) : '' this.textEditNode.style.boxShadow = openRealtimeRenderOnNodeTextEdit ? 'none' @@ -340,27 +339,6 @@ class RichText { targetNode.removeChild(this.textEditNode) } - // 获取编辑区域的背景填充 - getBackground(node) { - const gradientStyle = node.style.merge('gradientStyle') - // 当前使用的是渐变色背景 - if (gradientStyle) { - const startColor = node.style.merge('startColor') - const endColor = node.style.merge('endColor') - return `linear-gradient(to right, ${startColor}, ${endColor})` - } else { - // 单色背景 - const bgColor = node.style.merge('fillColor') - const color = node.style.merge('color') - // 默认使用节点的填充色,否则如果节点颜色是白色的话编辑时看不见 - return bgColor === 'transparent' - ? isWhite(color) - ? getVisibleColorFromTheme(this.mindMap.themeConfig) - : '#fff' - : bgColor - } - } - // 如果是非富文本的情况,需要手动应用文本样式 setTextStyleIfNotRichText(node) { let style = {