openSourceRemote/mind-map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化关联线的点击逻辑

Browse Source
This commit is contained in:
wanglin2 2023-03-22 13:42:31 +08:00
parent 6bd10d9451
commit 17ab977efb
1 changed files with 38 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
simple-mind-map/src/AssociativeLine.js
View File

@ -106,9 +106,16 @@ class AssociativeLine {
// 绘制连接线 // 绘制连接线
drawLine(startPoint, endPoint, node, toNode) { drawLine(startPoint, endPoint, node, toNode) {
let { associativeLineWidth, associativeLineColor, associativeLineActiveWidth, associativeLineActiveColor } = this.mindMap.themeConfig let {
associativeLineWidth,
associativeLineColor,
associativeLineActiveWidth,
associativeLineActiveColor
} = this.mindMap.themeConfig
// 箭头 // 箭头
this.markerPath.stroke({ color: associativeLineColor }).fill({ color: associativeLineColor }) this.markerPath
.stroke({ color: associativeLineColor })
.fill({ color: associativeLineColor })
// 路径 // 路径
let pathStr = this.cubicBezierPath( let pathStr = this.cubicBezierPath(
startPoint.x, startPoint.x,
@ -119,21 +126,36 @@ class AssociativeLine {
// 虚线 // 虚线
let path = this.draw.path() let path = this.draw.path()
path path
.stroke({ width: associativeLineWidth, color: associativeLineColor, dasharray: [6, 4] }) .stroke({
width: associativeLineWidth,
color: associativeLineColor,
dasharray: [6, 4]
})
.fill({ color: 'none' }) .fill({ color: 'none' })
path.plot(pathStr) path.plot(pathStr)
path.marker('end', this.marker) path.marker('end', this.marker)
// 不可见的点击线 // 不可见的点击线
let clickPath = this.draw.path() let clickPath = this.draw.path()
clickPath.stroke({ width: associativeLineActiveWidth, color: 'transparent' }).fill({ color: 'none' }) clickPath
.stroke({ width: associativeLineActiveWidth, color: 'transparent' })
.fill({ color: 'none' })
clickPath.plot(pathStr) clickPath.plot(pathStr)
clickPath.click(e => { clickPath.click(e => {
e.stopPropagation() e.stopPropagation()
this.clearActiveNodes() if (this.mindMap.renderer.activeNodeList.length > 0) {
this.clearActiveLine() this.clearActiveNodes()
this.activeLine = [path, clickPath, node, toNode] } else {
clickPath.stroke({ color: associativeLineActiveColor }) this.clearActiveLine()
this.mindMap.emit('associative_line_click', path, clickPath, node, toNode) this.activeLine = [path, clickPath, node, toNode]
clickPath.stroke({ color: associativeLineActiveColor })
this.mindMap.emit(
'associative_line_click',
path,
clickPath,
node,
toNode
)
}
}) })
this.lineList.push([path, clickPath, node, toNode]) this.lineList.push([path, clickPath, node, toNode])
} }
@ -156,13 +178,18 @@ class AssociativeLine {
// 创建连接线 // 创建连接线
createLine(fromNode) { createLine(fromNode) {
let { associativeLineWidth, associativeLineColor } = this.mindMap.themeConfig let { associativeLineWidth, associativeLineColor } =
this.mindMap.themeConfig
if (this.isCreatingLine || !fromNode) return if (this.isCreatingLine || !fromNode) return
this.isCreatingLine = true this.isCreatingLine = true
this.creatingStartNode = fromNode this.creatingStartNode = fromNode
this.creatingLine = this.draw.path() this.creatingLine = this.draw.path()
this.creatingLine this.creatingLine
.stroke({ width: associativeLineWidth, color: associativeLineColor, dasharray: [6, 4] }) .stroke({
width: associativeLineWidth,
color: associativeLineColor,
dasharray: [6, 4]
})
.fill({ color: 'none' }) .fill({ color: 'none' })
this.creatingLine.marker('end', this.marker) this.creatingLine.marker('end', this.marker)
} }