Add Subgraphs (#3905)

Co-authored-by: github-actions <github-actions@github.com>

src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue

@@ -0,0 +1,34 @@
+<template>
+  <Button
+    v-show="isVisible"
+    v-tooltip.top="{
+      value: t('commands.Comfy_Graph_ConvertToSubgraph.label'),
+      showDelay: 1000
+    }"
+    severity="secondary"
+    text
+    icon="pi pi-box"
+    @click="() => commandStore.execute('Comfy.Graph.ConvertToSubgraph')"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
+
+const { t } = useI18n()
+const commandStore = useCommandStore()
+const canvasStore = useCanvasStore()
+
+const isVisible = computed(() => {
+  return (
+    canvasStore.groupSelected ||
+    canvasStore.rerouteSelected ||
+    canvasStore.nodeSelected
+  )
+})
+</script>

src/components/graph/selectionToolbox/DeleteButton.vue

@@ -1,5 +1,6 @@
 <template>
   <Button
+    v-show="isDeletable"
     v-tooltip.top="{
       value: t('commands.Comfy_Canvas_DeleteSelectedItems.label'),
       showDelay: 1000
@@ -13,10 +14,17 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()
+const canvasStore = useCanvasStore()
+
+const isDeletable = computed(() =>
+  canvasStore.selectedItems.some((x) => x.removable !== false)
+)
 </script>

src/components/graph/selectionToolbox/MaskEditorButton.vue

@@ -25,8 +25,9 @@ const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 
 const isSingleImageNode = computed(() => {
-  const nodes = canvasStore.selectedItems.filter(isLGraphNode)
-  return nodes.length === 1 && nodes.some(isImageNode)
+  const { selectedItems } = canvasStore
+  const item = selectedItems[0]
+  return selectedItems.length === 1 && isLGraphNode(item) && isImageNode(item)
 })
 
 const openMaskEditor = () => {