[backport core/1.32] Fix: Opening mask editor on context menu (#6869)

Backport of #6825 to `core/1.32`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6869-backport-core-1-32-Fix-Opening-mask-editor-on-context-menu-2b46d73d36508196a2bfd8412f468196)
by [Unito](https://www.unito.io)

Co-authored-by: Terry Jia <terryjia88@gmail.com>

Author: comfy-pr-bot

src/composables/maskeditor/useMaskEditor.ts

@@ -0,0 +1,48 @@
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { useDialogStore } from '@/stores/dialogStore'
+import TopBarHeader from '@/components/maskeditor/dialog/TopBarHeader.vue'
+import MaskEditorContent from '@/components/maskeditor/MaskEditorContent.vue'
+
+export function useMaskEditor() {
+  const openMaskEditor = (node: LGraphNode) => {
+    if (!node) {
+      console.error('[MaskEditor] No node provided')
+      return
+    }
+
+    if (!node.imgs?.length && node.previewMediaType !== 'image') {
+      console.error('[MaskEditor] Node has no images')
+      return
+    }
+
+    useDialogStore().showDialog({
+      key: 'global-mask-editor',
+      headerComponent: TopBarHeader,
+      component: MaskEditorContent,
+      props: {
+        node
+      },
+      dialogComponentProps: {
+        style: 'width: 90vw; height: 90vh;',
+        modal: true,
+        maximizable: true,
+        closable: true,
+        pt: {
+          root: {
+            class: 'mask-editor-dialog flex flex-col'
+          },
+          content: {
+            class: 'flex flex-col min-h-0 flex-1 !p-0'
+          },
+          header: {
+            class: '!p-2'
+          }
+        }
+      }
+    })
+  }
+
+  return {
+    openMaskEditor
+  }
+}

src/extensions/core/maskeditor.ts

@@ -5,10 +5,9 @@ import { app } from '@/scripts/app'
 import { ComfyApp } from '@/scripts/app'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 import { useDialogStore } from '@/stores/dialogStore'
-import MaskEditorContent from '@/components/maskeditor/MaskEditorContent.vue'
-import TopBarHeader from '@/components/maskeditor/dialog/TopBarHeader.vue'
 import { MaskEditorDialogOld } from './maskEditorOld'
 import { ClipspaceDialog } from './clipspace'
+import { useMaskEditor } from '@/composables/maskeditor/useMaskEditor'
 
 function openMaskEditor(node: LGraphNode): void {
   if (!node) {
@@ -26,32 +25,7 @@ function openMaskEditor(node: LGraphNode): void {
   )
 
   if (useNewEditor) {
-    // Use new refactored editor
-    useDialogStore().showDialog({
-      key: 'global-mask-editor',
-      headerComponent: TopBarHeader,
-      component: MaskEditorContent,
-      props: {
-        node
-      },
-      dialogComponentProps: {
-        style: 'width: 90vw; height: 90vh;',
-        modal: true,
-        maximizable: true,
-        closable: true,
-        pt: {
-          root: {
-            class: 'mask-editor-dialog flex flex-col'
-          },
-          content: {
-            class: 'flex flex-col min-h-0 flex-1 !p-0'
-          },
-          header: {
-            class: '!p-2'
-          }
-        }
-      }
-    })
+    useMaskEditor().openMaskEditor(node)
   } else {
     // Use old editor
     ComfyApp.copyToClipspace(node)

src/services/litegraphService.ts

@@ -58,6 +58,7 @@ import {
 import { getOrderedInputSpecs } from '@/workbench/utils/nodeDefOrderingUtil'
 
 import { useExtensionService } from './extensionService'
+import { useMaskEditor } from '@/composables/maskeditor/useMaskEditor'
 
 export const CONFIG = Symbol()
 export const GET_CONFIG = Symbol()
@@ -796,11 +797,7 @@ export const useLitegraphService = () => {
           options.push({
             content: 'Open in MaskEditor | Image Canvas',
             callback: () => {
-              ComfyApp.copyToClipspace(this)
-              // @ts-expect-error fixme ts strict error
-              ComfyApp.clipspace_return_node = this
-              // @ts-expect-error fixme ts strict error
-              ComfyApp.open_maskeditor()
+              useMaskEditor().openMaskEditor(this)
             }
           })
         }