Add Vue String widget and multiline textarea widgets (#4112)

src/composables/widgets/useStringWidget.ts

@@ -91,6 +91,55 @@ function addMultilineWidget(
   return widget
 }
 
+function addSingleLineWidget(
+  node: LGraphNode,
+  name: string,
+  opts: { defaultVal: string; placeholder?: string }
+) {
+  const inputEl = document.createElement('input')
+  inputEl.className = 'comfy-text-input'
+  inputEl.type = 'text'
+  inputEl.value = opts.defaultVal
+  inputEl.placeholder = opts.placeholder || name
+
+  const widget = node.addDOMWidget(name, 'text', inputEl, {
+    getValue(): string {
+      return inputEl.value
+    },
+    setValue(v: string) {
+      inputEl.value = v
+    }
+  })
+
+  widget.inputEl = inputEl
+  widget.options.minNodeSize = [200, 40]
+
+  inputEl.addEventListener('input', () => {
+    widget.callback?.(widget.value)
+  })
+
+  // Allow middle mouse button panning
+  inputEl.addEventListener('pointerdown', (event: PointerEvent) => {
+    if (event.button === 1) {
+      app.canvas.processMouseDown(event)
+    }
+  })
+
+  inputEl.addEventListener('pointermove', (event: PointerEvent) => {
+    if ((event.buttons & 4) === 4) {
+      app.canvas.processMouseMove(event)
+    }
+  })
+
+  inputEl.addEventListener('pointerup', (event: PointerEvent) => {
+    if (event.button === 1) {
+      app.canvas.processMouseUp(event)
+    }
+  })
+
+  return widget
+}
+
 export const useStringWidget = () => {
   const widgetConstructor: ComfyWidgetConstructorV2 = (
     node: LGraphNode,
@@ -108,7 +157,10 @@ export const useStringWidget = () => {
           defaultVal,
           placeholder: inputSpec.placeholder
         })
-      : node.addWidget('text', inputSpec.name, defaultVal, () => {}, {})
+      : addSingleLineWidget(node, inputSpec.name, {
+          defaultVal,
+          placeholder: inputSpec.placeholder
+        })
 
     if (typeof inputSpec.dynamicPrompts === 'boolean') {
       widget.dynamicPrompts = inputSpec.dynamicPrompts

src/composables/widgets/useStringWidgetVue.ts

@@ -0,0 +1,65 @@
+import type { LGraphNode } from '@comfyorg/litegraph'
+import { ref } from 'vue'
+
+import StringWidget from '@/components/graph/widgets/StringWidget.vue'
+import {
+  type InputSpec,
+  isStringInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
+import { type ComfyWidgetConstructorV2 } from '@/scripts/widgetTypes'
+
+const PADDING = 8
+
+export const useStringWidgetVue = (options: { defaultValue?: string } = {}) => {
+  const widgetConstructor: ComfyWidgetConstructorV2 = (
+    node: LGraphNode,
+    inputSpec: InputSpec
+  ) => {
+    if (!isStringInputSpec(inputSpec)) {
+      throw new Error(`Invalid input data: ${inputSpec}`)
+    }
+
+    // Initialize widget value
+    const widgetValue = ref<string>(
+      inputSpec.default ?? options.defaultValue ?? ''
+    )
+
+    // Create the Vue-based widget instance
+    const widget = new ComponentWidgetImpl<string>({
+      node,
+      name: inputSpec.name,
+      component: StringWidget,
+      inputSpec,
+      options: {
+        // Required: getter for widget value
+        getValue: () => widgetValue.value,
+
+        // Required: setter for widget value
+        setValue: (value: string) => {
+          widgetValue.value = value
+        },
+
+        // Optional: minimum height for the widget
+        getMinHeight: () => {
+          return inputSpec.multiline ? 80 + PADDING : 40 + PADDING
+        },
+
+        // Optional: whether to serialize this widget's value
+        serialize: true
+      }
+    })
+
+    // Add dynamic prompts support if specified
+    if (typeof inputSpec.dynamicPrompts === 'boolean') {
+      widget.dynamicPrompts = inputSpec.dynamicPrompts
+    }
+
+    // Register the widget with the node
+    addWidget(node, widget as any)
+
+    return widget
+  }
+
+  return widgetConstructor
+}