Create all custom widgets as LegacyWidget

src/LGraphNode.ts

@@ -43,6 +43,7 @@ import {
   TitleMode,
 } from "./types/globalEnums"
 import { findFreeSlotOfType } from "./utils/collections"
+import { warnDeprecated } from "./utils/feedback"
 import { distributeSpace } from "./utils/spaceDistribution"
 import { toClass } from "./utils/type"
 import { BaseWidget } from "./widgets/BaseWidget"
@@ -217,7 +218,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
   properties: Dictionary<NodeProperty | undefined> = {}
   properties_info: INodePropertyInfo[] = []
   flags: INodeFlags = {}
-  widgets?: IBaseWidget[]
+  widgets?: (IBaseWidget | BaseWidget)[]
   /**
    * The amount of space available for widgets to grow into.
    * @see {@link layoutWidgets}
@@ -1730,7 +1731,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
     custom_widget: TPlainWidget,
   ): TPlainWidget | WidgetTypeMap[TPlainWidget["type"]] {
     this.widgets ||= []
-    const widget = toConcreteWidget(custom_widget, this, false) ?? custom_widget
+    const widget = toConcreteWidget(custom_widget, this)
     this.widgets.push(widget)
     return widget
   }
@@ -3385,7 +3386,6 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
 
     const nodeWidth = this.size[0]
     const { widgets } = this
-    const H = LiteGraph.NODE_WIDGET_HEIGHT
     const showText = !lowQuality
     ctx.save()
     ctx.globalAlpha = editorAlpha
@@ -3406,11 +3406,13 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
       if (widget.computedDisabled) ctx.globalAlpha *= 0.5
       const width = widget.width || nodeWidth
 
-      const widgetInstance = toConcreteWidget(widget, this, false)
-      if (widgetInstance) {
-        widgetInstance.drawWidget(ctx, { width, showText })
+      // Bypass full type-checking
+      if ("drawWidget" in widget) {
+        widget.drawWidget(ctx, { width, showText })
       } else {
-        widget.draw?.(ctx, this, width, y, H, lowQuality)
+        // Assume this is a POJO added directly to widget array
+        warnDeprecated(`DEPRECATED: Found invalid widget [${widget.name}] - use BaseWidget subclass or use node.addCustomWidget`, widget)
+        toConcreteWidget(widget, this).drawWidget(ctx, { width, showText })
       }
       ctx.globalAlpha = editorAlpha
     }

src/widgets/BaseWidget.ts

@@ -42,6 +42,13 @@ export abstract class BaseWidget<TWidget extends IBaseWidget = IBaseWidget> impl
   static labelValueGap = 5
 
   declare computedHeight?: number
+  declare serialize?: boolean
+  computeLayoutSize?(node: LGraphNode): {
+    minHeight: number
+    maxHeight?: number
+    minWidth: number
+    maxWidth?: number
+  }
 
   #node: LGraphNode
   /** The node that this widget belongs to. */

src/widgets/KnobWidget.ts

@@ -12,7 +12,7 @@ export class KnobWidget extends BaseWidget<IKnobWidget> implements IKnobWidget {
    * Compute the layout size of the widget.
    * @returns The layout size of the widget.
    */
-  computeLayoutSize(): {
+  override computeLayoutSize(): {
     minHeight: number
     maxHeight?: number
     minWidth: number

src/widgets/LegacyWidget.ts

@@ -23,8 +23,7 @@ export class LegacyWidget<TWidget extends IBaseWidget = IBaseWidget> extends Bas
 
   override drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions) {
     const H = LiteGraph.NODE_WIDGET_HEIGHT
-    const thisAsICustomWidget = this
-    thisAsICustomWidget.draw?.(ctx, this.node, options.width, this.y, H, !!options.showText)
+    this.draw?.(ctx, this.node, options.width, this.y, H, !!options.showText)
   }
 
   override onClick() {