FE/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-17 22:08:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix：修复除了向右生长的结构，其他结构鼠标移入展开收起按钮位置时不会触发按钮显示的问题

Browse Source
This commit is contained in:
wanglin2
2023-07-06 09:12:18 +08:00
parent ad0f62a5ac
commit eaa8929457
8 changed files with 131 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
simple-mind-map/src/core/render/node/Node.js
View File

@@ -275,7 +275,8 @@ class Node {
}
this._unVisibleRectRegionNode.fill({
color: 'transparent'
}).size(this.expandBtnSize, height).x(width).y(0)
})
this.renderer.layout.renderExpandBtnRect(this._unVisibleRectRegionNode, this.expandBtnSize, width, height, this)
this.group.add(this._unVisibleRectRegionNode)
}
// 概要节点添加一个带所属节点id的类名
@@ -289,7 +290,7 @@ class Node {
foreignObject.height(height)
foreignObject.add(SVG(this._customNodeContent))
this.group.add(foreignObject)
return
return
}
// 图片节点
let imgHeight = 0
@@ -433,7 +434,8 @@ class Node {
// 右键菜单事件
this.group.on('contextmenu', e => {
// 按住ctrl键点击鼠标左键不知为何触发的是contextmenu事件
if (this.mindMap.opt.readonly || e.ctrlKey) {// || this.isGeneralization
if (this.mindMap.opt.readonly || e.ctrlKey) {
// || this.isGeneralization
return
}
e.stopPropagation()
@@ -467,8 +469,11 @@ class Node {
if (!this.group) {
return
}
let { enableNodeTransitionMove, nodeTransitionMoveDuration, alwaysShowExpandBtn } =
this.mindMap.opt
let {
enableNodeTransitionMove,
nodeTransitionMoveDuration,
alwaysShowExpandBtn
} = this.mindMap.opt
if (alwaysShowExpandBtn) {
// 需要移除展开收缩按钮
if (this._expandBtn && this.nodeData.children.length <= 0) {
@@ -783,7 +788,7 @@ class Node {
// 获取padding值
getPaddingVale() {
let { isActive }= this.nodeData.data
let { isActive } = this.nodeData.data
return {
paddingX: this.getStyle('paddingX', true, isActive),
paddingY: this.getStyle('paddingY', true, isActive)

5
simple-mind-map/src/layouts/CatalogOrganization.js
View File

@@ -349,6 +349,11 @@ class CatalogOrganization extends Base {
gNode.left = right + generalizationNodeMargin
gNode.top = top + (bottom - top - gNode.height) / 2
}
// 渲染展开收起按钮的隐藏占位元素
renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
rect.size(width, expandBtnSize).x(0).y(height)
}
}
export default CatalogOrganization

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

@@ -239,7 +239,7 @@ class Fishbone extends Base {
// 当前节点是根节点
// 根节点的子节点是和根节点同一水平线排列
let maxx = -Infinity
node.children.forEach((item) => {
node.children.forEach(item => {
if (item.left > maxx) {
maxx = item.left
}
@@ -250,15 +250,15 @@ class Fishbone extends Base {
let line = this.draw.path()
if (this.checkIsTop(item)) {
line.plot(
`M ${nodeLineX - offsetX},${item.top + item.height + offset} L ${item.left},${
item.top + item.height
}`
`M ${nodeLineX - offsetX},${item.top + item.height + offset} L ${
item.left
},${item.top + item.height}`
)
} else {
line.plot(
`M ${nodeLineX - offsetX},${
item.top - offset
} L ${nodeLineX},${item.top}`
`M ${nodeLineX - offsetX},${item.top - offset} L ${nodeLineX},${
item.top
}`
)
}
node.style.line(line)
@@ -373,6 +373,27 @@ class Fishbone extends Base {
gNode.left = right + generalizationNodeMargin
gNode.top = top + (bottom - top - gNode.height) / 2
}
// 渲染展开收起按钮的隐藏占位元素
renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
let dir = ''
if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP) {
dir =
node.layerIndex === 1
? CONSTANTS.LAYOUT_GROW_DIR.TOP
: CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
} else {
dir =
node.layerIndex === 1
? CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
: CONSTANTS.LAYOUT_GROW_DIR.TOP
}
if (dir === CONSTANTS.LAYOUT_GROW_DIR.TOP) {
rect.size(width, expandBtnSize).x(0).y(-expandBtnSize)
} else {
rect.size(width, expandBtnSize).x(0).y(height)
}
}
}
export default Fishbone

14
simple-mind-map/src/layouts/LogicalStructure.js
View File

@@ -172,9 +172,7 @@ class LogicalStructure extends Base {
let x2 = item.left
let y2 = item.top + item.height / 2
// 节点使用横线风格，需要额外渲染横线
let nodeUseLineStyleOffset = nodeUseLineStyle
? item.width
: 0
let nodeUseLineStyleOffset = nodeUseLineStyle ? item.width : 0
y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
let path = `M ${x1},${y1} L ${x1 + s1},${y1} L ${x1 + s1},${y2} L ${
@@ -260,10 +258,7 @@ class LogicalStructure extends Base {
if (_x === translateX && _y === translateY) {
return
}
btn.translate(
_x - translateX,
_y - translateY
)
btn.translate(_x - translateX, _y - translateY)
}
// 创建概要节点
@@ -286,6 +281,11 @@ class LogicalStructure extends Base {
gNode.left = right + generalizationNodeMargin
gNode.top = top + (bottom - top - gNode.height) / 2
}
// 渲染展开收起按钮的隐藏占位元素
renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
rect.size(expandBtnSize, height).x(width).y(0)
}
}
export default LogicalStructure

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

@@ -46,7 +46,10 @@ class MindMap extends Base {
newNode.dir = parent._node.dir
} else {
// 节点生长方向
newNode.dir = index % 2 === 0 ? CONSTANTS.LAYOUT_GROW_DIR.RIGHT : CONSTANTS.LAYOUT_GROW_DIR.LEFT
newNode.dir =
index % 2 === 0
? CONSTANTS.LAYOUT_GROW_DIR.RIGHT
: CONSTANTS.LAYOUT_GROW_DIR.LEFT
}
// 根据生长方向定位到父节点的左侧或右侧
newNode.left =
@@ -163,7 +166,10 @@ class MindMap extends Base {
return
}
let _offset = 0
let addHeight = item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT ? leftAddHeight : rightAddHeight
let addHeight =
item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
? leftAddHeight
: rightAddHeight
// 上面的节点往上移
if (_index < index) {
_offset = -addHeight
@@ -209,9 +215,7 @@ class MindMap extends Base {
let x1 = 0
let _s = 0
// 节点使用横线风格，需要额外渲染横线
let nodeUseLineStyleOffset = nodeUseLineStyle
? item.width
: 0
let nodeUseLineStyleOffset = nodeUseLineStyle ? item.width : 0
if (item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
_s = -s1
x1 = node.layerIndex === 0 ? left : left - expandBtnSize
@@ -221,7 +225,10 @@ class MindMap extends Base {
x1 = node.layerIndex === 0 ? left + width : left + width + expandBtnSize
}
let y1 = top + height / 2
let x2 = item.dir === CONSTANTS.LAYOUT_GROW_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
@@ -251,7 +258,10 @@ class MindMap extends Base {
? 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 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
@@ -288,7 +298,10 @@ class MindMap extends Base {
? 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 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
@@ -321,7 +334,8 @@ class MindMap extends Base {
? height / 2
: 0
// 位置没有变化则返回
let _x = (node.dir === CONSTANTS.LAYOUT_GROW_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
@@ -359,6 +373,15 @@ class MindMap extends Base {
(isLeft ? gNode.width : 0)
gNode.top = top + (bottom - top - gNode.height) / 2
}
// 渲染展开收起按钮的隐藏占位元素
renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
rect.size(expandBtnSize, height).x(-expandBtnSize).y(0)
} else {
rect.size(expandBtnSize, height).x(width).y(0)
}
}
}
export default MindMap

5
simple-mind-map/src/layouts/OrganizationStructure.js
View File

@@ -255,6 +255,11 @@ class OrganizationStructure extends Base {
gNode.top = bottom + generalizationNodeMargin
gNode.left = left + (right - left - gNode.width) / 2
}
// 渲染展开收起按钮的隐藏占位元素
renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
rect.size(width, expandBtnSize).x(0).y(height)
}
}
export default OrganizationStructure

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

@@ -336,6 +336,28 @@ class Timeline extends Base {
gNode.left = right + generalizationNodeMargin
gNode.top = top + (bottom - top - gNode.height) / 2
}
// 渲染展开收起按钮的隐藏占位元素
renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
if (this.layout === CONSTANTS.LAYOUT.TIMELINE) {
rect.size(width, expandBtnSize).x(0).y(height)
} else {
let dir = ''
if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP) {
dir =
node.layerIndex === 1
? CONSTANTS.LAYOUT_GROW_DIR.TOP
: CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
} else {
dir = CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
}
if (dir === CONSTANTS.LAYOUT_GROW_DIR.TOP) {
rect.size(width, expandBtnSize).x(0).y(-expandBtnSize)
} else {
rect.size(width, expandBtnSize).x(0).y(height)
}
}
}
}
export default Timeline

24
simple-mind-map/src/layouts/VerticalTimeline.js
View File

@@ -46,7 +46,10 @@ class VerticalTimeline extends Base {
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
newNode.dir =
index % 2 === 0
? CONSTANTS.LAYOUT_GROW_DIR.RIGHT
: CONSTANTS.LAYOUT_GROW_DIR.LEFT
}
// 定位二级节点的left
if (parent._node.isRoot) {
@@ -321,7 +324,10 @@ class VerticalTimeline extends Base {
? 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 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)
@@ -358,7 +364,10 @@ class VerticalTimeline extends Base {
? 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 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)
@@ -408,6 +417,15 @@ class VerticalTimeline extends Base {
(isLeft ? gNode.width : 0)
gNode.top = top + (bottom - top - gNode.height) / 2
}
// 渲染展开收起按钮的隐藏占位元素
renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
rect.size(expandBtnSize, height).x(-expandBtnSize).y(0)
} else {
rect.size(expandBtnSize, height).x(width).y(0)
}
}
}
export default VerticalTimeline