draft: Show widget name when connected, hiding only the value #1076
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Previously, when a widget was connected to an input link, the entire widget's text (name and value) would disappear. This made it difficult to identify the widget's function at a glance. This commit modifies the drawing behavior to: - Only hide the widget's value when it has an active input connection. - Continue to display the widget's name/label. This improves user experience by providing better visual context for connected widgets. Refactor: - Introduced a \hideValue\ property in \LGraphNode.drawWidgets\ to decouple value visibility from the widget's disabled state. - Updated \BaseSteppedWidget\ and \TextWidget\ to render only the \displayName\ when the value is hidden.
christian-byrne
requested changes
Jun 10, 2025
| @@ -3411,42 +3411,54 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { | |||
| return !isHidden | |||
| } | |||
|
|
|||
| // sync number of widgets with the number of widgets in the node | |||
There was a problem hiding this comment.
What is the comment referring to?
| // Check if locked: either disabled or has an input connection | ||
| const connectedSlot = this.getSlotFromWidget(widget) | ||
| widget.computedDisabled = widget.disabled || connectedSlot?.link != null | ||
| ;(widget as any).hideValue = connectedSlot?.link != null |
There was a problem hiding this comment.
Never use type assertions.
Comment on lines
+72
to
+81
| const { margin } = BaseWidget | ||
| const x = margin * 2 | ||
| const area = new Rectangle(x, this.y, options.width - x - margin, this.height * 0.7) | ||
| ctx.fillStyle = this.secondary_text_color | ||
| drawTextInArea({ | ||
| ctx, | ||
| text: this.displayName, | ||
| area, | ||
| align: "left", | ||
| }) |
There was a problem hiding this comment.
It seems we are repeating this logic twice, can we extract to helper function or class method?
| if (widget.computedDisabled) ctx.globalAlpha *= 0.5 | ||
| const width = widget.width || nodeWidth | ||
|
|
||
| const forceHideValue = (widget as any).hideValue |
There was a problem hiding this comment.
Never use type assertions. We need to look through the code to understand the classes, interfaces, types, and so on. After that, we should implement a solution that naturally extends the current system. If we do this successfuly, we may find that we never need to use type assertions.
To do this properly, it may require approaching the problem by doing research and asking LLM to explain the architecture and objects/classes in the codebase first.
yiqun12
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related to Comfy-Org/ComfyUI_frontend#4025
Previously, when a widget was connected to an input link, the entire widget's text (name and value) would disappear. This made it difficult to identify the widget's function at a glance.
This commit modifies the drawing behavior to:
This improves user experience by providing better visual context for connected widgets.
Refactor: