draft: Show widget name when connected, hiding only the value

src/LGraphNode.ts

@@ -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
   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
+      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
+
+      // 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
+
       if (typeof widget.draw === "function") {
         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.restore()
   }
 

src/widgets/BaseSteppedWidget.ts

@@ -1,5 +1,8 @@
 import type { IBaseWidget } from "@/types/widgets"
 
+import { drawTextInArea } from "@/draw"
+import { Rectangle } from "@/infrastructure/Rectangle"
+
 import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget"
 
 /**
@@ -64,6 +67,18 @@ export abstract class BaseSteppedWidget<TWidget extends IBaseWidget = IBaseWidge
       if (!this.computedDisabled) this.drawArrowButtons(ctx, options.width)
 
       this.drawTruncatingText({ ctx, width: options.width })
+    } else {
+      // Just draw the name, truncated
+      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",
+      })
     }
 
     // Restore original context attributes

src/widgets/TextWidget.ts

@@ -1,6 +1,9 @@
 import type { LGraphNode } from "@/LGraphNode"
 import type { IStringWidget } from "@/types/widgets"
 
+import { drawTextInArea } from "@/draw"
+import { Rectangle } from "@/infrastructure/Rectangle"
+
 import { BaseWidget, type DrawWidgetOptions, type WidgetEventOptions } from "./BaseWidget"
 
 export class TextWidget extends BaseWidget<IStringWidget> implements IStringWidget {
@@ -26,6 +29,18 @@ export class TextWidget extends BaseWidget<IStringWidget> 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