From c57361a3609297b5e85a7ad62bd794eb7c8a7cb7 Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Sun, 30 Jul 2023 21:53:32 +0800 Subject: [PATCH 1/2] =?UTF-8?q?Fix:=E4=BF=AE=E5=A4=8D=E8=8A=82=E7=82=B9?= =?UTF-8?q?=E6=96=87=E5=AD=97=E4=B8=BA=E7=99=BD=E8=89=B2=E6=97=B6=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E7=9A=84=E6=97=B6=E5=80=99=E7=9C=8B=E4=B8=8D=E8=A7=81?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/package.json | 2 +- simple-mind-map/src/plugins/MiniMap.js | 16 ++-------------- simple-mind-map/src/plugins/RichText.js | 5 +++-- simple-mind-map/src/utils/index.js | 12 ++++++++++++ web/src/pages/Doc/en/changelog/index.md | 4 ++++ web/src/pages/Doc/en/changelog/index.vue | 2 ++ web/src/pages/Doc/zh/changelog/index.md | 4 ++++ web/src/pages/Doc/zh/changelog/index.vue | 2 ++ 8 files changed, 30 insertions(+), 17 deletions(-) diff --git a/simple-mind-map/package.json b/simple-mind-map/package.json index ccc51ff0..8a58a94a 100644 --- a/simple-mind-map/package.json +++ b/simple-mind-map/package.json @@ -1,6 +1,6 @@ { "name": "simple-mind-map", - "version": "0.6.11", + "version": "0.6.11-fix.1", "description": "一个简单的web在线思维导图", "authors": [ { diff --git a/simple-mind-map/src/plugins/MiniMap.js b/simple-mind-map/src/plugins/MiniMap.js index ed4a99d3..a4033584 100644 --- a/simple-mind-map/src/plugins/MiniMap.js +++ b/simple-mind-map/src/plugins/MiniMap.js @@ -1,4 +1,4 @@ -import { isWhite, isTransparent } from '../utils/index' +import { isWhite, isTransparent, getVisibleColorFromTheme } from '../utils/index' // 小地图插件 class MiniMap { @@ -84,7 +84,7 @@ class MiniMap { let shape = svg.findOne('.smm-node-shape') let fill = shape.attr('fill') if (isWhite(fill) || isTransparent(fill)) { - shape.attr('fill', this.getDefaultFill()) + shape.attr('fill', getVisibleColorFromTheme(this.mindMap.themeConfig)) } svg.clear() svg.add(shape) @@ -98,18 +98,6 @@ class MiniMap { } } - // 计算默认的填充颜色 - getDefaultFill() { - let { lineColor, root, second, node } = this.mindMap.themeConfig - let list = [lineColor, root.fillColor, root.color, second.fillColor, second.color, node.fillColor, node.color, root.borderColor, second.borderColor, node.borderColor] - for(let i = 0; i < list.length; i++) { - let color = list[i] - if (!isTransparent(color) && !isWhite(color)) { - return color - } - } - } - // 小地图鼠标按下事件 onMousedown(e) { this.isMousedown = true diff --git a/simple-mind-map/src/plugins/RichText.js b/simple-mind-map/src/plugins/RichText.js index 2652428f..ef74be49 100644 --- a/simple-mind-map/src/plugins/RichText.js +++ b/simple-mind-map/src/plugins/RichText.js @@ -1,7 +1,7 @@ import Quill from 'quill' import 'quill/dist/quill.snow.css' import html2canvas from 'html2canvas' -import { walk, getTextFromHtml } from '../utils' +import { walk, getTextFromHtml, isWhite, getVisibleColorFromTheme } from '../utils' import { CONSTANTS } from '../constants/constant' let extended = false @@ -176,11 +176,12 @@ class RichText { } // 使用节点的填充色，否则如果节点颜色是白色的话编辑时看不见 let bgColor = node.style.merge('fillColor') + let color = node.style.merge('color') this.textEditNode.style.marginLeft = `-${paddingX * scaleX}px` this.textEditNode.style.marginTop = `-${paddingY * scaleY}px` this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex this.textEditNode.style.backgroundColor = - bgColor === 'transparent' ? '#fff' : bgColor + bgColor === 'transparent' ? isWhite(color) ? getVisibleColorFromTheme(this.mindMap.themeConfig) : '#fff' : bgColor this.textEditNode.style.minWidth = originWidth + paddingX * 2 + 'px' this.textEditNode.style.minHeight = originHeight + 'px' this.textEditNode.style.left = rect.left + 'px' diff --git a/simple-mind-map/src/utils/index.js b/simple-mind-map/src/utils/index.js index 68cc323a..2be4cc22 100644 --- a/simple-mind-map/src/utils/index.js +++ b/simple-mind-map/src/utils/index.js @@ -527,4 +527,16 @@ export const isWhite = (color) => { export const isTransparent = (color) => { color = String(color).replaceAll(/\s+/g, '') return ['', 'transparent'].includes(color) || /rgba\(\d+,\d+,\d+,0\)/.test(color) +} + +// 从当前主题里获取一个非透明非白色的颜色 +export const getVisibleColorFromTheme = (themeConfig) => { + let { lineColor, root, second, node } = themeConfig + let list = [lineColor, root.fillColor, root.color, second.fillColor, second.color, node.fillColor, node.color, root.borderColor, second.borderColor, node.borderColor] + for(let i = 0; i < list.length; i++) { + let color = list[i] + if (!isTransparent(color) && !isWhite(color)) { + return color + } + } } \ No newline at end of file diff --git a/web/src/pages/Doc/en/changelog/index.md b/web/src/pages/Doc/en/changelog/index.md index 849ba902..8de9b46f 100644 --- a/web/src/pages/Doc/en/changelog/index.md +++ b/web/src/pages/Doc/en/changelog/index.md @@ -1,5 +1,9 @@ # Changelog +## 0.6.11-fix.1 + +Fix: 1.Fixed the issue of invisible editing when node text is white. + ## 0.6.11 New: 1.Optimize the mini map, remove node content within the mini map, and optimize performance. diff --git a/web/src/pages/Doc/en/changelog/index.vue b/web/src/pages/Doc/en/changelog/index.vue index c61d8f73..1b919758 100644 --- a/web/src/pages/Doc/en/changelog/index.vue +++ b/web/src/pages/Doc/en/changelog/index.vue @@ -1,6 +1,8 @@