From a5f165cdf1f3a345b2ddc7a55680c75ac61f59d0 Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Tue, 15 Jul 2025 22:39:52 -0700
Subject: [PATCH] dom widget promotion

---
 src/components/graph/DomWidgets.vue        | 22 ++++++++++----
 src/components/graph/widgets/DomWidget.vue | 34 ++++++++++++++++++----
 src/services/litegraphService.ts           |  9 ++++++
 3 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/src/components/graph/DomWidgets.vue b/src/components/graph/DomWidgets.vue
index 9f7117e00a..4cd4251630 100644
--- a/src/components/graph/DomWidgets.vue
+++ b/src/components/graph/DomWidgets.vue
@@ -11,7 +11,6 @@
 </template>
 
 <script setup lang="ts">
-import type { LGraphNode } from '@comfyorg/litegraph'
 import { whenever } from '@vueuse/core'
 import { computed } from 'vue'
 
@@ -21,24 +20,37 @@ import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useCanvasStore } from '@/stores/graphStore'
 
 const domWidgetStore = useDomWidgetStore()
-const widgetStates = computed(() => domWidgetStore.activeWidgetStates)
+
+const widgetStates = computed(() => {
+  return [
+    ...domWidgetStore.activeWidgetStates,
+    ...domWidgetStore.inactiveWidgetStates
+  ]
+})
 
 const updateWidgets = () => {
   const lgCanvas = canvasStore.canvas
   if (!lgCanvas) return
 
   const lowQuality = lgCanvas.low_quality
+  const currentGraph = lgCanvas.graph
+
   for (const widgetState of widgetStates.value) {
     const widget = widgetState.widget
-    const node = widget.node as LGraphNode
+
+    // Use containerNode for promoted widgets, otherwise use widget.node
+    const node = widget.containerNode || widget.node
 
     const visible =
+      node &&
+      currentGraph?.nodes.includes(node) &&
       lgCanvas.isNodeVisible(node) &&
       !(widget.options.hideOnZoom && lowQuality) &&
       widget.isVisible()
 
-    widgetState.visible = visible
-    if (visible) {
+    widgetState.visible = visible ?? false
+
+    if (widgetState.visible && node) {
       const margin = widget.margin
       widgetState.pos = [node.pos[0] + margin, node.pos[1] + margin + widget.y]
       widgetState.size = [
diff --git a/src/components/graph/widgets/DomWidget.vue b/src/components/graph/widgets/DomWidget.vue
index f8309f4a5d..682a58f95f 100644
--- a/src/components/graph/widgets/DomWidget.vue
+++ b/src/components/graph/widgets/DomWidget.vue
@@ -61,10 +61,15 @@ const updateDomClipping = () => {
   if (!lgCanvas || !widgetElement.value) return
 
   const selectedNode = Object.values(lgCanvas.selected_nodes ?? {})[0]
-  if (!selectedNode) return
+  if (!selectedNode) {
+    // Clear clipping when no node is selected
+    updateClipPath(widgetElement.value, lgCanvas.canvas, false, undefined)
+    return
+  }
 
-  const node = widget.node
-  const isSelected = selectedNode === node
+  // Use containerNode for promoted widgets, otherwise use widget.node
+  const positioningNode = widget.containerNode || widget.node
+  const isSelected = selectedNode === positioningNode
   const renderArea = selectedNode?.renderArea
   const offset = lgCanvas.ds.offset
   const scale = lgCanvas.ds.scale
@@ -143,11 +148,28 @@ if (isDOMWidget(widget)) {
 const inputSpec = widget.node.constructor.nodeData
 const tooltip = inputSpec?.inputs?.[widget.name]?.tooltip
 
-onMounted(() => {
-  if (isDOMWidget(widget) && widgetElement.value) {
-    widgetElement.value.appendChild(widget.element)
+// Mount DOM element when widget is or becomes visible
+const mountElementIfVisible = () => {
+  if (widgetState.visible && isDOMWidget(widget) && widgetElement.value) {
+    // Only append if not already a child
+    if (!widgetElement.value.contains(widget.element)) {
+      widgetElement.value.appendChild(widget.element)
+    }
   }
+}
+
+// Check on mount
+onMounted(() => {
+  mountElementIfVisible()
 })
+
+// And watch for visibility changes
+watch(
+  () => widgetState.visible,
+  () => {
+    mountElementIfVisible()
+  }
+)
 </script>
 
 <style scoped>
diff --git a/src/services/litegraphService.ts b/src/services/litegraphService.ts
index cb6efd627c..cdbf9b8aa4 100644
--- a/src/services/litegraphService.ts
+++ b/src/services/litegraphService.ts
@@ -33,6 +33,7 @@ import type {
 import type { ComfyNodeDef as ComfyNodeDefV1 } from '@/schemas/nodeDefSchema'
 import { ComfyApp, app } from '@/scripts/app'
 import { $el } from '@/scripts/ui'
+import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
@@ -88,6 +89,14 @@ export const useLitegraphService = () => {
       constructor() {
         super(app.graph, subgraph, instanceData)
 
+        // Set up callback for promoted widget registration
+        this.onPromotedWidgetAdded = (widget) => {
+          const domWidgetStore = useDomWidgetStore()
+          if (!domWidgetStore.widgetStates.has(widget.id)) {
+            domWidgetStore.registerWidget(widget)
+          }
+        }
+
         this.#setupStrokeStyles()
         this.#addInputs(ComfyNode.nodeData.inputs)
         this.#addOutputs(ComfyNode.nodeData.outputs)