Update widget types to match Litegraph changes (#3808)

Author: webfiltered

src/composables/useRefreshableSelection.ts

@@ -1,4 +1,5 @@
-import type { IWidget, LGraphNode } from '@comfyorg/litegraph'
+import type { LGraphNode } from '@comfyorg/litegraph'
+import type { IBaseWidget } from '@comfyorg/litegraph/dist/types/widgets'
 import { computed, ref, watchEffect } from 'vue'
 
 import { useCanvasStore } from '@/stores/graphStore'
@@ -8,9 +9,11 @@ interface RefreshableItem {
   refresh: () => Promise<void> | void
 }
 
-type RefreshableWidget = IWidget & RefreshableItem
+type RefreshableWidget = IBaseWidget & RefreshableItem
 
-const isRefreshableWidget = (widget: IWidget): widget is RefreshableWidget =>
+const isRefreshableWidget = (
+  widget: IBaseWidget
+): widget is RefreshableWidget =>
   'refresh' in widget && typeof widget.refresh === 'function'
 
 /**

src/extensions/core/contextMenuFilter.ts

@@ -1,4 +1,4 @@
-import { LGraphCanvas, LiteGraph } from '@comfyorg/litegraph'
+import { LGraphCanvas, LiteGraph, isComboWidget } from '@comfyorg/litegraph'
 
 import { app } from '../../scripts/app'
 
@@ -33,7 +33,7 @@ const ext = {
           const clickedComboValue = currentNode?.widgets
             ?.filter(
               (w) =>
-                w.type === 'combo' && w.options.values?.length === values.length
+                isComboWidget(w) && w.options.values?.length === values.length
             )
             .find((w) =>
               // @ts-expect-error Poorly typed; filter above "should" mitigate exceptions

src/extensions/core/groupNode.ts

@@ -1231,7 +1231,6 @@ export class GroupNodeHandler {
             const widgetName = self.groupData.oldToNewWidgetMap[n][w]
             const widget = this.widgets.find((w) => w.name === widgetName)
             if (widget) {
-              // @ts-expect-error fixme ts strict error
               widget.type = 'hidden'
               widget.computeSize = () => [0, -4]
             }

src/extensions/core/load3d.ts

@@ -1,4 +1,7 @@
-import type { IStringWidget } from '@comfyorg/litegraph/dist/types/widgets'
+import type {
+  IComboWidget,
+  IStringWidget
+} from '@comfyorg/litegraph/dist/types/widgets'
 import { nextTick } from 'vue'
 
 import Load3D from '@/components/load3d/Load3D.vue'
@@ -116,7 +119,7 @@ useExtensionService().registerExtension({
           if (fileInput.files?.length) {
             const modelWidget = node.widgets?.find(
               (w) => w.name === 'model_file'
-            ) as IStringWidget
+            ) as IComboWidget & { options: { values: string[] } }
 
             node.properties['Texture'] = undefined
 
@@ -138,7 +141,6 @@ useExtensionService().registerExtension({
 
             if (uploadPath && modelWidget) {
               if (!modelWidget.options?.values?.includes(uploadPath)) {
-                // @ts-expect-error Fails due to earlier type-assertion of IStringWidget
                 modelWidget.options?.values?.push(uploadPath)
               }
 
@@ -292,7 +294,6 @@ useExtensionService().registerExtension({
 
             if (uploadPath && modelWidget) {
               if (!modelWidget.options?.values?.includes(uploadPath)) {
-                // @ts-expect-error Fails due to earlier type-assertion of IStringWidget
                 modelWidget.options?.values?.push(uploadPath)
               }
 

src/extensions/core/load3d/Load3DConfiguration.ts

@@ -1,4 +1,4 @@
-import type { IWidget } from '@comfyorg/litegraph'
+import type { IBaseWidget } from '@comfyorg/litegraph/dist/types/widgets'
 
 import Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
@@ -15,17 +15,20 @@ class Load3DConfiguration {
 
   configure(
     loadFolder: 'input' | 'output',
-    modelWidget: IWidget,
+    modelWidget: IBaseWidget,
     cameraState?: any,
-    width: IWidget | null = null,
-    height: IWidget | null = null
+    width: IBaseWidget | null = null,
+    height: IBaseWidget | null = null
   ) {
     this.setupModelHandling(modelWidget, loadFolder, cameraState)
     this.setupTargetSize(width, height)
     this.setupDefaultProperties()
   }
 
-  private setupTargetSize(width: IWidget | null, height: IWidget | null) {
+  private setupTargetSize(
+    width: IBaseWidget | null,
+    height: IBaseWidget | null
+  ) {
     if (width && height) {
       this.load3d.setTargetSize(width.value as number, height.value as number)
 
@@ -51,7 +54,7 @@ class Load3DConfiguration {
   }
 
   private setupModelHandling(
-    modelWidget: IWidget,
+    modelWidget: IBaseWidget,
     loadFolder: 'input' | 'output',
     cameraState?: any
   ) {

src/extensions/core/widgetInputs.ts

@@ -3,11 +3,11 @@ import type {
   INodeInputSlot,
   INodeOutputSlot,
   ISlotType,
-  IWidget,
   LLink,
   Vector2
 } from '@comfyorg/litegraph'
 import type { CanvasMouseEvent } from '@comfyorg/litegraph/dist/types/events'
+import type { IBaseWidget } from '@comfyorg/litegraph/dist/types/widgets'
 
 import {
   type CallbackParams,
@@ -226,7 +226,7 @@ export class PrimitiveNode extends LGraphNode {
 
     // Store current size as addWidget resizes the node
     const [oldWidth, oldHeight] = this.size
-    let widget: IWidget | undefined
+    let widget: IBaseWidget | undefined
     if (type in ComfyWidgets) {
       widget = (ComfyWidgets[type](this, 'value', inputData, app) || {}).widget
     } else {
@@ -426,7 +426,7 @@ function getConfig(this: LGraphNode, widgetName: string) {
  */
 export function convertToInput(
   node: LGraphNode,
-  widget: IWidget
+  widget: IBaseWidget
 ): INodeInputSlot | undefined {
   console.warn(
     'Please remove call to convertToInput. Widget to socket conversion is no longer necessary, as they co-exist now.'

src/scripts/app.ts

@@ -5,7 +5,8 @@ import {
   LGraphNode,
   LiteGraph
 } from '@comfyorg/litegraph'
-import type { IWidget, Vector2 } from '@comfyorg/litegraph'
+import type { Vector2 } from '@comfyorg/litegraph'
+import type { IBaseWidget } from '@comfyorg/litegraph/dist/types/widgets'
 import _ from 'lodash'
 import type { ToastMessageOptions } from 'primevue/toast'
 import { reactive } from 'vue'
@@ -94,7 +95,7 @@ function sanitizeNodeName(string: string) {
 }
 
 type Clipspace = {
-  widgets?: Pick<IWidget, 'type' | 'name' | 'value'>[] | null
+  widgets?: Pick<IBaseWidget, 'type' | 'name' | 'value'>[] | null
   imgs?: HTMLImageElement[] | null
   original_imgs?: HTMLImageElement[] | null
   images?: any[] | null
@@ -387,7 +388,6 @@ export class ComfyApp {
           const index = node.widgets.findIndex((obj) => obj.name === 'image')
           if (index >= 0) {
             if (
-              // @ts-expect-error custom widget type
               node.widgets[index].type != 'image' &&
               typeof node.widgets[index].value == 'string' &&
               clip_image.filename
@@ -409,7 +409,6 @@ export class ComfyApp {
             )
             if (prop && prop.type != 'button') {
               if (
-                // @ts-expect-error Custom widget type
                 prop.type != 'image' &&
                 typeof prop.value == 'string' &&
                 // @ts-expect-error Custom widget value
@@ -421,7 +420,6 @@ export class ComfyApp {
                   resultItem.filename +
                   (resultItem.type ? ` [${resultItem.type}]` : '')
               } else {
-                // @ts-expect-error fixme ts strict error
                 prop.value = value
                 prop.callback?.(value)
               }
@@ -1101,10 +1099,8 @@ export class ComfyApp {
           ) {
             if (widget.name == 'control_after_generate') {
               if (widget.value === true) {
-                // @ts-expect-error string is not assignable to boolean
                 widget.value = 'randomize'
               } else if (widget.value === false) {
-                // @ts-expect-error string is not assignable to boolean
                 widget.value = 'fixed'
               }
             }
@@ -1535,10 +1531,8 @@ export class ComfyApp {
         for (const widget of node.widgets) {
           if (widget.type === 'combo') {
             if (def['input'].required?.[widget.name] !== undefined) {
-              // @ts-expect-error Requires discriminated union
               widget.options.values = def['input'].required[widget.name][0]
             } else if (def['input'].optional?.[widget.name] !== undefined) {
-              // @ts-expect-error Requires discriminated union
               widget.options.values = def['input'].optional[widget.name][0]
             }
           }

src/scripts/domWidget.ts

@@ -1,7 +1,7 @@
 import { LGraphNode, LiteGraph } from '@comfyorg/litegraph'
 import type {
+  IBaseWidget,
   ICustomWidget,
-  IWidget,
   IWidgetOptions
 } from '@comfyorg/litegraph/dist/types/widgets'
 import _ from 'lodash'
@@ -81,11 +81,11 @@ export interface DOMWidgetOptions<V extends object | string>
 }
 
 export const isDOMWidget = <T extends HTMLElement, V extends object | string>(
-  widget: IWidget
+  widget: IBaseWidget
 ): widget is DOMWidget<T, V> => 'element' in widget && !!widget.element
 
 export const isComponentWidget = <V extends object | string>(
-  widget: IWidget
+  widget: IBaseWidget
 ): widget is ComponentWidget<V> => 'component' in widget && !!widget.component
 
 abstract class BaseDOMWidgetImpl<V extends object | string>

src/scripts/errorNodeWidgets.ts

@@ -1,4 +1,5 @@
-import { IWidget, LGraphNode } from '@comfyorg/litegraph'
+import { LGraphNode } from '@comfyorg/litegraph'
+import type { IBaseWidget } from '@comfyorg/litegraph/dist/types/widgets'
 
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import { useBooleanWidget } from '@/composables/widgets/useBooleanWidget'
@@ -10,7 +11,7 @@ const FloatWidget = useFloatWidget()
 const BooleanWidget = useBooleanWidget()
 
 function addWidgetFromValue(node: LGraphNode, value: unknown) {
-  let widget: IWidget
+  let widget: IBaseWidget
 
   if (typeof value === 'string') {
     widget = StringWidget(node, {

src/scripts/widgets.ts

@@ -1,6 +1,6 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
-import type { IWidget } from '@comfyorg/litegraph'
+import { type LGraphNode, isComboWidget } from '@comfyorg/litegraph'
 import type {
+  IBaseWidget,
   IComboWidget,
   IStringWidget
 } from '@comfyorg/litegraph/dist/types/widgets'
@@ -25,15 +25,15 @@ import './errorNodeWidgets'
 export type ComfyWidgetConstructorV2 = (
   node: LGraphNode,
   inputSpec: InputSpecV2
-) => IWidget
+) => IBaseWidget
 
 export type ComfyWidgetConstructor = (
   node: LGraphNode,
   inputName: string,
   inputData: InputSpec,
   app: ComfyApp,
   widgetName?: string
-) => { widget: IWidget; minWidth?: number; minHeight?: number }
+) => { widget: IBaseWidget; minWidth?: number; minHeight?: number }
 
 /**
  * Transforms a V2 widget constructor to a V1 widget constructor.
@@ -60,7 +60,7 @@ function controlValueRunBefore() {
   return useSettingStore().get('Comfy.WidgetControlMode') === 'before'
 }
 
-export function updateControlWidgetLabel(widget: IWidget) {
+export function updateControlWidgetLabel(widget: IBaseWidget) {
   if (controlValueRunBefore()) {
     widget.label = t('g.control_before_generate')
   } else {
@@ -73,7 +73,7 @@ const HAS_EXECUTED = Symbol()
 
 export function addValueControlWidget(
   node: LGraphNode,
-  targetWidget: IWidget,
+  targetWidget: IBaseWidget,
   defaultValue?: string,
   _values?: unknown,
   widgetName?: string,
@@ -98,7 +98,7 @@ export function addValueControlWidget(
 
 export function addValueControlWidgets(
   node: LGraphNode,
-  targetWidget: IWidget,
+  targetWidget: IBaseWidget,
   defaultValue?: string,
   options?: Record<string, any>,
   inputData?: InputSpec
@@ -136,7 +136,7 @@ export function addValueControlWidgets(
   updateControlWidgetLabel(valueControl)
   const widgets: [IComboWidget, ...IStringWidget[]] = [valueControl]
 
-  const isCombo = targetWidget.type === 'combo'
+  const isCombo = isComboWidget(targetWidget)
   let comboFilter: IStringWidget
   if (isCombo && valueControl.options.values) {
     // @ts-expect-error Combo widget values may be a dictionary or legacy function type