From c2125b07ca49b290e74cdbf38ffe1f998e0dbc20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A1=97=E8=A7=92=E5=B0=8F=E6=9E=97?= <1013335014@qq.com> Date: Thu, 17 Oct 2024 17:54:41 +0800 Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A=E9=9D=9E=E5=AF=8C=E6=96=87?= =?UTF-8?q?=E6=9C=AC=E6=A8=A1=E5=BC=8F=E6=96=87=E6=9C=AC=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E6=A1=86=E7=9A=84=E6=A0=B7=E5=BC=8F=E5=90=8C=E6=AD=A5=E8=8A=82?= =?UTF-8?q?=E7=82=B9=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/src/core/render/TextEdit.js | 38 ++++++++++++++++--- simple-mind-map/src/core/render/node/Style.js | 2 + simple-mind-map/src/plugins/RichText.js | 28 ++------------ 3 files changed, 38 insertions(+), 30 deletions(-) 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 = {