+ 蜉蝣撼大叔
+ 
南风
+
+
+ 蜉蝣撼大叔
+
+
+ 
+ 乙
+
\ No newline at end of file
diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js
index 26715799..e1556230 100644
--- a/simple-mind-map/index.js
+++ b/simple-mind-map/index.js
@@ -448,6 +448,7 @@ class MindMap {
// 插件列表
MindMap.pluginList = []
MindMap.usePlugin = (plugin, opt = {}) => {
+ if (MindMap.hasPlugin(plugin) !== -1) return
plugin.pluginOpt = opt
MindMap.pluginList.push(plugin)
return MindMap
diff --git a/simple-mind-map/src/constants/constant.js b/simple-mind-map/src/constants/constant.js
index cc316228..d37e6ade 100644
--- a/simple-mind-map/src/constants/constant.js
+++ b/simple-mind-map/src/constants/constant.js
@@ -249,6 +249,10 @@ export const CONSTANTS = {
PASTE_TYPE: {
CLIP_BOARD: 'clipBoard',
CANVAS: 'canvas'
+ },
+ SCROLL_BAR_DIR: {
+ VERTICAL: 'vertical',
+ HORIZONTAL: 'horizontal'
}
}
diff --git a/simple-mind-map/src/core/render/Render.js b/simple-mind-map/src/core/render/Render.js
index 3aa2500e..230713cb 100644
--- a/simple-mind-map/src/core/render/Render.js
+++ b/simple-mind-map/src/core/render/Render.js
@@ -382,7 +382,7 @@ class Render {
// 检索某个节点在激活列表里的索引
findActiveNodeIndex(node) {
return this.activeNodeList.findIndex(item => {
- return item === node
+ return item.uid === node.uid
})
}
@@ -390,7 +390,7 @@ class Render {
getNodeIndex(node) {
return node.parent
? node.parent.children.findIndex(item => {
- return item === node
+ return item.uid === node.uid
})
: 0
}
@@ -553,7 +553,7 @@ class Render {
let parent = node.parent
let childList = parent.children
let index = childList.findIndex(item => {
- return item === node
+ return item.uid === node.uid
})
if (index === -1 || index === 0) {
return
@@ -580,7 +580,7 @@ class Render {
let parent = node.parent
let childList = parent.children
let index = childList.findIndex(item => {
- return item === node
+ return item.uid === node.uid
})
if (index === -1 || index === childList.length - 1) {
return
@@ -752,7 +752,7 @@ class Render {
let nodeParent = node.parent
let nodeBorthers = nodeParent.children
let nodeIndex = nodeBorthers.findIndex(item => {
- return item === node
+ return item.uid === node.uid
})
if (nodeIndex === -1) {
return
@@ -764,7 +764,7 @@ class Render {
let existParent = exist.parent
let existBorthers = existParent.children
let existIndex = existBorthers.findIndex(item => {
- return item === exist
+ return item.uid === exist.uid
})
if (existIndex === -1) {
return
@@ -791,7 +791,7 @@ class Render {
let nodeParent = node.parent
let nodeBorthers = nodeParent.children
let nodeIndex = nodeBorthers.findIndex(item => {
- return item === node
+ return item.uid === node.uid
})
if (nodeIndex === -1) {
return
@@ -803,7 +803,7 @@ class Render {
let existParent = exist.parent
let existBorthers = existParent.children
let existIndex = existBorthers.findIndex(item => {
- return item === exist
+ return item.uid === exist.uid
})
if (existIndex === -1) {
return
diff --git a/simple-mind-map/src/core/render/node/Node.js b/simple-mind-map/src/core/render/node/Node.js
index 9bca88b9..21674201 100644
--- a/simple-mind-map/src/core/render/node/Node.js
+++ b/simple-mind-map/src/core/render/node/Node.js
@@ -466,7 +466,7 @@ class Node {
e.stopPropagation()
e.preventDefault()
// 如果是多选节点结束，那么不要触发右键菜单事件
- if(!useLeftKeySelectionRightKeyDrag && this.mindMap.select.hasSelectRange()) {
+ if(this.mindMap.select && !useLeftKeySelectionRightKeyDrag && this.mindMap.select.hasSelectRange()) {
return
}
if (this.nodeData.data.isActive) {
@@ -794,12 +794,12 @@ class Node {
// 检测当前节点是否是某个节点的祖先节点
isParent(node) {
- if (this === node) {
+ if (this.uid === node.uid) {
return false
}
let parent = node.parent
while (parent) {
- if (this === parent) {
+ if (this.uid === parent.uid) {
return true
}
parent = parent.parent
@@ -809,11 +809,11 @@ class Node {
// 检测当前节点是否是某个节点的兄弟节点
isBrother(node) {
- if (!this.parent || this === node) {
+ if (!this.parent || this.uid === node.uid) {
return false
}
return this.parent.children.find(item => {
- return item === node
+ return item.uid === node.uid
})
}
diff --git a/simple-mind-map/src/core/render/node/Style.js b/simple-mind-map/src/core/render/node/Style.js
index 98341bee..dacc31c3 100644
--- a/simple-mind-map/src/core/render/node/Style.js
+++ b/simple-mind-map/src/core/render/node/Style.js
@@ -1,7 +1,6 @@
-import {
- tagColorList,
- nodeDataNoStylePropList
-} from '../../../constants/constant'
+import { tagColorList } from '../../../constants/constant'
+import { checkIsNodeStyleDataKey } from '../../../utils/index'
+
const rootProp = ['paddingX', 'paddingY']
const backgroundStyleProps = [
'backgroundColor',
@@ -225,7 +224,7 @@ class Style {
hasCustomStyle() {
let res = false
Object.keys(this.ctx.nodeData.data).forEach(item => {
- if (!nodeDataNoStylePropList.includes(item)) {
+ if (checkIsNodeStyleDataKey(item)) {
res = true
}
})
diff --git a/simple-mind-map/src/core/view/View.js b/simple-mind-map/src/core/view/View.js
index 78e8a549..5682f6ee 100644
--- a/simple-mind-map/src/core/view/View.js
+++ b/simple-mind-map/src/core/view/View.js
@@ -171,7 +171,6 @@ class View {
// 平移x方式到
translateXTo(x) {
- if (x === 0) return
this.x = x
this.transform()
}
@@ -185,7 +184,6 @@ class View {
// 平移y方向到
translateYTo(y) {
- if (y === 0) return
this.y = y
this.transform()
}
diff --git a/simple-mind-map/src/layouts/Base.js b/simple-mind-map/src/layouts/Base.js
index 92c4e0e4..6199059f 100644
--- a/simple-mind-map/src/layouts/Base.js
+++ b/simple-mind-map/src/layouts/Base.js
@@ -202,9 +202,13 @@ class Base {
}
// 递归计算节点的宽度
- getNodeAreaWidth(node) {
+ getNodeAreaWidth(node, withGeneralization = false) {
let widthArr = []
+ let totalGeneralizationNodeWidth = 0
let loop = (node, width) => {
+ if (withGeneralization && node.checkHasGeneralization()) {
+ totalGeneralizationNodeWidth += node._generalizationNodeWidth
+ }
if (node.children.length) {
width += node.width / 2
node.children.forEach(item => {
@@ -216,7 +220,7 @@ class Base {
}
}
loop(node, 0)
- return Math.max(...widthArr)
+ return Math.max(...widthArr) + totalGeneralizationNodeWidth
}
// 二次贝塞尔曲线
diff --git a/simple-mind-map/src/layouts/CatalogOrganization.js b/simple-mind-map/src/layouts/CatalogOrganization.js
index 3e780c0d..615c3dab 100644
--- a/simple-mind-map/src/layouts/CatalogOrganization.js
+++ b/simple-mind-map/src/layouts/CatalogOrganization.js
@@ -87,11 +87,11 @@ class CatalogOrganization extends Base {
totalLeft += cur.width + marginX
})
} else {
- let totalTop = node.top + node.height + marginY + (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
+ let totalTop = node.top + this.getNodeHeightWithGeneralization(node) + marginY + (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
node.children.forEach(cur => {
cur.left = node.left + node.width * 0.5
cur.top = totalTop
- totalTop += cur.height + marginY + (this.getNodeActChildrenLength(cur) > 0 ? cur.expandBtnSize : 0)
+ totalTop += this.getNodeHeightWithGeneralization(cur) + marginY + (this.getNodeActChildrenLength(cur) > 0 ? cur.expandBtnSize : 0)
})
}
}
@@ -112,7 +112,7 @@ class CatalogOrganization extends Base {
}
// 调整left
if (parent && parent.isRoot) {
- let areaWidth = this.getNodeAreaWidth(node)
+ let areaWidth = this.getNodeAreaWidth(node, true)
let difference = areaWidth - node.width
if (difference > 0) {
this.updateBrothersLeft(node, difference)
@@ -124,7 +124,7 @@ class CatalogOrganization extends Base {
let marginY = this.getMarginY(layerIndex + 1)
let totalHeight =
node.children.reduce((h, item) => {
- return h + item.height + (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
+ return h + this.getNodeHeightWithGeneralization(item) + (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
}, 0) +
len * marginY
this.updateBrothersTop(node, totalHeight)
diff --git a/simple-mind-map/src/layouts/LogicalStructure.js b/simple-mind-map/src/layouts/LogicalStructure.js
index 01ac0325..d66955cd 100644
--- a/simple-mind-map/src/layouts/LogicalStructure.js
+++ b/simple-mind-map/src/layouts/LogicalStructure.js
@@ -56,6 +56,9 @@ class LogicalStructure extends Base {
}, 0) +
(len + 1) * this.getMarginY(layerIndex + 1)
: 0
+ // 如果存在概要，则和概要的高度取最大值
+ let generalizationNodeHeight = cur._node.checkHasGeneralization() ? cur._node._generalizationNodeHeight + this.getMarginY(layerIndex + 1) : 0
+ cur._node.childrenAreaHeight2 = Math.max(cur._node.childrenAreaHeight, generalizationNodeHeight)
},
true,
0
@@ -99,9 +102,8 @@ class LogicalStructure extends Base {
}
// 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
let difference =
- node.childrenAreaHeight -
- this.getMarginY(layerIndex + 1) * 2 -
- node.height
+ node.childrenAreaHeight2 -
+ this.getMarginY(layerIndex + 1) * 2 - node.height
if (difference > 0) {
this.updateBrothers(node, difference / 2)
}
diff --git a/simple-mind-map/src/layouts/MindMap.js b/simple-mind-map/src/layouts/MindMap.js
index 6d9f7bf5..35af2c04 100644
--- a/simple-mind-map/src/layouts/MindMap.js
+++ b/simple-mind-map/src/layouts/MindMap.js
@@ -90,6 +90,11 @@ class MindMap extends Base {
cur._node.rightChildrenAreaHeight =
rightChildrenAreaHeight +
(rightLen + 1) * this.getMarginY(layerIndex + 1)
+
+ // 如果存在概要，则和概要的高度取最大值
+ let generalizationNodeHeight = cur._node.checkHasGeneralization() ? cur._node._generalizationNodeHeight + this.getMarginY(layerIndex + 1) : 0
+ cur._node.leftChildrenAreaHeight2 = Math.max(cur._node.leftChildrenAreaHeight, generalizationNodeHeight)
+ cur._node.rightChildrenAreaHeight2 = Math.max(cur._node.rightChildrenAreaHeight, generalizationNodeHeight)
},
true,
0
@@ -139,8 +144,8 @@ class MindMap extends Base {
}
// 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
let base = this.getMarginY(layerIndex + 1) * 2 + node.height
- let leftDifference = node.leftChildrenAreaHeight - base
- let rightDifference = node.rightChildrenAreaHeight - base
+ let leftDifference = node.leftChildrenAreaHeight2 - base
+ let rightDifference = node.rightChildrenAreaHeight2 - base
if (leftDifference > 0 || rightDifference > 0) {
this.updateBrothers(node, leftDifference / 2, rightDifference / 2)
}
diff --git a/simple-mind-map/src/layouts/OrganizationStructure.js b/simple-mind-map/src/layouts/OrganizationStructure.js
index 179ef4c2..c3b49092 100644
--- a/simple-mind-map/src/layouts/OrganizationStructure.js
+++ b/simple-mind-map/src/layouts/OrganizationStructure.js
@@ -57,6 +57,10 @@ class OrganizationStructure extends Base {
}, 0) +
(len + 1) * this.getMarginY(layerIndex + 1)
: 0
+
+ // 如果存在概要，则和概要的高度取最大值
+ let generalizationNodeWidth = cur._node.checkHasGeneralization() ? cur._node._generalizationNodeWidth + this.getMarginY(layerIndex + 1) : 0
+ cur._node.childrenAreaWidth2 = Math.max(cur._node.childrenAreaWidth, generalizationNodeWidth)
},
true,
0
@@ -100,7 +104,7 @@ class OrganizationStructure extends Base {
}
// 判断子节点所占的宽度之和是否大于该节点自身，大于则需要调整位置
let difference =
- node.childrenAreaWidth -
+ node.childrenAreaWidth2 -
this.getMarginY(layerIndex + 1) * 2 -
node.width
if (difference > 0) {
diff --git a/simple-mind-map/src/parse/xmind.js b/simple-mind-map/src/parse/xmind.js
index cb8b72df..1c5c48bd 100644
--- a/simple-mind-map/src/parse/xmind.js
+++ b/simple-mind-map/src/parse/xmind.js
@@ -4,7 +4,8 @@ import {
getTextFromHtml,
imgToDataUrl,
parseDataUrl,
- getImageSize
+ getImageSize,
+ isUndef
} from '../utils/index'
// 解析.xmind文件
@@ -49,7 +50,7 @@ const transformXmind = async (content, files) => {
let walk = async (node, newNode) => {
newNode.data = {
// 节点内容
- text: node.title
+ text: isUndef(node.title) ? '' : node.title
}
// 节点备注
if (node.notes) {
@@ -146,9 +147,10 @@ const transformOldXmind = content => {
let walk = (node, newNode) => {
let nodeElements = node.elements
let nodeTitle = getItemByName(nodeElements, 'title')
+ nodeTitle = nodeTitle && nodeTitle.elements && nodeTitle.elements[0].text
newNode.data = {
// 节点内容
- text: nodeTitle && nodeTitle.elements && nodeTitle.elements[0].text
+ text: isUndef(nodeTitle) ? '' : nodeTitle
}
try {
// 节点备注
@@ -215,6 +217,7 @@ const transformToXmind = async (data, name) => {
let waitLoadImageList = []
let walk = async (node, newNode, isRoot) => {
let newData = {
+ id: node.data.uid,
structureClass: 'org.xmind.ui.logic.right',
title: getTextFromHtml(node.data.text), // 节点文本
children: {
@@ -242,20 +245,20 @@ const transformToXmind = async (data, name) => {
}
// 图片
if (node.data.image) {
+ // 处理异步逻辑
+ let resolve = null
+ let promise = new Promise(_resolve => {
+ resolve = _resolve
+ })
+ waitLoadImageList.push(promise)
try {
- // 处理异步逻辑
- let resolve = null
- let promise = new Promise(_resolve => {
- resolve = _resolve
- })
- waitLoadImageList.push(promise)
let imgName = ''
let imgData = node.data.image
- // 网络图片要先转换成data:url
- if (/^https?:\/\//.test(node.data.image)) {
+ // base64之外的其他图片要先转换成data:url
+ if (!/^data:/.test(node.data.image)) {
imgData = await imgToDataUrl(node.data.image)
}
- // 从data:url中解析出图片类型和base64
+ // 从data:url中解析出图片类型和ase64
let dataUrlRes = parseDataUrl(imgData)
imgName = 'image_' + imageList.length + '.' + dataUrlRes.type
imageList.push({
diff --git a/simple-mind-map/src/plugins/AssociativeLine.js b/simple-mind-map/src/plugins/AssociativeLine.js
index dbca5808..5855c27b 100644
--- a/simple-mind-map/src/plugins/AssociativeLine.js
+++ b/simple-mind-map/src/plugins/AssociativeLine.js
@@ -362,7 +362,7 @@ class AssociativeLine {
if (node.nodeData.data.isActive) {
this.mindMap.renderer.setNodeActive(node, false)
}
- if (node === this.creatingStartNode || this.overlapNode) {
+ if (node.uid === this.creatingStartNode.uid || this.overlapNode) {
return
}
let { left, top, width, height } = node
@@ -379,7 +379,7 @@ class AssociativeLine {
// 完成创建连接线
completeCreateLine(node) {
- if (this.creatingStartNode === node) return
+ if (this.creatingStartNode.uid === node.uid) return
this.addLine(this.creatingStartNode, node)
if (this.overlapNode && this.overlapNode.nodeData.data.isActive) {
this.mindMap.renderer.setNodeActive(this.overlapNode, false)
@@ -433,7 +433,7 @@ class AssociativeLine {
]
let associativeLinePoint = fromNode.nodeData.data.associativeLinePoint || []
// 记录关联的起始|结束坐标
- associativeLinePoint[list.length - 1] = [{ startPoint, endPoint }]
+ associativeLinePoint[list.length - 1] = { startPoint, endPoint }
this.mindMap.execCommand('SET_NODE_DATA', fromNode, {
associativeLineTargets: list,
associativeLineTargetControlOffsets: offsetList,
diff --git a/simple-mind-map/src/plugins/Drag.js b/simple-mind-map/src/plugins/Drag.js
index fd99c5bf..eeeed75f 100644
--- a/simple-mind-map/src/plugins/Drag.js
+++ b/simple-mind-map/src/plugins/Drag.js
@@ -13,6 +13,8 @@ class Drag extends Base {
// 复位
reset() {
+ // 当前画布节点列表
+ this.nodeList = []
// 当前拖拽节点
this.node = null
// 当前重叠节点
@@ -68,6 +70,7 @@ class Drag extends Base {
this.isMousedown = true
this.mouseDownX = x
this.mouseDownY = y
+ this.nodeTreeToList()
})
this.mindMap.on('mousemove', e => {
if (this.mindMap.opt.readonly) {
@@ -106,7 +109,9 @@ class Drag extends Base {
this.node.isDrag = false
this.node.show()
this.removeCloneNode()
- let overlapNodeUid = this.overlapNode ? this.overlapNode.nodeData.data.uid : ''
+ let overlapNodeUid = this.overlapNode
+ ? this.overlapNode.nodeData.data.uid
+ : ''
let prevNodeUid = this.prevNode ? this.prevNode.nodeData.data.uid : ''
let nextNodeUid = this.nextNode ? this.nextNode.nodeData.data.uid : ''
// 存在重叠子节点，则移动作为其子节点
@@ -207,90 +212,47 @@ class Drag extends Base {
if (!this.drawTransform || !this.placeholder) {
return
}
- const { nodeDragPlaceholderMaxSize } = this.mindMap.opt
- let x = this.mouseMoveX
- let y = this.mouseMoveY
this.overlapNode = null
this.prevNode = null
this.nextNode = null
this.placeholder.size(0, 0)
- bfsWalk(this.mindMap.renderer.root, node => {
+ this.nodeList.forEach(node => {
if (node.nodeData.data.isActive) {
this.mindMap.renderer.setNodeActive(node, false)
}
- if (node === this.node || this.node.isParent(node)) {
+ if (node.uid === this.node.uid) {
return
}
if (this.overlapNode || (this.prevNode && this.nextNode)) {
return
}
- let nodeRect = this.getNodeRect(node)
- let oneFourthHeight = nodeRect.height / 4
- // 前一个和后一个节点
- let checkList = node.parent ? node.parent.children.filter((item) => {
- return item !== this.node
- }) : []
- let index = checkList.findIndex((item) => {
- return item === node
- })
- let prevBrother = null
- let nextBrother = null
- if (index !== -1) {
- if (index - 1 >= 0) {
- prevBrother = checkList[index - 1]
- }
- if (index + 1 <= checkList.length - 1) {
- nextBrother = checkList[index + 1]
- }
- }
- // 和前一个兄弟节点的距离
- let prevBrotherOffset = 0
- if (prevBrother) {
- let prevNodeRect = this.getNodeRect(prevBrother)
- prevBrotherOffset = nodeRect.top - prevNodeRect.bottom
- // 间距小于10就当它不存在
- prevBrotherOffset = prevBrotherOffset >= this.minOffset ? prevBrotherOffset / 2 : 0
- } else {
- // 没有前一个兄弟节点，那么假设和前一个节点的距离为20
- prevBrotherOffset = this.minOffset
- }
- // 和后一个兄弟节点的距离
- let nextBrotherOffset = 0
- if (nextBrother) {
- let nextNodeRect = this.getNodeRect(nextBrother)
- nextBrotherOffset = nextNodeRect.top - nodeRect.bottom
- nextBrotherOffset = nextBrotherOffset >= this.minOffset ? nextBrotherOffset / 2 : 0
- } else {
- nextBrotherOffset = this.minOffset
- }
- if (nodeRect.left <= x && nodeRect.right >= x) {
- // 检测兄弟节点位置
- if (!this.overlapNode && !this.prevNode && !this.nextNode && !node.isRoot) {
- let checkIsPrevNode = nextBrotherOffset > 0 ? // 距离下一个兄弟节点的距离大于0
- y > nodeRect.bottom && y <= (nodeRect.bottom + nextBrotherOffset) : // 那么在当前节点外底部判断
- y >= nodeRect.bottom - oneFourthHeight && y <= nodeRect.bottom // 否则在当前节点内底部1/4区间判断
- let checkIsNextNode = prevBrotherOffset > 0 ? // 距离上一个兄弟节点的距离大于0
- y < nodeRect.top && y >= (nodeRect.top - prevBrotherOffset) : // 那么在当前节点外底部判断
- y >= nodeRect.top && y <= nodeRect.top + oneFourthHeight
- if (checkIsPrevNode) {
- this.prevNode = node
- let size = nextBrotherOffset > 0 ? Math.min(nextBrotherOffset, nodeDragPlaceholderMaxSize) : 5
- this.placeholder.size(node.width, size).move(nodeRect.originLeft, nodeRect.originBottom)
- } else if (checkIsNextNode) {
- this.nextNode = node
- let size = prevBrotherOffset > 0 ? Math.min(prevBrotherOffset, nodeDragPlaceholderMaxSize) : 5
- this.placeholder.size(node.width, size).move(nodeRect.originLeft, nodeRect.originTop - size)
- }
- }
- // 检测是否重叠
- if (!this.overlapNode && !this.prevNode && !this.nextNode) {
- if (
- nodeRect.top + (prevBrotherOffset > 0 ? 0 : oneFourthHeight) <= y &&
- nodeRect.bottom - (nextBrotherOffset > 0 ? 0 : oneFourthHeight) >= y
- ) {
- this.overlapNode = node
- }
- }
+ switch (this.mindMap.opt.layout) {
+ case 'logicalStructure':
+ this.handleLogicalStructure(node)
+ break
+ case 'mindMap':
+ this.handleMindMap(node)
+ break
+ case 'organizationStructure':
+ this.handleOrganizationStructure(node)
+ break
+ case 'catalogOrganization':
+ this.handleCatalogOrganization(node)
+ break
+ case 'timeline':
+ this.handleTimeLine(node)
+ break
+ case 'timeline2':
+ this.handleTimeLine2(node)
+ break
+ case 'verticalTimeline':
+ this.handleLogicalStructure(node)
+ break
+ case 'fishbone':
+ this.handleFishbone(node)
+ break
+ default:
+ this.handleLogicalStructure(node)
}
})
if (this.overlapNode) {
@@ -298,6 +260,299 @@ class Drag extends Base {
}
}
+ // 垂直方向比较
+ // isReverse：是否反向
+ handleVerticalCheck(node, checkList, isReverse = false) {
+ let x = this.mouseMoveX
+ let y = this.mouseMoveY
+ let nodeRect = this.getNodeRect(node)
+ if (isReverse) {
+ checkList = checkList.reverse()
+ }
+ let oneFourthHeight = nodeRect.height / 4
+ let { prevBrotherOffset, nextBrotherOffset } =
+ this.getNodeDistanceToSiblingNode(checkList, node, nodeRect, 'v')
+ if (nodeRect.left <= x && nodeRect.right >= x) {
+ // 检测兄弟节点位置
+ if (
+ !this.overlapNode &&
+ !this.prevNode &&
+ !this.nextNode &&
+ !node.isRoot
+ ) {
+ let checkIsPrevNode =
+ nextBrotherOffset > 0 // 距离下一个兄弟节点的距离大于0
+ ? y > nodeRect.bottom && y <= nodeRect.bottom + nextBrotherOffset // 那么在当前节点外底部判断
+ : y >= nodeRect.bottom - oneFourthHeight && y <= nodeRect.bottom // 否则在当前节点内底部1/4区间判断
+ let checkIsNextNode =
+ prevBrotherOffset > 0 // 距离上一个兄弟节点的距离大于0
+ ? y < nodeRect.top && y >= nodeRect.top - prevBrotherOffset // 那么在当前节点外底部判断
+ : y >= nodeRect.top && y <= nodeRect.top + oneFourthHeight
+ if (checkIsPrevNode) {
+ if (isReverse) {
+ this.nextNode = node
+ } else {
+ this.prevNode = node
+ }
+ let size = this.formatPlaceholderSize(nextBrotherOffset)
+ this.setPlaceholderRect(
+ node.width,
+ size,
+ nodeRect.originLeft,
+ nodeRect.originBottom
+ )
+ } else if (checkIsNextNode) {
+ if (isReverse) {
+ this.prevNode = node
+ } else {
+ this.nextNode = node
+ }
+ let size = this.formatPlaceholderSize(prevBrotherOffset)
+ this.setPlaceholderRect(
+ node.width,
+ size,
+ nodeRect.originLeft,
+ nodeRect.originTop - size
+ )
+ }
+ }
+ // 检测是否重叠
+ this.checkIsOverlap({
+ node,
+ dir: 'v',
+ prevBrotherOffset,
+ nextBrotherOffset,
+ size: oneFourthHeight,
+ pos: y,
+ nodeRect
+ })
+ }
+ }
+
+ // 水平方向比较
+ handleHorizontalCheck(node, checkList) {
+ let x = this.mouseMoveX
+ let y = this.mouseMoveY
+ let nodeRect = this.getNodeRect(node)
+ let oneFourthWidth = nodeRect.width / 4
+ let { prevBrotherOffset, nextBrotherOffset } =
+ this.getNodeDistanceToSiblingNode(checkList, node, nodeRect, 'h')
+ if (nodeRect.top <= y && nodeRect.bottom >= y) {
+ // 检测兄弟节点位置
+ if (
+ !this.overlapNode &&
+ !this.prevNode &&
+ !this.nextNode &&
+ !node.isRoot
+ ) {
+ let checkIsPrevNode =
+ nextBrotherOffset > 0 // 距离下一个兄弟节点的距离大于0
+ ? x < nodeRect.right + nextBrotherOffset && x >= nodeRect.right // 那么在当前节点外底部判断
+ : x <= nodeRect.right && x >= nodeRect.right - oneFourthWidth // 否则在当前节点内底部1/4区间判断
+ let checkIsNextNode =
+ prevBrotherOffset > 0 // 距离上一个兄弟节点的距离大于0
+ ? x > nodeRect.left - prevBrotherOffset && x <= nodeRect.left // 那么在当前节点外底部判断
+ : x <= nodeRect.left + oneFourthWidth && x >= nodeRect.left
+ if (checkIsPrevNode) {
+ this.prevNode = node
+ let size = this.formatPlaceholderSize(nextBrotherOffset)
+ this.setPlaceholderRect(
+ size,
+ node.height,
+ nodeRect.originRight,
+ nodeRect.originTop
+ )
+ } else if (checkIsNextNode) {
+ this.nextNode = node
+ let size = this.formatPlaceholderSize(prevBrotherOffset)
+ this.setPlaceholderRect(
+ size,
+ node.height,
+ nodeRect.originLeft - size,
+ nodeRect.originTop
+ )
+ }
+ }
+ // 检测是否重叠
+ this.checkIsOverlap({
+ node,
+ dir: 'h',
+ prevBrotherOffset,
+ nextBrotherOffset,
+ size: oneFourthWidth,
+ pos: x,
+ nodeRect
+ })
+ }
+ }
+
+ // 获取节点距前一个和后一个节点的距离
+ getNodeDistanceToSiblingNode(checkList, node, nodeRect, dir) {
+ let dir1 = dir === 'v' ? 'top' : 'left'
+ let dir2 = dir === 'v' ? 'bottom' : 'right'
+ let index = checkList.findIndex(item => {
+ return item.uid === node.uid
+ })
+ let prevBrother = null
+ let nextBrother = null
+ if (index !== -1) {
+ if (index - 1 >= 0) {
+ prevBrother = checkList[index - 1]
+ }
+ if (index + 1 <= checkList.length - 1) {
+ nextBrother = checkList[index + 1]
+ }
+ }
+ // 和前一个兄弟节点的距离
+ let prevBrotherOffset = 0
+ if (prevBrother) {
+ let prevNodeRect = this.getNodeRect(prevBrother)
+ prevBrotherOffset = nodeRect[dir1] - prevNodeRect[dir2]
+ // 间距小于10就当它不存在
+ prevBrotherOffset =
+ prevBrotherOffset >= this.minOffset ? prevBrotherOffset / 2 : 0
+ } else {
+ // 没有前一个兄弟节点，那么假设和前一个节点的距离为20
+ prevBrotherOffset = this.minOffset
+ }
+ // 和后一个兄弟节点的距离
+ let nextBrotherOffset = 0
+ if (nextBrother) {
+ let nextNodeRect = this.getNodeRect(nextBrother)
+ nextBrotherOffset = nextNodeRect[dir1] - nodeRect[dir2]
+ nextBrotherOffset =
+ nextBrotherOffset >= this.minOffset ? nextBrotherOffset / 2 : 0
+ } else {
+ nextBrotherOffset = this.minOffset
+ }
+ return {
+ prevBrotherOffset,
+ nextBrotherOffset
+ }
+ }
+
+ // 处理提示元素的大小
+ formatPlaceholderSize(size) {
+ const { nodeDragPlaceholderMaxSize } = this.mindMap.opt
+ return size > 0 ? Math.min(size, nodeDragPlaceholderMaxSize) : 5
+ }
+
+ // 设置提示元素的大小和位置
+ setPlaceholderRect(w, h, x, y) {
+ this.placeholder.size(w, h).move(x, y)
+ }
+
+ // 检测是否重叠
+ checkIsOverlap({
+ node,
+ dir,
+ prevBrotherOffset,
+ nextBrotherOffset,
+ size,
+ pos,
+ nodeRect
+ }) {
+ let dir1 = dir === 'v' ? 'top' : 'left'
+ let dir2 = dir === 'v' ? 'bottom' : 'right'
+ if (!this.overlapNode && !this.prevNode && !this.nextNode) {
+ if (
+ nodeRect[dir1] + (prevBrotherOffset > 0 ? 0 : size) <= pos &&
+ nodeRect[dir2] - (nextBrotherOffset > 0 ? 0 : size) >= pos
+ ) {
+ this.overlapNode = node
+ }
+ }
+ }
+
+ // 处理逻辑结构图
+ handleLogicalStructure(node) {
+ const checkList = this.commonGetNodeCheckList(node)
+ this.handleVerticalCheck(node, checkList)
+ }
+
+ // 处理思维导图
+ handleMindMap(node) {
+ const checkList = node.parent
+ ? node.parent.children.filter(item => {
+ let sameDir = true
+ if (node.layerIndex === 1) {
+ sameDir = item.dir === node.dir
+ }
+ return item !== this.node && sameDir
+ })
+ : []
+ this.handleVerticalCheck(node, checkList)
+ }
+
+ // 处理组织结构图
+ handleOrganizationStructure(node) {
+ const checkList = this.commonGetNodeCheckList(node)
+ this.handleHorizontalCheck(node, checkList)
+ }
+
+ // 处理目录组织图
+ handleCatalogOrganization(node) {
+ const checkList = this.commonGetNodeCheckList(node)
+ if (node.layerIndex === 1) {
+ this.handleHorizontalCheck(node, checkList)
+ } else {
+ this.handleVerticalCheck(node, checkList)
+ }
+ }
+
+ // 处理时间轴
+ handleTimeLine(node) {
+ let checkList = this.commonGetNodeCheckList(node)
+ if (node.layerIndex === 1) {
+ this.handleHorizontalCheck(node, checkList)
+ } else {
+ this.handleVerticalCheck(node, checkList)
+ }
+ }
+
+ // 处理时间轴2
+ handleTimeLine2(node) {
+ let checkList = this.commonGetNodeCheckList(node)
+ if (node.layerIndex === 1) {
+ this.handleHorizontalCheck(node, checkList)
+ } else {
+ // 处于上方的三级节点需要特殊处理，因为节点排列方向反向了
+ if (node.dir === 'top' && node.layerIndex === 2) {
+ this.handleVerticalCheck(node, checkList, true)
+ } else {
+ this.handleVerticalCheck(node, checkList)
+ }
+ }
+ }
+
+ // 处理鱼骨图
+ handleFishbone(node) {
+ let checkList = node.parent
+ ? node.parent.children.filter(item => {
+ return item !== this.node && item.layerIndex > 1
+ })
+ : []
+ if (node.layerIndex === 1) {
+ this.handleHorizontalCheck(node, checkList)
+ } else {
+ // 处于上方的三级节点需要特殊处理，因为节点排列方向反向了
+ if (node.dir === 'top' && node.layerIndex === 2) {
+ this.handleVerticalCheck(node, checkList, true)
+ } else {
+ this.handleVerticalCheck(node, checkList)
+ }
+ }
+ }
+
+ // 获取节点的兄弟节点列表通用方法
+ commonGetNodeCheckList(node) {
+ return node.parent
+ ? node.parent.children.filter(item => {
+ return item !== this.node
+ })
+ : []
+ }
+
// 计算节点的位置尺寸信息
getNodeRect(node) {
let { scaleX, scaleY, translateX, translateY } = this.drawTransform
@@ -305,6 +560,7 @@ class Drag extends Base {
let originLeft = left
let originTop = top
let originBottom = top + height
+ let originRight = left + width
let right = (left + width) * scaleX + translateX
let bottom = (top + height) * scaleY + translateY
left = left * scaleX + translateX
@@ -318,9 +574,24 @@ class Drag extends Base {
bottom,
originLeft,
originTop,
- originBottom
+ originBottom,
+ originRight
}
}
+
+ // 节点由树转换成数组，从子节点到根节点
+ nodeTreeToList() {
+ const list = []
+ bfsWalk(this.mindMap.renderer.root, node => {
+ if (!list[node.layerIndex]) {
+ list[node.layerIndex] = []
+ }
+ list[node.layerIndex].push(node)
+ })
+ this.nodeList = list.reduceRight((res, cur) => {
+ return [...res, ...cur]
+ }, [])
+ }
}
Drag.instanceName = 'drag'
diff --git a/simple-mind-map/src/plugins/KeyboardNavigation.js b/simple-mind-map/src/plugins/KeyboardNavigation.js
index 5ed4b593..d38815d0 100644
--- a/simple-mind-map/src/plugins/KeyboardNavigation.js
+++ b/simple-mind-map/src/plugins/KeyboardNavigation.js
@@ -94,7 +94,7 @@ class KeyboardNavigation {
// 遍历节点树
bfsWalk(this.mindMap.renderer.root, node => {
// 跳过当前聚焦的节点
- if (node === currentActiveNode) return
+ if (node.uid === currentActiveNode.uid) return
// 当前遍历到的节点的位置信息
let rect = this.getNodeRect(node)
let { left, top, right, bottom } = rect
@@ -131,7 +131,7 @@ class KeyboardNavigation {
checkNodeDis
}) {
bfsWalk(this.mindMap.renderer.root, node => {
- if (node === currentActiveNode) return
+ if (node.uid === currentActiveNode.uid) return
let rect = this.getNodeRect(node)
let { left, top, right, bottom } = rect
let match = false
@@ -173,7 +173,7 @@ class KeyboardNavigation {
let cX = (currentActiveNodeRect.right + currentActiveNodeRect.left) / 2
let cY = (currentActiveNodeRect.bottom + currentActiveNodeRect.top) / 2
bfsWalk(this.mindMap.renderer.root, node => {
- if (node === currentActiveNode) return
+ if (node.uid === currentActiveNode.uid) return
let rect = this.getNodeRect(node)
let { left, top, right, bottom } = rect
// 遍历到的节点的中心点
diff --git a/simple-mind-map/src/plugins/NodeImgAdjust.js b/simple-mind-map/src/plugins/NodeImgAdjust.js
index cdde7045..ff62cb56 100644
--- a/simple-mind-map/src/plugins/NodeImgAdjust.js
+++ b/simple-mind-map/src/plugins/NodeImgAdjust.js
@@ -49,7 +49,7 @@ class NodeImgAdjust {
// 如果当前正在拖动调整中那么直接返回
if (this.isMousedown || this.isAdjusted || this.mindMap.opt.readonly) return
// 如果在当前节点内移动，以及自定义元素已经是显示状态，那么直接返回
- if (this.node === node && this.isShowHandleEl) return
+ if ((this.node && this.node.uid === node.uid) && this.isShowHandleEl) return
// 更新当前节点信息
this.node = node
this.img = img
diff --git a/simple-mind-map/src/plugins/Painter.js b/simple-mind-map/src/plugins/Painter.js
index b9ef5cd3..5dd0be52 100644
--- a/simple-mind-map/src/plugins/Painter.js
+++ b/simple-mind-map/src/plugins/Painter.js
@@ -1,4 +1,4 @@
-import { nodeDataNoStylePropList } from '../constants/constant'
+import { checkIsNodeStyleDataKey } from '../utils/index'
// 格式刷插件
class Painter {
@@ -49,13 +49,13 @@ class Painter {
!this.isInPainter ||
!this.painterNode ||
!node ||
- node === this.painterNode
+ node.uid === this.painterNode.uid
)
return
const style = {}
const painterNodeData = this.painterNode.nodeData.data
Object.keys(painterNodeData).forEach(key => {
- if (!nodeDataNoStylePropList.includes(key)) {
+ if (checkIsNodeStyleDataKey(key)) {
style[key] = painterNodeData[key]
}
})
diff --git a/simple-mind-map/src/plugins/Scrollbar.js b/simple-mind-map/src/plugins/Scrollbar.js
index c34b9b7a..ab906741 100644
--- a/simple-mind-map/src/plugins/Scrollbar.js
+++ b/simple-mind-map/src/plugins/Scrollbar.js
@@ -1,4 +1,5 @@
import { throttle } from '../utils/index'
+import { CONSTANTS } from '../constants/constant'
// 滚动条插件
class Scrollbar {
@@ -9,45 +10,13 @@ class Scrollbar {
width: 0, // 水平滚动条的容器宽度
height: 0 // 垂直滚动条的容器高度
}
+ // 思维导图实际高度
+ this.chartHeight = 0
+ this.chartWidth = 0
this.reset()
this.bindEvent()
}
- // 绑定事件
- bindEvent() {
- this.onMousemove = this.onMousemove.bind(this)
- this.onMouseup = this.onMouseup.bind(this)
- this.onNodeTreeRenderEnd = this.onNodeTreeRenderEnd.bind(this)
- this.onViewDataChange = throttle(this.onViewDataChange, 16, this) // 加个节流
- this.mindMap.on('mousemove', this.onMousemove)
- this.mindMap.on('mouseup', this.onMouseup)
- this.mindMap.on('node_tree_render_end', this.onNodeTreeRenderEnd)
- this.mindMap.on('view_data_change', this.onViewDataChange)
- }
-
- // 解绑事件
- unBindEvent() {
- this.mindMap.off('mousemove', this.onMousemove)
- this.mindMap.off('mouseup', this.onMouseup)
- this.mindMap.off('node_tree_render_end', this.onNodeTreeRenderEnd)
- this.mindMap.off('view_data_change', this.onViewDataChange)
- }
-
- // 每次渲染后需要更新滚动条
- onNodeTreeRenderEnd() {
- this.emitEvent()
- }
-
- // 思维导图视图数据改变需要更新滚动条
- onViewDataChange() {
- this.emitEvent()
- }
-
- // 发送滚动条改变事件
- emitEvent() {
- this.mindMap.emit('scrollbar_change')
- }
-
// 复位数据
reset() {
// 当前拖拽的滚动条类型
@@ -57,13 +26,41 @@ class Scrollbar {
x: 0,
y: 0
}
- this.startViewPos = {
- x: 0,
- y: 0
- }
- // 思维导图实际高度
- this.chartHeight = 0
- this.chartWidth = 0
+ // 鼠标按下时，滚动条位置
+ this.mousedownScrollbarPos = 0
+ }
+
+ // 绑定事件
+ bindEvent() {
+ this.onMousemove = this.onMousemove.bind(this)
+ this.onMouseup = this.onMouseup.bind(this)
+ this.updateScrollbar = this.updateScrollbar.bind(this)
+ this.updateScrollbar = throttle(this.updateScrollbar, 16, this) // 加个节流
+ this.mindMap.on('mousemove', this.onMousemove)
+ this.mindMap.on('mouseup', this.onMouseup)
+ this.mindMap.on('node_tree_render_end', this.updateScrollbar)
+ this.mindMap.on('view_data_change', this.updateScrollbar)
+ }
+
+ // 解绑事件
+ unBindEvent() {
+ this.mindMap.off('mousemove', this.onMousemove)
+ this.mindMap.off('mouseup', this.onMouseup)
+ this.mindMap.off('node_tree_render_end', this.updateScrollbar)
+ this.mindMap.off('view_data_change', this.updateScrollbar)
+ }
+
+ // 渲染后、数据改变需要更新滚动条
+ updateScrollbar() {
+ // 当前正在拖拽滚动条时不需要更新
+ if (this.isMousedown) return
+ const res = this.calculationScrollbar()
+ this.emitEvent(res)
+ }
+
+ // 发送滚动条改变事件
+ emitEvent(data) {
+ this.mindMap.emit('scrollbar_change', data)
}
// 设置滚动条容器的大小，指滚动条容器的大小，对于水平滚动条，即宽度，对于垂直滚动条，即高度
@@ -78,9 +75,7 @@ class Scrollbar {
// 减去画布距离浏览器窗口左上角的距离
const elRect = this.mindMap.elRect
rect.x -= elRect.left
- rect.x2 -= elRect.left
rect.y -= elRect.top
- rect.y2 -= elRect.top
// 垂直滚动条
const canvasHeight = this.mindMap.height // 画布高度
@@ -129,46 +124,129 @@ class Scrollbar {
return res
}
+ // 滚动条鼠标按下事件处理函数
onMousedown(e, type) {
e.preventDefault()
+ e.stopPropagation()
this.currentScrollType = type
this.isMousedown = true
this.mousedownPos = {
x: e.clientX,
y: e.clientY
}
- // 保存视图当前的偏移量
- let transformData = this.mindMap.view.getTransformData()
- this.startViewPos = {
- x: transformData.state.x,
- y: transformData.state.y
+ // 保存滚动条当前的位置
+ const styles = window.getComputedStyle(e.target)
+ if (type === CONSTANTS.SCROLL_BAR_DIR.VERTICAL) {
+ this.mousedownScrollbarPos = Number.parseFloat(styles.top)
+ } else {
+ this.mousedownScrollbarPos = Number.parseFloat(styles.left)
}
}
+ // 鼠标移动事件处理函数
onMousemove(e) {
if (!this.isMousedown) {
return
}
- if (this.currentScrollType === 'vertical') {
- const oy = e.clientY - this.mousedownPos.y
- const oyPercentage = -oy / this.scrollbarWrapSize.height
- const oyPx = oyPercentage * this.chartHeight
- // 在视图最初偏移量上累加更新量
- this.mindMap.view.translateYTo(oyPx + this.startViewPos.y)
+ e.preventDefault()
+ e.stopPropagation()
+ if (this.currentScrollType === CONSTANTS.SCROLL_BAR_DIR.VERTICAL) {
+ const oy = e.clientY - this.mousedownPos.y + this.mousedownScrollbarPos
+ this.updateMindMapView(CONSTANTS.SCROLL_BAR_DIR.VERTICAL, oy)
} else {
- const ox = e.clientX - this.mousedownPos.x
- const oxPercentage = -ox / this.scrollbarWrapSize.width
- const oxPx = oxPercentage * this.chartWidth
- // 在视图最初偏移量上累加更新量
- this.mindMap.view.translateXTo(oxPx + this.startViewPos.x)
+ const ox = e.clientX - this.mousedownPos.x + this.mousedownScrollbarPos
+ this.updateMindMapView(CONSTANTS.SCROLL_BAR_DIR.HORIZONTAL, ox)
}
}
+ // 鼠标松开事件处理函数
onMouseup() {
this.isMousedown = false
this.reset()
}
+ // 更新视图
+ updateMindMapView(type, offset) {
+ const scrollbarData = this.calculationScrollbar()
+ const t = this.mindMap.draw.transform()
+ const drawRect = this.mindMap.draw.rbox()
+ const rootRect = this.mindMap.renderer.root.group.rbox()
+ if (type === CONSTANTS.SCROLL_BAR_DIR.VERTICAL) {
+ // 滚动条新位置
+ let oy = offset
+ // 判断是否达到首尾
+ if (oy <= 0) {
+ oy = 0
+ }
+ let max =
+ ((100 - scrollbarData.vertical.height) / 100) *
+ this.scrollbarWrapSize.height
+ if (oy >= max) {
+ oy = max
+ }
+ // 转换成百分比
+ const oyPercentage = (oy / this.scrollbarWrapSize.height) * 100
+ // 转换成相对于图形高度的距离
+ const oyPx = (-oyPercentage / 100) * this.chartHeight
+ // 节点中心点到图形最上方的距离
+ const yOffset = rootRect.y - drawRect.y
+ // 内边距
+ const paddingY = this.mindMap.height / 2
+ // 图形新位置
+ let chartTop = oyPx + yOffset - paddingY * t.scaleY + paddingY
+ this.mindMap.view.translateYTo(chartTop)
+ this.emitEvent({
+ horizontal: scrollbarData.horizontal,
+ vertical: {
+ top: oyPercentage,
+ height: scrollbarData.vertical.height
+ }
+ })
+ } else {
+ // 滚动条新位置
+ let ox = offset
+ // 判断是否达到首尾
+ if (ox <= 0) {
+ ox = 0
+ }
+ let max =
+ ((100 - scrollbarData.horizontal.width) / 100) *
+ this.scrollbarWrapSize.width
+ if (ox >= max) {
+ ox = max
+ }
+ // 转换成百分比
+ const oxPercentage = (ox / this.scrollbarWrapSize.width) * 100
+ // 转换成相对于图形高度的距离
+ const oxPx = (-oxPercentage / 100) * this.chartWidth
+ // 节点中心点到图形最左边的距离
+ const xOffset = rootRect.x - drawRect.x
+ // 内边距
+ const paddingX = this.mindMap.width / 2
+ // 图形新位置
+ let chartLeft = oxPx + xOffset - paddingX * t.scaleX + paddingX
+ this.mindMap.view.translateXTo(chartLeft)
+ this.emitEvent({
+ vertical: scrollbarData.vertical,
+ horizontal: {
+ left: oxPercentage,
+ width: scrollbarData.horizontal.width
+ }
+ })
+ }
+ }
+
+ // 滚动条的点击事件
+ onClick(e, type) {
+ let offset = 0
+ if (type === CONSTANTS.SCROLL_BAR_DIR.VERTICAL) {
+ offset = e.clientY - e.currentTarget.getBoundingClientRect().top
+ } else {
+ offset = e.clientX - e.currentTarget.getBoundingClientRect().left
+ }
+ this.updateMindMapView(type, offset)
+ }
+
// 插件被卸载前做的事情
beforePluginDestroy() {
this.unBindEvent()
diff --git a/simple-mind-map/src/plugins/Select.js b/simple-mind-map/src/plugins/Select.js
index fe6d801d..bd782a47 100644
--- a/simple-mind-map/src/plugins/Select.js
+++ b/simple-mind-map/src/plugins/Select.js
@@ -55,7 +55,7 @@ class Select {
return
}
clearTimeout(this.autoMoveTimer)
- this.onMove(x, y)
+ this.onMove(e.clientX, e.clientY)
})
this.mindMap.on('mouseup', () => {
if (this.mindMap.opt.readonly) {
diff --git a/simple-mind-map/src/utils/index.js b/simple-mind-map/src/utils/index.js
index 405e2c56..d9de6f48 100644
--- a/simple-mind-map/src/utils/index.js
+++ b/simple-mind-map/src/utils/index.js
@@ -1,4 +1,5 @@
import { v4 as uuidv4 } from 'uuid'
+import { nodeDataNoStylePropList } from '../constants/constant'
// 深度优先遍历树
export const walk = (
@@ -656,4 +657,15 @@ export const getObjectChangedProps = (oldObject, newObject) => {
}
})
return res
+}
+
+// 判断一个字段是否是节点数据中的样式字段
+export const checkIsNodeStyleDataKey = (key) => {
+ // 用户自定义字段
+ if (/^_/.test(key)) return false
+ // 不在节点非样式字段列表里，那么就是样式字段
+ if (!nodeDataNoStylePropList.includes(key)) {
+ return true
+ }
+ return false
}
\ No newline at end of file
diff --git a/web/src/assets/avatar/乙.jpg b/web/src/assets/avatar/乙.jpg
new file mode 100644
index 00000000..d68995ba
Binary files /dev/null and b/web/src/assets/avatar/乙.jpg differ
diff --git a/web/src/assets/avatar/蜉蝣撼大叔.jpg b/web/src/assets/avatar/蜉蝣撼大叔.jpg
new file mode 100644
index 00000000..24ef2f3d
Binary files /dev/null and b/web/src/assets/avatar/蜉蝣撼大叔.jpg differ
diff --git a/web/src/pages/Doc/catalogList.js b/web/src/pages/Doc/catalogList.js
index f602a71c..5b8b58b5 100644
--- a/web/src/pages/Doc/catalogList.js
+++ b/web/src/pages/Doc/catalogList.js
@@ -39,7 +39,7 @@ let APIList = [
'markdown',
'utils'
]
-let helpList = new Array(3).fill(0).map((_, index) => {
+let helpList = new Array(5).fill(0).map((_, index) => {
return 'help' + (index + 1)
})
diff --git a/web/src/pages/Doc/en/constructor/index.md b/web/src/pages/Doc/en/constructor/index.md
index a82b6e66..1566600e 100644
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@@ -25,7 +25,7 @@ const mindMap = new MindMap({
| Field Name | Type | Default Value | Description | Required |
| -------------------------------- | ------- | ---------------- | ------------------------------------------------------------ | -------- |
| el | Element | | Container element, must be a DOM element | Yes |
-| data | Object | {} | Mind map data, refer to: [exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js) | |
+| data | Object | {} | Mind map data, Please refer to the introduction of 【Data structure】 below | |
| layout | String | logicalStructure | Layout type, options: logicalStructure (logical structure diagram), mindMap (mind map), catalogOrganization (catalog organization diagram), organizationStructure (organization structure diagram)、timeline（v0.5.4+, timeline）、timeline2（v0.5.4+, up down alternating timeline）、fishbone（v0.5.4+, fishbone diagram） | |
| fishboneDeg（v0.5.4+） | Number | 45 | Set the diagonal angle of the fishbone structure diagram | |
| theme | String | default | Theme, options: default, classic, minions, pinkGrape, mint, gold, vitalityOrange, greenLeaf, dark2, skyGreen, classic2, classic3, classic4(v0.2.0+), classicGreen, classicBlue, blueSky, brainImpairedPink, dark, earthYellow, freshGreen, freshRed, romanticPurple, simpleBlack(v0.5.4+), courseGreen(v0.5.4+), coffee(v0.5.4+), redSpirit(v0.5.4+), blackHumour(v0.5.4+), lateNightOffice(v0.5.4+), blackGold(v0.5.4+)、、avocado(v.5.10-fix.2+)、autumn(v.5.10-fix.2+)、orangeJuice(v.5.10-fix.2+) | |
@@ -88,6 +88,47 @@ const mindMap = new MindMap({
| hoverRectPadding（v0.7.0+） | Number | 2 | The distance between the node mouse hover and the displayed rectangular border when activated and the node content | |
| selectTextOnEnterEditText（v0.7.0+） | Boolean | true | Is the text selected by default when double-clicking a node to enter node text editing? By default, it will only be selected when creating a new node | |
+### Data structure
+
+The basic data structure is as follows:
+
+```js
+{
+ data: {
+ text: '', // The text of the node can be rich text, which is in HTML format. In this case, richText should be set to true
+ richText: false, // Is the text of the node in rich text mode
+ expand: true, // Whether the node is expanded
+ uid: '',// The unique ID of the node, which may not be passed, will be generated internally
+ icon: [], // The format of the icon can be found in the "插入和扩展节点图标" section of the tutorial
+ image: '', // URL of the image
+ imageTitle: '', // The title of the image can be blank
+ imageSize: { // The size of the image
+ width: 100, // The width of the image, mandatory
+ height: 100, // The height of the image is mandatory
+ custom: false // If set to true, the display size of the image is not controlled by the theme, and is based on imageSize.width and imageSize.height
+ },
+ hyperlink: '', // Hyperlink address
+ hyperlinkTitle: '', // Title of hyperlink
+ note: '', // Content of remarks
+ tag: [], // Tag list
+ generalization: {// The summary of the node, if there is no summary, the generalization can be set to null
+ text: ''// Summary Text
+ },
+ associativeLineTargets: [''],// If there are associated lines, then it is the uid list of the target node
+ associativeLineText: '',// Association Line Text
+ // ...For other style fields, please refer to the topic
+ },
+ children [// Child nodes, with consistent structure and root nodes
+ {
+ data: {},
+ children: []
+ }
+ ]
+}
+```
+
+If you want to add custom fields, you can add them to the same level as 'data' and 'children'. If you want to add them to the 'data' object, please use the `_` Name your custom field at the beginning, and it will be used internally to determine whether it is a custom field.
+
### Watermark config
| Field Name | Type | Default Value | Description |
diff --git a/web/src/pages/Doc/en/constructor/index.vue b/web/src/pages/Doc/en/constructor/index.vue
index 0e7f439f..22890976 100644
--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@@ -39,7 +39,7 @@
The basic data structure is as follows:
+{
+ data: {
+ text: '', // The text of the node can be rich text, which is in HTML format. In this case, richText should be set to true
+ richText: false, // Is the text of the node in rich text mode
+ expand: true, // Whether the node is expanded
+ uid: '',// The unique ID of the node, which may not be passed, will be generated internally
+ icon: [], // The format of the icon can be found in the "插入和扩展节点图标" section of the tutorial
+ image: '', // URL of the image
+ imageTitle: '', // The title of the image can be blank
+ imageSize: { // The size of the image
+ width: 100, // The width of the image, mandatory
+ height: 100, // The height of the image is mandatory
+ custom: false // If set to true, the display size of the image is not controlled by the theme, and is based on imageSize.width and imageSize.height
+ },
+ hyperlink: '', // Hyperlink address
+ hyperlinkTitle: '', // Title of hyperlink
+ note: '', // Content of remarks
+ tag: [], // Tag list
+ generalization: {// The summary of the node, if there is no summary, the generalization can be set to null
+ text: ''// Summary Text
+ },
+ associativeLineTargets: [''],// If there are associated lines, then it is the uid list of the target node
+ associativeLineText: '',// Association Line Text
+ // ...For other style fields, please refer to the topic
+ },
+ children [// Child nodes, with consistent structure and root nodes
+ {
+ data: {},
+ children: []
+ }
+ ]
+}
+If you want to add custom fields, you can add them to the same level as 'data' and 'children'. If you want to add them to the 'data' object, please use the _ Name your custom field at the beginning, and it will be used internally to determine whether it is a custom field.
| data | Object | {} | -思维导图数据，可参考：exampleData.js | +思维导图数据，可参考下方【数据结构】介绍 |
基本的数据结构如下：
+
+ 
+ {
+ data: {
+ text: '', // 节点的文本，可以是富文本，也就是html格式的，此时richText要设为true
+ richText: false, // 节点的文本是否是富文本模式
+ expand: true, // 节点是否展开
+ uid: '',// 节点唯一的id，可不传，内部会生成
+ icon: [], // 图标，格式可参考教程里的【插入和扩展节点图标】章节
+ image: '', // 图片的url
+ imageTitle: '', // 图片的标题，可为空
+ imageSize: { // 图片的尺寸
+ width: 100, // 图片的宽度，必传
+ height: 100, // 图片的高度，必传
+ custom: false // 如果设为true，图片的显示大小不受主题控制，以imageSize.width和imageSize.height为准
+ },
+ hyperlink: '', // 超链接地址
+ hyperlinkTitle: '', // 超链接的标题
+ note: '', // 备注的内容
+ tag: [], // 标签列表
+ generalization: {// 节点的概要，如果没有概要generalization设为null即可
+ text: ''// 概要的文本
+ },
+ associativeLineTargets: [''],// 如果存在关联线，那么为目标节点的uid列表
+ associativeLineText: '',// 关联线文本
+ // ...其他样式字段，可以参考主题
+ },
+ children [// 子节点，结构和根节点一致
+ {
+ data: {},
+ children: []
+ }
+ ]
+}
+如果你要添加自定义的字段，可以添加到data、children同级，如果你要添加到data对象里，那么请使用_开头来命名你的自定义字段，内部会通过这个来判断是否是自定义字段。