diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js index 71510f26..dc89d570 100644 --- a/simple-mind-map/src/constants/defaultOptions.js +++ b/simple-mind-map/src/constants/defaultOptions.js @@ -174,11 +174,6 @@ export const defaultOpt = { addHistoryTime: 100, // 是否禁止拖动画布 isDisableDrag: false, - // 鼠标移入概要高亮所属节点时的高亮框样式 - highlightNodeBoxStyle: { - stroke: 'rgb(94, 200, 248)', - fill: 'transparent' - }, // 创建新节点时的行为 /* DEFAULT :默认会激活新创建的节点,并且进入编辑模式。如果同时创建了多个新节点,那么只会激活而不会进入编辑模式 diff --git a/simple-mind-map/src/core/render/Render.js b/simple-mind-map/src/core/render/Render.js index 55e7f861..dd9dbf9a 100644 --- a/simple-mind-map/src/core/render/Render.js +++ b/simple-mind-map/src/core/render/Render.js @@ -99,6 +99,7 @@ class Render { this.currentBeingPasteType = '' // 节点高亮框 this.highlightBoxNode = null + this.highlightBoxNodeStyle = null // 上一次节点激活数据 this.lastActiveNode = null this.lastActiveNodeList = [] @@ -1624,7 +1625,7 @@ class Render { } } _walk(this.renderTree, !uid) - + this.mindMap.render() } @@ -2061,19 +2062,39 @@ class Render { } // 高亮节点或子节点 - highlightNode(node, range) { + highlightNode(node, range, style) { // 如果当前正在渲染,那么不进行高亮,因为节点位置可能不正确 if (this.isRendering) return - const { highlightNodeBoxStyle = {} } = this.mindMap.opt + style = { + stroke: 'rgb(94, 200, 248)', + fill: 'transparent', + ...(style || {}) + } + // 尚未创建 if (!this.highlightBoxNode) { this.highlightBoxNode = new Polygon() .stroke({ - color: highlightNodeBoxStyle.stroke || 'transparent' + color: style.stroke || 'transparent' }) .fill({ - color: highlightNodeBoxStyle.fill || 'transparent' + color: style.fill || 'transparent' }) + } else if (this.highlightBoxNodeStyle) { + // 样式更新了 + if ( + this.highlightBoxNodeStyle.stroke !== style.stroke || + this.highlightBoxNodeStyle.fill !== style.fill + ) { + this.highlightBoxNode + .stroke({ + color: style.stroke || 'transparent' + }) + .fill({ + color: style.fill || 'transparent' + }) + } } + this.highlightBoxNodeStyle = { ...style } let minx = Infinity, miny = Infinity, maxx = -Infinity, diff --git a/simple-mind-map/src/core/render/node/nodeGeneralization.js b/simple-mind-map/src/core/render/node/nodeGeneralization.js index 34e6908e..3bc735d5 100644 --- a/simple-mind-map/src/core/render/node/nodeGeneralization.js +++ b/simple-mind-map/src/core/render/node/nodeGeneralization.js @@ -186,15 +186,29 @@ function handleGeneralizationMouseenter() { const list = belongNode.formatGetGeneralization() const index = belongNode.getGeneralizationNodeIndex(this) const generalizationData = list[index] + // 如果主题中设置了hoverRectColor颜色,那么使用该颜色 + // 否则使用hoverRectColor实例化选项的颜色 + // 兜底使用highlightNode方法的默认颜色 + const hoverRectColor = this.getStyle('hoverRectColor') + const color = hoverRectColor || this.mindMap.opt.hoverRectColor + const style = color + ? { + stroke: color + } + : null // 区间概要,框子节点 if ( Array.isArray(generalizationData.range) && generalizationData.range.length > 0 ) { - this.mindMap.renderer.highlightNode(belongNode, generalizationData.range) + this.mindMap.renderer.highlightNode( + belongNode, + generalizationData.range, + style + ) } else { // 否则框自己 - this.mindMap.renderer.highlightNode(belongNode) + this.mindMap.renderer.highlightNode(belongNode, null, style) } }