Inline numeric widget configurations (#2792)

This commit is contained in:
Chenlei Hu
2025-03-01 18:09:23 -05:00
committed by GitHub
parent e58fab92d1
commit 503341b966
4 changed files with 49 additions and 74 deletions

View File

@@ -2,10 +2,9 @@ import type { LGraphNode } from '@comfyorg/litegraph'
import type { INumericWidget } from '@comfyorg/litegraph/dist/types/widgets'
import _ from 'lodash'
import type { FloatInputOptions, InputSpec } from '@/schemas/nodeDefSchema'
import { type InputSpec, isFloatInputSpec } from '@/schemas/nodeDefSchema'
import type { ComfyWidgetConstructor } from '@/scripts/widgets'
import { useSettingStore } from '@/stores/settingStore'
import { getNumberDefaults } from '@/utils/mathUtil'
function onFloatValueChange(this: INumericWidget, v: number) {
this.value = this.options.round
@@ -28,40 +27,48 @@ export const useFloatWidget = () => {
inputName: string,
inputData: InputSpec
) => {
if (!isFloatInputSpec(inputData)) {
throw new Error(`Invalid input data: ${inputData}`)
}
// TODO: Move to outer scope to avoid re-initializing on every call
// Blocked on ComfyWidgets lazy initialization.
const settingStore = useSettingStore()
const sliderEnabled = !settingStore.get('Comfy.DisableSliders')
const inputOptions = inputData[1]
const inputOptions = inputData[1] ?? {}
const widgetType = sliderEnabled
? inputOptions?.display === 'slider'
? inputOptions.display === 'slider'
? 'slider'
: 'number'
: 'number'
const step = inputOptions.step ?? 0.5
const precision =
settingStore.get('Comfy.FloatRoundingPrecision') || undefined
settingStore.get('Comfy.FloatRoundingPrecision') ||
Math.max(0, -Math.floor(Math.log10(step)))
const enableRounding = !settingStore.get('Comfy.DisableFloatRounding')
const { val, config } = getNumberDefaults(
inputOptions as FloatInputOptions,
{
defaultStep: 0.5,
precision,
enableRounding
}
)
const defaultValue = inputOptions.default ?? 0
return {
widget: node.addWidget(
widgetType,
inputName,
val,
defaultValue,
onFloatValueChange,
// @ts-expect-error InputSpec is not typed correctly
config
{
min: inputOptions.min ?? 0,
max: inputOptions.max ?? 2048,
round:
enableRounding && precision && !inputOptions.round
? (1_000_000 * Math.pow(0.1, precision)) / 1_000_000
: (inputOptions.round as number),
/** @deprecated Use step2 instead. The 10x value is a legacy implementation. */
step: step * 10.0,
step2: step,
precision
}
)
}
}

View File

@@ -1,14 +1,13 @@
import type { LGraphNode } from '@comfyorg/litegraph'
import type { INumericWidget } from '@comfyorg/litegraph/dist/types/widgets'
import type { InputSpec, IntInputOptions } from '@/schemas/nodeDefSchema'
import { type InputSpec, isIntInputSpec } from '@/schemas/nodeDefSchema'
import type { ComfyApp } from '@/scripts/app'
import {
type ComfyWidgetConstructor,
addValueControlWidget
} from '@/scripts/widgets'
import { useSettingStore } from '@/stores/settingStore'
import { getNumberDefaults } from '@/utils/mathUtil'
function onValueChange(this: INumericWidget, v: number) {
// For integers, always round to the nearest step
@@ -41,28 +40,39 @@ export const useIntWidget = () => {
app: ComfyApp,
widgetName?: string
) => {
if (!isIntInputSpec(inputData)) {
throw new Error(`Invalid input data: ${inputData}`)
}
const settingStore = useSettingStore()
const sliderEnabled = !settingStore.get('Comfy.DisableSliders')
const inputOptions = inputData[1]
const inputOptions = inputData[1] ?? {}
const widgetType = sliderEnabled
? inputOptions?.display === 'slider'
? 'slider'
: 'number'
: 'number'
const { val, config } = getNumberDefaults(inputOptions as IntInputOptions, {
defaultStep: 1,
precision: 0,
enableRounding: true
})
config.precision = 0
const step = inputOptions.step ?? 1
const defaultValue = inputOptions.default ?? 0
const result = {
// @ts-expect-error InputSpec is not typed correctly
widget: node.addWidget(widgetType, inputName, val, onValueChange, config)
widget: node.addWidget(
widgetType,
inputName,
defaultValue,
onValueChange,
{
min: inputOptions.min ?? 0,
max: inputOptions.max ?? 2048,
/** @deprecated Use step2 instead. The 10x value is a legacy implementation. */
step: step * 10,
step2: step,
precision: 0
}
)
}
if (inputData[1]?.control_after_generate) {
if (inputOptions.control_after_generate) {
const seedControl = addValueControlWidget(
node,
result.widget,