coosld/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-21 18:37:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

优化节点自定义线条样式

Browse Source
This commit is contained in:
wanglin2 2022-09-17 15:09:34 +08:00
parent 2aea7a3c88
commit c8f5c94683
5 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
simple-mind-map/src/Node.js
View File

@ -861,10 +861,9 @@ class Node {
this._lines = this._lines.slice(0, childrenLen)
}
// 画线
this.renderer.layout.renderLine(this, this._lines)
// 添加样式
this._lines.forEach((line) => {
this.styleLine(line)
this.renderer.layout.renderLine(this, this._lines, (line, node) => {
// 添加样式
this.styleLine(line, node)
})
}
@ -874,10 +873,10 @@ class Node {
* @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)
styleLine(line, node) {
let width = node.getSelfInhertStyle('lineWidth') || node.getStyle('lineWidth', true)
let color = node.getSelfInhertStyle('lineColor') || node.getStyle('lineColor', true)
let dasharray = node.getSelfInhertStyle('lineDasharray') || node.getStyle('lineDasharray', true)
this.style.line(line, {
width,
color,

7
simple-mind-map/src/layouts/CatalogOrganization.js
View File

@ -231,7 +231,7 @@ class CatalogOrganization extends Base {
* @Date: 2021-04-11 14:42:48
* @Desc: 绘制连线，连接该节点到其子节点
*/
renderLine(node, lines) {
renderLine(node, lines, style) {
if (node.children.length <= 0) {
return [];
}
@ -263,6 +263,7 @@ class CatalogOrganization extends Base {
let path = `M ${x2},${y1 + s1} L ${x2},${y1 + s1 > y2 ? y2 + item.height : y2}`
// 竖线
lines[index].plot(path)
style && style(lines[index], item)
})
minx = Math.min(minx, x1)
maxx = Math.max(maxx, x1)
@ -271,12 +272,14 @@ class CatalogOrganization extends Base {
node.style.line(line1)
line1.plot(`M ${x1},${y1} L ${x1},${y1 + s1}`)
node._lines.push(line1)
style && style(line1, node)
// 水平线
if (len > 0) {
let lin2 = this.draw.path()
node.style.line(lin2)
lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
node._lines.push(lin2)
style && style(lin2, node)
}
} else {
// 非根节点
@ -320,6 +323,7 @@ class CatalogOrganization extends Base {
path = `M ${x2},${y2} L ${_left},${y2}`
}
lines[index].plot(path)
style && style(lines[index], item)
})
// 竖线
if (len > 0) {
@ -333,6 +337,7 @@ class CatalogOrganization extends Base {
lin2.show()
}
node._lines.push(lin2)
style && style(lin2, node)
}
}
}

3
simple-mind-map/src/layouts/LogicalStructure.js
View File

@ -146,7 +146,7 @@ class LogicalStructure extends Base {
* @Date: 2021-04-11 14:42:48
* @Desc: 绘制连线，连接该节点到其子节点
*/
renderLine(node, lines) {
renderLine(node, lines, style) {
if (node.children.length <= 0) {
return [];
}
@ -169,6 +169,7 @@ class LogicalStructure extends Base {
path = this.cubicBezierPath(x1, y1, x2, y2)
}
lines[index].plot(path)
style && style(lines[index], item)
})
}

3
simple-mind-map/src/layouts/MindMap.js
View File

@ -182,7 +182,7 @@ class MindMap extends Base {
* @Date: 2021-04-11 14:42:48
* @Desc: 绘制连线，连接该节点到其子节点
*/
renderLine(node, lines) {
renderLine(node, lines, style) {
if (node.children.length <= 0) {
return [];
}
@ -205,6 +205,7 @@ class MindMap extends Base {
path = this.cubicBezierPath(x1, y1, x2, y2)
}
lines[index].plot(path)
style && style(lines[index], item)
})
}

5
simple-mind-map/src/layouts/OrganizationStructure.js
View File

@ -147,7 +147,7 @@ class OrganizationStructure extends Base {
* @Date: 2021-04-11 14:42:48
* @Desc: 绘制连线，连接该节点到其子节点
*/
renderLine(node, lines) {
renderLine(node, lines, style) {
if (node.children.length <= 0) {
return [];
}
@ -177,6 +177,7 @@ class OrganizationStructure extends Base {
}
let path = `M ${x2},${y1 + s1} L ${x2},${y2}`
lines[index].plot(path)
style && style(lines[index], item)
})
minx = Math.min(x1, minx)
maxx = Math.max(x1, maxx)
@ -186,12 +187,14 @@ class OrganizationStructure extends Base {
expandBtnSize = len > 0 && !isRoot ? expandBtnSize : 0
line1.plot(`M ${x1},${y1 + expandBtnSize} L ${x1},${y1 + s1}`)
node._lines.push(line1)
style && style(line1, node)
// 水平线
if (len > 0) {
let lin2 = this.draw.path()
node.style.line(lin2)
lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
node._lines.push(lin2)
style && style(lin2, node)
}
}