节点支持设置自定义线条样式

This commit is contained in:
wanglin2 2022-09-17 16:18:38 +08:00
parent c8f5c94683
commit aa998b1829
4 changed files with 30 additions and 7 deletions

View File

@ -88,7 +88,7 @@ npm run build
# 安装 # 安装
> 当然仓库版本0.2.4当前npm版本0.2.4 > 当然仓库版本0.2.5当前npm版本0.2.5
```bash ```bash
npm i simple-mind-map npm i simple-mind-map
@ -920,6 +920,23 @@ v0.2.4+
设置节点形状,`SET_NODE_SHAPE`命令的快捷方法 设置节点形状,`SET_NODE_SHAPE`命令的快捷方法
#### getSelfStyle(prop)
v0.2.5+
获取节点自身的自定义样式
#### getParentSelfStyle(prop)
v0.2.5+
获取最近一个存在自身自定义样式的祖先节点的自定义样式
#### getSelfInhertStyle(prop)
v0.2.5+
获取自身可继承的自定义样式
## 内置工具方法 ## 内置工具方法

View File

@ -1,6 +1,6 @@
{ {
"name": "simple-mind-map", "name": "simple-mind-map",
"version": "0.2.4", "version": "0.2.5",
"description": "一个简单的web在线思维导图", "description": "一个简单的web在线思维导图",
"authors": [ "authors": [
{ {

View File

@ -189,7 +189,7 @@ class Drag extends Base {
// 连接线 // 连接线
this.line = this.draw.path() this.line = this.draw.path()
this.line.opacity(0.5) this.line.opacity(0.5)
this.node.styleLine(this.line) this.node.styleLine(this.line, this.node)
// 同级位置占位符 // 同级位置占位符
this.placeholder = this.draw.rect().fill({ this.placeholder = this.draw.rect().fill({
color: this.node.style.merge('lineColor', true) color: this.node.style.merge('lineColor', true)

View File

@ -711,6 +711,8 @@ class Node {
* @Desc: 渲染节点到画布会移除旧的创建新的 * @Desc: 渲染节点到画布会移除旧的创建新的
*/ */
renderNode() { renderNode() {
// 连线
this.renderLine()
this.removeAllEvent() this.removeAllEvent()
this.removeAllNode() this.removeAllNode()
this.createNodeData() this.createNodeData()
@ -723,8 +725,6 @@ class Node {
* @Desc: 更新节点 * @Desc: 更新节点
*/ */
update(layout = false) { update(layout = false) {
// 连线
this.renderLine()
if (!this.group) { if (!this.group) {
return return
} }
@ -757,6 +757,8 @@ class Node {
this.initRender = false this.initRender = false
this.renderNode() this.renderNode()
} else { } else {
// 连线
this.renderLine()
this.update() this.update()
} }
// 子节点 // 子节点
@ -865,6 +867,10 @@ class Node {
// 添加样式 // 添加样式
this.styleLine(line, node) this.styleLine(line, node)
}) })
// 和父级的连线也需要更新
if (this.parent) {
this.parent.renderLine()
}
} }
/** /**
@ -1181,7 +1187,7 @@ class Node {
* javascript comment * javascript comment
* @Author: flydreame * @Author: flydreame
* @Date: 2022-09-17 11:21:26 * @Date: 2022-09-17 11:21:26
* @Desc: 获取父级的自定义样式 * @Desc: 获取最近一个存在自身自定义样式的祖先节点的自定义样式
*/ */
getParentSelfStyle(prop) { getParentSelfStyle(prop) {
if (this.parent) { if (this.parent) {
@ -1194,7 +1200,7 @@ class Node {
* javascript comment * javascript comment
* @Author: flydreame * @Author: flydreame
* @Date: 2022-09-17 12:15:30 * @Date: 2022-09-17 12:15:30
* @Desc: 获取自身可继承样式 * @Desc: 获取自身可继承的自定义样式
*/ */
getSelfInhertStyle(prop) { getSelfInhertStyle(prop) {
return this.getSelfStyle(prop) // 自身 return this.getSelfStyle(prop) // 自身