mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-22 07:44:11 +00:00
27d4a34435
## Summary Fixes missing "Copy Image", "Open Image", "Save Image", and "Open in Mask Editor" context menu options on SaveImage nodes when Vue Nodes mode is enabled. ## Changes - Add `syncLegacyNodeImgs` store method to sync loaded image elements to `node.imgs` - Call sync on image load in ImagePreview component - Simplify mask editor handling to call composable directly ## Technical Details - Only runs when `vueNodesMode` is enabled (no impact on legacy mode) - Reuses already-loaded `<img>` element from Vue (no duplicate network requests) - Store owns the sync logic, component just hands off the element Supersedes #7416 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8143-fix-sync-node-imgs-for-legacy-context-menu-in-Vue-Nodes-mode-2ec6d73d365081c59d42cd1722779b61) by [Unito](https://www.unito.io) --------- Co-authored-by: Amp <amp@ampcode.com>
56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
import { expect } from '@playwright/test'
|
|
|
|
import { comfyPageFixture as test } from '../../../../fixtures/ComfyPage'
|
|
|
|
test.describe('Vue Nodes Image Preview', () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
|
|
await comfyPage.loadWorkflow('widgets/load_image_widget')
|
|
await comfyPage.vueNodes.waitForNodes()
|
|
})
|
|
|
|
async function loadImageOnNode(
|
|
comfyPage: Awaited<
|
|
ReturnType<(typeof test)['info']>
|
|
>['fixtures']['comfyPage']
|
|
) {
|
|
const loadImageNode = (await comfyPage.getNodeRefsByType('LoadImage'))[0]
|
|
const { x, y } = await loadImageNode.getPosition()
|
|
|
|
await comfyPage.dragAndDropFile('image64x64.webp', {
|
|
dropPosition: { x, y }
|
|
})
|
|
|
|
const imagePreview = comfyPage.page.locator('.image-preview')
|
|
await expect(imagePreview).toBeVisible()
|
|
await expect(imagePreview.locator('img')).toBeVisible()
|
|
await expect(imagePreview).toContainText('x')
|
|
|
|
return imagePreview
|
|
}
|
|
|
|
test('opens mask editor from image preview button', async ({ comfyPage }) => {
|
|
const imagePreview = await loadImageOnNode(comfyPage)
|
|
|
|
await imagePreview.locator('[role="img"]').hover()
|
|
await comfyPage.page.getByLabel('Edit or mask image').click()
|
|
|
|
await expect(comfyPage.page.locator('.mask-editor-dialog')).toBeVisible()
|
|
})
|
|
|
|
test('shows image context menu options', async ({ comfyPage }) => {
|
|
await loadImageOnNode(comfyPage)
|
|
|
|
const nodeHeader = comfyPage.vueNodes.getNodeByTitle('Load Image')
|
|
await nodeHeader.click()
|
|
await nodeHeader.click({ button: 'right' })
|
|
|
|
const contextMenu = comfyPage.page.locator('.p-contextmenu')
|
|
await expect(contextMenu).toBeVisible()
|
|
await expect(contextMenu.getByText('Open Image')).toBeVisible()
|
|
await expect(contextMenu.getByText('Copy Image')).toBeVisible()
|
|
await expect(contextMenu.getByText('Save Image')).toBeVisible()
|
|
await expect(contextMenu.getByText('Open in Mask Editor')).toBeVisible()
|
|
})
|
|
})
|