fix: preserve null widget values across store, live widget, and callback

Default IBaseWidget TValue to the canonical WidgetValue so a widget value
may be null. The Vue update handler now assigns the same normalized value
to the store, live widget .value, and callback instead of coercing .value
to undefined. Coerce null/void to undefined only at the persisted
NodeProperty boundary.

Amp-Thread-ID: https://ampcode.com/threads/T-019f2a75-8d64-7605-980d-7aca51a5f19c
Co-authored-by: Amp <amp@ampcode.com>

Author: DrJKL

src/extensions/core/load3d.ts

@@ -635,9 +635,10 @@ useExtensionService().registerExtension({
           const extrinsics = result?.[3]
           const intrinsics = result?.[4]
 
-          modelWidget.value = filePath?.replaceAll('\\', '/')
+          const modelFilePath = filePath?.replaceAll('\\', '/')
+          modelWidget.value = modelFilePath
 
-          node.properties['Last Time Model File'] = modelWidget.value
+          node.properties['Last Time Model File'] = modelFilePath
 
           const settings = {
             loadFolder: 'output',

src/extensions/core/widgetInputs.ts

@@ -7,14 +7,12 @@ import type {
   LLink
 } from '@/lib/litegraph/src/litegraph'
 import { NodeSlot } from '@/lib/litegraph/src/node/NodeSlot'
-import type {
-  IBaseWidget,
-  TWidgetValue
-} from '@/lib/litegraph/src/types/widgets'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { assetService } from '@/platform/assets/services/assetService'
 import { createAssetWidget } from '@/platform/assets/utils/createAssetWidget'
 import type { ComfyNodeDef, InputSpec } from '@/schemas/nodeDefSchema'
 import { app } from '@/scripts/app'
+import type { WidgetValue } from '@/types/simplifiedWidget'
 import {
   ComfyWidgets,
   addValueControlWidgets,
@@ -29,7 +27,7 @@ import { applyFirstWidgetValueToGraph } from './widgetValuePropagation'
 
 const replacePropertyName = 'Run widget replace on values'
 export class PrimitiveNode extends LGraphNode {
-  controlValues?: TWidgetValue[]
+  controlValues?: WidgetValue[]
   lastType?: string
   static override category: string
   constructor(title: string) {

src/extensions/core/widgetValuePropagation.ts

@@ -2,15 +2,15 @@ import type { Point } from '@/lib/litegraph/src/interfaces'
 import type { LLink } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
-import type { TWidgetValue } from '@/lib/litegraph/src/types/widgets'
 import { app } from '@/scripts/app'
+import type { WidgetValue } from '@/types/simplifiedWidget'
 
 type SourceNode = Pick<LGraphNode, 'graph' | 'outputs' | 'widgets'>
 
 export function applyFirstWidgetValueToGraph(
   node: SourceNode,
   extraLinks: LLink[] = [],
-  transformValue?: (value: TWidgetValue) => TWidgetValue
+  transformValue?: (value: WidgetValue) => WidgetValue
 ) {
   const output = node.outputs[0]
   if (!output?.links?.length || !node.graph) return

src/lib/litegraph/src/LGraphNode.ts

@@ -98,6 +98,7 @@ import type {
   TWidgetType,
   TWidgetValue
 } from './types/widgets'
+import type { WidgetValue } from '@/types/simplifiedWidget'
 import { findFreeSlotOfType } from './utils/collections'
 import { warnDeprecated } from './utils/feedback'
 import { getWidgetIds } from './utils/widget'
@@ -1066,14 +1067,17 @@ export class LGraphNode
    * @param name
    * @param value
    */
-  setProperty(name: string, value: TWidgetValue): void {
+  setProperty(name: string, value: WidgetValue): void {
     this.properties ||= {}
-    if (value === this.properties[name]) return
+    // Node properties are persisted and cannot hold null/void, so normalize
+    // before comparing and storing.
+    const nextValue = value ?? undefined
+    if (nextValue === this.properties[name]) return
 
     const prev_value = this.properties[name]
-    this.properties[name] = value
+    this.properties[name] = nextValue
     // abort change
-    if (this.onPropertyChanged?.(name, value, prev_value) === false)
+    if (this.onPropertyChanged?.(name, nextValue, prev_value) === false)
       this.properties[name] = prev_value
 
     if (this.widgets) {

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

@@ -2,6 +2,7 @@ import type { Bounds } from '@/renderer/core/layout/types'
 import type { CurveData } from '@/components/curve/types'
 import type { BoundingBox } from '@/types/boundingBoxes'
 import type { NodeId } from '@/types/nodeId'
+import type { WidgetValue } from '@/types/simplifiedWidget'
 import type { WidgetId } from '@/types/widgetId'
 
 import type {
@@ -411,7 +412,7 @@ export function isWidgetValue(value: unknown): value is TWidgetValue {
  * @see IWidget
  */
 export interface IBaseWidget<
-  TValue = boolean | number | string | object | undefined,
+  TValue = WidgetValue,
   TType extends string = string,
   TOptions extends IWidgetOptions = IWidgetOptions
 > {

src/renderer/extensions/vueNodes/composables/useProcessedWidgets.test.ts

@@ -483,7 +483,7 @@ describe('live widget update handler', () => {
     setActivePinia(createTestingPinia({ stubActions: false }))
   })
 
-  it('forwards null (not undefined) to the live widget callback', () => {
+  it('forwards null (not undefined) to both the live widget value and callback', () => {
     const callback = vi.fn()
     const id = widgetId(GRAPH_ID, toNodeId(1), 'test_widget')
     const liveWidget = createMockWidget({
@@ -506,6 +506,7 @@ describe('live widget update handler', () => {
 
     processed.updateHandler(null)
 
+    expect(liveWidget.value).toBeNull()
     expect(callback).toHaveBeenCalledTimes(1)
     expect(callback.mock.calls[0][0]).toBeNull()
   })

src/renderer/extensions/vueNodes/composables/useProcessedWidgets.ts

@@ -241,7 +241,7 @@ function createWidgetUpdateHandler({
     widgetValueStore.setValue(id, newValue)
     if (live) {
       const normalized = normalizeWidgetValue(newValue)
-      live.widget.value = normalized ?? undefined
+      live.widget.value = normalized
       live.widget.callback?.(normalized, app.canvas, live.node)
       live.node.widgets?.forEach((w) => w.triggerDraw?.())
     }