diff --git a/index.html b/index.html
index 17221fbc..21227c32 100644
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-一个简单的web思维导图实现
\ No newline at end of file
+一个简单的web思维导图实现
\ No newline at end of file
diff --git a/simple-mind-map/package.json b/simple-mind-map/package.json
index ccd5d0c9..6403a28d 100644
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
{
"name": "simple-mind-map",
- "version": "0.5.4",
+ "version": "0.5.4-fix.1",
"description": "一个简单的web在线思维导图",
"authors": [
{
diff --git a/simple-mind-map/src/layouts/Fishbone.js b/simple-mind-map/src/layouts/Fishbone.js
index a5ca82c4..c4a2dc0f 100644
--- a/simple-mind-map/src/layouts/Fishbone.js
+++ b/simple-mind-map/src/layouts/Fishbone.js
@@ -8,6 +8,8 @@ class Fishbone extends Base {
// 构造函数
constructor(opt = {}) {
super(opt)
+ this.indent = 0.3
+ this.childIndent = 0.5
}
// 布局
@@ -239,21 +241,21 @@ class Fishbone extends Base {
maxx = item.left
}
// 水平线段到二级节点的连线
- let nodeLineX = item.left + item.width * 0.3
- let offset = item.height + node.height / 2
+ let nodeLineX = item.left
+ let offset = node.height / 2
let offsetX = offset / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
let line = this.draw.path()
if (this.checkIsTop(item)) {
line.plot(
- `M ${nodeLineX - offsetX},${item.top + offset} L ${nodeLineX},${
- item.top
+ `M ${nodeLineX - offsetX},${item.top + item.height + offset} L ${item.left},${
+ item.top + item.height
}`
)
} else {
line.plot(
`M ${nodeLineX - offsetX},${
- item.top + item.height - offset
- } L ${nodeLineX},${item.top + item.height}`
+ item.top - offset
+ } L ${nodeLineX},${item.top}`
)
}
node.style.line(line)
@@ -277,7 +279,7 @@ class Fishbone extends Base {
let maxy = -Infinity
let miny = Infinity
let maxx = -Infinity
- let x = node.left + node.width * 0.3
+ let x = node.left + node.width * this.indent
node.children.forEach((item, index) => {
if (item.left > maxx) {
maxx = item.left
@@ -300,7 +302,7 @@ class Fishbone extends Base {
if (len >= 0) {
let line = this.draw.path()
expandBtnSize = len > 0 ? expandBtnSize : 0
- let lineLength = maxx - node.left - node.width * 0.3
+ let lineLength = maxx - node.left - node.width * this.indent
lineLength = Math.max(lineLength, 0)
let params = {
node,
diff --git a/simple-mind-map/src/layouts/fishboneUtils.js b/simple-mind-map/src/layouts/fishboneUtils.js
index eece33df..ec47f1e5 100644
--- a/simple-mind-map/src/layouts/fishboneUtils.js
+++ b/simple-mind-map/src/layouts/fishboneUtils.js
@@ -47,7 +47,7 @@ export default {
computedLeftTopValue({ layerIndex, node, ctx }) {
if (layerIndex >= 1 && node.children) {
// 遍历三级及以下节点的子节点
- let startLeft = node.left + node.width * 0.5
+ let startLeft = node.left + node.width * ctx.childIndent
let totalTop =
node.top +
node.height +
@@ -80,22 +80,21 @@ export default {
// 将二级节点的子节点移到上方
if (parent && parent.isRoot) {
// 遍历二级节点的子节点
- let totalHeight = 0
+ let totalHeight = node.expandBtnSize
node.children.forEach(item => {
// 调整top
let nodeTotalHeight = ctx.getNodeAreaHeight(item)
let _top = item.top
+ let _left = item.left
item.top =
node.top - (item.top - node.top) - nodeTotalHeight + node.height
// 调整left
- let offsetLeft =
- (nodeTotalHeight + totalHeight) / Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
- item.left += offsetLeft
+ item.left = node.left + node.width * ctx.indent + (nodeTotalHeight + totalHeight) / Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
totalHeight += nodeTotalHeight
// 同步更新后代节点
ctx.updateChildrenPro(item.children, {
top: item.top - _top,
- left: offsetLeft
+ left: item.left - _left
})
})
}
@@ -137,7 +136,7 @@ export default {
computedLeftTopValue({ layerIndex, node, ctx }) {
if (layerIndex === 1 && node.children) {
// 遍历二级节点的子节点
- let startLeft = node.left + node.width * 0.5
+ let startLeft = node.left + node.width * ctx.childIndent
let totalTop =
node.top +
node.height +
@@ -155,7 +154,7 @@ export default {
}
if (layerIndex > 1 && node.children) {
// 遍历三级及以下节点的子节点
- let startLeft = node.left + node.width * 0.5
+ let startLeft = node.left + node.width * ctx.childIndent
let totalTop =
node.top -
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
@@ -187,7 +186,7 @@ export default {
if (parent && parent.isRoot) {
// 遍历二级节点的子节点
let totalHeight = 0
- let totalHeight2 = 0
+ let totalHeight2 = node.expandBtnSize
node.children.forEach(item => {
// 调整top
let hasChildren = ctx.getNodeActChildrenLength(item) > 0
@@ -199,17 +198,16 @@ export default {
(hasChildren ? item.expandBtnSize : 0)
: 0
let _top = totalHeight + offset
+ let _left = item.left
item.top += _top
// 调整left
- let offsetLeft =
- (totalHeight2 + nodeTotalHeight) / Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
- item.left += offsetLeft
+ item.left = node.left + node.width * ctx.indent + (nodeTotalHeight + totalHeight2) / Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
totalHeight += offset
totalHeight2 += nodeTotalHeight
// 同步更新后代节点
ctx.updateChildrenPro(item.children, {
top: _top,
- left: offsetLeft
+ left: item.left - _left
})
})
}