Fix：修复自定义主题节点渐变色方向无效的问题

2026-02-17 22:08:25 +08:00 · 2024-09-20 09:32:12 +08:00
parent 29ddbba9b9
commit b4fdcd81b0
33 changed files with 76 additions and 65 deletions
--- a/simple-mind-map/index.js
+++ b/simple-mind-map/index.js
@@ -19,7 +19,8 @@ import {
  getObjectChangedProps,
  isUndef,
  handleGetSvgDataExtraContent,
-  getNodeTreeBoundingRect
+  getNodeTreeBoundingRect,
+  mergeTheme
 } from './src/utils'
 import defaultTheme, {
  checkIsNodeSizeIndependenceConfig
@@ -252,7 +253,7 @@ class MindMap {
  //  设置主题
  initTheme() {
    // 合并主题配置
-    this.themeConfig = merge(theme[this.opt.theme], this.opt.themeConfig)
+    this.themeConfig = mergeTheme(theme[this.opt.theme], this.opt.themeConfig)
    // 设置背景样式
    Style.setBackgroundStyle(this.el, this.themeConfig)
  }
@@ -638,7 +639,7 @@ MindMap.defineTheme = (name, config = {}) => {
  if (theme[name]) {
    return new Error('该主题名称已存在')
  }
-  theme[name] = merge(defaultTheme, config)
+  theme[name] = mergeTheme(defaultTheme, config)
 }

 export default MindMap
--- a/simple-mind-map/src/themes/autumn.js
+++ b/simple-mind-map/src/themes/autumn.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 // 秋天
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 背景颜色
  backgroundColor: '#fff2df',
  // 连线的颜色
--- a/simple-mind-map/src/themes/avocado.js
+++ b/simple-mind-map/src/themes/avocado.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 // 牛油果
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 背景颜色
  backgroundColor: '#e6f1de',
  // 连线的颜色
--- a/simple-mind-map/src/themes/blackGold.js
+++ b/simple-mind-map/src/themes/blackGold.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 // 黑金
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 背景颜色
  backgroundColor: 'rgb(18, 20, 20)',
  // 连线的颜色
--- a/simple-mind-map/src/themes/blackHumour.js
+++ b/simple-mind-map/src/themes/blackHumour.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 // 黑色幽默
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 背景颜色
  backgroundColor: 'rgb(27, 31, 34)',
  // 连线的颜色
--- a/simple-mind-map/src/themes/blueSky.js
+++ b/simple-mind-map/src/themes/blueSky.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 //  天空蓝
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 连线的颜色
  lineColor: 'rgb(115, 161, 191)',
  // 背景颜色
--- a/simple-mind-map/src/themes/brainImpairedPink.js
+++ b/simple-mind-map/src/themes/brainImpairedPink.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 //  脑残粉
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 连线的颜色
  lineColor: 'rgb(191, 115, 148)',
  // 背景颜色
--- a/simple-mind-map/src/themes/classic.js
+++ b/simple-mind-map/src/themes/classic.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 //  脑图经典
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 连线的颜色
  lineColor: '#fff',
  // 连线的粗细
--- a/simple-mind-map/src/themes/classic2.js
+++ b/simple-mind-map/src/themes/classic2.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 //  经典2
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 连线的颜色
  lineColor: 'rgb(51, 51, 51)',
  // 连线的粗细
--- a/simple-mind-map/src/themes/classic3.js
+++ b/simple-mind-map/src/themes/classic3.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 //  经典3
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 连线的颜色
  lineColor: 'rgb(94, 202, 110)',
  // 连线的粗细
--- a/simple-mind-map/src/themes/classic4.js
+++ b/simple-mind-map/src/themes/classic4.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 //  经典4
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 连线的颜色
  lineColor: 'rgb(30, 53, 86)',
  // 连线的粗细
--- a/simple-mind-map/src/themes/classicBlue.js
+++ b/simple-mind-map/src/themes/classicBlue.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 //  经典蓝
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 连线的颜色
  lineColor: 'rgb(51, 51, 51)',
  // 连线的粗细
--- a/simple-mind-map/src/themes/classicGreen.js
+++ b/simple-mind-map/src/themes/classicGreen.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 //  经典绿
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 连线的颜色
  lineColor: 'rgb(123, 199, 120)',
  // 背景颜色
--- a/simple-mind-map/src/themes/coffee.js
+++ b/simple-mind-map/src/themes/coffee.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 // 咖啡
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 连线的颜色
  lineColor: 'rgb(173, 123, 91)',
  lineWidth: 4,
--- a/simple-mind-map/src/themes/courseGreen.js
+++ b/simple-mind-map/src/themes/courseGreen.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 // 课程绿
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 连线的颜色
  lineColor: 'rgb(113, 195, 169)',
  lineWidth: 3,
--- a/simple-mind-map/src/themes/dark.js
+++ b/simple-mind-map/src/themes/dark.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 //  暗色
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 连线的颜色
  lineColor: 'rgb(17, 68, 23)',
  // 连线的粗细
--- a/simple-mind-map/src/themes/dark2.js
+++ b/simple-mind-map/src/themes/dark2.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 //  暗色2
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 连线的颜色
  lineColor: 'rgb(75, 81, 78)',
  lineWidth: 3,
--- a/simple-mind-map/src/themes/earthYellow.js
+++ b/simple-mind-map/src/themes/earthYellow.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 //  泥土黄
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 连线的颜色
  lineColor: 'rgb(191, 147, 115)',
  // 背景颜色
--- a/simple-mind-map/src/themes/freshGreen.js
+++ b/simple-mind-map/src/themes/freshGreen.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 //  清新绿
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 连线的颜色
  lineColor: '#333',
  // 背景颜色
--- a/simple-mind-map/src/themes/freshRed.js
+++ b/simple-mind-map/src/themes/freshRed.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 //  清新红
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 连线的颜色
  lineColor: 'rgb(191, 115, 115)',
  // 背景颜色
--- a/simple-mind-map/src/themes/gold.js
+++ b/simple-mind-map/src/themes/gold.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 //  金色vip
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 连线的颜色
  lineColor: 'rgb(51, 56, 62)',
  lineWidth: 3,
--- a/simple-mind-map/src/themes/greenLeaf.js
+++ b/simple-mind-map/src/themes/greenLeaf.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 //  绿叶
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 连线的颜色
  lineColor: 'rgb(40, 193, 84)',
  lineWidth: 3,
--- a/simple-mind-map/src/themes/lateNightOffice.js
+++ b/simple-mind-map/src/themes/lateNightOffice.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 // 深夜办公室
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 背景颜色
  backgroundColor: 'rgb(32, 37, 49)',
  // 连线的颜色
--- a/simple-mind-map/src/themes/minions.js
+++ b/simple-mind-map/src/themes/minions.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 //  小黄人
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 连线的颜色
  lineColor: 'rgb(51, 51, 51)',
  lineWidth: 3,
--- a/simple-mind-map/src/themes/mint.js
+++ b/simple-mind-map/src/themes/mint.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 //  薄荷
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 连线的颜色
  lineColor: 'rgb(104, 204, 202)',
  lineWidth: 3,
--- a/simple-mind-map/src/themes/orangeJuice.js
+++ b/simple-mind-map/src/themes/orangeJuice.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 // 橙汁
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 背景颜色
  backgroundColor: '#070616',
  // 连线的颜色
--- a/simple-mind-map/src/themes/pinkGrape.js
+++ b/simple-mind-map/src/themes/pinkGrape.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 //  粉红葡萄
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 连线的颜色
  lineColor: 'rgb(166, 101, 106)',
  lineWidth: 3,
--- a/simple-mind-map/src/themes/redSpirit.js
+++ b/simple-mind-map/src/themes/redSpirit.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 // 红色精神
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 背景颜色
  backgroundColor: 'rgb(255, 238, 228)',
  // 连线的颜色
--- a/simple-mind-map/src/themes/romanticPurple.js
+++ b/simple-mind-map/src/themes/romanticPurple.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 //  浪漫紫
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 连线的颜色
  lineColor: 'rgb(123, 115, 191)',
  // 背景颜色
--- a/simple-mind-map/src/themes/simpleBlack.js
+++ b/simple-mind-map/src/themes/simpleBlack.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 // 简约黑
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 连线的颜色
  lineColor: 'rgb(34, 34, 34)',
  lineWidth: 4,
--- a/simple-mind-map/src/themes/skyGreen.js
+++ b/simple-mind-map/src/themes/skyGreen.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 //  天清绿
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 连线的颜色
  lineColor: '#fff',
  lineWidth: 3,
--- a/simple-mind-map/src/themes/vitalityOrange.js
+++ b/simple-mind-map/src/themes/vitalityOrange.js
@@ -1,8 +1,8 @@
 import defaultTheme from './default'
-import merge from 'deepmerge'
+import { mergeTheme } from '../utils'

 //  活力橙
-export default merge(defaultTheme, {
+export default mergeTheme(defaultTheme, {
  // 连线的颜色
  lineColor: 'rgb(254, 146, 0)',
  lineWidth: 3,
--- a/simple-mind-map/src/utils/index.js
+++ b/simple-mind-map/src/utils/index.js
@@ -5,6 +5,7 @@ import {
 } from '../constants/constant'
 import MersenneTwister from './mersenneTwister'
 import { ForeignObject } from '@svgdotjs/svg.js'
+import merge from 'deepmerge'

 //  深度优先遍历树
 export const walk = (
@@ -1610,3 +1611,12 @@ export const sortNodeList = nodeList => {
  })
  return nodeList
 }
+
+// 合并主题配置
+export const mergeTheme = (dest, source) => {
+  return merge(dest, source, {
+    arrayMerge: (destinationArray, sourceArray) => {
+      return sourceArray
+    }
+  })
+}