Add refresh button to selecton toolbox (#2612)

src/composables/useRefreshableSelection.ts

@@ -0,0 +1,61 @@
+import type { LGraphNode } from '@comfyorg/litegraph'
+import type { IWidget } from '@comfyorg/litegraph'
+import { computed, ref, watchEffect } from 'vue'
+
+import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
+
+interface RefreshableItem {
+  refresh: () => Promise<void> | void
+}
+
+type RefreshableWidget = IWidget & RefreshableItem
+
+const isLGraphNode = (item: unknown): item is LGraphNode => {
+  const name = item?.constructor?.name
+  return name === 'ComfyNode' || name === 'LGraphNode'
+}
+
+const isRefreshableWidget = (widget: IWidget): widget is RefreshableWidget =>
+  'refresh' in widget && typeof widget.refresh === 'function'
+
+/**
+ * Tracks selected nodes and their refreshable widgets
+ */
+export const useRefreshableSelection = () => {
+  const graphStore = useCanvasStore()
+  const commandStore = useCommandStore()
+  const selectedNodes = ref<LGraphNode[]>([])
+  const isAllNodesSelected = ref(false)
+
+  watchEffect(() => {
+    selectedNodes.value = graphStore.selectedItems.filter(isLGraphNode)
+    isAllNodesSelected.value =
+      graphStore.canvas?.graph?.nodes?.every((node) => !!node.selected) ?? false
+  })
+
+  const refreshableWidgets = computed(() =>
+    selectedNodes.value.flatMap(
+      (node) => node.widgets?.filter(isRefreshableWidget) ?? []
+    )
+  )
+
+  const isRefreshable = computed(
+    () => refreshableWidgets.value.length > 0 || isAllNodesSelected.value
+  )
+
+  async function refreshSelected() {
+    if (!isRefreshable.value) return
+
+    if (isAllNodesSelected.value) {
+      commandStore.execute('Comfy.RefreshNodeDefinitions')
+    } else {
+      await Promise.all(refreshableWidgets.value.map((item) => item.refresh()))
+    }
+  }
+
+  return {
+    isRefreshable,
+    refreshSelected
+  }
+}