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

Feat：新增竖向时间轴

Browse Source
This commit is contained in:
wanglin2 2023-07-05 16:49:32 +08:00
parent 7a20ce2f79
commit 31f21ce013
8 changed files with 455 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
simple-mind-map/src/constants/constant.js
View File

@ -170,7 +170,8 @@ export const CONSTANTS = {
CATALOG_ORGANIZATION: 'catalogOrganization',
TIMELINE: 'timeline',
TIMELINE2: 'timeline2',
FISHBONE: 'fishbone'
FISHBONE: 'fishbone',
VERTICAL_TIMELINE: 'verticalTimeline'
},
DIR: {
UP: 'up',
@ -206,8 +207,10 @@ export const CONSTANTS = {
BOTTOM: 'bottom',
CENTER: 'center'
},
TIMELINE_DIR: {
LAYOUT_GROW_DIR: {
LEFT: 'left',
TOP: 'top',
RIGHT: 'right',
BOTTOM: 'bottom'
}
}
@ -246,6 +249,10 @@ export const layoutList = [
name: '时间轴2',
value: CONSTANTS.LAYOUT.TIMELINE2,
},
{
name: '竖向时间轴',
value: CONSTANTS.LAYOUT.VERTICAL_TIMELINE,
},
{
name: '鱼骨图',
value: CONSTANTS.LAYOUT.FISHBONE,
@ -258,6 +265,7 @@ export const layoutValueList = [
CONSTANTS.LAYOUT.ORGANIZATION_STRUCTURE,
CONSTANTS.LAYOUT.TIMELINE,
CONSTANTS.LAYOUT.TIMELINE2,
CONSTANTS.LAYOUT.VERTICAL_TIMELINE,
CONSTANTS.LAYOUT.FISHBONE
]

3
simple-mind-map/src/core/render/Render.js
View File

@ -4,6 +4,7 @@ import MindMap from '../../layouts/MindMap'
import CatalogOrganization from '../../layouts/CatalogOrganization'
import OrganizationStructure from '../../layouts/OrganizationStructure'
import Timeline from '../../layouts/Timeline'
import VerticalTimeline from '../../layouts/VerticalTimeline'
import Fishbone from '../../layouts/Fishbone'
import TextEdit from './TextEdit'
import { copyNodeTree, simpleDeepClone, walk } from '../../utils'
@ -25,6 +26,8 @@ const layouts = {
[CONSTANTS.LAYOUT.TIMELINE]: Timeline,
// 时间轴2
[CONSTANTS.LAYOUT.TIMELINE2]: Timeline,
// 竖向时间轴
[CONSTANTS.LAYOUT.VERTICAL_TIMELINE]: VerticalTimeline,
// 鱼骨图
[CONSTANTS.LAYOUT.FISHBONE]: Fishbone,
}

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

@ -51,8 +51,8 @@ class Fishbone extends Base {
// 节点生长方向
newNode.dir =
index % 2 === 0
? CONSTANTS.TIMELINE_DIR.TOP
: CONSTANTS.TIMELINE_DIR.BOTTOM
? CONSTANTS.LAYOUT_GROW_DIR.TOP
: CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
}
// 计算二级节点的top值
if (parent._node.isRoot) {
@ -222,7 +222,7 @@ class Fishbone extends Base {
// 检查节点是否是上方节点
checkIsTop(node) {
return node.dir === CONSTANTS.TIMELINE_DIR.TOP
return node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP
}
// 绘制连线，连接该节点到其子节点

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

@ -52,8 +52,8 @@ class Fishbone extends Base {
// 节点生长方向
newNode.dir =
index % 2 === 0
? CONSTANTS.TIMELINE_DIR.TOP
: CONSTANTS.TIMELINE_DIR.BOTTOM
? CONSTANTS.LAYOUT_GROW_DIR.TOP
: CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
}
// 计算二级节点的top值
if (parent._node.isRoot) {

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

@ -52,8 +52,8 @@ class Fishbone extends Base {
// 节点生长方向
newNode.dir =
index % 2 === 0
? CONSTANTS.TIMELINE_DIR.TOP
: CONSTANTS.TIMELINE_DIR.BOTTOM
? CONSTANTS.LAYOUT_GROW_DIR.TOP
: CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
}
// 计算二级节点的top值
if (parent._node.isRoot) {
@ -281,7 +281,7 @@ class Fishbone extends Base {
if (
node.parent &&
node.parent.isRoot &&
node.dir === CONSTANTS.TIMELINE_DIR.TOP
node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP
) {
line.plot(
`M ${x},${top} L ${x + lineLength},${

31
simple-mind-map/src/layouts/MindMap.js
View File

@ -1,5 +1,6 @@
import Base from './Base'
import { walk, asyncRun } from '../utils'
import { CONSTANTS } from '../constants/constant'
// 思维导图
class MindMap extends Base {
@ -45,11 +46,11 @@ class MindMap extends Base {
newNode.dir = parent._node.dir
} else {
// 节点生长方向
newNode.dir = index % 2 === 0 ? 'right' : 'left'
newNode.dir = index % 2 === 0 ? CONSTANTS.LAYOUT_GROW_DIR.RIGHT : CONSTANTS.LAYOUT_GROW_DIR.LEFT
}
// 根据生长方向定位到父节点的左侧或右侧
newNode.left =
newNode.dir === 'right'
newNode.dir === CONSTANTS.LAYOUT_GROW_DIR.RIGHT
? parent._node.left +
parent._node.width +
this.getMarginX(layerIndex)
@ -72,7 +73,7 @@ class MindMap extends Base {
let leftChildrenAreaHeight = 0
let rightChildrenAreaHeight = 0
cur._node.children.forEach(item => {
if (item.dir === 'left') {
if (item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
leftLen++
leftChildrenAreaHeight += item.height
} else {
@ -109,7 +110,7 @@ class MindMap extends Base {
let leftTotalTop = baseTop - node.leftChildrenAreaHeight / 2
let rightTotalTop = baseTop - node.rightChildrenAreaHeight / 2
node.children.forEach(cur => {
if (cur.dir === 'left') {
if (cur.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
cur.top = leftTotalTop
leftTotalTop += cur.height + marginY
} else {
@ -162,7 +163,7 @@ class MindMap extends Base {
return
}
let _offset = 0
let addHeight = item.dir === 'left' ? leftAddHeight : rightAddHeight
let addHeight = item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT ? leftAddHeight : rightAddHeight
// 上面的节点往上移
if (_index < index) {
_offset = -addHeight
@ -211,7 +212,7 @@ class MindMap extends Base {
let nodeUseLineStyleOffset = nodeUseLineStyle
? item.width
: 0
if (item.dir === 'left') {
if (item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
_s = -s1
x1 = node.layerIndex === 0 ? left : left - expandBtnSize
nodeUseLineStyleOffset = -nodeUseLineStyleOffset
@ -220,7 +221,7 @@ class MindMap extends Base {
x1 = node.layerIndex === 0 ? left + width : left + width + expandBtnSize
}
let y1 = top + height / 2
let x2 = item.dir === 'left' ? item.left + item.width : item.left
let x2 = item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT ? item.left + item.width : item.left
let y2 = item.top + item.height / 2
y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
@ -246,18 +247,18 @@ class MindMap extends Base {
let x1 =
node.layerIndex === 0
? left + width / 2
: item.dir === 'left'
: item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
? left - expandBtnSize
: left + width + expandBtnSize
let y1 = top + height / 2
let x2 = item.dir === 'left' ? item.left + item.width : item.left
let x2 = item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT ? item.left + item.width : item.left
let y2 = item.top + item.height / 2
y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
// 节点使用横线风格，需要额外渲染横线
let nodeUseLineStylePath = ''
if (nodeUseLineStyle) {
if (item.dir === 'left') {
if (item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
nodeUseLineStylePath = ` L ${item.left},${y2}`
} else {
nodeUseLineStylePath = ` L ${item.left + item.width},${y2}`
@ -283,11 +284,11 @@ class MindMap extends Base {
let x1 =
node.layerIndex === 0
? left + width / 2
: item.dir === 'left'
: item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
? left - expandBtnSize
: left + width + expandBtnSize
let y1 = top + height / 2
let x2 = item.dir === 'left' ? item.left + item.width : item.left
let x2 = item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT ? item.left + item.width : item.left
let y2 = item.top + item.height / 2
let path = ''
y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
@ -295,7 +296,7 @@ class MindMap extends Base {
// 节点使用横线风格，需要额外渲染横线
let nodeUseLineStylePath = ''
if (this.mindMap.themeConfig.nodeUseLineStyle) {
if (item.dir === 'left') {
if (item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
nodeUseLineStylePath = ` L ${item.left},${y2}`
} else {
nodeUseLineStylePath = ` L ${item.left + item.width},${y2}`
@ -320,7 +321,7 @@ class MindMap extends Base {
? height / 2
: 0
// 位置没有变化则返回
let _x = (node.dir === 'left' ? 0 - expandBtnSize : width)
let _x = (node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT ? 0 - expandBtnSize : width)
let _y = height / 2 + nodeUseLineStyleOffset
if (_x === translateX && _y === translateY) {
return
@ -332,7 +333,7 @@ class MindMap extends Base {
// 创建概要节点
renderGeneralization(node, gLine, gNode) {
let isLeft = node.dir === 'left'
let isLeft = node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
let {
top,
bottom,

10
simple-mind-map/src/layouts/Timeline.js
View File

@ -50,8 +50,8 @@ class Timeline extends Base {
// 节点生长方向
newNode.dir =
index % 2 === 0
? CONSTANTS.TIMELINE_DIR.BOTTOM
: CONSTANTS.TIMELINE_DIR.TOP
? CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
: CONSTANTS.LAYOUT_GROW_DIR.TOP
}
} else {
newNode.dir = ''
@ -151,7 +151,7 @@ class Timeline extends Base {
if (
parent &&
parent.isRoot &&
node.dir === CONSTANTS.TIMELINE_DIR.TOP
node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP
) {
// 遍历二级节点的子节点
node.children.forEach(item => {
@ -280,7 +280,7 @@ class Timeline extends Base {
if (
node.parent &&
node.parent.isRoot &&
node.dir === CONSTANTS.TIMELINE_DIR.TOP
node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP
) {
line.plot(`M ${x},${top} L ${x},${miny}`)
} else {
@ -301,7 +301,7 @@ class Timeline extends Base {
if (
node.parent &&
node.parent.isRoot &&
node.dir === CONSTANTS.TIMELINE_DIR.TOP
node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP
) {
btn.translate(
width * 0.3 - expandBtnSize / 2 - translateX,

413
simple-mind-map/src/layouts/VerticalTimeline.js Normal file
View File

@ -0,0 +1,413 @@
import Base from './Base'
import { walk, asyncRun } from '../utils'
import { CONSTANTS } from '../constants/constant'
// 竖向时间轴
class VerticalTimeline extends Base {
// 构造函数
constructor(opt = {}, layout) {
super(opt)
this.layout = layout
}
// 布局
doLayout(callback) {
let task = [
() => {
this.computedBaseValue()
},
() => {
this.computedTopValue()
},
() => {
this.adjustLeftTopValue()
},
() => {
callback(this.root)
}
]
asyncRun(task)
}
// 遍历数据创建节点、计算根节点的位置，计算根节点的子节点的top值
computedBaseValue() {
walk(
this.renderer.renderTree,
null,
(cur, parent, isRoot, layerIndex, index) => {
let newNode = this.createNode(cur, parent, isRoot, layerIndex)
// 根节点定位在画布中心位置
if (isRoot) {
this.setNodeCenter(newNode)
} else {
// 非根节点
// 节点生长方向
// 三级及以下节点以上级为准
if (parent._node.dir) {
newNode.dir = parent._node.dir
} else {
newNode.dir = index % 2 === 0 ? CONSTANTS.LAYOUT_GROW_DIR.RIGHT : CONSTANTS.LAYOUT_GROW_DIR.LEFT
}
// 定位二级节点的left
if (parent._node.isRoot) {
newNode.left =
parent._node.left +
(cur._node.width > parent._node.width
? -(cur._node.width - parent._node.width) / 2
: (parent._node.width - cur._node.width) / 2)
} else {
newNode.left =
newNode.dir === CONSTANTS.LAYOUT_GROW_DIR.RIGHT
? parent._node.left +
parent._node.width +
this.getMarginX(layerIndex)
: parent._node.left -
this.getMarginX(layerIndex) -
newNode.width
}
}
if (!cur.data.expand) {
return true
}
},
(cur, parent, isRoot, layerIndex) => {
// 返回时计算节点的areaHeight，也就是子节点所占的高度之和，包括外边距
if (isRoot) {
return
}
let len = cur.data.expand === false ? 0 : cur._node.children.length
cur._node.childrenAreaHeight = len
? cur._node.children.reduce((h, item) => {
return h + item.height
}, 0) +
(len + 1) * this.getMarginY(layerIndex + 1)
: 0
},
true,
0
)
}
// 遍历节点树计算节点的top
computedTopValue() {
walk(
this.root,
null,
(node, parent, isRoot, layerIndex, index) => {
if (
node.nodeData.data.expand &&
node.children &&
node.children.length
) {
let marginY = this.getMarginY(layerIndex + 1)
// 定位二级节点的top
if (isRoot) {
let top = node.top + node.height
let totalTop = top + marginY
node.children.forEach(cur => {
cur.top = totalTop
totalTop += cur.height + marginY
})
} else {
// 定位三级及以下节点的top
let marginY = this.getMarginY(layerIndex + 1)
let baseTop = node.top + node.height / 2 + marginY
// 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
let totalTop = baseTop - node.childrenAreaHeight / 2
node.children.forEach(cur => {
cur.top = totalTop
totalTop += cur.height + marginY
})
}
}
},
null,
true
)
}
// 调整节点left、top
adjustLeftTopValue() {
walk(
this.root,
null,
(node, parent, isRoot, layerIndex) => {
if (!node.nodeData.data.expand) {
return
}
if (isRoot) return
// 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
let base = this.getMarginY(layerIndex + 1) * 2 + node.height
let difference = node.childrenAreaHeight - base
if (difference > 0) {
this.updateBrothers(node, difference / 2)
}
},
null,
true
)
}
// 更新兄弟节点的top
updateBrothers(node, addHeight) {
if (node.parent) {
let childrenList = node.parent.children
let index = childrenList.findIndex(item => {
return item === node
})
childrenList.forEach((item, _index) => {
// 自定义节点位置
if (item.hasCustomPosition()) return
// 三级或三级以下节点自身位置不需要动
if (!node.parent.isRoot && item === node) return
let _offset = 0
// 二级节点上面的兄弟节点不需要移动，自身需要往下移动
if (node.parent.isRoot) {
// 上面的节点不用移
if (_index < index) {
_offset = 0
} else if (_index > index) {
// 下面的节点往下移
_offset = addHeight * 2
} else {
// 自身也要移动
_offset = addHeight
}
} else {
// 三级或三级以下节点两侧的兄弟节点向两侧移动
// 上面的节点往上移
if (_index < index) {
_offset = -addHeight
} else if (_index > index) {
// 下面的节点往下移
_offset = addHeight
}
}
item.top += _offset
// 同步更新子节点的位置
if (item.children && item.children.length) {
this.updateChildren(item.children, 'top', _offset)
}
})
// 更新父节点的位置
this.updateBrothers(node.parent, addHeight)
}
}
// 调整兄弟节点的top
updateBrothersTop(node, addHeight) {
if (node.parent && !node.parent.isRoot) {
let childrenList = node.parent.children
let index = childrenList.findIndex(item => {
return item === node
})
childrenList.forEach((item, _index) => {
if (item.hasCustomPosition()) {
// 适配自定义位置
return
}
let _offset = 0
// 下面的节点往下移
if (_index > index) {
_offset = addHeight
}
item.top += _offset
// 同步更新子节点的位置
if (item.children && item.children.length) {
this.updateChildren(item.children, 'top', _offset)
}
})
// 更新父节点的位置
this.updateBrothersTop(node.parent, addHeight)
}
}
// 绘制连线，连接该节点到其子节点
renderLine(node, lines, style, lineStyle) {
if (lineStyle === 'curve') {
this.renderLineCurve(node, lines, style)
} else if (lineStyle === 'direct') {
this.renderLineDirect(node, lines, style)
} else {
this.renderLineStraight(node, lines, style)
}
}
// 直线连接
renderLineStraight(node, lines, style) {
if (node.children.length <= 0) {
return []
}
let { expandBtnSize } = node
if (!this.mindMap.opt.alwaysShowExpandBtn) {
expandBtnSize = 0
}
if (node.isRoot) {
// 当前节点是根节点
let prevBother = node
// 根节点的子节点是和根节点同一水平线排列
node.children.forEach((item, index) => {
let y1 = prevBother.top + prevBother.height
let y2 = item.top
let x = node.left + node.width / 2
let path = `M ${x},${y1} L ${x},${y2}`
lines[index].plot(path)
style && style(lines[index], item)
prevBother = item
})
} else {
// 当前节点为非根节点
if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.RIGHT) {
let nodeRight = node.left + node.width
let nodeYCenter = node.top + node.height / 2
let marginX = this.getMarginX(node.layerIndex + 1)
let offset = (marginX - expandBtnSize) * 0.6
node.children.forEach((item, index) => {
let itemLeft = item.left
let itemYCenter = item.top + item.height / 2
let path = `
M ${nodeRight},${nodeYCenter}
L ${nodeRight + offset},${nodeYCenter}
L ${nodeRight + offset},${itemYCenter}
L ${itemLeft},${itemYCenter}`
lines[index].plot(path)
style && style(lines[index], item)
})
} else {
let nodeLeft = node.left
let nodeYCenter = node.top + node.height / 2
let marginX = this.getMarginX(node.layerIndex + 1)
let offset = (marginX - expandBtnSize) * 0.6
node.children.forEach((item, index) => {
let itemRight = item.left + item.width
let itemYCenter = item.top + item.height / 2
let path = `
M ${nodeLeft},${nodeYCenter}
L ${nodeLeft - offset},${nodeYCenter}
L ${nodeLeft - offset},${itemYCenter}
L ${itemRight},${itemYCenter}`
lines[index].plot(path)
style && style(lines[index], item)
})
}
}
}
// 直连
renderLineDirect(node, lines, style) {
if (node.children.length <= 0) {
return []
}
let { left, top, width, height, expandBtnSize } = node
if (!this.mindMap.opt.alwaysShowExpandBtn) {
expandBtnSize = 0
}
node.children.forEach((item, index) => {
if (node.isRoot) {
let prevBother = node
// 根节点的子节点是和根节点同一水平线排列
node.children.forEach((item, index) => {
let y1 = prevBother.top + prevBother.height
let y2 = item.top
let x = node.left + node.width / 2
let path = `M ${x},${y1} L ${x},${y2}`
lines[index].plot(path)
style && style(lines[index], item)
prevBother = item
})
} else {
let x1 =
item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
? left - expandBtnSize
: left + width + expandBtnSize
let y1 = top + height / 2
let x2 = item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT ? item.left + item.width : item.left
let y2 = item.top + item.height / 2
let path = `M ${x1},${y1} L ${x2},${y2}`
lines[index].plot(path)
style && style(lines[index], item)
}
})
}
// 曲线风格连线
renderLineCurve(node, lines, style) {
if (node.children.length <= 0) {
return []
}
let { left, top, width, height, expandBtnSize } = node
if (!this.mindMap.opt.alwaysShowExpandBtn) {
expandBtnSize = 0
}
node.children.forEach((item, index) => {
if (node.isRoot) {
let prevBother = node
// 根节点的子节点是和根节点同一水平线排列
node.children.forEach((item, index) => {
let y1 = prevBother.top + prevBother.height
let y2 = item.top
let x = node.left + node.width / 2
let path = `M ${x},${y1} L ${x},${y2}`
lines[index].plot(path)
style && style(lines[index], item)
prevBother = item
})
} else {
let x1 =
item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
? left - expandBtnSize
: left + width + expandBtnSize
let y1 = top + height / 2
let x2 = item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT ? item.left + item.width : item.left
let y2 = item.top + item.height / 2
let path = this.cubicBezierPath(x1, y1, x2, y2)
lines[index].plot(path)
style && style(lines[index], item)
}
})
}
// 渲染按钮
renderExpandBtn(node, btn) {
let { width, height, expandBtnSize, isRoot } = node
if (!isRoot) {
let { translateX, translateY } = btn.transform()
if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.RIGHT) {
btn.translate(width - translateX, height / 2 - translateY)
} else {
btn.translate(-expandBtnSize - translateX, height / 2 - translateY)
}
}
}
// 创建概要节点
renderGeneralization(node, gLine, gNode) {
let isLeft = node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
let {
top,
bottom,
left,
right,
generalizationLineMargin,
generalizationNodeMargin
} = this.getNodeBoundaries(node, 'h', isLeft)
let x = isLeft
? left - generalizationLineMargin
: right + generalizationLineMargin
let x1 = x
let y1 = top
let x2 = x
let y2 = bottom
let cx = x1 + (isLeft ? -20 : 20)
let cy = y1 + (y2 - y1) / 2
let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
gLine.plot(path)
gNode.left =
x +
(isLeft ? -generalizationNodeMargin : generalizationNodeMargin) -
(isLeft ? gNode.width : 0)
gNode.top = top + (bottom - top - gNode.height) / 2
}
}
export default VerticalTimeline