fix Vue node widgets should be in disabled state if their slots are connected with a link #5834
Conversation
dosubot
bot
added
the
size:M
🎭 Playwright Test Results❌ Some tests failed ⏰ Completed at: 09/28/2025, 08:47:05 PM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
christian-byrne
requested review from
benceruleanlu and
DrJKL
and removed request for
benceruleanlu
| <NodeWidgets | ||
| v-if="nodeData.widgets?.length" | ||
| v-memo="[nodeData.widgets?.length]" | ||
| v-memo="[nodeData.widgets?.length, nodeData.inputs]" |
There was a problem hiding this comment.
What would happen if we just removed the v-memo and let Vue handle it?
| v-memo="[nodeData.widgets?.length, nodeData.inputs]" |
|
|
||
| export class NodeInputSlot extends NodeSlot implements INodeInputSlot { | ||
| link: LinkId | null | ||
| private _link: LinkId | null |
There was a problem hiding this comment.
Two points of personal preference for this pattern:
I usually like an Internal suffix, i.e. linkInternal to the underscore prefix. Feels more expressive and helps with IDEs' outlines if you sort fields lexicographically.
I also don't love null over undefined since it does usually entail adding nullish coalescing to pick the specific correct absent value (when otherwise the absent value is undefined in the default case)
| graph.trigger('node:slot-links:changed', { | ||
| nodeId: this.node.id, | ||
| slotType: NodeSlotType.INPUT, | ||
| slotIndex: index, | ||
| connected: this._link != null, | ||
| linkId: this._link ?? null | ||
| }) |
There was a problem hiding this comment.
This feels like something that we should be doing in a store, if not now, then soon. I don't like complex decisions being made in components.
| nodeId: this.node.id, | ||
| slotType: NodeSlotType.INPUT, | ||
| slotIndex: index, | ||
| connected: this._link != null, |
There was a problem hiding this comment.
| connected: this._link != null, | |
| connected: this.isConnected, |
| slotType: NodeSlotType.INPUT, | ||
| slotIndex: index, | ||
| connected: this._link != null, | ||
| linkId: this._link ?? null |
There was a problem hiding this comment.
| linkId: this._link ?? null | |
| linkId: this.link |
| const index = this.node.inputs.indexOf(this) | ||
| if (index === -1) return | ||
|
|
||
| graph.trigger('node:slot-links:changed', { | ||
| nodeId: this.node.id, | ||
| slotType: NodeSlotType.INPUT, | ||
| slotIndex: index, |
There was a problem hiding this comment.
option:
| const index = this.node.inputs.indexOf(this) | |
| if (index === -1) return | |
| graph.trigger('node:slot-links:changed', { | |
| nodeId: this.node.id, | |
| slotType: NodeSlotType.INPUT, | |
| slotIndex: index, | |
| const slotIndex = this.node.inputs.indexOf(this) | |
| if (slotIndex === -1) return | |
| graph.trigger('node:slot-links:changed', { | |
| nodeId: this.node.id, | |
| slotType: NodeSlotType.INPUT, | |
| slotIndex, |
|
|
||
| vueNodeData.set(nodeId, { | ||
| ...currentData, | ||
| inputs: node.inputs ? [...node.inputs] : undefined, |
There was a problem hiding this comment.
Not for this PR, but what if we defined inputs and outputs as being required, so that a lack of them would just be an empty array? Would that simplify some of the logic?
Summary
Fixes #5692 by making widget link connection status trigger on change so Vue widgets with connected links could properly switch to the
disabledstate when they are implicitly converted to inputs.Changes
node:slot-links:changedevent tracking and reactive slot data synchronization for Vue widgetsgraph TD A[Widget Link Change] --> B[NodeInputSlot.link setter] B --> C{Is Widget Input?} C -->|Yes| D[Trigger slot-links:changed] C -->|No| E[End] D --> F[Graph Event Handler] F --> G[syncNodeSlotData] G --> H[Update Vue Reactive Data] H --> I[Widget Re-render] style A fill:#f9f9f9,stroke:#333,color:#000 style I fill:#f9f9f9,stroke:#333,color:#000Review Focus
Widget reactivity performance with frequent link changes and event handler memory management in graph operations.
┆Issue is synchronized with this Notion page by Unito