From a3615b38245c2046ce7a7a3bc65c39b39ca3f0bc Mon Sep 17 00:00:00 2001
From: filtered <176114999+webfiltered@users.noreply.github.com>
Date: Thu, 15 May 2025 14:33:53 +1000
Subject: [PATCH] Add simpler interface for active DOM widgets

---
 src/components/graph/DomWidgets.vue | 6 ++----
 src/scripts/app.ts                  | 2 +-
 src/stores/domWidgetStore.ts        | 4 ++++
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/graph/DomWidgets.vue b/src/components/graph/DomWidgets.vue
index 468b90673..9f7117e00 100644
--- a/src/components/graph/DomWidgets.vue
+++ b/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(() =>
-  Array.from(domWidgetStore.widgetStates.values())
-)
+const widgetStates = computed(() => domWidgetStore.activeWidgetStates)
 
 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
 
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index 9562e32f2..bceb90b9d 100644
--- a/src/scripts/app.ts
+++ b/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)
           }
diff --git a/src/stores/domWidgetStore.ts b/src/stores/domWidgetStore.ts
index f129f52d5..d561b5bc5 100644
--- a/src/stores/domWidgetStore.ts
+++ b/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,