Merge pull request #510 from lxr-cel/main

Feature: 节点渐变色背景功能实现

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和激活的节点
     // 节点内容对象
@@ -299,11 +301,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()

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 = [
@@ -89,6 +90,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)
@@ -101,10 +110,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 &&

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

@@ -72,7 +72,10 @@ export default {
     borderWidth: 0,
     borderDasharray: 'none',
     borderRadius: 5,
-    textDecoration: 'none'
+    textDecoration: 'none',
+    gradientStyle: false,
+    startColor: '#549688',
+    endColor: '#fff',
   },
   // 二级节点样式
   second: {
@@ -90,7 +93,10 @@ export default {
     borderWidth: 1,
     borderDasharray: 'none',
     borderRadius: 5,
-    textDecoration: 'none'
+    textDecoration: 'none',
+    gradientStyle: false,
+    startColor: '#549688',
+    endColor: '#fff',
   },
   // 三级及以下节点样式
   node: {
@@ -108,7 +114,10 @@ export default {
     borderWidth: 0,
     borderRadius: 5,
     borderDasharray: 'none',
-    textDecoration: 'none'
+    textDecoration: 'none',
+    gradientStyle: false,
+    startColor: '#549688',
+    endColor: '#fff',
   },
   // 概要节点样式
   generalization: {
@@ -126,7 +135,10 @@ export default {
     borderWidth: 1,
     borderDasharray: 'none',
     borderRadius: 5,
-    textDecoration: 'none'
+    textDecoration: 'none',
+    gradientStyle: false,
+    startColor: '#549688',
+    endColor: '#fff',
   }
 }
 

web/src/lang/zh_cn.js

@@ -200,7 +200,10 @@ export default {
     line: '线条',
     nodePadding: '节点内边距',
     horizontal: '水平',
-    vertical: '垂直'
+    vertical: '垂直',
+    gradientStyle: '渐变',
+    startColor: '起始',
+    endColor: '结束'
   },
   theme: {
     title: '主题',

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

@@ -249,6 +249,48 @@
             </el-popover>
           </div>
         </div>
+        <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>
+          </div>
+          <div class="rowItem">
+            <span class="name">{{ $t('style.startColor') }}</span>
+            <span
+              class="block"
+              v-popover:popover6
+              :style="{ backgroundColor: style.startColor }"
+            ></span>
+            <el-popover ref="popover6" placement="bottom" trigger="hover">
+              <Color
+                :color="style.startColor"
+                @change="changeStartColor"
+              ></Color>
+            </el-popover>
+          </div>
+          <div class="rowItem">
+            <span class="name">{{ $t('style.endColor') }}</span>
+            <span
+              class="block"
+              v-popover:popover7
+              :style="{ backgroundColor: style.endColor }"
+            ></span>
+            <el-popover ref="popover7" placement="bottom" trigger="hover">
+              <Color
+                :color="style.endColor"
+                @change="changeEndColor"
+              ></Color>
+            </el-popover>
+          </div>
+        </div>
         <!-- 形状 -->
         <div class="title">{{ $t('style.shape') }}</div>
         <div class="row">
@@ -443,7 +485,10 @@ export default {
         borderRadius: '',
         lineColor: '',
         lineDasharray: '',
-        lineWidth: ''
+        lineWidth: '',
+        gradientStyle: false,
+        startColor: '',
+        endColor: ''
       }
     }
   },
@@ -518,7 +563,10 @@ export default {
         'borderRadius',
         'lineColor',
         'lineDasharray',
-        'lineWidth'
+        'lineWidth',
+        'gradientStyle',
+        'startColor',
+        'endColor'
       ].forEach(item => {
         this.style[item] = this.activeNodes[0].getStyle(item, false)
       })
@@ -601,6 +649,40 @@ export default {
     changeFillColor(color) {
       this.style.fillColor = color
       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.update('startColor')
+    },
+
+    /**
+     * @Author: lxr_cel
+     * @Date: 2024-01-02 10:10:34
+     * @Desc: 切换渐变结束颜色
+     */
+    changeEndColor(color) {
+      this.style.endColor = color;
+      this.update('endColor')
     }
   }
 }