From 9af630e5786b5bc83b7f997cb22884dbf2cef039 Mon Sep 17 00:00:00 2001
From: lxr-cel <756422071@qq.com>
Date: Thu, 4 Jan 2024 22:21:53 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8A=82=E7=82=B9=E8=83=8C=E6=99=AF=E6=B8=90?=
 =?UTF-8?q?=E5=8F=98=E8=89=B2=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 simple-mind-map/src/core/render/node/Node.js  | 12 +++++++--
 simple-mind-map/src/core/render/node/Style.js | 25 ++++++++++++++++---
 simple-mind-map/src/themes/default.js         | 20 ++++++++++++---
 3 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/simple-mind-map/src/core/render/node/Node.js b/simple-mind-map/src/core/render/node/Node.js
index bbbf2e57..c7f5db15 100644
--- a/simple-mind-map/src/core/render/node/Node.js
+++ b/simple-mind-map/src/core/render/node/Node.js
@@ -1,6 +1,6 @@
 import Style from './Style'
 import Shape from './Shape'
-import { G, ForeignObject, Rect } from '@svgdotjs/svg.js'
+import { G, ForeignObject, Rect, Defs } from '@svgdotjs/svg.js'
 import nodeGeneralizationMethods from './nodeGeneralization'
 import nodeExpandBtnMethods from './nodeExpandBtn'
 import nodeCommandWrapsMethods from './nodeCommandWraps'
@@ -63,6 +63,8 @@ class Node {
     this.userList = []
     // 节点内容的容器
     this.group = null
+    this.defsNode = null // 节点静态元素
+    this.gradientNode = null // 节点渐变背景
     this.shapeNode = null // 节点形状节点
     this.hoverNode = null // 节点hover和激活的节点
     // 节点内容对象
@@ -289,11 +291,17 @@ class Node {
     let { paddingY } = this.getPaddingVale()
     const halfBorderWidth = this.getBorderWidth() / 2
     paddingY += this.shapePadding.paddingY + halfBorderWidth
+    // 节点静态元素
+    this.defsNode = new Defs()
+    // 节点渐变背景
+    this.gradientNode = this.style.createGradient()
+    this.defsNode.add(this.gradientNode)
+    this.group.add(this.defsNode)
     // 节点形状
     this.shapeNode = this.shapeInstance.createShape()
     this.shapeNode.addClass('smm-node-shape')
     this.shapeNode.translate(halfBorderWidth, halfBorderWidth)
-    this.style.shape(this.shapeNode)
+    this.style.shape(this.shapeNode, this.gradientNode.id())
     this.group.add(this.shapeNode)
     // 渲染一个隐藏的矩形区域，用来触发展开收起按钮的显示
     this.renderExpandBtnPlaceholderRect()
diff --git a/simple-mind-map/src/core/render/node/Style.js b/simple-mind-map/src/core/render/node/Style.js
index ecc190f7..b1dbf0bc 100644
--- a/simple-mind-map/src/core/render/node/Style.js
+++ b/simple-mind-map/src/core/render/node/Style.js
@@ -2,6 +2,7 @@ import {
   checkIsNodeStyleDataKey,
   generateColorByContent
 } from '../../../utils/index'
+import { Gradient } from '@svgdotjs/svg.js'
 
 const rootProp = ['paddingX', 'paddingY']
 const backgroundStyleProps = [
@@ -86,6 +87,14 @@ class Style {
     return this.merge(prop, root)
   }
 
+  createGradient() {
+    let gradient = new Gradient("linear")
+    gradient.id()
+    gradient.stop(0,this.merge('startColor'))
+    gradient.stop(1, this.merge('endColor'))
+    return gradient
+  }
+
   //  获取自身自定义样式
   getSelfStyle(prop) {
     return this.ctx.getData(prop)
@@ -98,10 +107,18 @@ class Style {
   }
 
   //   矩形外的其他形状
-  shape(node) {
-    node.fill({
-      color: this.merge('fillColor')
-    })
+  shape(node, uid) {
+    if (this.merge('gradientStyle')) {
+      node.fill('url(#' + uid + ')'
+      )
+    } else {
+      node.fill({
+        color: this.merge('fillColor')
+      })
+    }
+    // node.fill({
+    //   color: this.merge('fillColor')
+    // })
     // 节点使用横线样式，不需要渲染非激活状态的边框样式
     // if (
     //   !this.ctx.isRoot &&
diff --git a/simple-mind-map/src/themes/default.js b/simple-mind-map/src/themes/default.js
index 897a46d7..c4302a70 100644
--- a/simple-mind-map/src/themes/default.js
+++ b/simple-mind-map/src/themes/default.js
@@ -70,7 +70,10 @@ export default {
     borderWidth: 0,
     borderDasharray: 'none',
     borderRadius: 5,
-    textDecoration: 'none'
+    textDecoration: 'none',
+    gradientStyle: true,
+    startColor: '#549688',
+    endColor: '#fff',
   },
   // 二级节点样式
   second: {
@@ -88,7 +91,10 @@ export default {
     borderWidth: 1,
     borderDasharray: 'none',
     borderRadius: 5,
-    textDecoration: 'none'
+    textDecoration: 'none',
+    gradientStyle: false,
+    startColor: '#549688',
+    endColor: '#fff',
   },
   // 三级及以下节点样式
   node: {
@@ -106,7 +112,10 @@ export default {
     borderWidth: 0,
     borderRadius: 5,
     borderDasharray: 'none',
-    textDecoration: 'none'
+    textDecoration: 'none',
+    gradientStyle: false,
+    startColor: '#549688',
+    endColor: '#fff',
   },
   // 概要节点样式
   generalization: {
@@ -124,7 +133,10 @@ export default {
     borderWidth: 1,
     borderDasharray: 'none',
     borderRadius: 5,
-    textDecoration: 'none'
+    textDecoration: 'none',
+    gradientStyle: false,
+    startColor: '#549688',
+    endColor: '#fff',
   }
 }