Feat：优化基础样式的设置，修改不影响大小的主题属性时不触发全量渲染

simple-mind-map/index.js

@@ -15,7 +15,7 @@ import {
   cssContent
 } from './src/constants/constant'
 import { SVG } from '@svgdotjs/svg.js'
-import { simpleDeepClone, getType } from './src/utils'
+import { simpleDeepClone, getType, getObjectChangedProps } from './src/utils'
 import defaultTheme, {
   checkIsNodeSizeIndependenceConfig
 } from './src/themes/default'
@@ -201,9 +201,11 @@ class MindMap {
 
   //  设置主题配置
   setThemeConfig(config) {
+    // 计算改变了的配置
+    const changedConfig = getObjectChangedProps(this.themeConfig, config)
     this.opt.themeConfig = config
     // 检查改变的是否是节点大小无关的主题属性
-    let res = checkIsNodeSizeIndependenceConfig(config)
+    let res = checkIsNodeSizeIndependenceConfig(changedConfig)
     this.render(null, res ? '' : CONSTANTS.CHANGE_THEME)
   }
 

simple-mind-map/src/themes/default.js

@@ -158,7 +158,8 @@ const nodeSizeIndependenceList = [
   'backgroundImage',
   'backgroundRepeat',
   'backgroundPosition',
-  'backgroundSize'
+  'backgroundSize',
+  'rootLineKeepSameInCurve'
 ]
 export const checkIsNodeSizeIndependenceConfig = (config) => {
   let keys = Object.keys(config)

simple-mind-map/src/utils/index.js

@@ -632,3 +632,28 @@ export const isMobile = () => {
     navigator.userAgent
   )
 }
+
+// 获取对象改变了的的属性
+export const getObjectChangedProps = (oldObject, newObject) => {
+  const res = {}
+  Object.keys(newObject).forEach((prop) => {
+    const oldVal = oldObject[prop]
+    const newVal = newObject[prop]
+    if (getType(oldVal) !== getType(newVal)) {
+      res[prop] = newVal
+      return
+    }
+    if (getType(oldVal) === 'Object') {
+      if (JSON.stringify(oldVal) !== JSON.stringify(newVal)) {
+        res[prop] = newVal
+        return
+      }
+    } else {
+      if (oldVal !== newVal) {
+        res[prop] = newVal
+        return
+      }
+    }
+  })
+  return res
+}