openSourceRemote/mind-map
2
0
Fork 0
Code Issues Pull Requests 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._lines = this._lines.slice(0, childrenLen)
} }
// 画线 // 画线
this.renderer.layout.renderLine(this, this._lines) this.renderer.layout.renderLine(this, this._lines, (line, node) => {
// 添加样式 // 添加样式
this._lines.forEach((line) => { this.styleLine(line, node)
this.styleLine(line)
}) })
} }
@ -874,10 +873,10 @@ class Node {
* @Date: 2022-09-17 12:41:29 * @Date: 2022-09-17 12:41:29
* @Desc: 设置连线样式 * @Desc: 设置连线样式
*/ */
styleLine(line) { styleLine(line, node) {
let width = this.getSelfInhertStyle('lineWidth') || this.getStyle('lineWidth', true) let width = node.getSelfInhertStyle('lineWidth') || node.getStyle('lineWidth', true)
let color = this.getSelfInhertStyle('lineColor') || this.getStyle('lineColor', true) let color = node.getSelfInhertStyle('lineColor') || node.getStyle('lineColor', true)
let dasharray = this.getSelfInhertStyle('lineDasharray') || this.getStyle('lineDasharray', true) let dasharray = node.getSelfInhertStyle('lineDasharray') || node.getStyle('lineDasharray', true)
this.style.line(line, { this.style.line(line, {
width, width,
color, 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 * @Date: 2021-04-11 14:42:48
* @Desc: 绘制连线，连接该节点到其子节点 * @Desc: 绘制连线，连接该节点到其子节点
*/ */
renderLine(node, lines) { renderLine(node, lines, style) {
if (node.children.length <= 0) { if (node.children.length <= 0) {
return []; return [];
} }
@ -263,6 +263,7 @@ class CatalogOrganization extends Base {
let path = `M ${x2},${y1 + s1} L ${x2},${y1 + s1 > y2 ? y2 + item.height : y2}` let path = `M ${x2},${y1 + s1} L ${x2},${y1 + s1 > y2 ? y2 + item.height : y2}`
// 竖线 // 竖线
lines[index].plot(path) lines[index].plot(path)
style && style(lines[index], item)
}) })
minx = Math.min(minx, x1) minx = Math.min(minx, x1)
maxx = Math.max(maxx, x1) maxx = Math.max(maxx, x1)
@ -271,12 +272,14 @@ class CatalogOrganization extends Base {
node.style.line(line1) node.style.line(line1)
line1.plot(`M ${x1},${y1} L ${x1},${y1 + s1}`) line1.plot(`M ${x1},${y1} L ${x1},${y1 + s1}`)
node._lines.push(line1) node._lines.push(line1)
style && style(line1, node)
// 水平线 // 水平线
if (len > 0) { if (len > 0) {
let lin2 = this.draw.path() let lin2 = this.draw.path()
node.style.line(lin2) node.style.line(lin2)
lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`) lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
node._lines.push(lin2) node._lines.push(lin2)
style && style(lin2, node)
} }
} else { } else {
// 非根节点 // 非根节点
@ -320,6 +323,7 @@ class CatalogOrganization extends Base {
path = `M ${x2},${y2} L ${_left},${y2}` path = `M ${x2},${y2} L ${_left},${y2}`
} }
lines[index].plot(path) lines[index].plot(path)
style && style(lines[index], item)
}) })
// 竖线 // 竖线
if (len > 0) { if (len > 0) {
@ -333,6 +337,7 @@ class CatalogOrganization extends Base {
lin2.show() lin2.show()
} }
node._lines.push(lin2) 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 * @Date: 2021-04-11 14:42:48
* @Desc: 绘制连线，连接该节点到其子节点 * @Desc: 绘制连线，连接该节点到其子节点
*/ */
renderLine(node, lines) { renderLine(node, lines, style) {
if (node.children.length <= 0) { if (node.children.length <= 0) {
return []; return [];
} }
@ -169,6 +169,7 @@ class LogicalStructure extends Base {
path = this.cubicBezierPath(x1, y1, x2, y2) path = this.cubicBezierPath(x1, y1, x2, y2)
} }
lines[index].plot(path) 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 * @Date: 2021-04-11 14:42:48
* @Desc: 绘制连线，连接该节点到其子节点 * @Desc: 绘制连线，连接该节点到其子节点
*/ */
renderLine(node, lines) { renderLine(node, lines, style) {
if (node.children.length <= 0) { if (node.children.length <= 0) {
return []; return [];
} }
@ -205,6 +205,7 @@ class MindMap extends Base {
path = this.cubicBezierPath(x1, y1, x2, y2) path = this.cubicBezierPath(x1, y1, x2, y2)
} }
lines[index].plot(path) 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 * @Date: 2021-04-11 14:42:48
* @Desc: 绘制连线，连接该节点到其子节点 * @Desc: 绘制连线，连接该节点到其子节点
*/ */
renderLine(node, lines) { renderLine(node, lines, style) {
if (node.children.length <= 0) { if (node.children.length <= 0) {
return []; return [];
} }
@ -177,6 +177,7 @@ class OrganizationStructure extends Base {
} }
let path = `M ${x2},${y1 + s1} L ${x2},${y2}` let path = `M ${x2},${y1 + s1} L ${x2},${y2}`
lines[index].plot(path) lines[index].plot(path)
style && style(lines[index], item)
}) })
minx = Math.min(x1, minx) minx = Math.min(x1, minx)
maxx = Math.max(x1, maxx) maxx = Math.max(x1, maxx)
@ -186,12 +187,14 @@ class OrganizationStructure extends Base {
expandBtnSize = len > 0 && !isRoot ? expandBtnSize : 0 expandBtnSize = len > 0 && !isRoot ? expandBtnSize : 0
line1.plot(`M ${x1},${y1 + expandBtnSize} L ${x1},${y1 + s1}`) line1.plot(`M ${x1},${y1 + expandBtnSize} L ${x1},${y1 + s1}`)
node._lines.push(line1) node._lines.push(line1)
style && style(line1, node)
// 水平线 // 水平线
if (len > 0) { if (len > 0) {
let lin2 = this.draw.path() let lin2 = this.draw.path()
node.style.line(lin2) node.style.line(lin2)
lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`) lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
node._lines.push(lin2) node._lines.push(lin2)
style && style(lin2, node)
} }
} }