Add simpler interface for active DOM widgets

src/components/graph/DomWidgets.vue

@@ -21,16 +21,14 @@ import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useCanvasStore } from '@/stores/graphStore'
 
 const domWidgetStore = useDomWidgetStore()
-const widgetStates = computed(() =>
+const widgetStates = computed(() => domWidgetStore.activeWidgetStates)
-  Array.from(domWidgetStore.widgetStates.values())
-)
 
 const updateWidgets = () => {
   const lgCanvas = canvasStore.canvas
   if (!lgCanvas) return
 
   const lowQuality = lgCanvas.low_quality
-  for (const widgetState of domWidgetStore.widgetStates.values()) {
+  for (const widgetState of widgetStates.value) {
     const widget = widgetState.widget
     const node = widget.node as LGraphNode
 

src/scripts/app.ts

@@ -801,7 +801,7 @@ export class ComfyApp {
         const widgetStore = useDomWidgetStore()
 
         // Assertions: UnwrapRef
-        for (const { widget } of widgetStore.widgetStates.values()) {
+        for (const { widget } of widgetStore.activeWidgetStates) {
           if (!nodeSet.has(widget.node)) {
             widgetStore.deactivateWidget(widget.id)
           }

src/stores/domWidgetStore.ts

@@ -20,6 +20,9 @@ export interface DomWidgetState extends PositionConfig {
 export const useDomWidgetStore = defineStore('domWidget', () => {
   const widgetStates = ref<Map<string, DomWidgetState>>(new Map())
 
+  const activeWidgetStates = computed(() =>
+    [...widgetStates.value.values()].filter((state) => state.active)
+  )
   const inactiveWidgetStates = computed(() =>
     [...widgetStates.value.values()].filter((state) => !state.active)
   )
@@ -60,6 +63,7 @@ export const useDomWidgetStore = defineStore('domWidget', () => {
 
   return {
     widgetStates,
+    activeWidgetStates,
     inactiveWidgetStates,
     registerWidget,
     unregisterWidget,