Files
ComfyUI_frontend/tools/devtools/web/legacyWidget.js
Alexander Brown 14d55eb305 ECS: Moving widgets out of the Node data (#13322)
## Summary

Move Vue widget render-only metadata out of the graph node manager and
into dedicated widget render state alongside widget values.

## Changes

- **What**: Adds `WidgetRenderState` in `widgetValueStore`, removes
`SafeWidgetData` from `useGraphNodeManager`, and has Vue widget
rendering compose from raw LiteGraph widgets plus store-backed
value/render state.
- **What**: Updates promoted widget, app mode, parameter panel, preview,
tooltip, and widget tests for the new render-state boundary.
- **What**: Hardens related browser tests against branded id typing and
brittle default workflow node ids.

## Review Focus

Please look closely at the ownership boundary between raw LiteGraph
widgets, `WidgetState`, and `WidgetRenderState`, especially promoted
widget metadata and linked-widget rendering.

## Validation

- `pnpm typecheck`
- `pnpm typecheck:browser`
- focused widget/node unit tests
- focused Playwright check for `Should display added widgets`

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: AustinMroz <austin@comfy.org>
2026-07-09 10:42:30 -07:00

38 lines
980 B
JavaScript

//es
// eslint-disable-next-line import-x/no-unresolved -- import is correct at time of test execution
import { app } from '../../scripts/app.js'
function legacyWidget(node, inputName, inputData) {
if (!node.widgets) node.widgets = []
const widget = {
draw: function (ctx, node, widget_width, y, H) {
ctx.save()
ctx.fillStyle = '#7F7'
ctx.fillRect(15, y, widget_width - 15 * 2, H)
ctx.restore()
},
mouse: function mouseAnnotated(event, [x, y], node) {
const widget_width = this.width || node.size[0]
if (x < 30) {
this.value--
} else if (x > widget_width - 30 && x < widget_width) {
this.value++
}
},
name: inputName,
options: {},
type: 'DEVTOOLS.LEGACYWIDGET',
value: 0,
y: 0
}
node.widgets.push(widget)
return { widget }
}
app.registerExtension({
name: 'DevTools.LegacyWidget',
async getCustomWidgets() {
return { DEVTOOLSLEGACYWIDGET: legacyWidget }
}
})