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 1/4] =?UTF-8?q?=E8=8A=82=E7=82=B9=E8=83=8C=E6=99=AF?= =?UTF-8?q?=E6=B8=90=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', } } From c4713097a0dbe588436f2354359d6436460919e6 Mon Sep 17 00:00:00 2001 From: lxr-cel <756422071@qq.com> Date: Thu, 4 Jan 2024 23:28:19 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E8=8A=82=E7=82=B9=E6=B8=90=E5=8F=98?= =?UTF-8?q?=E8=89=B2web=E7=A4=BA=E4=BE=8B=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/lang/zh_cn.js | 5 +- web/src/pages/Edit/components/Style.vue | 76 +++++++++++++++++++++++++ 2 files changed, 80 insertions(+), 1 deletion(-) diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js index 5482a1e7..1d748513 100644 --- a/web/src/lang/zh_cn.js +++ b/web/src/lang/zh_cn.js @@ -200,7 +200,10 @@ export default { line: '线条', nodePadding: '节点内边距', horizontal: '水平', - vertical: '垂直' + vertical: '垂直', + gradientStyle: '渐变', + startColor: '起始', + endColor: '结束' }, theme: { title: '主题', diff --git a/web/src/pages/Edit/components/Style.vue b/web/src/pages/Edit/components/Style.vue index 197728e4..3106b487 100644 --- a/web/src/pages/Edit/components/Style.vue +++ b/web/src/pages/Edit/components/Style.vue @@ -249,6 +249,48 @@ +
+
+ {{ $t('style.gradientStyle') }} +
+ {{style.gradientStyle ? '渐变' : '单一'}} +
+
+
+ {{ $t('style.startColor') }} + + + + +
+
+ {{ $t('style.endColor') }} + + + + +
+
{{ $t('style.shape') }}
@@ -601,6 +643,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') } } } From 130acff77c789b9f845027206729bee7f2e8b33e Mon Sep 17 00:00:00 2001 From: lxr-cel <756422071@qq.com> Date: Thu, 4 Jan 2024 23:36:22 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E8=8A=82=E7=82=B9=E6=B8=90=E5=8F=98?= =?UTF-8?q?=E8=89=B2=E5=8A=9F=E8=83=BD=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/themes/default.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/simple-mind-map/src/themes/default.js b/simple-mind-map/src/themes/default.js index fb3a0ed1..4cf34510 100644 --- a/simple-mind-map/src/themes/default.js +++ b/simple-mind-map/src/themes/default.js @@ -73,7 +73,7 @@ export default { borderDasharray: 'none', borderRadius: 5, textDecoration: 'none', - gradientStyle: true, + gradientStyle: false, startColor: '#549688', endColor: '#fff', }, From c62089adb9645a84d5a63b1c62b48e14fcd57126 Mon Sep 17 00:00:00 2001 From: lxr-cel <756422071@qq.com> Date: Thu, 4 Jan 2024 23:37:27 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E8=8A=82=E7=82=B9=E6=B8=90=E5=8F=98?= =?UTF-8?q?=E8=89=B2web=E7=A4=BA=E4=BE=8B=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/pages/Edit/components/Style.vue | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/web/src/pages/Edit/components/Style.vue b/web/src/pages/Edit/components/Style.vue index 3106b487..483a2b40 100644 --- a/web/src/pages/Edit/components/Style.vue +++ b/web/src/pages/Edit/components/Style.vue @@ -485,7 +485,10 @@ export default { borderRadius: '', lineColor: '', lineDasharray: '', - lineWidth: '' + lineWidth: '', + gradientStyle: false, + startColor: '', + endColor: '' } } }, @@ -560,7 +563,10 @@ export default { 'borderRadius', 'lineColor', 'lineDasharray', - 'lineWidth' + 'lineWidth', + 'gradientStyle', + 'startColor', + 'endColor' ].forEach(item => { this.style[item] = this.activeNodes[0].getStyle(item, false) })