[feat] Add node title buttons with icon-only rendering (#1186)

Author: christian-byrne

src/LGraphBadge.ts

@@ -57,7 +57,7 @@ export class LGraphBadge {
   }
 
   get visible() {
-    return this.text.length > 0 || !!this.icon
+    return (this.text?.length ?? 0) > 0 || !!this.icon
   }
 
   getWidth(ctx: CanvasRenderingContext2D) {

src/LGraphButton.ts

@@ -0,0 +1,89 @@
+import { Rectangle } from "./infrastructure/Rectangle"
+import { LGraphBadge, type LGraphBadgeOptions } from "./LGraphBadge"
+
+export interface LGraphButtonOptions extends LGraphBadgeOptions {
+  name?: string // To identify the button
+}
+
+export class LGraphButton extends LGraphBadge {
+  name?: string
+  _last_area: Rectangle = new Rectangle()
+
+  constructor(options: LGraphButtonOptions) {
+    super(options)
+    this.name = options.name
+  }
+
+  override getWidth(ctx: CanvasRenderingContext2D): number {
+    if (!this.visible) return 0
+
+    const { font } = ctx
+    ctx.font = `${this.fontSize}px 'PrimeIcons'`
+
+    // For icon buttons, just measure the text width without padding
+    const textWidth = this.text ? ctx.measureText(this.text).width : 0
+
+    ctx.font = font
+    return textWidth
+  }
+
+  /**
+   * @internal
+   *
+   * Draws the button and updates its last rendered area for hit detection.
+   * @param ctx The canvas rendering context.
+   * @param x The x-coordinate to draw the button at.
+   * @param y The y-coordinate to draw the button at.
+   */
+  override draw(ctx: CanvasRenderingContext2D, x: number, y: number): void {
+    if (!this.visible) {
+      return
+    }
+
+    const width = this.getWidth(ctx)
+
+    // Update the hit area
+    this._last_area[0] = x + this.xOffset
+    this._last_area[1] = y + this.yOffset
+    this._last_area[2] = width
+    this._last_area[3] = this.height
+
+    // Custom drawing for buttons - no background, just icon/text
+    const adjustedX = x + this.xOffset
+    const adjustedY = y + this.yOffset
+
+    const { font, fillStyle, textBaseline, textAlign } = ctx
+
+    // Use the same color as the title text (usually white)
+    const titleTextColor = ctx.fillStyle || "white"
+
+    // Draw as icon-only without background
+    ctx.font = `${this.fontSize}px 'PrimeIcons'`
+    ctx.fillStyle = titleTextColor
+    ctx.textBaseline = "middle"
+    ctx.textAlign = "center"
+
+    const centerX = adjustedX + width / 2
+    const centerY = adjustedY + this.height / 2
+
+    if (this.text) {
+      ctx.fillText(this.text, centerX, centerY)
+    }
+
+    // Restore context
+    ctx.font = font
+    ctx.fillStyle = fillStyle
+    ctx.textBaseline = textBaseline
+    ctx.textAlign = textAlign
+  }
+
+  /**
+   * Checks if a point is inside the button's last rendered area.
+   * @param x The x-coordinate of the point.
+   * @param y The y-coordinate of the point.
+   * @returns `true` if the point is inside the button, otherwise `false`.
+   */
+  isPointInside(x: number, y: number): boolean {
+    return this._last_area.containsPoint([x, y])
+  }
+}

src/LGraphCanvas.ts

@@ -4679,6 +4679,28 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
       !!node.selected,
     )
 
+    // Render title buttons (if not collapsed)
+    if (node.title_buttons && !node.flags.collapsed) {
+      const title_height = LiteGraph.NODE_TITLE_HEIGHT
+      let current_x = size[0] // Start flush with right edge
+
+      for (let i = 0; i < node.title_buttons.length; i++) {
+        const button = node.title_buttons[i]
+        if (!button.visible) {
+          continue
+        }
+
+        const button_width = button.getWidth(ctx)
+        current_x -= button_width
+
+        // Center button vertically in title bar
+        const button_y = -title_height + (title_height - button.height) / 2
+
+        button.draw(ctx, current_x, button_y)
+        current_x -= 2
+      }
+    }
+
     if (!low_quality) {
       node.drawBadges(ctx)
     }

src/LGraphNode.ts

@@ -36,6 +36,7 @@ import { getNodeInputOnPos, getNodeOutputOnPos } from "./canvas/measureSlots"
 import { NullGraphError } from "./infrastructure/NullGraphError"
 import { Rectangle } from "./infrastructure/Rectangle"
 import { BadgePosition, LGraphBadge } from "./LGraphBadge"
+import { LGraphButton, type LGraphButtonOptions } from "./LGraphButton"
 import { LGraphCanvas } from "./LGraphCanvas"
 import { type LGraphNodeConstructor, LiteGraph, type Subgraph, type SubgraphNode } from "./litegraph"
 import { LLink } from "./LLink"
@@ -52,6 +53,7 @@ import {
 import { findFreeSlotOfType } from "./utils/collections"
 import { warnDeprecated } from "./utils/feedback"
 import { distributeSpace } from "./utils/spaceDistribution"
+import { truncateText } from "./utils/textUtils"
 import { toClass } from "./utils/type"
 import { BaseWidget } from "./widgets/BaseWidget"
 import { toConcreteWidget, type WidgetTypeMap } from "./widgets/widgetMap"
@@ -326,6 +328,7 @@ export class LGraphNode implements NodeLike, Positionable, IPinnable, IColorable
   lostFocusAt?: number
   gotFocusAt?: number
   badges: (LGraphBadge | (() => LGraphBadge))[] = []
+  title_buttons: LGraphButton[] = []
   badgePosition: BadgePosition = BadgePosition.TopLeft
   onOutputRemoved?(this: LGraphNode, slot: number): void
   onInputRemoved?(this: LGraphNode, slot: number, input: INodeInputSlot): void
@@ -687,6 +690,26 @@ export class LGraphNode implements NodeLike, Positionable, IPinnable, IColorable
       error: this.#getErrorStrokeStyle,
       selected: this.#getSelectedStrokeStyle,
     }
+
+    // Assign onMouseDown implementation
+    this.onMouseDown = (e: CanvasPointerEvent, pos: Point, canvas: LGraphCanvas): boolean => {
+      // Check for title button clicks (only if not collapsed)
+      if (this.title_buttons?.length && !this.flags.collapsed) {
+        // pos contains the offset from the node's position, so we need to use node-relative coordinates
+        const nodeRelativeX = pos[0]
+        const nodeRelativeY = pos[1]
+
+        for (let i = 0; i < this.title_buttons.length; i++) {
+          const button = this.title_buttons[i]
+          if (button.visible && button.isPointInside(nodeRelativeX, nodeRelativeY)) {
+            this.onTitleButtonClick(button, canvas)
+            return true // Prevent default behavior
+          }
+        }
+      }
+
+      return false // Allow default behavior
+    }
   }
 
   /** Internal callback for subgraph nodes. Do not implement externally. */
@@ -1794,6 +1817,21 @@ export class LGraphNode implements NodeLike, Positionable, IPinnable, IColorable
     return widget
   }
 
+  addTitleButton(options: LGraphButtonOptions): LGraphButton {
+    this.title_buttons ||= []
+    const button = new LGraphButton(options)
+    this.title_buttons.push(button)
+    return button
+  }
+
+  onTitleButtonClick(button: LGraphButton, canvas: LGraphCanvas): void {
+    // Dispatch event for button click
+    canvas.dispatch("litegraph:node-title-button-clicked", {
+      node: this,
+      button: button,
+    })
+  }
+
   removeWidgetByName(name: string): void {
     const widget = this.widgets?.find(x => x.name === name)
     if (widget) this.removeWidget(widget)
@@ -3372,23 +3410,43 @@ export class LGraphNode implements NodeLike, Positionable, IPinnable, IColorable
       } else {
         ctx.fillStyle = this.constructor.title_text_color || default_title_color
       }
+
+      // Calculate available width for title
+      let availableWidth = size[0] - title_height * 2 // Basic margins
+
+      // Subtract space for title buttons
+      if (this.title_buttons?.length > 0) {
+        let buttonsWidth = 0
+        const savedFont = ctx.font // Save current font
+        for (const button of this.title_buttons) {
+          if (button.visible) {
+            buttonsWidth += button.getWidth(ctx) + 2 // button width + gap
+          }
+        }
+        ctx.font = savedFont // Restore font after button measurements
+        if (buttonsWidth > 0) {
+          buttonsWidth += 10 // Extra margin before buttons
+          availableWidth -= buttonsWidth
+        }
+      }
+
+      // Truncate title if needed
+      let displayTitle = title
+
       if (this.collapsed) {
-        ctx.textAlign = "left"
-        ctx.fillText(
-          // avoid urls too long
-          title.substr(0, 20),
-          title_height,
-          LiteGraph.NODE_TITLE_TEXT_Y - title_height,
-        )
-        ctx.textAlign = "left"
-      } else {
-        ctx.textAlign = "left"
-        ctx.fillText(
-          title,
-          title_height,
-          LiteGraph.NODE_TITLE_TEXT_Y - title_height,
-        )
+        // For collapsed nodes, limit to 20 chars as before
+        displayTitle = title.substr(0, 20)
+      } else if (availableWidth > 0) {
+        // For regular nodes, truncate based on available width
+        displayTitle = truncateText(ctx, title, availableWidth)
       }
+
+      ctx.textAlign = "left"
+      ctx.fillText(
+        displayTitle,
+        title_height,
+        LiteGraph.NODE_TITLE_TEXT_Y - title_height,
+      )
     }
   }
 

src/infrastructure/LGraphCanvasEventMap.ts

@@ -1,5 +1,6 @@
 import type { ConnectingLink } from "@/interfaces"
 import type { LGraph } from "@/LGraph"
+import type { LGraphButton } from "@/LGraphButton"
 import type { LGraphGroup } from "@/LGraphGroup"
 import type { LGraphNode } from "@/LGraphNode"
 import type { Subgraph } from "@/subgraph/Subgraph"
@@ -35,4 +36,10 @@ export interface LGraphCanvasEventMap {
       originalEvent?: CanvasPointerEvent
       node: LGraphNode
     }
+
+  /** A title button on a node was clicked. */
+  "litegraph:node-title-button-clicked": {
+    node: LGraphNode
+    button: LGraphButton
+  }
 }

src/subgraph/SubgraphNode.ts

@@ -7,6 +7,8 @@ import type { IBaseWidget } from "@/types/widgets"
 import type { UUID } from "@/utils/uuid"
 
 import { RecursionError } from "@/infrastructure/RecursionError"
+import { LGraphButton } from "@/LGraphButton"
+import { LGraphCanvas } from "@/LGraphCanvas"
 import { LGraphNode } from "@/LGraphNode"
 import { type INodeInputSlot, type ISlotType, type NodeId } from "@/litegraph"
 import { LLink, type ResolvedConnection } from "@/LLink"
@@ -99,6 +101,22 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
 
     this.type = subgraph.id
     this.configure(instanceData)
+
+    this.addTitleButton({
+      name: "enter_subgraph",
+      text: "\uE93B", // Unicode for pi-window-maximize
+      yOffset: 0, // No vertical offset needed, button is centered
+      xOffset: -10,
+      fontSize: 16,
+    })
+  }
+
+  override onTitleButtonClick(button: LGraphButton, canvas: LGraphCanvas): void {
+    if (button.name === "enter_subgraph") {
+      canvas.openSubgraph(this.subgraph)
+    } else {
+      super.onTitleButtonClick(button, canvas)
+    }
   }
 
   #addSubgraphInputListeners(subgraphInput: SubgraphInput, input: INodeInputSlot & Partial<ISubgraphInput>) {

src/utils/textUtils.ts

@@ -0,0 +1,47 @@
+/**
+ * Truncates text to fit within a given width using binary search for optimal performance.
+ * @param ctx The canvas rendering context used for text measurement
+ * @param text The text to truncate
+ * @param maxWidth The maximum width the text should occupy
+ * @param ellipsis The ellipsis string to append (default: "...")
+ * @returns The truncated text with ellipsis if needed
+ */
+export function truncateText(
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  maxWidth: number,
+  ellipsis: string = "...",
+): string {
+  const textWidth = ctx.measureText(text).width
+
+  if (textWidth <= maxWidth || maxWidth <= 0) {
+    return text
+  }
+
+  const ellipsisWidth = ctx.measureText(ellipsis).width
+  const availableWidth = maxWidth - ellipsisWidth
+
+  if (availableWidth <= 0) {
+    return ellipsis
+  }
+
+  // Binary search for the right length
+  let low = 0
+  let high = text.length
+  let bestFit = 0
+
+  while (low <= high) {
+    const mid = Math.floor((low + high) / 2)
+    const testText = text.substring(0, mid)
+    const testWidth = ctx.measureText(testText).width
+
+    if (testWidth <= availableWidth) {
+      bestFit = mid
+      low = mid + 1
+    } else {
+      high = mid - 1
+    }
+  }
+
+  return text.substring(0, bestFit) + ellipsis
+}