fix mask editor bug under vueNodes

Author: jtydhr88

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

@@ -43,6 +43,16 @@
         @error="handleImageError"
       />
 
+      <!-- Hidden preloaded images for mask editor -->
+      <img
+        v-for="(url, i) in imageUrls"
+        v-show="false"
+        :key="i"
+        ref="imageEls"
+        :src="url"
+        alt=""
+      />
+
       <!-- Floating Action Buttons (appear on hover) -->
       <div v-if="isHovered" class="actions absolute top-2 right-2 flex gap-1">
         <!-- Mask/Edit Button -->
@@ -122,6 +132,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'
 
@@ -147,6 +158,8 @@ const actualDimensions = ref<string | null>(null)
 const imageError = ref(false)
 const isLoading = ref(false)
 
+const imageEls = ref<HTMLImageElement[]>([])
+
 // Computed values
 const currentImageUrl = computed(() => props.imageUrls[currentIndex.value])
 const hasMultipleImages = computed(() => props.imageUrls.length > 1)
@@ -186,7 +199,18 @@ const handleImageError = () => {
   actualDimensions.value = null
 }
 
+// In vueNodes mode, we need to set them manually before opening the mask editor.
+const setupNodeForMaskEditor = () => {
+  if (!props.nodeId) return
+  const node = app.rootGraph?.getNodeById(props.nodeId)
+  if (!node) return
+  node.imageIndex = currentIndex.value
+  node.imgs = imageEls.value
+  app.canvas?.select(node)
+}
+
 const handleEditMask = () => {
+  setupNodeForMaskEditor()
   void commandStore.execute('Comfy.MaskEditor.OpenMaskEditor')
 }
 

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
+        }
+      }
     }
   }