Add widget to node with missing definition (#3291)

Co-authored-by: github-actions <github-actions@github.com>

src/composables/functional/useChainCallback.ts

@@ -5,11 +5,14 @@
  * @param callbacks - The callbacks to chain.
  * @returns A new callback that chains the original callback with the callbacks.
  */
-export const useChainCallback = <T extends (...args: any[]) => void>(
+export const useChainCallback = <
+  O,
+  T extends (this: O, ...args: any[]) => void
+>(
   originalCallback: T | undefined,
-  ...callbacks: ((...args: Parameters<T>) => void)[]
+  ...callbacks: ((this: O, ...args: Parameters<T>) => void)[]
 ) => {
-  return function (this: unknown, ...args: Parameters<T>) {
+  return function (this: O, ...args: Parameters<T>) {
     originalCallback?.call(this, ...args)
     callbacks.forEach((callback) => callback.call(this, ...args))
   }

src/scripts/errorNodeWidgets.ts

@@ -0,0 +1,60 @@
+import { IWidget, LGraphNode } from '@comfyorg/litegraph'
+
+import { useChainCallback } from '@/composables/functional/useChainCallback'
+import { useBooleanWidget } from '@/composables/widgets/useBooleanWidget'
+import { useFloatWidget } from '@/composables/widgets/useFloatWidget'
+import { useStringWidget } from '@/composables/widgets/useStringWidget'
+
+const StringWidget = useStringWidget()
+const FloatWidget = useFloatWidget()
+const BooleanWidget = useBooleanWidget()
+
+function addWidgetFromValue(node: LGraphNode, value: unknown) {
+  let widget: IWidget
+
+  if (typeof value === 'string') {
+    widget = StringWidget(node, {
+      type: 'STRING',
+      name: 'UNKNOWN',
+      multiline: value.length > 20
+    })
+  } else if (typeof value === 'number') {
+    widget = FloatWidget(node, {
+      type: 'FLOAT',
+      name: 'UNKNOWN'
+    })
+  } else if (typeof value === 'boolean') {
+    widget = BooleanWidget(node, {
+      type: 'BOOLEAN',
+      name: 'UNKNOWN'
+    })
+  } else {
+    console.warn(`Unknown value type: ${typeof value}`)
+    return
+  }
+
+  widget.value = value
+}
+
+/**
+ * Try add widgets to node with missing definition.
+ */
+LGraphNode.prototype.onConfigure = useChainCallback(
+  LGraphNode.prototype.onConfigure,
+  function (this: LGraphNode, info) {
+    if (!this.has_errors || !info.widgets_values) return
+
+    /**
+     * Note: Some custom nodes overrides the `widgets_values` property to an
+     * object that has `length` property and index access. It is not safe to call
+     * any array methods on it.
+     * See example in https://github.com/Kosinkadink/ComfyUI-VideoHelperSuite/blob/8629188458dc6cb832f871ece3bd273507e8a766/web/js/VHS.core.js#L59-L84
+     */
+    for (let i = 0; i < info.widgets_values.length; i++) {
+      const widgetValue = info.widgets_values[i]
+      addWidgetFromValue(this, widgetValue)
+    }
+
+    this.serialize_widgets = true
+  }
+)

src/scripts/widgets.ts

@@ -20,6 +20,7 @@ import { useSettingStore } from '@/stores/settingStore'
 
 import type { ComfyApp } from './app'
 import './domWidget'
+import './errorNodeWidgets'
 
 export type ComfyWidgetConstructorV2 = (
   node: LGraphNode,