Show text progress messages on executing nodes (#3824)

src/composables/node/useNodeProgressText.ts

@@ -0,0 +1,53 @@
+import { LGraphNode } from '@comfyorg/litegraph'
+
+import { useTextPreviewWidget } from '@/composables/widgets/useProgressTextWidget'
+
+const TEXT_PREVIEW_WIDGET_NAME = '$$node-text-preview'
+
+/**
+ * Composable for handling node text previews
+ */
+export function useNodeProgressText() {
+  const textPreviewWidget = useTextPreviewWidget()
+
+  const findTextPreviewWidget = (node: LGraphNode) =>
+    node.widgets?.find((w) => w.name === TEXT_PREVIEW_WIDGET_NAME)
+
+  const addTextPreviewWidget = (node: LGraphNode) =>
+    textPreviewWidget(node, {
+      name: TEXT_PREVIEW_WIDGET_NAME,
+      type: 'progressText'
+    })
+
+  /**
+   * Shows text preview for a node
+   * @param node The graph node to show the preview for
+   */
+  function showTextPreview(node: LGraphNode, text: string) {
+    const widget = findTextPreviewWidget(node) ?? addTextPreviewWidget(node)
+    widget.value = text
+    node.setDirtyCanvas?.(true)
+  }
+
+  /**
+   * Removes text preview from a node
+   * @param node The graph node to remove the preview from
+   */
+  function removeTextPreview(node: LGraphNode) {
+    if (!node.widgets) return
+
+    const widgetIdx = node.widgets.findIndex(
+      (w) => w.name === TEXT_PREVIEW_WIDGET_NAME
+    )
+
+    if (widgetIdx > -1) {
+      node.widgets[widgetIdx].onRemove?.()
+      node.widgets.splice(widgetIdx, 1)
+    }
+  }
+
+  return {
+    showTextPreview,
+    removeTextPreview
+  }
+}

src/composables/widgets/useProgressTextWidget.ts

@@ -0,0 +1,35 @@
+import type { LGraphNode } from '@comfyorg/litegraph'
+import { ref } from 'vue'
+
+import TextPreviewWidget from '@/components/graph/widgets/TextPreviewWidget.vue'
+import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+const PADDING = 16
+
+export const useTextPreviewWidget = () => {
+  const widgetConstructor: ComfyWidgetConstructorV2 = (
+    node: LGraphNode,
+    inputSpec: InputSpec
+  ) => {
+    const widgetValue = ref<string>('')
+    const widget = new ComponentWidgetImpl<string | object>({
+      node,
+      name: inputSpec.name,
+      component: TextPreviewWidget,
+      inputSpec,
+      options: {
+        getValue: () => widgetValue.value,
+        setValue: (value: string | object) => {
+          widgetValue.value = typeof value === 'string' ? value : String(value)
+        },
+        getMinHeight: () => 42 + PADDING
+      }
+    })
+    addWidget(node, widget)
+    return widget
+  }
+
+  return widgetConstructor
+}