Add toggle link visibility button on canvas menu (#1070)

* Basic link visibility toggle

* Icon change

* nit

* Update litegraph

* nit

* Add playwright test

* Update test expectations [skip ci]

---------

Co-authored-by: github-actions <github-actions@github.com>

src/components/graph/GraphCanvasMenu.vue

@@ -38,6 +38,16 @@
         <i-simple-line-icons:cursor v-else />
       </template>
     </Button>
+    <Button
+      severity="secondary"
+      :icon="linkHidden ? 'pi pi-eye-slash' : 'pi pi-eye'"
+      v-tooltip.left="t('graphCanvasMenu.toggleLinkVisibility')"
+      @click="
+        () =>
+          commandStore.getCommandFunction('Comfy.Canvas.ToggleLinkVisibility')()
+      "
+      data-testid="toggle-link-visibility-button"
+    />
   </ButtonGroup>
 </template>
 
@@ -46,11 +56,19 @@ import ButtonGroup from 'primevue/buttongroup'
 import Button from 'primevue/button'
 import { useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
+import { useSettingStore } from '@/stores/settingStore'
 import { useI18n } from 'vue-i18n'
+import { LiteGraph } from '@comfyorg/litegraph'
+import { computed } from 'vue'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
+const settingStore = useSettingStore()
+
+const linkHidden = computed(
+  () => settingStore.get('Comfy.LinkRenderMode') === LiteGraph.HIDDEN_LINK
+)
 
 let interval: number | null = null
 const repeat = (command: string) => {

src/extensions/core/linkRenderMode.ts

@@ -10,15 +10,15 @@ const ext = {
       name: 'Link Render Mode',
       defaultValue: 2,
       type: 'combo',
-      // @ts-expect-error
-      options: [...LiteGraph.LINK_RENDER_MODES, 'Hidden'].map((m, i) => ({
-        value: i,
-        text: m,
-        selected: i == app.canvas.links_render_mode
-      })),
-      onChange(value) {
+      options: [
+        { value: LiteGraph.STRAIGHT_LINK, text: 'Straight' },
+        { value: LiteGraph.LINEAR_LINK, text: 'Linear' },
+        { value: LiteGraph.SPLINE_LINK, text: 'Spline' },
+        { value: LiteGraph.HIDDEN_LINK, text: 'Hidden' }
+      ],
+      onChange(value: number) {
         app.canvas.links_render_mode = +value
-        app.graph.setDirtyCanvas(true)
+        app.canvas.setDirty(/* fg */ false, /* bg */ true)
       }
     })
   }

src/i18n.ts

@@ -100,7 +100,8 @@ const messages = {
       zoomOut: 'Zoom Out',
       resetView: 'Reset View',
       selectMode: 'Select Mode',
-      panMode: 'Pan Mode'
+      panMode: 'Pan Mode',
+      toggleLinkVisibility: 'Toggle Link Visibility'
     }
   },
   zh: {
@@ -194,6 +195,14 @@ const messages = {
         upscale: '2 Pass Upscale',
         flux_schnell: 'Flux Schnell'
       }
+    },
+    graphCanvasMenu: {
+      zoomIn: '放大',
+      zoomOut: '缩小',
+      resetView: '重置视图',
+      selectMode: '选择模式',
+      panMode: '平移模式',
+      toggleLinkVisibility: '切换链接可见性'
     }
   }
   // TODO: Add more languages

src/stores/commandStore.ts

@@ -7,6 +7,7 @@ import { useSettingStore } from '@/stores/settingStore'
 import { useToastStore } from '@/stores/toastStore'
 import { showTemplateWorkflowsDialog } from '@/services/dialogService'
 import { useQueueStore } from './queueStore'
+import { LiteGraph } from '@comfyorg/litegraph'
 
 export interface ComfyCommand {
   id: string
@@ -15,7 +16,7 @@ export interface ComfyCommand {
   label?: string | (() => string)
   icon?: string | (() => string)
   tooltip?: string | (() => string)
-  shortcut?: string
+  versionAdded?: string
 }
 
 const getTracker = () =>
@@ -206,6 +207,29 @@ export const useCommandStore = defineStore('command', () => {
       function: () => {
         app.canvas['read_only'] = !app.canvas['read_only']
       }
+    },
+    {
+      id: 'Comfy.Canvas.ToggleLinkVisibility',
+      icon: 'pi pi-eye',
+      label: 'Toggle Link Visibility',
+      versionAdded: '1.3.6',
+
+      function: (() => {
+        let lastLinksRenderMode = LiteGraph.SPLINE_LINK
+
+        return () => {
+          const currentMode = settingStore.get('Comfy.LinkRenderMode')
+
+          if (currentMode === LiteGraph.HIDDEN_LINK) {
+            // If links are hidden, restore the last positive value or default to spline mode
+            settingStore.set('Comfy.LinkRenderMode', lastLinksRenderMode)
+          } else {
+            // If links are visible, store the current mode and hide links
+            lastLinksRenderMode = currentMode
+            settingStore.set('Comfy.LinkRenderMode', LiteGraph.HIDDEN_LINK)
+          }
+        }
+      })()
     }
   ]