ComfyUI_frontend/src/LGraphBadge.ts

export enum BadgePosition {
  TopLeft = "top-left",
  TopRight = "top-right",
}

export interface LGraphBadgeOptions {
  text: string
  fgColor?: string
  bgColor?: string
  fontSize?: number
  padding?: number
  height?: number
  cornerRadius?: number
}

export class LGraphBadge {
  text: string
  fgColor: string
  bgColor: string
  fontSize: number
  padding: number
  height: number
  cornerRadius: number

  constructor({
    text,
    fgColor = "white",
    bgColor = "#0F1F0F",
    fontSize = 12,
    padding = 6,
    height = 20,
    cornerRadius = 5,
  }: LGraphBadgeOptions) {
    this.text = text
    this.fgColor = fgColor
    this.bgColor = bgColor
    this.fontSize = fontSize
    this.padding = padding
    this.height = height
    this.cornerRadius = cornerRadius
  }

  get visible() {
    return this.text.length > 0
  }

  getWidth(ctx: CanvasRenderingContext2D) {
    if (!this.visible) return 0

    const { font } = ctx
    ctx.font = `${this.fontSize}px sans-serif`
    const textWidth = ctx.measureText(this.text).width
    ctx.font = font
    return textWidth + this.padding * 2
  }

  draw(
    ctx: CanvasRenderingContext2D,
    x: number,
    y: number,
  ): void {
    if (!this.visible) return

    const { fillStyle } = ctx
    ctx.font = `${this.fontSize}px sans-serif`
    const badgeWidth = this.getWidth(ctx)
    const badgeX = 0

    // Draw badge background
    ctx.fillStyle = this.bgColor
    ctx.beginPath()
    if (ctx.roundRect) {
      ctx.roundRect(x + badgeX, y, badgeWidth, this.height, this.cornerRadius)
    } else {
      // Fallback for browsers that don't support roundRect
      ctx.rect(x + badgeX, y, badgeWidth, this.height)
    }
    ctx.fill()

    // Draw badge text
    ctx.fillStyle = this.fgColor
    ctx.fillText(
      this.text,
      x + badgeX + this.padding,
      y + this.height - this.padding,
    )

    ctx.fillStyle = fillStyle
  }
}