From b9d2dcac635d4edde69c61a6cea891fc95e7d46f Mon Sep 17 00:00:00 2001
From: Blake <176114999+webfiltered@users.noreply.github.com>
Date: Thu, 5 Jun 2025 03:21:15 -0700
Subject: [PATCH] Fix convert to subgraph shown on IO node

---
 .../selectionToolbox/ConvertToSubgraphButton.vue     | 12 ++++++++++++
 src/stores/graphStore.ts                             |  4 +++-
 src/utils/litegraphUtil.ts                           |  6 +++++-
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue b/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue
index 00661b54c..c86582a60 100644
--- a/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue
+++ b/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue
@@ -1,5 +1,6 @@
 <template>
   <Button
+    v-show="isVisible"
     v-tooltip.top="{
       value: t('commands.Comfy_Graph_ConvertToSubgraph.label'),
       showDelay: 1000
@@ -13,10 +14,21 @@
 
 <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>
diff --git a/src/stores/graphStore.ts b/src/stores/graphStore.ts
index 8d053dde7..a1e0d0043 100644
--- a/src/stores/graphStore.ts
+++ b/src/stores/graphStore.ts
@@ -3,7 +3,7 @@ import type { Positionable } from '@comfyorg/litegraph/dist/interfaces'
 import { defineStore } from 'pinia'
 import { type Raw, computed, markRaw, ref, shallowRef } from 'vue'
 
-import { isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'
+import { isLGraphGroup, isLGraphNode, isReroute } from '@/utils/litegraphUtil'
 
 export const useTitleEditorStore = defineStore('titleEditor', () => {
   const titleEditorTarget = shallowRef<LGraphNode | LGraphGroup | null>(null)
@@ -31,6 +31,7 @@ export const useCanvasStore = defineStore('canvas', () => {
 
   const nodeSelected = computed(() => selectedItems.value.some(isLGraphNode))
   const groupSelected = computed(() => selectedItems.value.some(isLGraphGroup))
+  const rerouteSelected = computed(() => selectedItems.value.some(isReroute))
 
   const getCanvas = () => {
     if (!canvas.value) throw new Error('getCanvas: canvas is null')
@@ -42,6 +43,7 @@ export const useCanvasStore = defineStore('canvas', () => {
     selectedItems,
     nodeSelected,
     groupSelected,
+    rerouteSelected,
     updateSelectedItems,
     getCanvas
   }
diff --git a/src/utils/litegraphUtil.ts b/src/utils/litegraphUtil.ts
index c90b61604..865c4f6c6 100644
--- a/src/utils/litegraphUtil.ts
+++ b/src/utils/litegraphUtil.ts
@@ -1,4 +1,4 @@
-import type { ColorOption, LGraph } from '@comfyorg/litegraph'
+import { ColorOption, LGraph, Reroute } from '@comfyorg/litegraph'
 import { LGraphGroup, LGraphNode, isColorable } from '@comfyorg/litegraph'
 import type { ISerialisedGraph } from '@comfyorg/litegraph/dist/types/serialisation'
 import type {
@@ -50,6 +50,10 @@ export const isLGraphGroup = (item: unknown): item is LGraphGroup => {
   return item instanceof LGraphGroup
 }
 
+export const isReroute = (item: unknown): item is Reroute => {
+  return item instanceof Reroute
+}
+
 /**
  * Get the color option of all canvas items if they are all the same.
  * @param items - The items to get the color option of.