-
Notifications
You must be signed in to change notification settings - Fork 448
Reactive widget.value and node.inputs in vue #7095
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the ✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎭 Playwright Test Results❌ Some tests failed ⏰ Completed at: 12/13/2025, 06:10:07 PM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/13/2025, 06:00:57 PM UTC 🔗 Links🎉 Your Storybook is ready for review! |
| * Validates that a value is a valid WidgetValue type | ||
| */ | ||
| function validateWidgetValue(value: unknown): WidgetValue { | ||
| if (value === null || value === undefined || value === void 0) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Double check, but...
| if (value === null || value === undefined || value === void 0) { | |
| if (!value) { |
or == null?
| /** | ||
| * Validates that a value is a valid WidgetValue type | ||
| */ | ||
| function validateWidgetValue(value: unknown): WidgetValue { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This could be a good place to do more type level validation.
| const cagRef = ref<ControlWidgetOptions>( | ||
| validateControlWidgetValue(cagWidget.value) | ||
| ) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What we talked about here, validate via a computed maybe?
| set(v) { | ||
| reactiveInputs.splice(0, reactiveInputs.length, ...v) | ||
| } | ||
| }) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should just be in LGraphNode with a get/set.
| undefined, | ||
| inputData | ||
| ) | ||
| if (this.widgets?.[1]) widget.linkedWidgets = [this.widgets[1]] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This could be a one-line PR. Quick fix.
| /** Widget type (see {@link TWidgetType}) */ | ||
| type: TType | ||
| value?: TValue | ||
| valueRef?: () => Ref<boolean | number | string | object | undefined> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Might be able to get this to work if you use NoInfer
| input.default !== undefined | ||
| ? input.default | ||
| : input.type === 'COMBO' && |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Optional:
| input.default !== undefined | |
| ? input.default | |
| : input.type === 'COMBO' && | |
| input.default ?? input.type === 'COMBO' && |
| icon: 'pi pi-link', | ||
| title: 'linkToGlobal', | ||
| description: 'linkToGlobalDesc' | ||
| } satisfies ControlOption |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Double check the need for assertions here.
| if (props.controlWidget().value === mode) return | ||
| props.controlWidget().value = mode |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Another place to try to use MaybeRefOrGetter
| <WidgetWithControl | ||
| v-else-if="widget.controlWidget" | ||
| :comp="WidgetSelectDefault" | ||
| :widget="widget as SimplifiedControlWidget<string>" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| const valueRef = ref(value) | ||
| if (callback) watch(valueRef, (v) => callback(v)) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| const valueRef = ref(value) | |
| if (callback) watch(valueRef, (v) => callback(v)) | |
| if (callback) watch(() => value, (v) => callback(v)) |
| <Button | ||
| variant="link" | ||
| size="small" | ||
| class="h-4 w-7 self-center rounded-xl bg-blue-100/30 p-0" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Colors should be in the theme with named tokens.
| export type SimplifiedControlWidget<T extends WidgetValue = WidgetValue> = | ||
| SimplifiedWidget<T> & Required<Pick<SimplifiedWidget<T>, 'controlWidget'>> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe...
| export type SimplifiedControlWidget<T extends WidgetValue = WidgetValue> = | |
| SimplifiedWidget<T> & Required<Pick<SimplifiedWidget<T>, 'controlWidget'>> | |
| export interface SimplifiedWidgetWithControl<T extends WidgetValue = WidgetValue> extends SimplifiedWidget<T> { | |
| controlWidget: SimplifiedWidget<T>['controlWidget'] | |
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You'll find a good way to structure the types here.
| const valueRef = ref(value) | ||
| if (callback) watch(valueRef, (v) => callback(v)) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same getter for watch here.
dfb604a to
34108db
Compare
Continuation of #6034 with - Updated synchronization for seed - Properly truncates the displayed widget value for the button - Synchronizes control after generate state with litegraph and allows for serialization Several issues from original PR have not (yet) been addressed, but are likely better moved to future PR - fix step value being 10 (legacy system) - ensure it works with COMBO (Fixed in #7095) - ensure it works with FLOAT (Fixed in #7095) - either implement or remove the config button functionality - think it should open settings? <img width="280" height="694" alt="image" src="https://github.com/user-attachments/assets/f36f1cb0-237d-4bfc-bff1-e4976775cf98" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6985-Support-control-after-generate-in-vue-2b86d73d365081d8b01ce489d887ff00) by [Unito](https://www.unito.io) --------- Co-authored-by: bymyself <[email protected]> Co-authored-by: github-actions <[email protected]>
I would prefer that valueRef used the TValue generic, but that causes many, many awful errors. This is far preferable
34108db to
87c3ba6
Compare
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.24 MB (baseline 3.25 MB) • 🟢 -1.36 kBMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 985 kB (baseline 986 kB) • 🟢 -989 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 298 kB (baseline 298 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 182 kB (baseline 184 kB) • 🟢 -2.23 kBReusable component library chunks
Status: 9 added / 8 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 2 added / 2 removed Utilities & Hooks — 3.18 kB (baseline 3.18 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 8.56 MB (baseline 8.56 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 3.82 MB (baseline 3.82 MB) • 🟢 -2.31 kBBundles that do not match a named category
Status: 21 added / 21 removed |
🔧 Auto-fixes AppliedThis PR has been automatically updated to fix linting and formatting issues.
Changes made:
|
A small change pulled out of #7095 to make disabling the current control option swap to 'fixed' instead of doing nothing. Resolves #7468 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7510-Support-fixed-seed-in-vue-2ca6d73d365081b0a723ebc97b921305) by [Unito](https://www.unito.io)
Piecemeal fix pulled out from #7095 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7546-Make-node-inputs-reactive-in-vue-2cb6d73d36508189a88bf35e5747b870) by [Unito](https://www.unito.io)
Closes Comfy-Org#7095 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7539-Fix-widget-reactivity-2cb6d73d3650816d8977ebda35ab88b9) by [Unito](https://www.unito.io)
A small change pulled out of Comfy-Org#7095 to make disabling the current control option swap to 'fixed' instead of doing nothing. Resolves Comfy-Org#7468 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7510-Support-fixed-seed-in-vue-2ca6d73d365081b0a723ebc97b921305) by [Unito](https://www.unito.io)
Closes Comfy-Org#7095 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7539-Fix-widget-reactivity-2cb6d73d3650816d8977ebda35ab88b9) by [Unito](https://www.unito.io)
Piecemeal fix pulled out from Comfy-Org#7095 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7546-Make-node-inputs-reactive-in-vue-2cb6d73d36508189a88bf35e5747b870) by [Unito](https://www.unito.io)
Known Issues:
┆Issue is synchronized with this Notion page by Unito