[Refactor] Add LGraphCanvas.drawTitleText (#462)

src/LGraphCanvas.ts

@@ -286,6 +286,9 @@ export class LGraphCanvas {
   }
   // #endregion Legacy accessors
 
+  /**
+   * @deprecated Use {@link LGraphNode.titleFontStyle} instead.
+   */
   get title_text_font(): string {
     return `${LiteGraph.NODE_TEXT_SIZE}px Arial`
   }
@@ -5190,45 +5193,11 @@ export class LGraphCanvas {
       ctx.globalAlpha = old_alpha
 
       // title text
-      if (node.onDrawTitleText) {
-        node.onDrawTitleText(
-          ctx,
-          title_height,
-          size,
-          this.ds.scale,
-          this.title_text_font,
-          selected,
-        )
-      }
-      if (!low_quality) {
-        ctx.font = this.title_text_font
-        const rawTitle = node.getTitle() ?? `❌ ${node.type}`
-        const title = String(rawTitle) + (node.pinned ? "📌" : "")
-        if (title) {
-          if (selected) {
-            ctx.fillStyle = LiteGraph.NODE_SELECTED_TITLE_COLOR
-          } else {
-            ctx.fillStyle = node.constructor.title_text_color || this.node_title_color
-          }
-          if (collapsed) {
-            ctx.textAlign = "left"
-            // const measure = ctx.measureText(title)
-            ctx.fillText(
-              title.substr(0, 20), // avoid urls too long
-              title_height, // + measure.width * 0.5,
-              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,
-            )
-          }
-        }
-      }
+      node.drawTitleText(ctx, {
+        scale: this.ds.scale,
+        default_title_color: this.node_title_color,
+        low_quality,
+      })
 
       // custom title render
       node.onDrawTitle?.(ctx)

src/LGraphNode.ts

@@ -149,7 +149,15 @@ export class LGraphNode implements Positionable, IPinnable {
   /** Default setting for {@link LGraphNode.connectInputToOutput}. @see {@link INodeFlags.keepAllLinksOnBypass} */
   static keepAllLinksOnBypass: boolean = false
 
+  /** The title text of the node. */
   title: string
+  /**
+   * The font style used to render the node's title text.
+   */
+  get titleFontStyle(): string {
+    return `${LiteGraph.NODE_TEXT_SIZE}px Arial`
+  }
+
   graph: LGraph | null = null
   id: NodeId
   type: string | null = null
@@ -2941,6 +2949,70 @@ export class LGraphNode implements Positionable, IPinnable {
     }
   }
 
+  /**
+   * Renders the node's title text.
+   */
+  drawTitleText(ctx: CanvasRenderingContext2D, options: {
+    scale: number
+    default_title_color?: string
+    low_quality?: boolean
+    title_height?: number
+  }): void {
+    const {
+      scale,
+      default_title_color,
+      low_quality = false,
+      title_height = LiteGraph.NODE_TITLE_HEIGHT,
+    } = options
+
+    const size = this.renderingSize
+    const selected = this.selected
+
+    if (this.onDrawTitleText) {
+      this.onDrawTitleText(
+        ctx,
+        title_height,
+        size,
+        scale,
+        this.titleFontStyle,
+        selected,
+      )
+      return
+    }
+
+    // Don't render title text if low quality
+    if (low_quality) {
+      return
+    }
+
+    ctx.font = this.titleFontStyle
+    const rawTitle = this.getTitle() ?? `❌ ${this.type}`
+    const title = String(rawTitle) + (this.pinned ? "📌" : "")
+    if (title) {
+      if (selected) {
+        ctx.fillStyle = LiteGraph.NODE_SELECTED_TITLE_COLOR
+      } else {
+        ctx.fillStyle = this.constructor.title_text_color || default_title_color
+      }
+      if (this.collapsed) {
+        ctx.textAlign = "left"
+        ctx.fillText(
+          title.substr(0, 20), // avoid urls too long
+          title_height, // + measure.width * 0.5,
+          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,
+        )
+      }
+    }
+  }
+
   /**
    * Attempts to gracefully bypass this node in all of its connections by reconnecting all links.
    *