节点支持设置自定义线条样式
This commit is contained in:
parent
c8f5c94683
commit
aa998b1829
19
README.md
19
README.md
@ -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+
|
||||||
|
|
||||||
|
获取自身可继承的自定义样式
|
||||||
|
|
||||||
|
|
||||||
## 内置工具方法
|
## 内置工具方法
|
||||||
|
|||||||
@ -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": [
|
||||||
{
|
{
|
||||||
|
|||||||
@ -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)
|
||||||
|
|||||||
@ -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) // 自身
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user