mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-21 18:37:43 +08:00
节点支持自定义线条样式
This commit is contained in:
wanglin2
parent
9f16691cd6
commit
2aea7a3c88
@ -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)
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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' })
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -17,6 +17,8 @@ export default {
|
||||
lineWidth: 1,
|
||||
// 连线的颜色
|
||||
lineColor: '#549688',
|
||||
// 连线样式
|
||||
lineDasharray: 'none',
|
||||
// 概要连线的粗细
|
||||
generalizationLineWidth: 1,
|
||||
// 概要连线的颜色
|
||||
|
||||
@ -143,7 +143,7 @@
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="rowItem">
|
||||
<span class="name" v-popover:popover5>样式</span>
|
||||
<span class="name">样式</span>
|
||||
<el-select
|
||||
size="mini"
|
||||
style="width: 80px"
|
||||
@ -233,7 +233,7 @@
|
||||
>
|
||||
<el-option
|
||||
v-for="item in shapeList"
|
||||
:key="item"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
>
|
||||
@ -241,6 +241,65 @@
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 线条 -->
|
||||
<div class="title">线条</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">颜色</span>
|
||||
<span
|
||||
class="block"
|
||||
v-popover:popover5
|
||||
:style="{ width: '80px', backgroundColor: style.lineColor }"
|
||||
:class="{ disabled: checkDisabled('lineColor') }"
|
||||
></span>
|
||||
<el-popover ref="popover5" placement="bottom" trigger="click" :disabled="checkDisabled('lineColor')">
|
||||
<Color
|
||||
:color="style.lineColor"
|
||||
@change="changeLineColor"
|
||||
></Color>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="rowItem">
|
||||
<span class="name">样式</span>
|
||||
<el-select
|
||||
size="mini"
|
||||
style="width: 80px"
|
||||
v-model="style.lineDasharray"
|
||||
placeholder=""
|
||||
:disabled="checkDisabled('lineDasharray')"
|
||||
@change="update('lineDasharray')"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in borderDasharrayList"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<span class="name">宽度</span>
|
||||
<el-select
|
||||
size="mini"
|
||||
style="width: 80px"
|
||||
v-model="style.lineWidth"
|
||||
placeholder=""
|
||||
:disabled="checkDisabled('lineWidth')"
|
||||
@change="update('lineWidth')"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in borderWidthList"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 节点内边距 -->
|
||||
<div class="title noTop">节点内边距</div>
|
||||
<div class="row">
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user