fix: hide linked core media inputs in Nodes 2.0

browser_tests/assets/widgets/linked_core_media.json

@@ -0,0 +1,192 @@
+{
+  "id": "6db64321-d1c9-4bb5-b6d4-e08b60531fc6",
+  "revision": 0,
+  "last_node_id": 6,
+  "last_link_id": 3,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "PrimitiveNode",
+      "pos": [20, 20],
+      "size": [250, 82],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "COMBO",
+          "type": "COMBO",
+          "widget": {
+            "name": "image"
+          },
+          "links": [1]
+        }
+      ],
+      "title": "image",
+      "properties": {
+        "Run widget replace on values": false
+      },
+      "widgets_values": ["linked-image.webp", "fixed"]
+    },
+    {
+      "id": 2,
+      "type": "PrimitiveNode",
+      "pos": [20, 380],
+      "size": [250, 82],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "COMBO",
+          "type": "COMBO",
+          "widget": {
+            "name": "file"
+          },
+          "links": [2]
+        }
+      ],
+      "title": "file",
+      "properties": {
+        "Run widget replace on values": false
+      },
+      "widgets_values": ["linked-video.mp4", "fixed"]
+    },
+    {
+      "id": 3,
+      "type": "PrimitiveNode",
+      "pos": [20, 740],
+      "size": [250, 82],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "COMBO",
+          "type": "COMBO",
+          "widget": {
+            "name": "audio"
+          },
+          "links": [3]
+        }
+      ],
+      "title": "audio",
+      "properties": {
+        "Run widget replace on values": false
+      },
+      "widgets_values": ["linked-audio.wav", "fixed"]
+    },
+    {
+      "id": 4,
+      "type": "LoadImage",
+      "pos": [360, 20],
+      "size": [315, 314],
+      "flags": {},
+      "order": 3,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "image",
+          "type": "COMBO",
+          "widget": {
+            "name": "image"
+          },
+          "link": 1
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": ["linked-image.webp", "image"]
+    },
+    {
+      "id": 5,
+      "type": "LoadVideo",
+      "pos": [360, 380],
+      "size": [315, 314],
+      "flags": {},
+      "order": 4,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "file",
+          "type": "COMBO",
+          "widget": {
+            "name": "file"
+          },
+          "link": 2
+        }
+      ],
+      "outputs": [
+        {
+          "name": "VIDEO",
+          "type": "VIDEO",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadVideo"
+      },
+      "widgets_values": ["linked-video.mp4", "image"]
+    },
+    {
+      "id": 6,
+      "type": "LoadAudio",
+      "pos": [360, 740],
+      "size": [315, 125],
+      "flags": {},
+      "order": 5,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "audio",
+          "type": "COMBO",
+          "widget": {
+            "name": "audio"
+          },
+          "link": 3
+        }
+      ],
+      "outputs": [
+        {
+          "name": "AUDIO",
+          "type": "AUDIO",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadAudio"
+      },
+      "widgets_values": ["linked-audio.wav", null, ""]
+    }
+  ],
+  "links": [
+    [1, 1, 0, 4, 0, "COMBO"],
+    [2, 2, 0, 5, 0, "COMBO"],
+    [3, 3, 0, 6, 0, "COMBO"]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 0.8,
+      "offset": [0, 0]
+    }
+  },
+  "version": 0.4
+}

browser_tests/tests/vueNodes/widgets/load/linkedCoreMedia.spec.ts

@@ -0,0 +1,112 @@
+import { AudioPreview, getWav } from '@e2e/fixtures/components/AudioPreview'
+import { VideoPreview } from '@e2e/fixtures/components/VideoPreview'
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '@e2e/fixtures/ComfyPage'
+import { assetPath } from '@e2e/fixtures/utils/paths'
+
+test.describe('linked core media selectors', { tag: '@vue-nodes' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.page.route('**/api/view?**', async (route) => {
+      const filename = new URL(route.request().url()).searchParams.get(
+        'filename'
+      )
+
+      if (filename === 'linked-image.webp') {
+        await route.fulfill({
+          contentType: 'image/webp',
+          path: assetPath('image64x64.webp')
+        })
+        return
+      }
+      if (filename === 'linked-video.mp4') {
+        await route.fulfill({
+          contentType: 'video/mp4',
+          path: assetPath('plain_video.mp4')
+        })
+        return
+      }
+      if (filename === 'linked-audio.wav') {
+        await route.fulfill({
+          body: getWav(),
+          contentType: 'audio/x-wav'
+        })
+        return
+      }
+
+      await route.fallback()
+    })
+
+    await comfyPage.workflow.loadWorkflow('widgets/linked_core_media')
+  })
+
+  test('hides local media until each selector is disconnected', async ({
+    comfyPage
+  }) => {
+    const loadImage = await comfyPage.vueNodes.getFixtureByTitle('Load Image')
+    const loadVideo = comfyPage.vueNodes.getNodeByTitle('Load Video')
+    const loadAudio = comfyPage.vueNodes.getNodeByTitle('Load Audio')
+    const videoPreview = new VideoPreview(loadVideo)
+    const audioPreview = new AudioPreview(loadAudio)
+    const [[loadImageNode], [loadVideoNode], [loadAudioNode]] =
+      await Promise.all(
+        ['LoadImage', 'LoadVideo', 'LoadAudio'].map((type) =>
+          comfyPage.nodeOps.getNodeRefsByType(type)
+        )
+      )
+
+    await expect(loadImage.imagePreview).toHaveCount(0)
+    await expect(videoPreview.preview).toHaveCount(0)
+    await expect(audioPreview.audio).toHaveCount(0)
+
+    const contextMenu = comfyPage.page.locator('.p-contextmenu')
+    await loadImageNode.centerOnNode()
+    await loadImage.header.click({ button: 'right' })
+    await expect(contextMenu).toBeVisible()
+    await expect(
+      contextMenu.getByText('Open Image', { exact: true })
+    ).toHaveCount(0)
+    await expect(
+      contextMenu.getByText('Paste Image', { exact: true })
+    ).toHaveCount(0)
+    await comfyPage.page.keyboard.press('Escape')
+
+    const mediaNodes = [loadImage.root, loadVideo, loadAudio]
+    const linkedHeights = await Promise.all(
+      mediaNodes.map(async (node) => (await node.boundingBox())?.height ?? 0)
+    )
+    expect(
+      linkedHeights,
+      'Linked media nodes should have measurable fitted heights'
+    ).not.toContain(0)
+
+    for (const node of [loadImageNode, loadVideoNode, loadAudioNode]) {
+      await (await node.getInput(0)).removeLinks()
+    }
+
+    await expect(loadImage.imagePreview).toBeVisible()
+    await expect(loadImage.imagePreview.locator('img')).toBeVisible()
+    await expect(videoPreview.preview).toBeVisible()
+    await expect(videoPreview.video).toBeVisible()
+    await expect(audioPreview.audio).toBeAttached()
+
+    for (const [index, node] of mediaNodes.entries()) {
+      await expect
+        .poll(() => node.boundingBox().then((box) => box?.height ?? 0), {
+          message: 'Restored local media should grow the fitted node'
+        })
+        .toBeGreaterThan(linkedHeights[index])
+    }
+
+    await loadImageNode.centerOnNode()
+    await loadImage.header.click({ button: 'right' })
+    await expect(contextMenu).toBeVisible()
+    await expect(
+      contextMenu.getByText('Open Image', { exact: true })
+    ).toBeVisible()
+    await expect(
+      contextMenu.getByText('Paste Image', { exact: true })
+    ).toBeVisible()
+  })
+})

src/composables/graph/useImageMenuOptions.test.ts

@@ -118,6 +118,30 @@ describe('useImageMenuOptions', () => {
 
       expect(options.every((o) => !!o.icon)).toBe(true)
     })
+
+    it('keeps output preview actions when the local image input is unavailable', () => {
+      const node = createImageNode()
+      const { getImageMenuOptions } = useImageMenuOptions()
+      const labels = getImageMenuOptions(node, {
+        input: false,
+        preview: true
+      }).map((option) => option.label)
+
+      expect(labels).toContain('Open Image')
+      expect(labels).toContain('Save Image')
+      expect(labels).not.toContain('Paste Image')
+    })
+
+    it('keeps only the local paste action when preview actions are unavailable', () => {
+      const node = createImageNode()
+      const { getImageMenuOptions } = useImageMenuOptions()
+      const labels = getImageMenuOptions(node, {
+        input: true,
+        preview: false
+      }).map((option) => option.label)
+
+      expect(labels).toEqual(['Paste Image'])
+    })
   })
 
   describe('pasteImage action', () => {

src/composables/graph/useImageMenuOptions.ts

@@ -6,6 +6,16 @@ import { useCommandStore } from '@/stores/commandStore'
 
 import type { MenuOption } from './useMoreOptionsMenu'
 
+interface ImageMenuAvailability {
+  input: boolean
+  preview: boolean
+}
+
+const DEFAULT_IMAGE_MENU_AVAILABILITY: ImageMenuAvailability = {
+  input: true,
+  preview: true
+}
+
 function canPasteImage(node?: LGraphNode): boolean {
   return typeof node?.pasteFiles === 'function'
 }
@@ -107,14 +117,21 @@ export function useImageMenuOptions() {
     }
   }
 
-  const getImageMenuOptions = (node: LGraphNode): MenuOption[] => {
+  const getImageMenuOptions = (
+    node: LGraphNode,
+    availability: ImageMenuAvailability = DEFAULT_IMAGE_MENU_AVAILABILITY
+  ): MenuOption[] => {
     const hasImages = !!node?.imgs?.length
     const canPaste = canPasteImage(node)
-    if (!hasImages && !canPaste) return []
+    if (
+      (!hasImages || !availability.preview) &&
+      (!canPaste || !availability.input)
+    )
+      return []
 
     const options: MenuOption[] = []
 
-    if (hasImages) {
+    if (hasImages && availability.preview) {
       options.push(
         {
           label: t('contextMenu.Open Image'),
@@ -134,15 +151,15 @@ export function useImageMenuOptions() {
       )
     }
 
-    if (canPaste) {
+    if (canPaste && availability.input) {
       options.push({
         label: t('contextMenu.Paste Image'),
         icon: 'icon-[lucide--clipboard-paste]',
         action: () => pasteClipboardImageToNode(node)
       })
     }
 
-    if (hasImages) {
+    if (hasImages && availability.preview) {
       options.push({
         label: t('contextMenu.Save Image'),
         icon: 'icon-[lucide--download]',