From 2aea7a3c888e237f06dc0dcaa7b3fb734f7c669a Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Sat, 17 Sep 2022 15:00:12 +0800 Subject: [PATCH] =?UTF-8?q?=E8=8A=82=E7=82=B9=E6=94=AF=E6=8C=81=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E7=BA=BF=E6=9D=A1=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/src/Drag.js | 2 +- simple-mind-map/src/Node.js | 57 +++++++++++++++++- simple-mind-map/src/Style.js | 16 ++++- simple-mind-map/src/themes/default.js | 2 + web/src/pages/Edit/components/Style.vue | 79 ++++++++++++++++++++++++- 5 files changed, 147 insertions(+), 9 deletions(-) diff --git a/simple-mind-map/src/Drag.js b/simple-mind-map/src/Drag.js index 3f7268b2..5ac1e007 100644 --- a/simple-mind-map/src/Drag.js +++ b/simple-mind-map/src/Drag.js @@ -189,7 +189,7 @@ class Drag extends Base { // 连接线 this.line = this.draw.path() this.line.opacity(0.5) - this.node.style.line(this.line) + this.node.styleLine(this.line) // 同级位置占位符 this.placeholder = this.draw.rect().fill({ color: this.node.style.merge('lineColor', true) diff --git a/simple-mind-map/src/Node.js b/simple-mind-map/src/Node.js index fd7b113c..ca26e82c 100644 --- a/simple-mind-map/src/Node.js +++ b/simple-mind-map/src/Node.js @@ -723,6 +723,8 @@ class Node { * @Desc: 更新节点 */ update(layout = false) { + // 连线 + this.renderLine() if (!this.group) { return } @@ -750,8 +752,6 @@ class Node { * @Desc: 递归渲染 */ render() { - // 连线 - this.renderLine() // 节点 if (this.initRender) { this.initRender = false @@ -864,7 +864,24 @@ class Node { this.renderer.layout.renderLine(this, this._lines) // 添加样式 this._lines.forEach((line) => { - this.style.line(line) + this.styleLine(line) + }) + } + + /** + * javascript comment + * @Author: flydreame + * @Date: 2022-09-17 12:41:29 + * @Desc: 设置连线样式 + */ + styleLine(line) { + let width = this.getSelfInhertStyle('lineWidth') || this.getStyle('lineWidth', true) + let color = this.getSelfInhertStyle('lineColor') || this.getStyle('lineColor', true) + let dasharray = this.getSelfInhertStyle('lineDasharray') || this.getStyle('lineDasharray', true) + this.style.line(line, { + width, + color, + dasharray, }) } @@ -1151,6 +1168,40 @@ class Node { return v === undefined ? '' : v } + /** + * javascript comment + * @Author: flydreame + * @Date: 2022-09-17 11:21:15 + * @Desc: 获取自定义样式 + */ + getSelfStyle(prop) { + return this.style.getSelfStyle(prop) + } + + /** + * javascript comment + * @Author: flydreame + * @Date: 2022-09-17 11:21:26 + * @Desc: 获取父级的自定义样式 + */ + getParentSelfStyle(prop) { + if (this.parent) { + return this.parent.getSelfStyle(prop) || this.parent.getParentSelfStyle(prop) + } + return null + } + + /** + * javascript comment + * @Author: flydreame + * @Date: 2022-09-17 12:15:30 + * @Desc: 获取自身可继承样式 + */ + getSelfInhertStyle(prop) { + return this.getSelfStyle(prop) // 自身 + || this.getParentSelfStyle(prop) // 父级 + } + /** * @Author: 王林 * @Date: 2021-05-04 22:18:07 diff --git a/simple-mind-map/src/Style.js b/simple-mind-map/src/Style.js index 820000dd..130b0644 100644 --- a/simple-mind-map/src/Style.js +++ b/simple-mind-map/src/Style.js @@ -66,7 +66,7 @@ class Style { } } // 优先使用节点本身的样式 - return this.ctx.nodeData.data[prop] !== undefined ? this.ctx.nodeData.data[prop] : defaultConfig[prop] + return this.getSelfStyle(prop) !== undefined ? this.getSelfStyle(prop) : defaultConfig[prop] } /** @@ -79,6 +79,16 @@ class Style { return this.merge(prop, root, isActive) } + /** + * javascript comment + * @Author: flydreame + * @Date: 2022-09-17 12:09:39 + * @Desc: 获取自身自定义样式 + */ + getSelfStyle(prop) { + return this.ctx.nodeData.data[prop] + } + /** * @Author: 王林 * @Date: 2021-04-11 10:12:56 @@ -173,8 +183,8 @@ class Style { * @Date: 2021-04-11 14:50:49 * @Desc: 连线 */ - line(node) { - node.stroke({ width: this.merge('lineWidth', true), color: this.merge('lineColor', true) }).fill({ color: 'none' }) + line(node, { width, color, dasharray } = {}) { + node.stroke({ width, color, dasharray }).fill({ color: 'none' }) } /** diff --git a/simple-mind-map/src/themes/default.js b/simple-mind-map/src/themes/default.js index 13f56816..d901f784 100644 --- a/simple-mind-map/src/themes/default.js +++ b/simple-mind-map/src/themes/default.js @@ -17,6 +17,8 @@ export default { lineWidth: 1, // 连线的颜色 lineColor: '#549688', + // 连线样式 + lineDasharray: 'none', // 概要连线的粗细 generalizationLineWidth: 1, // 概要连线的颜色 diff --git a/web/src/pages/Edit/components/Style.vue b/web/src/pages/Edit/components/Style.vue index e22d5611..f45748d7 100644 --- a/web/src/pages/Edit/components/Style.vue +++ b/web/src/pages/Edit/components/Style.vue @@ -143,7 +143,7 @@
- 样式 + 样式 @@ -241,6 +241,65 @@
+ +
线条
+
+
+ 颜色 + + + + +
+
+ 样式 + + + + +
+
+
+
+ 宽度 + + + + +
+
节点内边距
@@ -323,6 +382,9 @@ export default { fillColor: "", borderDasharray: "", borderRadius: "", + lineColor: "", + lineDasharray: "", + lineWidth: "", }, }; }, @@ -382,6 +444,9 @@ export default { "fillColor", "borderDasharray", "borderRadius", + "lineColor", + "lineDasharray", + "lineWidth", ].forEach((item) => { this.style[item] = this.activeNodes[0].getStyle( item, @@ -450,6 +515,16 @@ export default { this.update("borderColor"); }, + /** + * @Author: flydreame + * @Date: 2022-09-17 10:18:15 + * @Desc: 修改线条颜色 + */ + changeLineColor(color) { + this.style.lineColor = color; + this.update("lineColor"); + }, + /** * @Author: 王林 * @Date: 2021-05-05 10:18:59