diff --git a/simple-mind-map/src/core/render/node/MindMapNode.js b/simple-mind-map/src/core/render/node/MindMapNode.js index b1654cd3..ad8dafe8 100644 --- a/simple-mind-map/src/core/render/node/MindMapNode.js +++ b/simple-mind-map/src/core/render/node/MindMapNode.js @@ -1180,10 +1180,9 @@ class MindMapNode { // 获取padding值 getPaddingVale() { - let { isActive } = this.getData() return { - paddingX: this.getStyle('paddingX', true, isActive), - paddingY: this.getStyle('paddingY', true, isActive) + paddingX: this.getStyle('paddingX'), + paddingY: this.getStyle('paddingY') } } diff --git a/simple-mind-map/src/core/render/node/Style.js b/simple-mind-map/src/core/render/node/Style.js index 71a0a75d..9f75a8bd 100644 --- a/simple-mind-map/src/core/render/node/Style.js +++ b/simple-mind-map/src/core/render/node/Style.js @@ -1,6 +1,5 @@ import { checkIsNodeStyleDataKey } from '../../../utils/index' -const rootProp = ['paddingX', 'paddingY'] const backgroundStyleProps = [ 'backgroundColor', 'backgroundImage', @@ -62,11 +61,10 @@ class Style { // 合并样式 merge(prop, root) { let themeConfig = this.ctx.mindMap.themeConfig - // 三级及以下节点 - let defaultConfig = themeConfig.node + let defaultConfig = null let useRoot = false - if (root || rootProp.includes(prop)) { - // 直接使用最外层样式 + if (root) { + // 使用最外层样式 useRoot = true defaultConfig = themeConfig } else if (this.ctx.isGeneralization) { @@ -78,12 +76,21 @@ class Style { } else if (this.ctx.layerIndex === 1) { // 二级节点 defaultConfig = themeConfig.second + } else { + // 三级及以下节点 + defaultConfig = themeConfig.node } + let value = '' // 优先使用节点本身的样式 - const value = - this.getSelfStyle(prop) !== undefined - ? this.getSelfStyle(prop) - : defaultConfig[prop] + if (this.getSelfStyle(prop) !== undefined) { + value = this.getSelfStyle(prop) + } else if (defaultConfig[prop] !== undefined) { + // 否则使用对应层级的样式 + value = defaultConfig[prop] + } else { + // 否则使用最外层样式 + value = themeConfig[prop] + } if (!useRoot) { this.addToEffectiveStyles({ [prop]: value @@ -348,7 +355,8 @@ class Style { // hover和激活节点 hoverNode(node) { - const hoverRectColor = this.merge('hoverRectColor') || this.ctx.mindMap.opt.hoverRectColor + const hoverRectColor = + this.merge('hoverRectColor') || this.ctx.mindMap.opt.hoverRectColor const hoverRectRadius = this.merge('hoverRectRadius') node.radius(hoverRectRadius).fill('none').stroke({ color: hoverRectColor diff --git a/simple-mind-map/src/themes/default.js b/simple-mind-map/src/themes/default.js index acaa4133..b99ccf21 100644 --- a/simple-mind-map/src/themes/default.js +++ b/simple-mind-map/src/themes/default.js @@ -90,6 +90,8 @@ export default { hoverRectColor: '', // 点鼠标hover和激活时显示的矩形边框的圆角大小 hoverRectRadius: 5 + // paddingX: 15, + // paddingY: 5 }, // 二级节点样式 second: { @@ -116,6 +118,8 @@ export default { lineMarkerDir: 'end', hoverRectColor: '', hoverRectRadius: 5 + // paddingX: 15, + // paddingY: 5 }, // 三级及以下节点样式 node: { @@ -142,6 +146,8 @@ export default { lineMarkerDir: 'end', hoverRectColor: '', hoverRectRadius: 5 + // paddingX: 15, + // paddingY: 5 }, // 概要节点样式 generalization: { @@ -167,6 +173,8 @@ export default { endDir: [1, 0], hoverRectColor: '', hoverRectRadius: 5 + // paddingX: 15, + // paddingY: 5 } } @@ -200,7 +208,8 @@ const nodeSizeIndependenceList = [ 'endColor', 'startDir', 'endDir', - 'hoverRectColor' + 'hoverRectColor', + 'hoverRectRadius' ] export const checkIsNodeSizeIndependenceConfig = config => { let keys = Object.keys(config)