From f14b034784375b0e8ca773b17be8230049797d09 Mon Sep 17 00:00:00 2001 From: Yiqun Xu <71995731+yiqun12@users.noreply.github.com> Date: Mon, 9 Jun 2025 15:55:01 -0700 Subject: [PATCH 1/4] feat(widgets): Show widget name when connected, hiding only the value 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. --- src/LGraphNode.ts | 60 ++++++++++++++++++++------------ src/widgets/BaseSteppedWidget.ts | 15 ++++++++ src/widgets/TextWidget.ts | 15 ++++++++ 3 files changed, 68 insertions(+), 22 deletions(-) diff --git a/src/LGraphNode.ts b/src/LGraphNode.ts index 322814872..076a0e248 100644 --- a/src/LGraphNode.ts +++ b/src/LGraphNode.ts @@ -3410,46 +3410,60 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { ) return !isHidden } - + // sync number of widgets with the number of widgets in the node drawWidgets(ctx: CanvasRenderingContext2D, { lowQuality = false, editorAlpha = 1, }: DrawWidgetsOptions): void { if (!this.widgets) return - + const nodeWidth = this.size[0] const { widgets } = this const H = LiteGraph.NODE_WIDGET_HEIGHT const showText = !lowQuality ctx.save() ctx.globalAlpha = editorAlpha - + for (const widget of widgets) { - if (!this.isWidgetVisible(widget)) continue - - const { y } = widget - const outlineColour = widget.advanced ? LiteGraph.WIDGET_ADVANCED_OUTLINE_COLOR : LiteGraph.WIDGET_OUTLINE_COLOR - - widget.last_y = y - // Disable widget if it is disabled or if the value is passed from socket connection. - widget.computedDisabled = widget.disabled || this.getSlotFromWidget(widget)?.link != null - - ctx.strokeStyle = outlineColour - ctx.fillStyle = "#222" - ctx.textAlign = "left" - if (widget.computedDisabled) ctx.globalAlpha *= 0.5 - const width = widget.width || nodeWidth - + if (!this.isWidgetVisible(widget)) continue; + + const { y } = widget; + const outlineColour = widget.advanced + ? LiteGraph.WIDGET_ADVANCED_OUTLINE_COLOR + : LiteGraph.WIDGET_OUTLINE_COLOR; + + widget.last_y = y; + + // 判断是否锁定：被禁用或有输入连接 + const connectedSlot = this.getSlotFromWidget(widget); + widget.computedDisabled = widget.disabled || connectedSlot?.link != null; + (widget as any).hideValue = connectedSlot?.link != null; + + ctx.strokeStyle = outlineColour; + ctx.fillStyle = "#222"; + ctx.textAlign = "left"; + + if (widget.computedDisabled) ctx.globalAlpha *= 0.5; + const width = widget.width || nodeWidth; + + const forceHideValue = (widget as any).hideValue; + if (typeof widget.draw === "function") { - widget.draw(ctx, this, width, y, H, lowQuality) + widget.draw(ctx, this, width, y, H, lowQuality); } else { - toConcreteWidget(widget, this, false)?.drawWidget(ctx, { width, showText }) + toConcreteWidget(widget, this, false)?.drawWidget(ctx, { + width, + showText: !forceHideValue, + }); } - ctx.globalAlpha = editorAlpha + + ctx.globalAlpha = editorAlpha; } + + ctx.restore() } - + /** * When {@link LGraphNode.collapsed} is `true`, this method draws the node's collapsed slots. */ @@ -3720,4 +3734,6 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { ) ctx.fillStyle = originalFillStyle } + + } diff --git a/src/widgets/BaseSteppedWidget.ts b/src/widgets/BaseSteppedWidget.ts index 27cf4d926..2ca4a55c3 100644 --- a/src/widgets/BaseSteppedWidget.ts +++ b/src/widgets/BaseSteppedWidget.ts @@ -1,5 +1,7 @@ import type { IBaseWidget } from "@/types/widgets" +import { drawTextInArea } from "@/draw" +import { Rectangle } from "@/infrastructure/Rectangle" import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget" /** @@ -65,6 +67,19 @@ export abstract class BaseSteppedWidget implements IStringWidget { @@ -27,6 +29,19 @@ export class TextWidget extends BaseWidget implements IStringWidg if (showText) { this.drawTruncatingText({ ctx, width, leftPadding: 0, rightPadding: 0 }) } + else { + // Just draw the name, truncated + const { margin } = BaseWidget + const x = margin * 2 + const area = new Rectangle(x, this.y, width - x - margin, this.height * 0.7) + ctx.fillStyle = this.secondary_text_color + drawTextInArea({ + ctx, + text: this.displayName, + area, + align: "left", + }) + } // Restore original context attributes Object.assign(ctx, { textAlign, strokeStyle, fillStyle }) From 4cb1359920a4eb6d12e53b46d60864cbde6043ab Mon Sep 17 00:00:00 2001 From: Yiqun Xu <71995731+yiqun12@users.noreply.github.com> Date: Mon, 9 Jun 2025 16:02:51 -0700 Subject: [PATCH 2/4] change comment --- src/LGraphNode.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/LGraphNode.ts b/src/LGraphNode.ts index 076a0e248..8ace696d3 100644 --- a/src/LGraphNode.ts +++ b/src/LGraphNode.ts @@ -3434,7 +3434,7 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { widget.last_y = y; - // 判断是否锁定：被禁用或有输入连接 + // 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; From 427b2c47cdb04d582e393b83097523f54104c019 Mon Sep 17 00:00:00 2001 From: Yiqun Xu <71995731+yiqun12@users.noreply.github.com> Date: Mon, 9 Jun 2025 16:08:54 -0700 Subject: [PATCH 3/4] fix style test --- src/LGraphNode.ts | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/src/LGraphNode.ts b/src/LGraphNode.ts index 8ace696d3..aed05734d 100644 --- a/src/LGraphNode.ts +++ b/src/LGraphNode.ts @@ -3410,29 +3410,26 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { ) return !isHidden } + // sync number of widgets with the number of widgets in the node drawWidgets(ctx: CanvasRenderingContext2D, { lowQuality = false, editorAlpha = 1, }: DrawWidgetsOptions): void { if (!this.widgets) return - const nodeWidth = this.size[0] const { widgets } = this const H = LiteGraph.NODE_WIDGET_HEIGHT const showText = !lowQuality ctx.save() ctx.globalAlpha = editorAlpha - for (const widget of widgets) { if (!this.isWidgetVisible(widget)) continue; - const { y } = widget; const outlineColour = widget.advanced ? LiteGraph.WIDGET_ADVANCED_OUTLINE_COLOR - : LiteGraph.WIDGET_OUTLINE_COLOR; - - widget.last_y = y; + : LiteGraph.WIDGET_OUTLINE_COLOR + widget.last_y = y // Check if locked: either disabled or has an input connection const connectedSlot = this.getSlotFromWidget(widget); @@ -3456,11 +3453,8 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { showText: !forceHideValue, }); } - ctx.globalAlpha = editorAlpha; } - - ctx.restore() } From fe3bc5c645ceca080161426650aa96e560fe1748 Mon Sep 17 00:00:00 2001 From: Yiqun Xu <71995731+yiqun12@users.noreply.github.com> Date: Mon, 9 Jun 2025 16:20:27 -0700 Subject: [PATCH 4/4] lint fix --- src/LGraphNode.ts | 61 +++++++++++++++----------------- src/widgets/BaseSteppedWidget.ts | 4 +-- src/widgets/TextWidget.ts | 4 +-- 3 files changed, 33 insertions(+), 36 deletions(-) diff --git a/src/LGraphNode.ts b/src/LGraphNode.ts index 8ace696d3..865da1dac 100644 --- a/src/LGraphNode.ts +++ b/src/LGraphNode.ts @@ -3410,60 +3410,59 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { ) return !isHidden } + // sync number of widgets with the number of widgets in the node drawWidgets(ctx: CanvasRenderingContext2D, { lowQuality = false, editorAlpha = 1, }: DrawWidgetsOptions): void { if (!this.widgets) return - + const nodeWidth = this.size[0] const { widgets } = this const H = LiteGraph.NODE_WIDGET_HEIGHT - const showText = !lowQuality ctx.save() ctx.globalAlpha = editorAlpha - + for (const widget of widgets) { - if (!this.isWidgetVisible(widget)) continue; - - const { y } = widget; + if (!this.isWidgetVisible(widget)) continue + + const { y } = widget const outlineColour = widget.advanced ? LiteGraph.WIDGET_ADVANCED_OUTLINE_COLOR - : LiteGraph.WIDGET_OUTLINE_COLOR; - - widget.last_y = y; - + : LiteGraph.WIDGET_OUTLINE_COLOR + + widget.last_y = y + // 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; - - ctx.strokeStyle = outlineColour; - ctx.fillStyle = "#222"; - ctx.textAlign = "left"; - - if (widget.computedDisabled) ctx.globalAlpha *= 0.5; - const width = widget.width || nodeWidth; - - const forceHideValue = (widget as any).hideValue; - + const connectedSlot = this.getSlotFromWidget(widget) + widget.computedDisabled = widget.disabled || connectedSlot?.link != null + ;(widget as any).hideValue = connectedSlot?.link != null + + ctx.strokeStyle = outlineColour + ctx.fillStyle = "#222" + ctx.textAlign = "left" + + if (widget.computedDisabled) ctx.globalAlpha *= 0.5 + const width = widget.width || nodeWidth + + const forceHideValue = (widget as any).hideValue + if (typeof widget.draw === "function") { - widget.draw(ctx, this, width, y, H, lowQuality); + widget.draw(ctx, this, width, y, H, lowQuality) } else { toConcreteWidget(widget, this, false)?.drawWidget(ctx, { width, showText: !forceHideValue, - }); + }) } - - ctx.globalAlpha = editorAlpha; + + ctx.globalAlpha = editorAlpha } - - + ctx.restore() } - + /** * When {@link LGraphNode.collapsed} is `true`, this method draws the node's collapsed slots. */ @@ -3734,6 +3733,4 @@ export class LGraphNode implements Positionable, IPinnable, IColorable { ) ctx.fillStyle = originalFillStyle } - - } diff --git a/src/widgets/BaseSteppedWidget.ts b/src/widgets/BaseSteppedWidget.ts index 2ca4a55c3..95c17acfc 100644 --- a/src/widgets/BaseSteppedWidget.ts +++ b/src/widgets/BaseSteppedWidget.ts @@ -2,6 +2,7 @@ import type { IBaseWidget } from "@/types/widgets" import { drawTextInArea } from "@/draw" import { Rectangle } from "@/infrastructure/Rectangle" + import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget" /** @@ -66,8 +67,7 @@ export abstract class BaseSteppedWidget implements IStringWidget { @@ -28,8 +29,7 @@ export class TextWidget extends BaseWidget implements IStringWidg if (showText) { this.drawTruncatingText({ ctx, width, leftPadding: 0, rightPadding: 0 }) - } - else { + } else { // Just draw the name, truncated const { margin } = BaseWidget const x = margin * 2