From 3af0961a89439fe146778bd553eb3784f5fe5e75 Mon Sep 17 00:00:00 2001
From: mike-lsadigital <mike@lsadigital.com>
Date: Wed, 4 Feb 2026 14:49:22 -0500
Subject: [PATCH] feat(ui): Add toggle button for associative line visibility

Adds a toolbar button in NavigatorToolbar that allows users to
show/hide all associative lines with a single click. This is useful
when viewing complex mind maps where associative lines may clutter
the view.

Changes:
- AssociativeLine.js: Added toggleAllLinesVisibility(), hideAllLines(),
  showAllLines(), and getLinesVisibility() methods
- NavigatorToolbar.vue: Added toggle button with tooltip
- en_us.js, zh_cn.js: Added translations for tooltips

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/plugins/AssociativeLine.js            | 41 +++++++++++++++++++
 web/src/lang/en_us.js                         |  4 +-
 web/src/lang/zh_cn.js                         |  4 +-
 .../Edit/components/NavigatorToolbar.vue      | 26 +++++++++++-
 4 files changed, 72 insertions(+), 3 deletions(-)

diff --git a/simple-mind-map/src/plugins/AssociativeLine.js b/simple-mind-map/src/plugins/AssociativeLine.js
index dcf499c4..07cefdf6 100644
--- a/simple-mind-map/src/plugins/AssociativeLine.js
+++ b/simple-mind-map/src/plugins/AssociativeLine.js
@@ -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() {
+    if (this._linesHidden) {
+      this.showAllLines()
+      return true
+    } else {
+      this.hideAllLines()
+      return false
+    }
+  }
+
+  // Hide all associative lines and their labels
+  hideAllLines() {
+    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() {
+    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'
diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js
index bcbc994c..22811db3 100644
--- a/web/src/lang/en_us.js
+++ b/web/src/lang/en_us.js
@@ -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',
diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js
index 3de67001..98cc0840 100644
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@@ -210,7 +210,9 @@ export default {
     downloadClient: '下载客户端',
     site: '官方网站',
     current: '当前：',
-    downloadDesc: '可从如下地址下载：'
+    downloadDesc: '可从如下地址下载：',
+    showAssociativeLines: '显示关联线',
+    hideAssociativeLines: '隐藏关联线'
   },
   nodeHyperlink: {
     title: '超链接',
diff --git a/web/src/pages/Edit/components/NavigatorToolbar.vue b/web/src/pages/Edit/components/NavigatorToolbar.vue
index f6d1991d..bac798de 100644
--- a/web/src/pages/Edit/components/NavigatorToolbar.vue
+++ b/web/src/pages/Edit/components/NavigatorToolbar.vue
@@ -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 
+          class="btn iconfont iconlianjiexian" 
+          :style="{ opacity: showAssociativeLines ? 1 : 0.4 }"
+          @click="toggleAssociativeLines"
+        ></div>
+      </el-tooltip>
+    </div>
     <div class="item">
       <!-- <el-switch
         v-model="isReadonly"
@@ -156,7 +173,8 @@ export default {
       version: pkg.version,
       langList,
       lang: '',
-      openMiniMap: false
+      openMiniMap: false,
+      showAssociativeLines: true
     }
   },
   computed: {
@@ -245,6 +263,12 @@ export default {
       a.click()
     },
 
+    toggleAssociativeLines() {
+      if (this.mindMap && this.mindMap.associativeLine) {
+        this.showAssociativeLines = this.mindMap.associativeLine.toggleAllLinesVisibility()
+      }
+    },
+
     backToRoot() {
       this.mindMap.renderer.setRootNodeCenter()
     },