Add a button to selection toolbox to open mask editor

src/components/graph/SelectionToolbox.vue

@@ -35,6 +35,19 @@
       icon="pi pi-thumbtack"
       @click="() => commandStore.execute('Comfy.Canvas.ToggleSelected.Pin')"
     />
+    <Button
+      v-show="isTheOnlyImageNode"
+      v-tooltip.top="{
+        value: t('commands.Comfy_Canvas_SelectedNode_OpenMaskEditor.label'),
+        showDelay: 1000
+      }"
+      severity="secondary"
+      text
+      icon="pi pi-pencil"
+      @click="
+        () => commandStore.execute('Comfy.Canvas.SelectedNode.OpenMaskEditor')
+      "
+    />
     <Button
       v-tooltip.top="{
         value: t('commands.Comfy_Canvas_DeleteSelectedItems.label'),
@@ -80,12 +93,17 @@ import { useExtensionService } from '@/services/extensionService'
 import { ComfyCommand, useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'
-import { isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'
+import { isImageNode, isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'
 
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 const extensionService = useExtensionService()
 const { isRefreshable, refreshSelected } = useRefreshableSelection()
+
+const isTheOnlyImageNode = computed(() => {
+  const nodes = canvasStore.selectedItems.filter(isLGraphNode)
+  return nodes.length === 1 && nodes.some(isImageNode)
+})
 const nodeSelected = computed(() =>
   canvasStore.selectedItems.some(isLGraphNode)
 )

src/composables/useCoreCommands.ts

@@ -11,7 +11,7 @@ import {
 } from '@/constants/coreColorPalettes'
 import { t } from '@/i18n'
 import { api } from '@/scripts/api'
-import { app } from '@/scripts/app'
+import { ComfyApp, app } from '@/scripts/app'
 import { useDialogService } from '@/services/dialogService'
 import { useFirebaseAuthService } from '@/services/firebaseAuthService'
 import { useLitegraphService } from '@/services/litegraphService'
@@ -26,6 +26,7 @@ import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { isImageNode } from '@/utils/litegraphUtil'
 
 export function useCoreCommands(): ComfyCommand[] {
   const workflowService = useWorkflowService()
@@ -410,6 +411,23 @@ export function useCoreCommands(): ComfyCommand[] {
         app.canvas.setDirty(true, true)
       }
     },
+    {
+      id: 'Comfy.Canvas.SelectedNode.OpenMaskEditor',
+      icon: 'pi pi-pencil',
+      label: 'Open Mask Editor for Selected Node',
+      versionAdded: '',
+      function: () => {
+        const nodes = getSelectedNodes()
+        const firstImageNode = nodes.find((node) => isImageNode(node))
+        if (firstImageNode) {
+          ComfyApp.copyToClipspace(firstImageNode)
+          // @ts-expect-error fixme ts strict error
+          ComfyApp.clipspace_return_node = firstImageNode
+          // @ts-expect-error fixme ts strict error
+          ComfyApp.open_maskeditor()
+        }
+      }
+    },
     {
       id: 'Comfy.Canvas.Resize',
       icon: 'pi pi-minus',

src/locales/en/commands.json

@@ -71,6 +71,9 @@
   "Comfy_Canvas_ToggleSelectedNodes_Pin": {
     "label": "Pin/Unpin Selected Nodes"
   },
+  "Comfy_Canvas_SelectedNode_OpenMaskEditor": {
+    "label": "Open Mask Editor for Selected Node"
+  },
   "Comfy_Canvas_ZoomIn": {
     "label": "Zoom In"
   },

src/locales/es/commands.json

@@ -71,6 +71,9 @@
   "Comfy_Canvas_ToggleSelected_Pin": {
     "label": "Anclar/Desanclar elementos seleccionados"
   },
+  "Comfy_Canvas_SelectedNode_OpenMaskEditor": {
+    "label": "Abrir editor de máscara para el nodo seleccionado"
+  },
   "Comfy_Canvas_ZoomIn": {
     "label": "Acercar"
   },

src/locales/fr/commands.json

@@ -71,6 +71,9 @@
   "Comfy_Canvas_ToggleSelected_Pin": {
     "label": "Épingler/Désépingler les éléments sélectionnés"
   },
+  "Comfy_Canvas_SelectedNode_OpenMaskEditor": {
+    "label": "Ouvrir l'éditeur de masque pour le nœud sélectionné"
+  },
   "Comfy_Canvas_ZoomIn": {
     "label": "Zoom avant"
   },

src/locales/ja/commands.json

@@ -71,6 +71,9 @@
   "Comfy_Canvas_ToggleSelected_Pin": {
     "label": "選択したアイテムのピン留め/ピン留め解除"
   },
+  "Comfy_Canvas_SelectedNode_OpenMaskEditor": {
+    "label": "選択したノードのマスクエディタを開く"
+  },
   "Comfy_Canvas_ZoomIn": {
     "label": "ズームイン"
   },

src/locales/ko/commands.json

@@ -71,6 +71,9 @@
   "Comfy_Canvas_ToggleSelected_Pin": {
     "label": "선택한 항목 고정/고정 해제"
   },
+  "Comfy_Canvas_SelectedNode_OpenMaskEditor": {
+    "label": "선택한 노드 마스크 편집기 열기"
+  },
   "Comfy_Canvas_ZoomIn": {
     "label": "확대"
   },

src/locales/ru/commands.json

@@ -71,6 +71,9 @@
   "Comfy_Canvas_ToggleSelected_Pin": {
     "label": "Закрепить/Открепить выбранных нод"
   },
+  "Comfy_Canvas_SelectedNode_OpenMaskEditor": {
+    "label": "Открыть редактор масок для выбранной ноды"
+  },
   "Comfy_Canvas_ZoomIn": {
     "label": "Увеличить"
   },

src/locales/zh/commands.json

@@ -71,6 +71,9 @@
   "Comfy_Canvas_ToggleSelected_Pin": {
     "label": "固定/取消固定选中项"
   },
+  "Comfy_Canvas_SelectedNode_OpenMaskEditor": {
+    "label": "打开选中节点的遮罩编辑器"
+  },
   "Comfy_Canvas_ZoomIn": {
     "label": "放大"
   },