Add Asset Widget (#5475)

* [feat] carve out path to call asset browser in combo widget

* Add Asset Widget

* [feat] add fallback "Select model" label

---------

Co-authored-by: Arjan Singh <arjan@comfy.org>

src/lib/litegraph/src/types/widgets.ts

@@ -76,6 +76,7 @@ export type IWidget =
   | IImageCompareWidget
   | ISelectButtonWidget
   | ITextareaWidget
+  | IAssetWidget
 
 export interface IBooleanWidget extends IBaseWidget<boolean, 'toggle'> {
   type: 'toggle'
@@ -224,6 +225,12 @@ export interface ITextareaWidget extends IBaseWidget<string, 'textarea'> {
   value: string
 }
 
+export interface IAssetWidget
+  extends IBaseWidget<string, 'asset', IWidgetOptions<string[]>> {
+  type: 'asset'
+  value: string
+}
+
 /**
  * Valid widget types.  TS cannot provide easily extensible type safety for this at present.
  * Override linkedWidgets[]

src/lib/litegraph/src/widgets/AssetWidget.ts

@@ -0,0 +1,41 @@
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { IAssetWidget } from '@/lib/litegraph/src/types/widgets'
+
+import { BaseWidget, type DrawWidgetOptions } from './BaseWidget'
+
+export class AssetWidget
+  extends BaseWidget<IAssetWidget>
+  implements IAssetWidget
+{
+  constructor(widget: IAssetWidget, node: LGraphNode) {
+    super(widget, node)
+    this.type ??= 'asset'
+    this.value = widget.value?.toString() ?? ''
+  }
+
+  override get _displayValue(): string {
+    return String(this.value) //FIXME: Resolve asset name
+  }
+
+  override drawWidget(
+    ctx: CanvasRenderingContext2D,
+    { width, showText = true }: DrawWidgetOptions
+  ) {
+    // Store original context attributes
+    const { fillStyle, strokeStyle, textAlign } = ctx
+
+    this.drawWidgetShape(ctx, { width, showText })
+
+    if (showText) {
+      this.drawTruncatingText({ ctx, width, leftPadding: 0, rightPadding: 0 })
+    }
+
+    // Restore original context attributes
+    Object.assign(ctx, { textAlign, strokeStyle, fillStyle })
+  }
+
+  override onClick() {
+    //Open Modal
+    this.callback?.(this.value)
+  }
+}

src/lib/litegraph/src/widgets/widgetMap.ts

@@ -7,6 +7,7 @@ import type {
 } from '@/lib/litegraph/src/types/widgets'
 import { toClass } from '@/lib/litegraph/src/utils/type'
 
+import { AssetWidget } from './AssetWidget'
 import { BaseWidget } from './BaseWidget'
 import { BooleanWidget } from './BooleanWidget'
 import { ButtonWidget } from './ButtonWidget'
@@ -47,6 +48,7 @@ export type WidgetTypeMap = {
   imagecompare: ImageCompareWidget
   selectbutton: SelectButtonWidget
   textarea: TextareaWidget
+  asset: AssetWidget
   [key: string]: BaseWidget
 }
 
@@ -115,6 +117,8 @@ export function toConcreteWidget<TWidget extends IWidget | IBaseWidget>(
       return toClass(SelectButtonWidget, narrowedWidget, node)
     case 'textarea':
       return toClass(TextareaWidget, narrowedWidget, node)
+    case 'asset':
+      return toClass(AssetWidget, narrowedWidget, node)
     default: {
       if (wrapLegacyWidgets) return toClass(LegacyWidget, widget, node)
     }