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>

Author: huchenlei

browser_tests/graphCanvasMenu.spec.ts

@@ -0,0 +1,38 @@
+import { expect } from '@playwright/test'
+import { comfyPageFixture as test } from './ComfyPage'
+
+test.describe('Graph Canvas Menu', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    // Set link render mode to spline to make sure it's not affected by other tests'
+    // side effects.
+    await comfyPage.setSetting('Comfy.LinkRenderMode', 2)
+  })
+
+  test('Can toggle link visibility', async ({ comfyPage }) => {
+    // Note: `Comfy.Graph.CanvasMenu` is disabled in comfyPage setup.
+    // so no cleanup is needed.
+    await comfyPage.setSetting('Comfy.Graph.CanvasMenu', true)
+
+    const button = comfyPage.page.getByTestId('toggle-link-visibility-button')
+    await button.click()
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'canvas-with-hidden-links.png'
+    )
+    const hiddenLinkRenderMode = await comfyPage.page.evaluate(() => {
+      return window['LiteGraph'].HIDDEN_LINK
+    })
+    expect(await comfyPage.getSetting('Comfy.LinkRenderMode')).toBe(
+      hiddenLinkRenderMode
+    )
+
+    await button.click()
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'canvas-with-visible-links.png'
+    )
+    expect(await comfyPage.getSetting('Comfy.LinkRenderMode')).not.toBe(
+      hiddenLinkRenderMode
+    )
+  })
+})

browser_tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-2x-linux.png

@@ -63,7 +63,7 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.2.1",
-    "@comfyorg/litegraph": "^0.7.83",
+    "@comfyorg/litegraph": "^0.7.84",
     "@primevue/themes": "^4.0.5",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vueuse/core": "^11.0.0",

browser_tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png

@@ -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) => {

browser_tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-2x-linux.png

@@ -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)
       }
     })
   }

browser_tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png

@@ -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

package-lock.json

@@ -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)
+          }
+        }
+      })()
     }
   ]