@fairyhunter13/opentui-core 0.1.88 → 0.1.90

package/src/renderables/LineNumberRenderable.ts

@@ -0,0 +1,675 @@
+import { Renderable, type RenderableOptions } from "../Renderable.js"
+import { OptimizedBuffer } from "../buffer.js"
+import type { RenderContext, LineInfoProvider } from "../types.js"
+import { RGBA, parseColor } from "../lib/RGBA.js"
+import { MeasureMode } from "yoga-layout"
+
+export interface LineSign {
+  before?: string
+  beforeColor?: string | RGBA
+  after?: string
+  afterColor?: string | RGBA
+}
+
+export interface LineColorConfig {
+  gutter?: string | RGBA
+  content?: string | RGBA
+}
+
+export interface LineNumberOptions extends RenderableOptions<LineNumberRenderable> {
+  target?: Renderable & LineInfoProvider
+  fg?: string | RGBA
+  bg?: string | RGBA
+  minWidth?: number
+  paddingRight?: number
+  lineColors?: Map<number, string | RGBA | LineColorConfig>
+  lineSigns?: Map<number, LineSign>
+  lineNumberOffset?: number
+  hideLineNumbers?: Set<number>
+  lineNumbers?: Map<number, number>
+  showLineNumbers?: boolean
+}
+
+class GutterRenderable extends Renderable {
+  private target: Renderable & LineInfoProvider
+  private _fg: RGBA
+  private _bg: RGBA
+  private _minWidth: number
+  private _paddingRight: number
+  private _lineColorsGutter: Map<number, RGBA>
+  private _lineColorsContent: Map<number, RGBA>
+  private _lineSigns: Map<number, LineSign>
+  private _lineNumberOffset: number
+  private _hideLineNumbers: Set<number>
+  private _lineNumbers: Map<number, number>
+  private _maxBeforeWidth: number = 0
+  private _maxAfterWidth: number = 0
+  private _lastKnownLineCount: number = 0
+  private _lastKnownScrollY: number = 0
+
+  constructor(
+    ctx: RenderContext,
+    target: Renderable & LineInfoProvider,
+    options: {
+      fg: RGBA
+      bg: RGBA
+      minWidth: number
+      paddingRight: number
+      lineColorsGutter: Map<number, RGBA>
+      lineColorsContent: Map<number, RGBA>
+      lineSigns: Map<number, LineSign>
+      lineNumberOffset: number
+      hideLineNumbers: Set<number>
+      lineNumbers?: Map<number, number>
+      id?: string
+      buffered?: boolean
+    },
+  ) {
+    super(ctx, {
+      id: options.id,
+      width: "auto",
+      height: "auto",
+      flexGrow: 0,
+      flexShrink: 0,
+      buffered: options.buffered,
+    })
+    this.target = target
+    this._fg = options.fg
+    this._bg = options.bg
+    this._minWidth = options.minWidth
+    this._paddingRight = options.paddingRight
+    this._lineColorsGutter = options.lineColorsGutter
+    this._lineColorsContent = options.lineColorsContent
+    this._lineSigns = options.lineSigns
+    this._lineNumberOffset = options.lineNumberOffset
+    this._hideLineNumbers = options.hideLineNumbers
+    this._lineNumbers = options.lineNumbers ?? new Map()
+    this._lastKnownLineCount = this.target.virtualLineCount
+    this._lastKnownScrollY = this.target.scrollY
+    this.calculateSignWidths()
+    this.setupMeasureFunc()
+
+    // Use lifecycle pass to detect line count changes BEFORE layout
+    this.onLifecyclePass = () => {
+      const currentLineCount = this.target.virtualLineCount
+      if (currentLineCount !== this._lastKnownLineCount) {
+        this._lastKnownLineCount = currentLineCount
+        this.yogaNode.markDirty()
+        this.requestRender()
+      }
+    }
+  }
+
+  private setupMeasureFunc(): void {
+    const measureFunc = (
+      width: number,
+      widthMode: MeasureMode,
+      height: number,
+      heightMode: MeasureMode,
+    ): { width: number; height: number } => {
+      // Calculate the gutter width based on the target's line count
+      const gutterWidth = this.calculateWidth()
+
+      // Calculate gutter height based on target's actual virtual line count
+      // The gutter should match the height of the content it's numbering
+      const gutterHeight = this.target.virtualLineCount
+
+      // Return calculated dimensions based on content, not parent constraints
+      return {
+        width: gutterWidth,
+        height: gutterHeight,
+      }
+    }
+
+    this.yogaNode.setMeasureFunc(measureFunc)
+  }
+
+  public remeasure(): void {
+    // Mark the yoga node as dirty to trigger re-measurement
+    this.yogaNode.markDirty()
+  }
+
+  public setLineNumberOffset(offset: number): void {
+    if (this._lineNumberOffset !== offset) {
+      this._lineNumberOffset = offset
+      this.yogaNode.markDirty()
+      this.requestRender()
+    }
+  }
+
+  public setHideLineNumbers(hideLineNumbers: Set<number>): void {
+    this._hideLineNumbers = hideLineNumbers
+    this.yogaNode.markDirty()
+    this.requestRender()
+  }
+
+  public setLineNumbers(lineNumbers: Map<number, number>): void {
+    this._lineNumbers = lineNumbers
+    this.yogaNode.markDirty()
+    this.requestRender()
+  }
+
+  private calculateSignWidths(): void {
+    this._maxBeforeWidth = 0
+    this._maxAfterWidth = 0
+
+    for (const sign of this._lineSigns.values()) {
+      if (sign.before) {
+        const width = Bun.stringWidth(sign.before)
+        this._maxBeforeWidth = Math.max(this._maxBeforeWidth, width)
+      }
+      if (sign.after) {
+        const width = Bun.stringWidth(sign.after)
+        this._maxAfterWidth = Math.max(this._maxAfterWidth, width)
+      }
+    }
+  }
+
+  private calculateWidth(): number {
+    const totalLines = this.target.virtualLineCount
+
+    // Find max line number, considering both calculated and custom line numbers
+    let maxLineNumber = totalLines + this._lineNumberOffset
+    if (this._lineNumbers.size > 0) {
+      for (const customLineNum of this._lineNumbers.values()) {
+        maxLineNumber = Math.max(maxLineNumber, customLineNum)
+      }
+    }
+
+    const digits = maxLineNumber > 0 ? Math.floor(Math.log10(maxLineNumber)) + 1 : 1
+    const baseWidth = Math.max(this._minWidth, digits + this._paddingRight + 1) // +1 for left padding
+    return baseWidth + this._maxBeforeWidth + this._maxAfterWidth
+  }
+
+  public setLineColors(lineColorsGutter: Map<number, RGBA>, lineColorsContent: Map<number, RGBA>): void {
+    this._lineColorsGutter = lineColorsGutter
+    this._lineColorsContent = lineColorsContent
+    this.requestRender()
+  }
+
+  public getLineColors(): { gutter: Map<number, RGBA>; content: Map<number, RGBA> } {
+    return {
+      gutter: this._lineColorsGutter,
+      content: this._lineColorsContent,
+    }
+  }
+
+  public setLineSigns(lineSigns: Map<number, LineSign>): void {
+    const oldMaxBefore = this._maxBeforeWidth
+    const oldMaxAfter = this._maxAfterWidth
+
+    this._lineSigns = lineSigns
+    this.calculateSignWidths()
+
+    // Mark dirty if sign widths changed - this will trigger remeasure
+    if (this._maxBeforeWidth !== oldMaxBefore || this._maxAfterWidth !== oldMaxAfter) {
+      this.yogaNode.markDirty()
+    }
+
+    // Always request render since signs themselves may have changed
+    this.requestRender()
+  }
+
+  public getLineSigns(): Map<number, LineSign> {
+    return this._lineSigns
+  }
+
+  protected renderSelf(buffer: OptimizedBuffer): void {
+    // For buffered rendering, only re-render when dirty OR when scroll position changed
+    const currentScrollY = this.target.scrollY
+    const scrollChanged = currentScrollY !== this._lastKnownScrollY
+
+    if (this.buffered && !this.isDirty && !scrollChanged) {
+      return
+    }
+
+    this._lastKnownScrollY = currentScrollY
+    this.refreshFrameBuffer(buffer)
+  }
+
+  private refreshFrameBuffer(buffer: OptimizedBuffer): void {
+    const startX = this.buffered ? 0 : this.x
+    const startY = this.buffered ? 0 : this.y
+
+    if (this.buffered) {
+      buffer.clear(this._bg)
+    } else if (this._bg.a > 0) {
+      // Fill background if not buffered and opaque (if buffered, clear handles it)
+      // Note: this.height might be determined by parent (flex stretch)
+      buffer.fillRect(startX, startY, this.width, this.height, this._bg)
+    }
+
+    const lineInfo = this.target.lineInfo
+    if (!lineInfo || !lineInfo.lineSources) return
+
+    const sources = lineInfo.lineSources
+    let lastSource = -1
+
+    // lineSources contains the logical line index for each visual line
+    // We start iterating from the scroll offset (first visible line)
+    const startLine = this.target.scrollY
+
+    // If scrolled past content (shouldn't happen normally but good to be safe)
+    if (startLine >= sources.length) return
+
+    // Get the logical line index of the line *before* the first visible line
+    // This helps determine if the first visible line is a wrapped continuation
+    lastSource = startLine > 0 ? sources[startLine - 1] : -1
+
+    for (let i = 0; i < this.height; i++) {
+      const visualLineIndex = startLine + i
+      if (visualLineIndex >= sources.length) break
+
+      const logicalLine = sources[visualLineIndex]
+      const lineBg = this._lineColorsGutter.get(logicalLine) ?? this._bg
+
+      // Fill background for this line if it has a custom color
+      if (lineBg !== this._bg) {
+        buffer.fillRect(startX, startY + i, this.width, 1, lineBg)
+      }
+
+      // Draw line number only for the first visual line of a logical line (wrapping)
+      if (logicalLine === lastSource) {
+        // Continuation line, maybe draw a dot or nothing
+      } else {
+        let currentX = startX
+
+        // Draw 'before' sign if present
+        const sign = this._lineSigns.get(logicalLine)
+        if (sign?.before) {
+          const beforeWidth = Bun.stringWidth(sign.before)
+          // Pad to max before width for alignment
+          const padding = this._maxBeforeWidth - beforeWidth
+          currentX += padding
+          const beforeColor = sign.beforeColor ? parseColor(sign.beforeColor) : this._fg
+          buffer.drawText(sign.before, currentX, startY + i, beforeColor, lineBg)
+          currentX += beforeWidth
+        } else if (this._maxBeforeWidth > 0) {
+          currentX += this._maxBeforeWidth
+        }
+
+        // Draw line number (right-aligned in its space with left padding of 1)
+        if (!this._hideLineNumbers.has(logicalLine)) {
+          // Use custom line number if provided, otherwise use calculated line number
+          const customLineNum = this._lineNumbers.get(logicalLine)
+          const lineNum = customLineNum !== undefined ? customLineNum : logicalLine + 1 + this._lineNumberOffset
+          const lineNumStr = lineNum.toString()
+          const lineNumWidth = lineNumStr.length
+          const availableSpace = this.width - this._maxBeforeWidth - this._maxAfterWidth - this._paddingRight
+          const lineNumX = startX + this._maxBeforeWidth + 1 + availableSpace - lineNumWidth - 1
+
+          if (lineNumX >= startX + this._maxBeforeWidth + 1) {
+            buffer.drawText(lineNumStr, lineNumX, startY + i, this._fg, lineBg)
+          }
+        }
+
+        // Draw 'after' sign if present
+        if (sign?.after) {
+          const afterX = startX + this.width - this._paddingRight - this._maxAfterWidth
+          const afterColor = sign.afterColor ? parseColor(sign.afterColor) : this._fg
+          buffer.drawText(sign.after, afterX, startY + i, afterColor, lineBg)
+        }
+      }
+
+      lastSource = logicalLine
+    }
+  }
+}
+
+// Helper function to darken an RGBA color by 20%
+function darkenColor(color: RGBA): RGBA {
+  return RGBA.fromValues(color.r * 0.8, color.g * 0.8, color.b * 0.8, color.a)
+}
+
+export class LineNumberRenderable extends Renderable {
+  private gutter: GutterRenderable | null = null
+  private target: (Renderable & LineInfoProvider) | null = null
+  private _lineColorsGutter: Map<number, RGBA>
+  private _lineColorsContent: Map<number, RGBA>
+  private _lineSigns: Map<number, LineSign>
+  private _fg: RGBA
+  private _bg: RGBA
+  private _minWidth: number
+  private _paddingRight: number
+  private _lineNumberOffset: number
+  private _hideLineNumbers: Set<number>
+  private _lineNumbers: Map<number, number>
+  private _isDestroying: boolean = false
+  private handleLineInfoChange = (): void => {
+    // When line info changes in the target, remeasure the gutter
+    this.gutter?.remeasure()
+    this.requestRender()
+  }
+
+  private parseLineColor(line: number, color: string | RGBA | LineColorConfig): void {
+    if (typeof color === "object" && "gutter" in color) {
+      // LineColorConfig format
+      const config = color as LineColorConfig
+      if (config.gutter) {
+        this._lineColorsGutter.set(line, parseColor(config.gutter))
+      }
+      if (config.content) {
+        this._lineColorsContent.set(line, parseColor(config.content))
+      } else if (config.gutter) {
+        // If only gutter is specified, use a darker version for content
+        this._lineColorsContent.set(line, darkenColor(parseColor(config.gutter)))
+      }
+    } else {
+      // Simple format - same color for both, but content is darker
+      const parsedColor = parseColor(color as string | RGBA)
+      this._lineColorsGutter.set(line, parsedColor)
+      this._lineColorsContent.set(line, darkenColor(parsedColor))
+    }
+  }
+
+  constructor(ctx: RenderContext, options: LineNumberOptions) {
+    super(ctx, {
+      ...options,
+      flexDirection: "row",
+      // CRITICAL:
+      // By forcing height=auto, we ensure the parent box properly accounts for our full height.
+      height: "auto",
+    })
+
+    this._fg = parseColor(options.fg ?? "#888888")
+    this._bg = parseColor(options.bg ?? "transparent")
+    this._minWidth = options.minWidth ?? 3
+    this._paddingRight = options.paddingRight ?? 1
+    this._lineNumberOffset = options.lineNumberOffset ?? 0
+    this._hideLineNumbers = options.hideLineNumbers ?? new Set()
+    this._lineNumbers = options.lineNumbers ?? new Map()
+
+    this._lineColorsGutter = new Map<number, RGBA>()
+    this._lineColorsContent = new Map<number, RGBA>()
+    if (options.lineColors) {
+      for (const [line, color] of options.lineColors) {
+        this.parseLineColor(line, color)
+      }
+    }
+
+    this._lineSigns = new Map<number, LineSign>()
+    if (options.lineSigns) {
+      for (const [line, sign] of options.lineSigns) {
+        this._lineSigns.set(line, sign)
+      }
+    }
+
+    // If target is provided in constructor, set it up immediately
+    if (options.target) {
+      this.setTarget(options.target)
+    }
+  }
+
+  private setTarget(target: Renderable & LineInfoProvider): void {
+    if (this.target === target) return
+
+    if (this.target) {
+      // Remove event listener from old target
+      this.target.off("line-info-change", this.handleLineInfoChange)
+      super.remove(this.target.id)
+    }
+
+    if (this.gutter) {
+      super.remove(this.gutter.id)
+      this.gutter = null
+    }
+
+    this.target = target
+
+    // Listen for line info changes from target
+    this.target.on("line-info-change", this.handleLineInfoChange)
+
+    this.gutter = new GutterRenderable(this.ctx, this.target, {
+      fg: this._fg,
+      bg: this._bg,
+      minWidth: this._minWidth,
+      paddingRight: this._paddingRight,
+      lineColorsGutter: this._lineColorsGutter,
+      lineColorsContent: this._lineColorsContent,
+      lineSigns: this._lineSigns,
+      lineNumberOffset: this._lineNumberOffset,
+      hideLineNumbers: this._hideLineNumbers,
+      lineNumbers: this._lineNumbers,
+      id: this.id ? `${this.id}-gutter` : undefined,
+      buffered: true,
+    })
+
+    super.add(this.gutter)
+    super.add(this.target)
+  }
+
+  // Override add to intercept and set as target if it's a LineInfoProvider
+  public override add(child: Renderable): number {
+    // If this is a LineInfoProvider and we don't have a target yet, set it
+    if (
+      !this.target &&
+      "lineInfo" in child &&
+      "lineCount" in child &&
+      "virtualLineCount" in child &&
+      "scrollY" in child
+    ) {
+      this.setTarget(child as Renderable & LineInfoProvider)
+      return this.getChildrenCount() - 1
+    }
+    // Otherwise ignore - SolidJS may try to add layout slots or other helpers
+    return -1
+  }
+
+  // Override remove to prevent removing gutter/target directly
+  public override remove(id: string): void {
+    if (this._isDestroying) {
+      super.remove(id)
+      return
+    }
+
+    if (this.gutter && id === this.gutter.id) {
+      throw new Error("LineNumberRenderable: Cannot remove gutter directly.")
+    }
+    if (this.target && id === this.target.id) {
+      throw new Error("LineNumberRenderable: Cannot remove target directly. Use clearTarget() instead.")
+    }
+    super.remove(id)
+  }
+
+  // Override destroyRecursively to properly clean up internal components
+  public override destroyRecursively(): void {
+    this._isDestroying = true
+
+    if (this.target) {
+      this.target.off("line-info-change", this.handleLineInfoChange)
+    }
+
+    super.destroyRecursively()
+
+    this.gutter = null
+    this.target = null
+  }
+
+  public clearTarget(): void {
+    if (this.target) {
+      this.target.off("line-info-change", this.handleLineInfoChange)
+      super.remove(this.target.id)
+      this.target = null
+    }
+    if (this.gutter) {
+      super.remove(this.gutter.id)
+      this.gutter = null
+    }
+  }
+
+  protected renderSelf(buffer: OptimizedBuffer): void {
+    // Draw full-width line backgrounds before children render
+    if (!this.target || !this.gutter) return
+
+    const lineInfo = this.target.lineInfo
+    if (!lineInfo || !lineInfo.lineSources) return
+
+    const sources = lineInfo.lineSources
+    const startLine = this.target.scrollY
+
+    if (startLine >= sources.length) return
+
+    // Calculate the area to fill: from after the gutter (if visible) to the end of our width
+    const gutterWidth = this.gutter.visible ? this.gutter.width : 0
+    const contentWidth = this.width - gutterWidth
+
+    // Draw full-width background colors for lines with custom colors
+    for (let i = 0; i < this.height; i++) {
+      const visualLineIndex = startLine + i
+      if (visualLineIndex >= sources.length) break
+
+      const logicalLine = sources[visualLineIndex]
+      const lineBg = this._lineColorsContent.get(logicalLine)
+
+      if (lineBg) {
+        // Fill from after gutter to the end of the LineNumberRenderable
+        buffer.fillRect(this.x + gutterWidth, this.y + i, contentWidth, 1, lineBg)
+      }
+    }
+  }
+
+  public set showLineNumbers(value: boolean) {
+    if (this.gutter) {
+      this.gutter.visible = value
+    }
+  }
+
+  public get showLineNumbers(): boolean {
+    return this.gutter?.visible ?? false
+  }
+
+  public setLineColor(line: number, color: string | RGBA | LineColorConfig): void {
+    this.parseLineColor(line, color)
+    // Update gutter if it exists
+    if (this.gutter) {
+      this.gutter.setLineColors(this._lineColorsGutter, this._lineColorsContent)
+    }
+  }
+
+  public clearLineColor(line: number): void {
+    this._lineColorsGutter.delete(line)
+    this._lineColorsContent.delete(line)
+    if (this.gutter) {
+      this.gutter.setLineColors(this._lineColorsGutter, this._lineColorsContent)
+    }
+  }
+
+  public clearAllLineColors(): void {
+    this._lineColorsGutter.clear()
+    this._lineColorsContent.clear()
+    if (this.gutter) {
+      this.gutter.setLineColors(this._lineColorsGutter, this._lineColorsContent)
+    }
+  }
+
+  public setLineColors(lineColors: Map<number, string | RGBA | LineColorConfig>): void {
+    this._lineColorsGutter.clear()
+    this._lineColorsContent.clear()
+    for (const [line, color] of lineColors) {
+      this.parseLineColor(line, color)
+    }
+    // Update gutter once after all colors are set
+    if (this.gutter) {
+      this.gutter.setLineColors(this._lineColorsGutter, this._lineColorsContent)
+    }
+  }
+
+  public getLineColors(): { gutter: Map<number, RGBA>; content: Map<number, RGBA> } {
+    return {
+      gutter: this._lineColorsGutter,
+      content: this._lineColorsContent,
+    }
+  }
+
+  public setLineSign(line: number, sign: LineSign): void {
+    this._lineSigns.set(line, sign)
+    if (this.gutter) {
+      this.gutter.setLineSigns(this._lineSigns)
+    }
+  }
+
+  public clearLineSign(line: number): void {
+    this._lineSigns.delete(line)
+    if (this.gutter) {
+      this.gutter.setLineSigns(this._lineSigns)
+    }
+  }
+
+  public clearAllLineSigns(): void {
+    this._lineSigns.clear()
+    if (this.gutter) {
+      this.gutter.setLineSigns(this._lineSigns)
+    }
+  }
+
+  public setLineSigns(lineSigns: Map<number, LineSign>): void {
+    this._lineSigns.clear()
+    for (const [line, sign] of lineSigns) {
+      this._lineSigns.set(line, sign)
+    }
+    if (this.gutter) {
+      this.gutter.setLineSigns(this._lineSigns)
+    }
+  }
+
+  public getLineSigns(): Map<number, LineSign> {
+    return this._lineSigns
+  }
+
+  public set lineNumberOffset(value: number) {
+    if (this._lineNumberOffset !== value) {
+      this._lineNumberOffset = value
+      if (this.gutter) {
+        // Update the gutter's offset using its setter
+        this.gutter.setLineNumberOffset(value)
+      }
+    }
+  }
+
+  public get lineNumberOffset(): number {
+    return this._lineNumberOffset
+  }
+
+  public setHideLineNumbers(hideLineNumbers: Set<number>): void {
+    this._hideLineNumbers = hideLineNumbers
+    if (this.gutter) {
+      // Update the gutter's hideLineNumbers using its setter
+      this.gutter.setHideLineNumbers(hideLineNumbers)
+    }
+  }
+
+  public getHideLineNumbers(): Set<number> {
+    return this._hideLineNumbers
+  }
+
+  public setLineNumbers(lineNumbers: Map<number, number>): void {
+    this._lineNumbers = lineNumbers
+    if (this.gutter) {
+      // Update the gutter's lineNumbers using its setter
+      this.gutter.setLineNumbers(lineNumbers)
+    }
+  }
+
+  public getLineNumbers(): Map<number, number> {
+    return this._lineNumbers
+  }
+
+  public highlightLines(startLine: number, endLine: number, color: string | RGBA | LineColorConfig): void {
+    for (let i = startLine; i <= endLine; i++) {
+      this.parseLineColor(i, color)
+    }
+    if (this.gutter) {
+      this.gutter.setLineColors(this._lineColorsGutter, this._lineColorsContent)
+    }
+  }
+
+  public clearHighlightLines(startLine: number, endLine: number): void {
+    for (let i = startLine; i <= endLine; i++) {
+      this._lineColorsGutter.delete(i)
+      this._lineColorsContent.delete(i)
+    }
+    if (this.gutter) {
+      this.gutter.setLineColors(this._lineColorsGutter, this._lineColorsContent)
+    }
+  }
+}