refactor(vue-widgets): adopt DOM widget value persistence best practices for randomizer and cycler

- Replace custom onSetValue with ComfyUI's built-in widget.callback
- Remove widget.updateConfig, set widget.value directly
- Add isRestoring flag to break callback → watch → widget.value loop
- Update ComponentWidget types with generic parameter for type-safe callbacks

Refs: docs/dom-widgets/value-persistence-best-practices.md
This commit is contained in:
Will Miao
2026-01-28 00:21:30 +08:00
parent a02462fff4
commit 18d3ecb4da
7 changed files with 274 additions and 237 deletions

View File

@@ -157,10 +157,8 @@ function createLoraRandomizerWidget(node) {
},
setValue(v: RandomizerConfig) {
internalValue = v
console.log('randomizer widget value update: ', internalValue)
if (typeof widget.onSetValue === 'function') {
widget.onSetValue(v)
}
// ComfyUI automatically calls widget.callback after setValue
// No need for custom onSetValue mechanism
},
serialize: true,
getMinHeight() {
@@ -169,10 +167,6 @@ function createLoraRandomizerWidget(node) {
}
)
widget.updateConfig = (v: RandomizerConfig) => {
internalValue = v
}
// Add method to get pool config from connected node
node.getPoolConfig = () => getPoolConfigFromConnectedNode(node)
@@ -242,9 +236,8 @@ function createLoraCyclerWidget(node) {
setValue(v: CyclerConfig) {
const oldFilename = internalValue?.current_lora_filename
internalValue = v
if (typeof widget.onSetValue === 'function') {
widget.onSetValue(v)
}
// ComfyUI automatically calls widget.callback after setValue
// No need for custom onSetValue mechanism
// Update downstream loaders when the active LoRA filename changes
if (oldFilename !== v?.current_lora_filename) {
updateDownstreamLoaders(node)
@@ -257,15 +250,6 @@ function createLoraCyclerWidget(node) {
}
)
widget.updateConfig = (v: CyclerConfig) => {
const oldFilename = internalValue?.current_lora_filename
internalValue = v
// Update downstream loaders when the active LoRA filename changes
if (oldFilename !== v?.current_lora_filename) {
updateDownstreamLoaders(node)
}
}
// Add method to get pool config from connected node
node.getPoolConfig = () => getPoolConfigFromConnectedNode(node)