fix: "Copy Image", "Open Image", "Save Image", "Open in Mask Editor" missing from context menu on SaveImage vue node

browser_tests/tests/vueNodes/maskEditor.spec.ts

@@ -0,0 +1,59 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.describe('Vue Nodes Mask Editor', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)
+  })
+
+  test('opens mask editor from toolbox and image overlay buttons', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('widgets/load_image_widget')
+    await comfyPage.vueNodes.waitForNodes()
+
+    const nodes = await comfyPage.getNodeRefsByType('LoadImage')
+    const loadImageNode = nodes[0]
+    const fileComboWidget = await loadImageNode.getWidget(0)
+    await fileComboWidget.click()
+    await comfyPage.page
+      .getByRole('menuitem', { name: 'image32x32.webp' })
+      .click({ noWaitAfter: true })
+
+    const imagePreview = comfyPage.page.locator('.image-preview img')
+    await expect(imagePreview).toBeVisible()
+
+    const maskEditorDialog = comfyPage.page.locator('.maskEditor-dialog-root')
+
+    // Test 1: Open from toolbox button
+    await comfyPage.selectNodes(['Load Image'])
+    await expect(comfyPage.selectionToolbox).toBeVisible()
+
+    const toolboxMaskButton = comfyPage.selectionToolbox.getByRole('button', {
+      name: /mask editor/i
+    })
+    await expect(toolboxMaskButton).toBeVisible()
+    await toolboxMaskButton.click()
+
+    await expect(maskEditorDialog).toBeVisible()
+
+    // Close mask editor
+    await comfyPage.page.keyboard.press('Escape')
+    await expect(maskEditorDialog).not.toBeVisible()
+
+    // Test 2: Open from image overlay button
+    const imageWrapper = comfyPage.page.locator('.image-preview [role="img"]')
+    await imageWrapper.hover()
+
+    const overlayMaskButton = comfyPage.page.locator(
+      '.image-preview [aria-label="Edit or mask image"]'
+    )
+    await expect(overlayMaskButton).toBeVisible()
+    await overlayMaskButton.click()
+
+    await expect(maskEditorDialog).toBeVisible()
+  })
+})

src/components/graph/selectionToolbox/MaskEditorButton.vue

@@ -5,6 +5,7 @@
       value: $t('commands.Comfy_MaskEditor_OpenMaskEditor.label'),
       showDelay: 1000
     }"
+    :aria-label="$t('commands.Comfy_MaskEditor_OpenMaskEditor.label')"
     severity="secondary"
     text
     @click="openMaskEditor"

src/renderer/extensions/vueNodes/components/ImagePreview.vue

@@ -188,6 +188,17 @@ watch(
   { deep: true, immediate: true }
 )
 
+/**
+ * Sync node.imgs for backwards compatibility with legacy systems (e.g., Copy Image).
+ */
+const syncNodeImgs = () => {
+  if (!props.nodeId || !currentImageEl.value) return
+  const node = app.rootGraph?.getNodeById(props.nodeId)
+  if (!node) return
+  node.imgs = [currentImageEl.value]
+  node.imageIndex = currentIndex.value
+}
+
 // Event handlers
 const handleImageLoad = (event: Event) => {
   if (!event.target || !(event.target instanceof HTMLImageElement)) return
@@ -198,6 +209,7 @@ const handleImageLoad = (event: Event) => {
   if (img.naturalWidth && img.naturalHeight) {
     actualDimensions.value = `${img.naturalWidth} x ${img.naturalHeight}`
   }
+  syncNodeImgs()
 }
 
 const handleImageError = () => {
@@ -207,18 +219,7 @@ const handleImageError = () => {
   actualDimensions.value = null
 }
 
-// In vueNodes mode, we need to set them manually before opening the mask editor.
-const setupNodeForMaskEditor = () => {
-  if (!props.nodeId || !currentImageEl.value) return
-  const node = app.rootGraph?.getNodeById(props.nodeId)
-  if (!node) return
-  node.imageIndex = currentIndex.value
-  node.imgs = [currentImageEl.value]
-  app.canvas?.select(node)
-}
-
 const handleEditMask = () => {
-  setupNodeForMaskEditor()
   void commandStore.execute('Comfy.MaskEditor.OpenMaskEditor')
 }
 

tests-ui/tests/renderer/extensions/vueNodes/components/ImagePreview.test.ts

@@ -1,7 +1,7 @@
 import { createTestingPinia } from '@pinia/testing'
 import type { VueWrapper } from '@vue/test-utils'
 import { mount } from '@vue/test-utils'
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
@@ -13,6 +13,22 @@ vi.mock('@/base/common/downloadUtil', () => ({
   downloadFile: vi.fn()
 }))
 
+// Mock app for node.imgs sync tests
+const mockNode: {
+  imgs?: HTMLImageElement[] | undefined
+  imageIndex?: number | null
+} = {}
+vi.mock('@/scripts/app', () => ({
+  app: {
+    rootGraph: {
+      getNodeById: vi.fn(() => mockNode)
+    },
+    canvas: {
+      select: vi.fn()
+    }
+  }
+}))
+
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
@@ -44,6 +60,11 @@ describe('ImagePreview', () => {
   }
   const wrapperRegistry = new Set<VueWrapper>()
 
+  beforeEach(() => {
+    delete mockNode.imgs
+    delete mockNode.imageIndex
+  })
+
   const mountImagePreview = (props = {}) => {
     const wrapper = mount(ImagePreview, {
       props: { ...defaultProps, ...props },
@@ -308,4 +329,21 @@ describe('ImagePreview', () => {
     expect(imgElement.exists()).toBe(true)
     expect(imgElement.attributes('alt')).toBe('Node output 2')
   })
+
+  it('syncs node.imgs on image load for legacy compatibility', async () => {
+    const wrapper = mountImagePreview({
+      imageUrls: [defaultProps.imageUrls[0]],
+      nodeId: 'test-node-123'
+    })
+
+    const img = wrapper.find('img')
+    expect(img.exists()).toBe(true)
+
+    await img.trigger('load')
+    await nextTick()
+
+    expect(mockNode.imgs).toHaveLength(1)
+    expect(mockNode.imgs?.[0]).toBe(img.element)
+    expect(mockNode.imageIndex).toBe(0)
+  })
 })