Feat：优化节点渐变背景逻辑

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, Defs } from '@svgdotjs/svg.js'
+import { G, ForeignObject, Rect } from '@svgdotjs/svg.js'
 import nodeGeneralizationMethods from './nodeGeneralization'
 import nodeExpandBtnMethods from './nodeExpandBtn'
 import nodeCommandWrapsMethods from './nodeCommandWraps'
@@ -63,8 +63,6 @@ class Node {
     this.userList = []
     // 节点内容的容器
     this.group = null
-    this.defsNode = null // 节点静态元素
-    this.gradientNode = null // 节点渐变背景
     this.shapeNode = null // 节点形状节点
     this.hoverNode = null // 节点hover和激活的节点
     // 节点内容对象
@@ -301,17 +299,11 @@ 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.gradientNode.id())
+    this.style.shape(this.shapeNode)
     this.group.add(this.shapeNode)
     // 渲染一个隐藏的矩形区域，用来触发展开收起按钮的显示
     this.renderExpandBtnPlaceholderRect()
@@ -369,7 +361,9 @@ class Node {
     if (this._textData) {
       this._textData.node.attr('data-offsetx', textContentOffsetX)
       // 修复safari浏览器节点存在图标时文字位置不正确的问题
-      ;(this._textData.nodeContent || this._textData.node).x(textContentOffsetX).y(0)
+      ;(this._textData.nodeContent || this._textData.node)
+        .x(textContentOffsetX)
+        .y(0)
       textContentNested.add(this._textData.node)
       textContentOffsetX += this._textData.width + textContentItemMargin
     }
@@ -719,6 +713,7 @@ class Node {
     if (this.parent) {
       this.parent.removeLine()
     }
+    this.style.onRemove()
   }
 
   //  隐藏节点

simple-mind-map/src/core/render/node/Style.js

@@ -59,6 +59,8 @@ class Style {
     // 箭头图标
     this._markerPath = null
     this._marker = null
+    // 渐变背景
+    this._gradient = null
   }
 
   //  合并样式
@@ -90,14 +92,6 @@ 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)
@@ -109,19 +103,22 @@ class Style {
     node.radius(this.merge('borderRadius'))
   }
 
-  //   矩形外的其他形状
-  shape(node, uid) {
+  // 形状
+  shape(node) {
     if (this.merge('gradientStyle')) {
-      node.fill('url(#' + uid + ')'
-      )
+      if (!this._gradient) {
+        this._gradient = this.ctx.nodeDraw.gradient('linear')
+      }
+      this._gradient.update(add => {
+        add.stop(0, this.merge('startColor'))
+        add.stop(1, this.merge('endColor'))
+      })
+      node.fill(this._gradient)
     } else {
       node.fill({
         color: this.merge('fillColor')
       })
     }
-    // node.fill({
-    //   color: this.merge('fillColor')
-    // })
     // 节点使用横线样式，不需要渲染非激活状态的边框样式
     // if (
     //   !this.ctx.isRoot &&
@@ -290,6 +287,22 @@ class Style {
       color: hoverRectColor
     })
   }
+
+  // 所属节点被删除时的操作
+  onRemove() {
+    if (this._marker) {
+      this._marker.remove()
+      this._marker = null
+    }
+    if (this._markerPath) {
+      this._markerPath.remove()
+      this._markerPath = null
+    }
+    if (this._gradient) {
+      this._gradient.remove()
+      this._gradient = null
+    }
+  }
 }
 
 Style.cacheStyle = null

simple-mind-map/src/core/render/node/nodeGeneralization.js

@@ -131,6 +131,7 @@ function updateGeneralizationData() {
 function removeGeneralization() {
   if (this.isGeneralization) return
   this._generalizationList.forEach(item => {
+    item.generalizationNode.style.onRemove()
     if (item.generalizationLine) {
       item.generalizationLine.remove()
       item.generalizationLine = null

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

@@ -75,7 +75,7 @@ export default {
     textDecoration: 'none',
     gradientStyle: false,
     startColor: '#549688',
-    endColor: '#fff',
+    endColor: '#fff'
   },
   // 二级节点样式
   second: {
@@ -96,7 +96,7 @@ export default {
     textDecoration: 'none',
     gradientStyle: false,
     startColor: '#549688',
-    endColor: '#fff',
+    endColor: '#fff'
   },
   // 三级及以下节点样式
   node: {
@@ -117,7 +117,7 @@ export default {
     textDecoration: 'none',
     gradientStyle: false,
     startColor: '#549688',
-    endColor: '#fff',
+    endColor: '#fff'
   },
   // 概要节点样式
   generalization: {
@@ -138,7 +138,7 @@ export default {
     textDecoration: 'none',
     gradientStyle: false,
     startColor: '#549688',
-    endColor: '#fff',
+    endColor: '#fff'
   }
 }
 
@@ -174,7 +174,10 @@ const nodeSizeIndependenceList = [
   'backgroundPosition',
   'backgroundSize',
   'rootLineKeepSameInCurve',
-  'showLineMarker'
+  'showLineMarker',
+  'gradientStyle',
+  'startColor',
+  'endColor'
 ]
 export const checkIsNodeSizeIndependenceConfig = config => {
   let keys = Object.keys(config)

web/src/lang/en_us.js

@@ -202,7 +202,10 @@ export default {
     line: 'Line',
     nodePadding: 'Node padding',
     horizontal: 'Horizontal',
-    vertical: 'Vertical'
+    vertical: 'Vertical',
+    gradientStyle: 'Gradient',
+    startColor: 'Start',
+    endColor: 'End'
   },
   theme: {
     title: 'Theme',

web/src/pages/Edit/components/Style.vue

@@ -252,15 +252,10 @@
         <div class="row">
           <div class="rowItem">
             <span class="name">{{ $t('style.gradientStyle') }}</span>
-            <div
-                class="styleBtn"
-                :class="{
-                  actived: style.gradientStyle === true
-                }"
-                @click="toggleGradientStyle"
-              >
-                {{style.gradientStyle ? '渐变' : '单一'}}
-              </div>
+            <el-checkbox
+              v-model="style.gradientStyle"
+              @change="update('gradientStyle')"
+            ></el-checkbox>
           </div>
           <div class="rowItem">
             <span class="name">{{ $t('style.startColor') }}</span>
@@ -284,10 +279,7 @@
               :style="{ backgroundColor: style.endColor }"
             ></span>
             <el-popover ref="popover7" placement="bottom" trigger="hover">
-              <Color
-                :color="style.endColor"
-                @change="changeEndColor"
-              ></Color>
+              <Color :color="style.endColor" @change="changeEndColor"></Color>
             </el-popover>
           </div>
         </div>
@@ -535,7 +527,7 @@ export default {
         this.initNodeStyle()
       })
     },
-    
+
     /**
      * @Author: 王林
      * @Date: 2021-05-05 09:48:52
@@ -651,27 +643,13 @@ export default {
       this.update('fillColor')
     },
 
-    /**
-     * @Author: lxr_cel
-     * @Date: 2024-01-02 10:28:17
-     * @Desc: 切换渐变背景
-     */
-    toggleGradientStyle() {
-      if (this.style.gradientStyle === false) {
-        this.style.gradientStyle = true
-      } else {
-        this.style.gradientStyle = false
-      }
-      this.update('gradientStyle')
-    },
-
     /**
      * @Author: lxr_cel
      * @Date: 2024-01-02 11:09:27
      * @Desc: 切换渐变开始颜色
      */
     changeStartColor(color) {
-      this.style.startColor = color;
+      this.style.startColor = color
       this.update('startColor')
     },
 
@@ -681,7 +659,7 @@ export default {
      * @Desc: 切换渐变结束颜色
      */
     changeEndColor(color) {
-      this.style.endColor = color;
+      this.style.endColor = color
       this.update('endColor')
     }
   }