coosld/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-25 20:37:50 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

修改鱼骨结构

Browse Source
This commit is contained in:
wanglin2 2023-04-14 22:04:58 +08:00
parent 95fe3189d5
commit be9668c7b8
9 changed files with 48 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
simple-mind-map/index.js
View File

@ -18,6 +18,8 @@ const defaultOpt = {
readonly: false,
// 布局
layout: CONSTANTS.LAYOUT.LOGICAL_STRUCTURE,
// 如果结构为鱼骨图，那么可以通过该选项控制倾斜角度
fishboneDeg: 45,
// 主题
theme: 'default', // 内置主题：default（默认主题）
// 主题配置，会和所选择的主题进行合并

46
simple-mind-map/src/layouts/Fishbone.js
View File

@ -54,11 +54,10 @@ class Fishbone extends Base {
}
// 计算二级节点的top值
if (parent._node.isRoot) {
let marginY = this.getMarginY(layerIndex + 1)
if (this.checkIsTop(newNode)) {
newNode.top = parent._node.top - newNode.height - marginY
newNode.top = parent._node.top - newNode.height
} else {
newNode.top = parent._node.top + parent._node.height + marginY
newNode.top = parent._node.top + parent._node.height
}
}
}
@ -77,23 +76,21 @@ class Fishbone extends Base {
walk(
this.root,
null,
(node, parent, isRoot, layerIndex, index) => {
let marginX = this.getMarginX(layerIndex + 1)
let marginY = this.getMarginY(layerIndex + 1)
(node, parent, isRoot, layerIndex) => {
if (node.isRoot) {
let topTotalLeft = node.left + node.width + node.height + marginX
let bottomTotalLeft = node.left + node.width + node.height + marginX
let topTotalLeft = node.left + node.width + node.height
let bottomTotalLeft = node.left + node.width + node.height
node.children.forEach(item => {
if (this.checkIsTop(item)) {
item.left = topTotalLeft
topTotalLeft += item.width + marginX
topTotalLeft += item.width
} else {
item.left = bottomTotalLeft + 20
bottomTotalLeft += item.width + marginX
bottomTotalLeft += item.width
}
})
}
let params = { layerIndex, node, ctx: this, marginY }
let params = { layerIndex, node, ctx: this }
if (this.checkIsTop(node)) {
utils.top.computedLeftTopValue(params)
} else {
@ -114,17 +111,15 @@ class Fishbone extends Base {
if (!node.nodeData.data.expand) {
return
}
let marginY = this.getMarginY(layerIndex + 1)
let params = { node, parent, layerIndex, ctx: this, marginY }
let params = { node, parent, layerIndex, ctx: this }
if (this.checkIsTop(node)) {
utils.top.adjustLeftTopValueBefore(params)
} else {
utils.bottom.adjustLeftTopValueBefore(params)
}
},
(node, parent, isRoot, layerIndex) => {
let marginY = this.getMarginY(layerIndex + 1)
let params = { parent, node, ctx: this, marginY }
(node, parent) => {
let params = { parent, node, ctx: this }
if (this.checkIsTop(node)) {
utils.top.adjustLeftTopValueAfter(params)
} else {
@ -159,8 +154,7 @@ class Fishbone extends Base {
let loop = node => {
totalHeight +=
node.height +
(this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) +
this.getMarginY(node.layerIndex)
(this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
if (node.children.length) {
node.children.forEach(item => {
loop(item)
@ -180,7 +174,6 @@ class Fishbone extends Base {
if (item.children && item.children.length) {
this.updateChildren(item.children, 'left', totalAddWidth)
}
// let areaWidth = this.getNodeAreaWidth(item)
let { left, right } = this.getNodeBoundaries(item, 'h')
let areaWidth = right - left
let difference = areaWidth - item.width
@ -235,20 +228,20 @@ class Fishbone extends Base {
if (node.layerIndex !== 1 && node.children.length <= 0) {
return []
}
let { left, top, width, height, expandBtnSize } = node
let { top, height, expandBtnSize } = node
let len = node.children.length
if (node.isRoot) {
// 当前节点是根节点
// 根节点的子节点是和根节点同一水平线排列
let maxx = -Infinity
node.children.forEach((item, index) => {
node.children.forEach((item) => {
if (item.left > maxx) {
maxx = item.left
}
// 水平线段到二级节点的连线
let nodeLineX = item.left + item.width * 0.3
let offset = item.height + node.height / 2 + this.getMarginY(item.layerIndex + 1)
let offsetX = offset / Math.tan(degToRad(45))
let offset = item.height + node.height / 2
let offsetX = offset / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
let line = this.draw.path()
if (this.checkIsTop(item)) {
line.plot(
@ -269,11 +262,11 @@ class Fishbone extends Base {
})
// 从根节点出发的水平线
let nodeHalfTop = node.top + node.height / 2
let offset = node.height / 2 + this.getMarginY(node.layerIndex + 2)
let offset = node.height / 2
let line = this.draw.path()
line.plot(
`M ${node.left + node.width},${nodeHalfTop} L ${
maxx - offset / Math.tan(degToRad(45))
maxx - offset / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
},${nodeHalfTop}`
)
node.style.line(line)
@ -318,7 +311,8 @@ class Fishbone extends Base {
height,
expandBtnSize,
maxy,
miny
miny,
ctx: this
}
if (this.checkIsTop(node)) {
utils.top.renderLine(params)

4
simple-mind-map/src/layouts/FishboneBottom.js
View File

@ -170,7 +170,7 @@ class Fishbone extends Base {
item.top += _top
// 调整left
let offsetLeft =
(totalHeight2 + nodeTotalHeight) / Math.tan(degToRad(45))
(totalHeight2 + nodeTotalHeight) / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
item.left += offsetLeft
totalHeight += offset
totalHeight2 += nodeTotalHeight
@ -312,7 +312,7 @@ class Fishbone extends Base {
if (node.parent && node.parent.isRoot) {
line.plot(
`M ${x},${top + height} L ${x + lineLength},${
top + height + Math.tan(degToRad(45)) * lineLength
top + height + Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) * lineLength
}`
)
} else {

6
simple-mind-map/src/layouts/FishboneTop.js
View File

@ -140,7 +140,7 @@ class Fishbone extends Base {
node.top - (item.top - node.top) - nodeTotalHeight + node.height
// 调整left
let offsetLeft =
(nodeTotalHeight + totalHeight) / Math.tan(degToRad(45))
(nodeTotalHeight + totalHeight) / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
item.left += offsetLeft
totalHeight += nodeTotalHeight
// 同步更新后代节点
@ -285,14 +285,14 @@ class Fishbone extends Base {
) {
line.plot(
`M ${x},${top} L ${x + lineLength},${
top - Math.tan(degToRad(45)) * lineLength
top - Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) * lineLength
}`
)
} else {
if (node.parent && node.parent.isRoot) {
line.plot(
`M ${x},${top} L ${x + lineLength},${
top - Math.tan(degToRad(45)) * lineLength
top - Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) * lineLength
}`
)
} else {

40
simple-mind-map/src/layouts/fishboneUtils.js
View File

@ -31,38 +31,37 @@ export default {
lineLength,
height,
expandBtnSize,
maxy
maxy,
ctx
}) {
if (node.parent && node.parent.isRoot) {
line.plot(
`M ${x},${top} L ${x + lineLength},${
top - Math.tan(degToRad(45)) * lineLength
top - Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg)) * lineLength
}`
)
} else {
line.plot(`M ${x},${top + height + expandBtnSize} L ${x},${maxy}`)
}
},
computedLeftTopValue({ layerIndex, node, ctx, marginY }) {
computedLeftTopValue({ layerIndex, node, ctx }) {
if (layerIndex >= 1 && node.children) {
// 遍历三级及以下节点的子节点
let startLeft = node.left + node.width * 0.5
let totalTop =
node.top +
node.height +
marginY +
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
node.children.forEach(item => {
item.left = startLeft
item.top += totalTop
totalTop +=
item.height +
marginY +
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
})
}
},
adjustLeftTopValueBefore({ node, parent, ctx, marginY }) {
adjustLeftTopValueBefore({ node, parent, ctx }) {
// 调整top
let len = node.children.length
// 调整三级及以下节点的top
@ -73,11 +72,11 @@ export default {
item.height +
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
)
}, 0) + len * marginY
}, 0)
ctx.updateBrothersTop(node, totalHeight)
}
},
adjustLeftTopValueAfter({ parent, node, ctx, marginY }) {
adjustLeftTopValueAfter({ parent, node, ctx }) {
// 将二级节点的子节点移到上方
if (parent && parent.isRoot) {
// 遍历二级节点的子节点
@ -87,10 +86,10 @@ export default {
let nodeTotalHeight = ctx.getNodeAreaHeight(item)
let _top = item.top
item.top =
node.top - (item.top - node.top) - nodeTotalHeight + node.height + marginY
node.top - (item.top - node.top) - nodeTotalHeight + node.height
// 调整left
let offsetLeft =
(nodeTotalHeight + totalHeight) / Math.tan(degToRad(45))
(nodeTotalHeight + totalHeight) / Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
item.left += offsetLeft
totalHeight += nodeTotalHeight
// 同步更新后代节点
@ -124,25 +123,24 @@ export default {
)
}
},
renderLine({ node, line, top, x, lineLength, height, miny }) {
renderLine({ node, line, top, x, lineLength, height, miny, ctx }) {
if (node.parent && node.parent.isRoot) {
line.plot(
`M ${x},${top + height} L ${x + lineLength},${
top + height + Math.tan(degToRad(45)) * lineLength
top + height + Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg)) * lineLength
}`
)
} else {
line.plot(`M ${x},${top} L ${x},${miny}`)
}
},
computedLeftTopValue({ layerIndex, node, ctx, marginY }) {
computedLeftTopValue({ layerIndex, node, ctx }) {
if (layerIndex === 1 && node.children) {
// 遍历二级节点的子节点
let startLeft = node.left + node.width * 0.5
let totalTop =
node.top +
node.height +
marginY +
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
node.children.forEach(item => {
@ -152,7 +150,6 @@ export default {
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
totalTop +=
item.height +
marginY +
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
})
}
@ -161,19 +158,17 @@ export default {
let startLeft = node.left + node.width * 0.5
let totalTop =
node.top -
marginY -
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
node.children.forEach(item => {
item.left = startLeft
item.top = totalTop - item.height
totalTop -=
item.height +
marginY +
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
})
}
},
adjustLeftTopValueBefore({ node, ctx, layerIndex, marginY }) {
adjustLeftTopValueBefore({ node, ctx, layerIndex }) {
// 调整top
let len = node.children.length
if (layerIndex > 2 && len > 0) {
@ -183,12 +178,11 @@ export default {
item.height +
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
)
}, 0) +
len * marginY
}, 0)
ctx.updateBrothersTop(node, -totalHeight)
}
},
adjustLeftTopValueAfter({ parent, node, ctx, marginY }) {
adjustLeftTopValueAfter({ parent, node, ctx }) {
// 将二级节点的子节点移到上方
if (parent && parent.isRoot) {
// 遍历二级节点的子节点
@ -205,10 +199,10 @@ export default {
(hasChildren ? item.expandBtnSize : 0)
: 0
let _top = totalHeight + offset
item.top += _top - marginY
item.top += _top
// 调整left
let offsetLeft =
(totalHeight2 + nodeTotalHeight) / Math.tan(degToRad(45))
(totalHeight2 + nodeTotalHeight) / Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
item.left += offsetLeft
totalHeight += offset
totalHeight2 += nodeTotalHeight

BIN
web/src/assets/img/fishbone.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
web/src/assets/img/timeline.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
web/src/assets/img/timeline2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

5
web/src/config/constant.js
View File

@ -3,7 +3,10 @@ export const layoutImgMap = {
logicalStructure: require('../assets/img/logicalStructure.jpg'),
mindMap: require('../assets/img/mindMap.jpg'),
organizationStructure: require('../assets/img/organizationStructure.jpg'),
catalogOrganization: require('../assets/img/catalogOrganization.jpg')
catalogOrganization: require('../assets/img/catalogOrganization.jpg'),
timeline: require('../assets/img/timeline.jpg'),
timeline2: require('../assets/img/timeline2.jpg'),
fishbone: require('../assets/img/fishbone.jpg'),
}
// 主题图片映射