diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.vue b/src/renderer/extensions/vueNodes/components/ImagePreview.vue index 7bc05d437c..0d6f2e18f8 100644 --- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue +++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue @@ -122,6 +122,7 @@ import { computed, ref, watch } from 'vue' import { useI18n } from 'vue-i18n' import { downloadFile } from '@/base/common/downloadUtil' +import { app } from '@/scripts/app' import { useCommandStore } from '@/stores/commandStore' import { useNodeOutputStore } from '@/stores/imagePreviewStore' @@ -186,8 +187,30 @@ const handleImageError = () => { actualDimensions.value = null } -const handleEditMask = () => { - void commandStore.execute('Comfy.MaskEditor.OpenMaskEditor') +const handleEditMask = async () => { + if (props.nodeId) { + const node = app.rootGraph?.getNodeById(props.nodeId) + if (node) { + node.imageIndex = currentIndex.value + + node.imgs = await Promise.all( + props.imageUrls.map((url) => { + return new Promise((resolve) => { + const img = new Image() + + img.crossOrigin = 'anonymous' + img.onload = () => resolve(img) + + img.src = url + }) + }) + ) + + app.canvas?.selectNode(node) + } + } + + await commandStore.execute('Comfy.MaskEditor.OpenMaskEditor') } const handleDownload = () => { diff --git a/src/scripts/app.ts b/src/scripts/app.ts index 8522aeb2c3..633dd08fa1 100644 --- a/src/scripts/app.ts +++ b/src/scripts/app.ts @@ -379,11 +379,15 @@ export class ComfyApp { const paintedIndex = selectedIndex + 1 const combinedIndex = selectedIndex + 2 + // for vueNodes mode + const images = + node.images ?? useNodeOutputStore().getNodeOutputs(node)?.images + ComfyApp.clipspace = { widgets: widgets, imgs: imgs, original_imgs: orig_imgs, - images: node.images, + images: images, selectedIndex: selectedIndex, img_paste_mode: 'selected', // reset to default im_paste_mode state on copy action paintedIndex: paintedIndex, @@ -410,7 +414,8 @@ export class ComfyApp { ComfyApp.clipspace.imgs[ComfyApp.clipspace.combinedIndex].src } if (ComfyApp.clipspace.imgs && node.imgs) { - if (node.images && ComfyApp.clipspace.images) { + // Update node.images even if it's initially undefined (vueNodes mode) + if (ComfyApp.clipspace.images) { if (ComfyApp.clipspace['img_paste_mode'] == 'selected') { node.images = [ ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']] @@ -512,6 +517,13 @@ export class ComfyApp { } app.graph.setDirtyCanvas(true) + + if (node.images && app.nodeOutputs[node.id]) { + useNodeOutputStore().nodeOutputs[node.id] = { + ...app.nodeOutputs[node.id], + images: node.images + } + } } }