Fix：修复底边风格的情况下，节点高度过高会和其他节点重叠的问题
This commit is contained in:
wanglin2
parent
7e11fde892
commit
c8b50908e1
@ -1 +1 @@
|
|||||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="./dist/logo.png"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d0a3179.f79d6590.js" rel="prefetch"><link href="dist/js/chunk-2d0aa579.d901cc5e.js" rel="prefetch"><link href="dist/js/chunk-2d0aa978.ae72a285.js" rel="prefetch"><link href="dist/js/chunk-2d0ab10b.13ffd981.js" rel="prefetch"><link href="dist/js/chunk-2d0abe0f.f7178a38.js" rel="prefetch"><link href="dist/js/chunk-2d0b361e.64d433a0.js" rel="prefetch"><link href="dist/js/chunk-2d0b91e5.de98db92.js" rel="prefetch"><link href="dist/js/chunk-2d0b92c3.a48a667e.js" rel="prefetch"><link href="dist/js/chunk-2d0bd54e.e56450f0.js" rel="prefetch"><link href="dist/js/chunk-2d0be174.1531a230.js" rel="prefetch"><link href="dist/js/chunk-2d0c0a44.d2768274.js" rel="prefetch"><link href="dist/js/chunk-2d0c14fc.a89a80b4.js" rel="prefetch"><link href="dist/js/chunk-2d0c18d8.4dad4846.js" rel="prefetch"><link href="dist/js/chunk-2d0c191e.6fb13561.js" rel="prefetch"><link href="dist/js/chunk-2d0c1a01.49c23f9e.js" rel="prefetch"><link href="dist/js/chunk-2d0d9fbc.adce6374.js" rel="prefetch"><link href="dist/js/chunk-2d0da701.2e0766e2.js" rel="prefetch"><link href="dist/js/chunk-2d0dad5f.ec79eebe.js" rel="prefetch"><link href="dist/js/chunk-2d0db0f2.19efc7d4.js" rel="prefetch"><link href="dist/js/chunk-2d0dddce.6a579f6f.js" rel="prefetch"><link href="dist/js/chunk-2d0ddf37.d162efb9.js" rel="prefetch"><link href="dist/js/chunk-2d0de01b.21eae2e6.js" rel="prefetch"><link href="dist/js/chunk-2d0e2326.f3a9c7fc.js" rel="prefetch"><link href="dist/js/chunk-2d0e268c.2255a1cb.js" rel="prefetch"><link href="dist/js/chunk-2d0e5089.2b202405.js" rel="prefetch"><link href="dist/js/chunk-2d0e9742.a2d22497.js" rel="prefetch"><link href="dist/js/chunk-2d0f026c.46ed3069.js" rel="prefetch"><link href="dist/js/chunk-2d2082b9.fe227afb.js" rel="prefetch"><link href="dist/js/chunk-2d208ffa.3ac1a852.js" rel="prefetch"><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d20f68f.acd7e356.js" rel="prefetch"><link href="dist/js/chunk-2d210a7a.5a4025ce.js" rel="prefetch"><link href="dist/js/chunk-2d216004.905379d5.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.2d06497a.js" rel="prefetch"><link href="dist/js/chunk-2d217907.cc6917a4.js" rel="prefetch"><link href="dist/js/chunk-2d226d0a.3703455b.js" rel="prefetch"><link href="dist/js/chunk-2d2299c3.ffd15e65.js" rel="prefetch"><link href="dist/js/chunk-2d22bd06.cace3b1b.js" rel="prefetch"><link href="dist/js/chunk-2d2308b0.fb49d06b.js" rel="prefetch"><link href="dist/js/chunk-2d238428.266d8f0c.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/css/app.8a532989.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.1790fe42.css" rel="preload" as="style"><link href="dist/js/app.0119fad7.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.7f3b8358.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.1790fe42.css" rel="stylesheet"><link href="dist/css/app.8a532989.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.7f3b8358.js"></script><script src="dist/js/app.0119fad7.js"></script></body></html>
|
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="./dist/logo.png"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d0a3179.f79d6590.js" rel="prefetch"><link href="dist/js/chunk-2d0aa579.d901cc5e.js" rel="prefetch"><link href="dist/js/chunk-2d0aa978.ae72a285.js" rel="prefetch"><link href="dist/js/chunk-2d0ab10b.13ffd981.js" rel="prefetch"><link href="dist/js/chunk-2d0abe0f.f7178a38.js" rel="prefetch"><link href="dist/js/chunk-2d0b361e.64d433a0.js" rel="prefetch"><link href="dist/js/chunk-2d0b91e5.de98db92.js" rel="prefetch"><link href="dist/js/chunk-2d0b92c3.a48a667e.js" rel="prefetch"><link href="dist/js/chunk-2d0bd54e.e56450f0.js" rel="prefetch"><link href="dist/js/chunk-2d0be174.1531a230.js" rel="prefetch"><link href="dist/js/chunk-2d0c0a44.d2768274.js" rel="prefetch"><link href="dist/js/chunk-2d0c14fc.a89a80b4.js" rel="prefetch"><link href="dist/js/chunk-2d0c18d8.4dad4846.js" rel="prefetch"><link href="dist/js/chunk-2d0c191e.6fb13561.js" rel="prefetch"><link href="dist/js/chunk-2d0c1a01.49c23f9e.js" rel="prefetch"><link href="dist/js/chunk-2d0d9fbc.adce6374.js" rel="prefetch"><link href="dist/js/chunk-2d0da701.2e0766e2.js" rel="prefetch"><link href="dist/js/chunk-2d0dad5f.ec79eebe.js" rel="prefetch"><link href="dist/js/chunk-2d0db0f2.19efc7d4.js" rel="prefetch"><link href="dist/js/chunk-2d0dddce.6a579f6f.js" rel="prefetch"><link href="dist/js/chunk-2d0ddf37.d162efb9.js" rel="prefetch"><link href="dist/js/chunk-2d0de01b.21eae2e6.js" rel="prefetch"><link href="dist/js/chunk-2d0e2326.f3a9c7fc.js" rel="prefetch"><link href="dist/js/chunk-2d0e268c.2255a1cb.js" rel="prefetch"><link href="dist/js/chunk-2d0e5089.2b202405.js" rel="prefetch"><link href="dist/js/chunk-2d0e9742.a2d22497.js" rel="prefetch"><link href="dist/js/chunk-2d0f026c.46ed3069.js" rel="prefetch"><link href="dist/js/chunk-2d2082b9.fe227afb.js" rel="prefetch"><link href="dist/js/chunk-2d208ffa.3ac1a852.js" rel="prefetch"><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d20f68f.acd7e356.js" rel="prefetch"><link href="dist/js/chunk-2d210a7a.5a4025ce.js" rel="prefetch"><link href="dist/js/chunk-2d216004.905379d5.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.2d06497a.js" rel="prefetch"><link href="dist/js/chunk-2d217907.cc6917a4.js" rel="prefetch"><link href="dist/js/chunk-2d226d0a.3703455b.js" rel="prefetch"><link href="dist/js/chunk-2d2299c3.ffd15e65.js" rel="prefetch"><link href="dist/js/chunk-2d22bd06.cace3b1b.js" rel="prefetch"><link href="dist/js/chunk-2d2308b0.fb49d06b.js" rel="prefetch"><link href="dist/js/chunk-2d238428.266d8f0c.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/css/app.8a532989.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.1790fe42.css" rel="preload" as="style"><link href="dist/js/app.1bd65e51.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.7f3b8358.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.1790fe42.css" rel="stylesheet"><link href="dist/css/app.8a532989.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.7f3b8358.js"></script><script src="dist/js/app.1bd65e51.js"></script></body></html>
|
||||||
@ -707,27 +707,17 @@ class Node {
|
|||||||
}
|
}
|
||||||
this.renderGeneralization()
|
this.renderGeneralization()
|
||||||
let t = this.group.transform()
|
let t = this.group.transform()
|
||||||
// 节点使用横线风格，有两种结构需要调整节点的位置
|
|
||||||
let nodeUseLineStyleOffset = 0
|
|
||||||
if (
|
|
||||||
['logicalStructure', 'mindMap'].includes(this.mindMap.opt.layout) &&
|
|
||||||
!this.isRoot &&
|
|
||||||
!this.isGeneralization &&
|
|
||||||
this.themeConfig.nodeUseLineStyle
|
|
||||||
) {
|
|
||||||
nodeUseLineStyleOffset = this.height / 2
|
|
||||||
}
|
|
||||||
if (!layout) {
|
if (!layout) {
|
||||||
this.group
|
this.group
|
||||||
.animate(300)
|
.animate(300)
|
||||||
.translate(
|
.translate(
|
||||||
this.left - t.translateX,
|
this.left - t.translateX,
|
||||||
this.top - t.translateY - nodeUseLineStyleOffset
|
this.top - t.translateY
|
||||||
)
|
)
|
||||||
} else {
|
} else {
|
||||||
this.group.translate(
|
this.group.translate(
|
||||||
this.left - t.translateX,
|
this.left - t.translateX,
|
||||||
this.top - t.translateY - nodeUseLineStyleOffset
|
this.top - t.translateY
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,267 +1,289 @@
|
|||||||
import Base from './Base'
|
import Base from './Base'
|
||||||
import { walk, asyncRun } from '../utils'
|
import { walk, asyncRun } from '../utils'
|
||||||
|
|
||||||
// 逻辑结构图
|
// 逻辑结构图
|
||||||
class LogicalStructure extends Base {
|
|
||||||
// 构造函数
|
class LogicalStructure extends Base {
|
||||||
constructor(opt = {}) {
|
// 构造函数
|
||||||
super(opt)
|
|
||||||
}
|
constructor(opt = {}) {
|
||||||
|
super(opt)
|
||||||
// 布局
|
}
|
||||||
doLayout(callback) {
|
|
||||||
let task = [
|
// 布局
|
||||||
() => {
|
|
||||||
this.computedBaseValue()
|
doLayout(callback) {
|
||||||
},
|
let task = [
|
||||||
() => {
|
() => {
|
||||||
this.computedTopValue()
|
this.computedBaseValue()
|
||||||
},
|
},
|
||||||
() => {
|
() => {
|
||||||
this.adjustTopValue()
|
this.computedTopValue()
|
||||||
},
|
},
|
||||||
() => {
|
() => {
|
||||||
callback(this.root)
|
this.adjustTopValue()
|
||||||
}
|
},
|
||||||
]
|
() => {
|
||||||
asyncRun(task)
|
callback(this.root)
|
||||||
}
|
}
|
||||||
|
]
|
||||||
// 遍历数据计算节点的left、width、height
|
asyncRun(task)
|
||||||
computedBaseValue() {
|
}
|
||||||
walk(
|
|
||||||
this.renderer.renderTree,
|
// 遍历数据计算节点的left、width、height
|
||||||
null,
|
|
||||||
(cur, parent, isRoot, layerIndex) => {
|
computedBaseValue() {
|
||||||
let newNode = this.createNode(cur, parent, isRoot, layerIndex)
|
walk(
|
||||||
// 根节点定位在画布中心位置
|
this.renderer.renderTree,
|
||||||
if (isRoot) {
|
null,
|
||||||
this.setNodeCenter(newNode)
|
(cur, parent, isRoot, layerIndex) => {
|
||||||
} else {
|
let newNode = this.createNode(cur, parent, isRoot, layerIndex)
|
||||||
// 非根节点
|
// 根节点定位在画布中心位置
|
||||||
// 定位到父节点右侧
|
if (isRoot) {
|
||||||
newNode.left =
|
this.setNodeCenter(newNode)
|
||||||
parent._node.left + parent._node.width + this.getMarginX(layerIndex)
|
} else {
|
||||||
}
|
// 非根节点
|
||||||
if (!cur.data.expand) {
|
// 定位到父节点右侧
|
||||||
return true
|
newNode.left =
|
||||||
}
|
parent._node.left + parent._node.width + this.getMarginX(layerIndex)
|
||||||
},
|
}
|
||||||
(cur, parent, isRoot, layerIndex) => {
|
if (!cur.data.expand) {
|
||||||
// 返回时计算节点的areaHeight，也就是子节点所占的高度之和，包括外边距
|
return true
|
||||||
let len = cur.data.expand === false ? 0 : cur._node.children.length
|
}
|
||||||
cur._node.childrenAreaHeight = len
|
},
|
||||||
? cur._node.children.reduce((h, item) => {
|
(cur, parent, isRoot, layerIndex) => {
|
||||||
return h + item.height
|
// 返回时计算节点的areaHeight，也就是子节点所占的高度之和，包括外边距
|
||||||
}, 0) +
|
let len = cur.data.expand === false ? 0 : cur._node.children.length
|
||||||
(len + 1) * this.getMarginY(layerIndex + 1)
|
cur._node.childrenAreaHeight = len
|
||||||
: 0
|
? cur._node.children.reduce((h, item) => {
|
||||||
},
|
return h + item.height
|
||||||
true,
|
}, 0) +
|
||||||
0
|
(len + 1) * this.getMarginY(layerIndex + 1)
|
||||||
)
|
: 0
|
||||||
}
|
},
|
||||||
|
true,
|
||||||
// 遍历节点树计算节点的top
|
0
|
||||||
computedTopValue() {
|
)
|
||||||
walk(
|
}
|
||||||
this.root,
|
|
||||||
null,
|
// 遍历节点树计算节点的top
|
||||||
(node, parent, isRoot, layerIndex) => {
|
|
||||||
if (
|
computedTopValue() {
|
||||||
node.nodeData.data.expand &&
|
walk(
|
||||||
node.children &&
|
this.root,
|
||||||
node.children.length
|
null,
|
||||||
) {
|
(node, parent, isRoot, layerIndex) => {
|
||||||
let marginY = this.getMarginY(layerIndex + 1)
|
if (
|
||||||
// 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
|
node.nodeData.data.expand &&
|
||||||
let top = node.top + node.height / 2 - node.childrenAreaHeight / 2
|
node.children &&
|
||||||
let totalTop = top + marginY
|
node.children.length
|
||||||
node.children.forEach(cur => {
|
) {
|
||||||
cur.top = totalTop
|
let marginY = this.getMarginY(layerIndex + 1)
|
||||||
totalTop += cur.height + marginY
|
// 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
|
||||||
})
|
let top = node.top + node.height / 2 - node.childrenAreaHeight / 2
|
||||||
}
|
let totalTop = top + marginY
|
||||||
},
|
node.children.forEach(cur => {
|
||||||
null,
|
cur.top = totalTop
|
||||||
true
|
totalTop += cur.height + marginY
|
||||||
)
|
})
|
||||||
}
|
}
|
||||||
|
},
|
||||||
// 调整节点top
|
null,
|
||||||
adjustTopValue() {
|
true
|
||||||
walk(
|
)
|
||||||
this.root,
|
}
|
||||||
null,
|
|
||||||
(node, parent, isRoot, layerIndex) => {
|
// 调整节点top
|
||||||
if (!node.nodeData.data.expand) {
|
|
||||||
return
|
adjustTopValue() {
|
||||||
}
|
walk(
|
||||||
// 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
|
this.root,
|
||||||
let difference =
|
null,
|
||||||
node.childrenAreaHeight -
|
(node, parent, isRoot, layerIndex) => {
|
||||||
this.getMarginY(layerIndex + 1) * 2 -
|
if (!node.nodeData.data.expand) {
|
||||||
node.height
|
return
|
||||||
if (difference > 0) {
|
}
|
||||||
this.updateBrothers(node, difference / 2)
|
// 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
|
||||||
}
|
let difference =
|
||||||
},
|
node.childrenAreaHeight -
|
||||||
null,
|
this.getMarginY(layerIndex + 1) * 2 -
|
||||||
true
|
node.height
|
||||||
)
|
if (difference > 0) {
|
||||||
}
|
this.updateBrothers(node, difference / 2)
|
||||||
|
}
|
||||||
// 更新兄弟节点的top
|
},
|
||||||
updateBrothers(node, addHeight) {
|
null,
|
||||||
if (node.parent) {
|
true
|
||||||
let childrenList = node.parent.children
|
)
|
||||||
let index = childrenList.findIndex(item => {
|
}
|
||||||
return item === node
|
|
||||||
})
|
// 更新兄弟节点的top
|
||||||
childrenList.forEach((item, _index) => {
|
|
||||||
if (item === node || item.hasCustomPosition()) {
|
updateBrothers(node, addHeight) {
|
||||||
// 适配自定义位置
|
if (node.parent) {
|
||||||
return
|
let childrenList = node.parent.children
|
||||||
}
|
let index = childrenList.findIndex(item => {
|
||||||
let _offset = 0
|
return item === node
|
||||||
// 上面的节点往上移
|
})
|
||||||
if (_index < index) {
|
childrenList.forEach((item, _index) => {
|
||||||
_offset = -addHeight
|
if (item === node || item.hasCustomPosition()) {
|
||||||
} else if (_index > index) {
|
// 适配自定义位置
|
||||||
// 下面的节点往下移
|
return
|
||||||
_offset = addHeight
|
}
|
||||||
}
|
let _offset = 0
|
||||||
item.top += _offset
|
// 上面的节点往上移
|
||||||
// 同步更新子节点的位置
|
if (_index < index) {
|
||||||
if (item.children && item.children.length) {
|
_offset = -addHeight
|
||||||
this.updateChildren(item.children, 'top', _offset)
|
} else if (_index > index) {
|
||||||
}
|
// 下面的节点往下移
|
||||||
})
|
_offset = addHeight
|
||||||
// 更新父节点的位置
|
}
|
||||||
this.updateBrothers(node.parent, addHeight)
|
item.top += _offset
|
||||||
}
|
// 同步更新子节点的位置
|
||||||
}
|
if (item.children && item.children.length) {
|
||||||
|
this.updateChildren(item.children, 'top', _offset)
|
||||||
// 绘制连线，连接该节点到其子节点
|
}
|
||||||
renderLine(node, lines, style, lineStyle) {
|
})
|
||||||
if (lineStyle === 'curve') {
|
// 更新父节点的位置
|
||||||
this.renderLineCurve(node, lines, style)
|
this.updateBrothers(node.parent, addHeight)
|
||||||
} else if (lineStyle === 'direct') {
|
}
|
||||||
this.renderLineDirect(node, lines, style)
|
}
|
||||||
} else {
|
|
||||||
this.renderLineStraight(node, lines, style)
|
// 绘制连线，连接该节点到其子节点
|
||||||
}
|
|
||||||
}
|
renderLine(node, lines, style, lineStyle) {
|
||||||
|
if (lineStyle === 'curve') {
|
||||||
// 直线风格连线
|
this.renderLineCurve(node, lines, style)
|
||||||
renderLineStraight(node, lines, style) {
|
} else if (lineStyle === 'direct') {
|
||||||
if (node.children.length <= 0) {
|
this.renderLineDirect(node, lines, style)
|
||||||
return []
|
} else {
|
||||||
}
|
this.renderLineStraight(node, lines, style)
|
||||||
let { left, top, width, height, expandBtnSize } = node
|
}
|
||||||
let marginX = this.getMarginX(node.layerIndex + 1)
|
}
|
||||||
let s1 = (marginX - expandBtnSize) * 0.6
|
|
||||||
node.children.forEach((item, index) => {
|
// 直线风格连线
|
||||||
let x1 =
|
|
||||||
node.layerIndex === 0 ? left + width : left + width + expandBtnSize
|
renderLineStraight(node, lines, style) {
|
||||||
let y1 = top + height / 2
|
if (node.children.length <= 0) {
|
||||||
let x2 = item.left
|
return []
|
||||||
let y2 = item.top + item.height / 2
|
}
|
||||||
// 节点使用横线风格，需要额外渲染横线
|
let { left, top, width, height, expandBtnSize } = node
|
||||||
let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
|
let marginX = this.getMarginX(node.layerIndex + 1)
|
||||||
? item.width
|
let s1 = (marginX - expandBtnSize) * 0.6
|
||||||
: 0
|
let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
|
||||||
let path = `M ${x1},${y1} L ${x1 + s1},${y1} L ${x1 + s1},${y2} L ${
|
node.children.forEach((item, index) => {
|
||||||
x2 + nodeUseLineStyleOffset
|
let x1 =
|
||||||
},${y2}`
|
node.layerIndex === 0 ? left + width : left + width + expandBtnSize
|
||||||
lines[index].plot(path)
|
let y1 = top + height / 2
|
||||||
style && style(lines[index], item)
|
let x2 = item.left
|
||||||
})
|
let y2 = item.top + item.height / 2
|
||||||
}
|
// 节点使用横线风格，需要额外渲染横线
|
||||||
|
let nodeUseLineStyleOffset = nodeUseLineStyle
|
||||||
// 直连风格
|
? item.width
|
||||||
renderLineDirect(node, lines, style) {
|
: 0
|
||||||
if (node.children.length <= 0) {
|
y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
|
||||||
return []
|
y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
|
||||||
}
|
let path = `M ${x1},${y1} L ${x1 + s1},${y1} L ${x1 + s1},${y2} L ${
|
||||||
let { left, top, width, height, expandBtnSize } = node
|
x2 + nodeUseLineStyleOffset
|
||||||
node.children.forEach((item, index) => {
|
},${y2}`
|
||||||
let x1 =
|
lines[index].plot(path)
|
||||||
node.layerIndex === 0 ? left + width / 2 : left + width + expandBtnSize
|
style && style(lines[index], item)
|
||||||
let y1 = top + height / 2
|
})
|
||||||
let x2 = item.left
|
}
|
||||||
let y2 = item.top + item.height / 2
|
|
||||||
// 节点使用横线风格，需要额外渲染横线
|
// 直连风格
|
||||||
let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
|
|
||||||
? ` L ${item.left + item.width},${y2}`
|
renderLineDirect(node, lines, style) {
|
||||||
: ''
|
if (node.children.length <= 0) {
|
||||||
let path = `M ${x1},${y1} L ${x2},${y2}` + nodeUseLineStylePath
|
return []
|
||||||
lines[index].plot(path)
|
}
|
||||||
style && style(lines[index], item)
|
let { left, top, width, height, expandBtnSize } = node
|
||||||
})
|
let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
|
||||||
}
|
node.children.forEach((item, index) => {
|
||||||
|
let x1 =
|
||||||
// 曲线风格连线
|
node.layerIndex === 0 ? left + width / 2 : left + width + expandBtnSize
|
||||||
renderLineCurve(node, lines, style) {
|
let y1 = top + height / 2
|
||||||
if (node.children.length <= 0) {
|
let x2 = item.left
|
||||||
return []
|
let y2 = item.top + item.height / 2
|
||||||
}
|
y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
|
||||||
let { left, top, width, height, expandBtnSize } = node
|
y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
|
||||||
node.children.forEach((item, index) => {
|
// 节点使用横线风格，需要额外渲染横线
|
||||||
let x1 =
|
let nodeUseLineStylePath = nodeUseLineStyle
|
||||||
node.layerIndex === 0 ? left + width / 2 : left + width + expandBtnSize
|
? ` L ${item.left + item.width},${y2}`
|
||||||
let y1 = top + height / 2
|
: ''
|
||||||
let x2 = item.left
|
let path = `M ${x1},${y1} L ${x2},${y2}` + nodeUseLineStylePath
|
||||||
let y2 = item.top + item.height / 2
|
lines[index].plot(path)
|
||||||
let path = ''
|
style && style(lines[index], item)
|
||||||
// 节点使用横线风格，需要额外渲染横线
|
})
|
||||||
let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
|
}
|
||||||
? ` L ${item.left + item.width},${y2}`
|
|
||||||
: ''
|
// 曲线风格连线
|
||||||
if (node.isRoot) {
|
|
||||||
path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath
|
renderLineCurve(node, lines, style) {
|
||||||
} else {
|
if (node.children.length <= 0) {
|
||||||
path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath
|
return []
|
||||||
}
|
}
|
||||||
lines[index].plot(path)
|
let { left, top, width, height, expandBtnSize } = node
|
||||||
style && style(lines[index], item)
|
let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
|
||||||
})
|
node.children.forEach((item, index) => {
|
||||||
}
|
let x1 =
|
||||||
|
node.layerIndex === 0 ? left + width / 2 : left + width + expandBtnSize
|
||||||
// 渲染按钮
|
let y1 = top + height / 2
|
||||||
renderExpandBtn(node, btn) {
|
let x2 = item.left
|
||||||
let { width, height } = node
|
let y2 = item.top + item.height / 2
|
||||||
let { translateX, translateY } = btn.transform()
|
let path = ''
|
||||||
// 节点使用横线风格，需要调整展开收起按钮位置
|
y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
|
||||||
let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
|
y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
|
||||||
? height / 2
|
// 节点使用横线风格，需要额外渲染横线
|
||||||
: 0
|
let nodeUseLineStylePath = nodeUseLineStyle
|
||||||
btn.translate(
|
? ` L ${item.left + item.width},${y2}`
|
||||||
width - translateX,
|
: ''
|
||||||
height / 2 - translateY + nodeUseLineStyleOffset
|
if (node.isRoot) {
|
||||||
)
|
path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath
|
||||||
}
|
} else {
|
||||||
|
path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath
|
||||||
// 创建概要节点
|
}
|
||||||
renderGeneralization(node, gLine, gNode) {
|
lines[index].plot(path)
|
||||||
let {
|
style && style(lines[index], item)
|
||||||
top,
|
})
|
||||||
bottom,
|
}
|
||||||
right,
|
|
||||||
generalizationLineMargin,
|
// 渲染按钮
|
||||||
generalizationNodeMargin
|
|
||||||
} = this.getNodeBoundaries(node, 'h')
|
renderExpandBtn(node, btn) {
|
||||||
let x1 = right + generalizationLineMargin
|
let { width, height } = node
|
||||||
let y1 = top
|
let { translateX, translateY } = btn.transform()
|
||||||
let x2 = right + generalizationLineMargin
|
// 节点使用横线风格，需要调整展开收起按钮位置
|
||||||
let y2 = bottom
|
let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
|
||||||
let cx = x1 + 20
|
? height / 2
|
||||||
let cy = y1 + (y2 - y1) / 2
|
: 0
|
||||||
let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
|
btn.translate(
|
||||||
gLine.plot(path)
|
width - translateX,
|
||||||
gNode.left = right + generalizationNodeMargin
|
height / 2 - translateY + nodeUseLineStyleOffset
|
||||||
gNode.top = top + (bottom - top - gNode.height) / 2
|
)
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
// 创建概要节点
|
||||||
export default LogicalStructure
|
|
||||||
|
renderGeneralization(node, gLine, gNode) {
|
||||||
|
let {
|
||||||
|
top,
|
||||||
|
bottom,
|
||||||
|
right,
|
||||||
|
generalizationLineMargin,
|
||||||
|
generalizationNodeMargin
|
||||||
|
} = this.getNodeBoundaries(node, 'h')
|
||||||
|
let x1 = right + generalizationLineMargin
|
||||||
|
let y1 = top
|
||||||
|
let x2 = right + generalizationLineMargin
|
||||||
|
let y2 = bottom
|
||||||
|
let cx = x1 + 20
|
||||||
|
let cy = y1 + (y2 - y1) / 2
|
||||||
|
let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
|
||||||
|
gLine.plot(path)
|
||||||
|
gNode.left = right + generalizationNodeMargin
|
||||||
|
gNode.top = top + (bottom - top - gNode.height) / 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LogicalStructure
|
||||||
|
|||||||
@ -208,11 +208,12 @@ class MindMap extends Base {
|
|||||||
let { left, top, width, height, expandBtnSize } = node
|
let { left, top, width, height, expandBtnSize } = node
|
||||||
let marginX = this.getMarginX(node.layerIndex + 1)
|
let marginX = this.getMarginX(node.layerIndex + 1)
|
||||||
let s1 = (marginX - expandBtnSize) * 0.6
|
let s1 = (marginX - expandBtnSize) * 0.6
|
||||||
|
let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
|
||||||
node.children.forEach((item, index) => {
|
node.children.forEach((item, index) => {
|
||||||
let x1 = 0
|
let x1 = 0
|
||||||
let _s = 0
|
let _s = 0
|
||||||
// 节点使用横线风格，需要额外渲染横线
|
// 节点使用横线风格，需要额外渲染横线
|
||||||
let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
|
let nodeUseLineStyleOffset = nodeUseLineStyle
|
||||||
? item.width
|
? item.width
|
||||||
: 0
|
: 0
|
||||||
if (item.dir === 'left') {
|
if (item.dir === 'left') {
|
||||||
@ -226,6 +227,8 @@ class MindMap extends Base {
|
|||||||
let y1 = top + height / 2
|
let y1 = top + height / 2
|
||||||
let x2 = item.dir === 'left' ? item.left + item.width : item.left
|
let x2 = item.dir === 'left' ? item.left + item.width : item.left
|
||||||
let y2 = item.top + item.height / 2
|
let y2 = item.top + item.height / 2
|
||||||
|
y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
|
||||||
|
y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
|
||||||
let path = `M ${x1},${y1} L ${x1 + _s},${y1} L ${x1 + _s},${y2} L ${
|
let path = `M ${x1},${y1} L ${x1 + _s},${y1} L ${x1 + _s},${y2} L ${
|
||||||
x2 + nodeUseLineStyleOffset
|
x2 + nodeUseLineStyleOffset
|
||||||
},${y2}`
|
},${y2}`
|
||||||
@ -241,6 +244,7 @@ class MindMap extends Base {
|
|||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
let { left, top, width, height, expandBtnSize } = node
|
let { left, top, width, height, expandBtnSize } = node
|
||||||
|
let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
|
||||||
node.children.forEach((item, index) => {
|
node.children.forEach((item, index) => {
|
||||||
let x1 =
|
let x1 =
|
||||||
node.layerIndex === 0
|
node.layerIndex === 0
|
||||||
@ -251,9 +255,11 @@ class MindMap extends Base {
|
|||||||
let y1 = top + height / 2
|
let y1 = top + height / 2
|
||||||
let x2 = item.dir === 'left' ? item.left + item.width : item.left
|
let x2 = item.dir === 'left' ? item.left + item.width : item.left
|
||||||
let y2 = item.top + item.height / 2
|
let y2 = item.top + item.height / 2
|
||||||
|
y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
|
||||||
|
y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
|
||||||
// 节点使用横线风格，需要额外渲染横线
|
// 节点使用横线风格，需要额外渲染横线
|
||||||
let nodeUseLineStylePath = ''
|
let nodeUseLineStylePath = ''
|
||||||
if (this.mindMap.themeConfig.nodeUseLineStyle) {
|
if (nodeUseLineStyle) {
|
||||||
if (item.dir === 'left') {
|
if (item.dir === 'left') {
|
||||||
nodeUseLineStylePath = ` L ${item.left},${y2}`
|
nodeUseLineStylePath = ` L ${item.left},${y2}`
|
||||||
} else {
|
} else {
|
||||||
@ -273,6 +279,7 @@ class MindMap extends Base {
|
|||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
let { left, top, width, height, expandBtnSize } = node
|
let { left, top, width, height, expandBtnSize } = node
|
||||||
|
let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
|
||||||
node.children.forEach((item, index) => {
|
node.children.forEach((item, index) => {
|
||||||
let x1 =
|
let x1 =
|
||||||
node.layerIndex === 0
|
node.layerIndex === 0
|
||||||
@ -284,6 +291,8 @@ class MindMap extends Base {
|
|||||||
let x2 = item.dir === 'left' ? item.left + item.width : item.left
|
let x2 = item.dir === 'left' ? item.left + item.width : item.left
|
||||||
let y2 = item.top + item.height / 2
|
let y2 = item.top + item.height / 2
|
||||||
let path = ''
|
let path = ''
|
||||||
|
y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
|
||||||
|
y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
|
||||||
// 节点使用横线风格，需要额外渲染横线
|
// 节点使用横线风格，需要额外渲染横线
|
||||||
let nodeUseLineStylePath = ''
|
let nodeUseLineStylePath = ''
|
||||||
if (this.mindMap.themeConfig.nodeUseLineStyle) {
|
if (this.mindMap.themeConfig.nodeUseLineStyle) {
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
New：Automatic line wrapping function is added to node text.
|
New：Automatic line wrapping function is added to node text.
|
||||||
|
|
||||||
Fix: Fix the problem of deletion exceptions if there are root nodes in the batch deleted nodes.
|
Fix: 1.Fix the problem of deletion exceptions if there are root nodes in the batch deleted nodes. 2.Fix the problem that high node height will overlap with other nodes in the case of bottom edge style.
|
||||||
|
|
||||||
## 0.3.3
|
## 0.3.3
|
||||||
|
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
<h1>Changelog</h1>
|
<h1>Changelog</h1>
|
||||||
<h2>0.3.4</h2>
|
<h2>0.3.4</h2>
|
||||||
<p>New：Automatic line wrapping function is added to node text.</p>
|
<p>New：Automatic line wrapping function is added to node text.</p>
|
||||||
<p>Fix: Fix the problem of deletion exceptions if there are root nodes in the batch deleted nodes.</p>
|
<p>Fix: 1.Fix the problem of deletion exceptions if there are root nodes in the batch deleted nodes. 2.Fix the problem that high node height will overlap with other nodes in the case of bottom edge style.</p>
|
||||||
<h2>0.3.3</h2>
|
<h2>0.3.3</h2>
|
||||||
<p>Fix: The root node text cannot wrap.</p>
|
<p>Fix: The root node text cannot wrap.</p>
|
||||||
<h2>0.3.2</h2>
|
<h2>0.3.2</h2>
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
New：节点文本增加自动换行功能。
|
New：节点文本增加自动换行功能。
|
||||||
|
|
||||||
Fix：修复批量删除的节点中如果存在根节点会出现删除异常的问题。
|
Fix：1.修复批量删除的节点中如果存在根节点会出现删除异常的问题。2.修复底边风格的情况下，节点高度过高会和其他节点重叠的问题。
|
||||||
|
|
||||||
## 0.3.3
|
## 0.3.3
|
||||||
|
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
<h1>Changelog</h1>
|
<h1>Changelog</h1>
|
||||||
<h2>0.3.4</h2>
|
<h2>0.3.4</h2>
|
||||||
<p>New：节点文本增加自动换行功能。</p>
|
<p>New：节点文本增加自动换行功能。</p>
|
||||||
<p>Fix：修复批量删除的节点中如果存在根节点会出现删除异常的问题。</p>
|
<p>Fix：1.修复批量删除的节点中如果存在根节点会出现删除异常的问题。2.修复底边风格的情况下，节点高度过高会和其他节点重叠的问题。</p>
|
||||||
<h2>0.3.3</h2>
|
<h2>0.3.3</h2>
|
||||||
<p>修复：根节点文字无法换行的问题。</p>
|
<p>修复：根节点文字无法换行的问题。</p>
|
||||||
<h2>0.3.2</h2>
|
<h2>0.3.2</h2>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user