fix mask editor bug under vueNodes

Author: jtydhr88

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,29 @@ 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<HTMLImageElement>((resolve) => {
+            const img = new Image()
+
+            img.onload = () => resolve(img)
+
+            img.src = url
+          })
+        })
+      )
+
+      app.canvas?.selectNode(node)
+    }
+  }
+
+  await commandStore.execute('Comfy.MaskEditor.OpenMaskEditor')
 }
 
 const handleDownload = () => {

src/scripts/app.ts

@@ -379,11 +379,19 @@ export class ComfyApp {
     const paintedIndex = selectedIndex + 1
     const combinedIndex = selectedIndex + 2
 
+    // for vueNodes mode
+    let images = node.images
+    if (!images) {
+      const outputs = useNodeOutputStore().getNodeOutputs(node)
+
+      images = outputs?.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 +418,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 +521,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
+        }
+      }
     }
   }