Skip to content

feat(ui): Add toggle button for associative line visibility #1350

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mike-lsadigital wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(ui): Add toggle button for associative line visibility #1350

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions simple-mind-map/src/plugins/AssociativeLine.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -758,6 +758,47 @@ class AssociativeLine {
this.mindMap.deleteEditNodeClass(ASSOCIATIVE_LINE_TEXT_EDIT_WRAP)
this.unBindEvent()
}

// Toggle visibility of all associative lines
// Returns the new visibility state (true = visible, false = hidden)
toggleAllLinesVisibility() {
Copy link
Copy Markdown

@MonkeyCode-AI MonkeyCode-AI Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

🚨 使用未初始化的 _linesHidden，初始可见状态不确定

toggleAllLinesVisibility()/getLinesVisibility() 依赖 this._linesHidden，但构造函数中未初始化。undefined 会被当作 false，使首次 toggle 行为虽然看起来可用，但状态来源不明确，外部读取 getLinesVisibility() 也可能不稳定。

建议: 在构造函数中显式初始化 this._linesHidden = false，确保状态确定性。

if (this._linesHidden) {
this.showAllLines()
return true
} else {
this.hideAllLines()
return false
}
}

// Hide all associative lines and their labels
hideAllLines() {
Copy link
Copy Markdown

@MonkeyCode-AI MonkeyCode-AI Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

🚨 隐藏后触发 renderAllLines 会重新绘制并显示线条，导致“隐藏状态”无法维持

hideAllLines() 仅对当前 lineList 执行 hide()。但插件在 node_tree_render_end / data_change 时会 renderAllLines()，而 renderAllLines() 会 removeAllLines() 并重新 drawLine()，新创建元素默认显示，导致隐藏状态在重渲染后失效。

建议: 在 renderAllLines() 结束后或 drawLine() 中根据 _linesHidden 对新创建元素执行 hide()；控制点也需保持隐藏。

Copy link
Copy Markdown

@MonkeyCode-AI MonkeyCode-AI Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Warning

⚠️ 与节点拖拽结束逻辑冲突：隐藏后拖拽会把线重新 show()

onNodeDragging 会 hide() 线条；onNodeDragend 会 show() 线条。若用户已 hideAllLines() 全局隐藏，拖拽后 onNodeDragend 会强制 show()，破坏全局隐藏状态。

建议: 在 onNodeDragend 中根据 _linesHidden 决定是否恢复显示（若全局隐藏则保持隐藏）。

this._linesHidden = true
this.lineList.forEach(line => {
line[0].hide() // path
line[1].hide() // clickPath
line[2].hide() // text
})
this.hideControls()
this.mindMap.emit('associative_line_visibility_change', false)
}

// Show all associative lines and their labels
showAllLines() {
Copy link
Copy Markdown

@MonkeyCode-AI MonkeyCode-AI Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Warning

⚠️ showAllLines() 无条件 showControls() 可能与激活线/拖拽时的控制点逻辑冲突

控制点显示通常依赖 activeLine/交互状态。当前 showAllLines() 调用 this.showControls()，可能在无激活线或拖拽中把本应隐藏的控制点显示出来，并与 onNodeDragging/onNodeDragend 的 hideControls/showControls 交错导致状态异常。

建议: showAllLines() 仅负责线条元素显示；控制点是否显示应由 activeLine/交互状态决定（例如仅在 activeLine 存在且非拖拽时显示）。

this._linesHidden = false
this.lineList.forEach(line => {
line[0].show() // path
line[1].show() // clickPath
line[2].show() // text
})
this.showControls()
this.mindMap.emit('associative_line_visibility_change', true)
}

// Get current visibility state
getLinesVisibility() {
return !this._linesHidden
}
}

AssociativeLine.instanceName = 'associativeLine'
Expand Down
4 changes: 3 additions & 1 deletion web/src/lang/en_us.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,9 @@ export default {
downloadClient: 'Download client',
site: 'Official website',
current: 'Current:',
downloadDesc: 'You can download it from the following address:'
downloadDesc: 'You can download it from the following address:',
showAssociativeLines: 'Show associative lines',
hideAssociativeLines: 'Hide associative lines'
},
nodeHyperlink: {
title: 'Link',
Expand Down
4 changes: 3 additions & 1 deletion web/src/lang/zh_cn.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,9 @@ export default {
downloadClient: '下载客户端',
site: '官方网站',
current: '当前：',
downloadDesc: '可从如下地址下载：'
downloadDesc: '可从如下地址下载：',
showAssociativeLines: '显示关联线',
hideAssociativeLines: '隐藏关联线'
},
nodeHyperlink: {
title: '超链接',
Expand Down
26 changes: 25 additions & 1 deletion web/src/pages/Edit/components/NavigatorToolbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,23 @@
<div class="btn iconfont icondaohang1" @click="toggleMiniMap"></div>
</el-tooltip>
</div>
<div class="item">
<el-tooltip
effect="dark"
:content="
showAssociativeLines
? $t('navigatorToolbar.hideAssociativeLines')
: $t('navigatorToolbar.showAssociativeLines')
"
placement="top"
>
<div
Copy link
Copy Markdown

@MonkeyCode-AI MonkeyCode-AI Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tip

💡 模板中 <div 与 class 行存在多余空格/格式问题

建议: 按项目既有 lint/format 风格格式化该段模板。

class="btn iconfont iconlianjiexian"
:style="{ opacity: showAssociativeLines ? 1 : 0.4 }"
@click="toggleAssociativeLines"
></div>
</el-tooltip>
</div>
<div class="item">
<!-- <el-switch
v-model="isReadonly"
Expand Down Expand Up @@ -156,7 +173,8 @@ export default {
version: pkg.version,
langList,
lang: '',
openMiniMap: false
openMiniMap: false,
showAssociativeLines: true
}
},
computed: {
Expand Down Expand Up @@ -245,6 +263,12 @@ export default {
a.click()
},

toggleAssociativeLines() {
Copy link
Copy Markdown

@MonkeyCode-AI MonkeyCode-AI Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Warning

⚠️ Toolbar 的 showAssociativeLines 状态不会随编辑器事件变化而同步，可能与实际可见性不一致

组件本地 state 默认为 true，仅在点击按钮时更新。若其他入口调用 hideAllLines()/showAllLines()，或重渲染导致可见性变化，按钮状态会与实际不一致。PR 已新增 associative_line_visibility_change 事件，但 UI 未监听同步。

建议: 挂载时读取 mindMap.associativeLine.getLinesVisibility() 初始化，并监听 mindMap 的 associative_line_visibility_change 更新 showAssociativeLines；销毁时解绑。

if (this.mindMap && this.mindMap.associativeLine) {
this.showAssociativeLines = this.mindMap.associativeLine.toggleAllLinesVisibility()
}
},

backToRoot() {
this.mindMap.renderer.setRootNodeCenter()
},
Expand Down