@xincli/opentui-core 0.4.6

package/src/renderables/Text.ts

@@ -0,0 +1,147 @@
+import { BaseRenderable } from "../Renderable.js"
+import { stringToStyledText, StyledText } from "../lib/styled-text.js"
+import { type TextChunk } from "../text-buffer.js"
+import { RGBA } from "../lib/RGBA.js"
+import { type RenderContext } from "../types.js"
+import { RootTextNodeRenderable, TextNodeRenderable } from "./TextNode.js"
+import { TextBufferRenderable, type TextBufferOptions } from "./TextBufferRenderable.js"
+
+export interface TextOptions extends TextBufferOptions {
+  content?: StyledText | string
+}
+
+export class TextRenderable extends TextBufferRenderable {
+  private _text: StyledText
+
+  // TODO: The TextRenderable is currently juggling both a StyledText and a RootTextNodeRenderable.
+  // We should refactor this to only use the RootTextNodeRenderable here and have a separate StyledTextRenderable with `content`.
+  private _hasManualStyledText: boolean = false
+
+  protected rootTextNode: RootTextNodeRenderable
+
+  protected _contentDefaultOptions = {
+    content: "",
+  } satisfies Partial<TextOptions>
+
+  constructor(ctx: RenderContext, options: TextOptions) {
+    super(ctx, options)
+
+    const content = options.content ?? this._contentDefaultOptions.content
+    const styledText = typeof content === "string" ? stringToStyledText(content) : content
+    this._text = styledText
+    this._hasManualStyledText = options.content !== undefined && content !== ""
+
+    this.rootTextNode = new RootTextNodeRenderable(
+      ctx,
+      {
+        id: `${this.id}-root`,
+        fg: this._defaultFg,
+        bg: this._defaultBg,
+        attributes: this._defaultAttributes,
+      },
+      this,
+    )
+
+    this.updateTextBuffer(styledText)
+  }
+
+  private updateTextBuffer(styledText: StyledText): void {
+    this.textBuffer.setStyledText(styledText)
+    this.clearChunks(styledText)
+  }
+
+  private clearChunks(styledText: StyledText): void {
+    // Clearing chunks that were already writtend to the text buffer,
+    // to not retain references to the text data in js
+    // TODO: This is causing issues in the solid renderer
+    // styledText.chunks.forEach((chunk) => {
+    //   // @ts-ignore
+    //   chunk.text = undefined
+    // })
+  }
+
+  get content(): StyledText {
+    return this._text
+  }
+
+  get chunks(): TextChunk[] {
+    return this._text.chunks
+  }
+
+  get textNode(): RootTextNodeRenderable {
+    return this.rootTextNode
+  }
+
+  set content(value: StyledText | string) {
+    this._hasManualStyledText = true
+    const styledText = typeof value === "string" ? stringToStyledText(value) : value
+    if (this._text !== styledText) {
+      this._text = styledText
+      this.updateTextBuffer(styledText)
+      this.updateTextInfo()
+    }
+  }
+
+  private updateTextFromNodes(): void {
+    if (this.rootTextNode.isDirty && !this._hasManualStyledText) {
+      const chunks = this.rootTextNode.gatherWithInheritedStyle({
+        fg: this._defaultFg,
+        bg: this._defaultBg,
+        attributes: this._defaultAttributes,
+        link: undefined,
+      })
+      this.textBuffer.setStyledText(new StyledText(chunks))
+      this.refreshLocalSelection()
+      this.yogaNode.markDirty()
+    }
+  }
+
+  public add(obj: TextNodeRenderable | StyledText | string, index?: number): number {
+    return this.rootTextNode.add(obj, index)
+  }
+
+  public remove(child: BaseRenderable): void {
+    this.rootTextNode.remove(child)
+  }
+
+  public insertBefore(obj: BaseRenderable | any, anchor?: TextNodeRenderable): number {
+    this.rootTextNode.insertBefore(obj, anchor)
+    return this.rootTextNode.children.indexOf(obj)
+  }
+
+  public getTextChildren(): BaseRenderable[] {
+    return this.rootTextNode.getChildren()
+  }
+
+  public clear(): void {
+    this.rootTextNode.clear()
+
+    const emptyStyledText = stringToStyledText("")
+    this._text = emptyStyledText
+    this.updateTextBuffer(emptyStyledText)
+    this.updateTextInfo()
+
+    this.requestRender()
+  }
+
+  public onLifecyclePass = () => {
+    this.updateTextFromNodes()
+  }
+
+  protected onFgChanged(newColor: RGBA): void {
+    this.rootTextNode.fg = newColor
+  }
+
+  protected onBgChanged(newColor: RGBA): void {
+    this.rootTextNode.bg = newColor
+  }
+
+  protected onAttributesChanged(newAttributes: number): void {
+    this.rootTextNode.attributes = newAttributes
+  }
+
+  destroy(): void {
+    this.rootTextNode.children.length = 0
+    super.destroy()
+  }
+}

package/src/renderables/TextBufferRenderable.ts

@@ -0,0 +1,504 @@
+import { Renderable, type RenderableOptions } from "../Renderable.js"
+import { convertGlobalToLocalSelection, Selection, type LocalSelectionBounds } from "../lib/selection.js"
+import { TextBuffer, type TextChunk } from "../text-buffer.js"
+import { TextBufferView } from "../text-buffer-view.js"
+import { RGBA, parseColor } from "../lib/RGBA.js"
+import { type RenderContext, type LineInfoProvider } from "../types.js"
+import type { OptimizedBuffer } from "../buffer.js"
+import { NativeMeasureTargetKind, resolveRenderLib, type LineInfo, type NativeRenderableHandle } from "../zig.js"
+import { SyntaxStyle } from "../syntax-style.js"
+
+export interface TextBufferOptions extends RenderableOptions<TextBufferRenderable> {
+  fg?: string | RGBA
+  bg?: string | RGBA
+  selectionBg?: string | RGBA
+  selectionFg?: string | RGBA
+  selectable?: boolean
+  attributes?: number
+  wrapMode?: "none" | "char" | "word"
+  tabIndicator?: string | number
+  tabIndicatorColor?: string | RGBA
+  truncate?: boolean
+}
+
+export abstract class TextBufferRenderable extends Renderable implements LineInfoProvider {
+  public selectable: boolean = true
+
+  protected _defaultFg: RGBA
+  protected _defaultBg: RGBA
+  protected _defaultAttributes: number
+  protected _selectionBg: RGBA | undefined
+  protected _selectionFg: RGBA | undefined
+  protected _wrapMode: "none" | "char" | "word" = "word"
+  protected lastLocalSelection: LocalSelectionBounds | null = null
+  protected _tabIndicator?: string | number
+  protected _tabIndicatorColor?: RGBA
+  protected _scrollX: number = 0
+  protected _scrollY: number = 0
+  protected _truncate: boolean = false
+  protected _firstLineOffset: number = 0
+
+  protected textBuffer: TextBuffer
+  protected textBufferView: TextBufferView
+  protected _textBufferSyntaxStyle: SyntaxStyle
+  private nativeRenderable: NativeRenderableHandle | null = null
+
+  protected _defaultOptions = {
+    fg: RGBA.fromValues(1, 1, 1, 1),
+    bg: RGBA.fromValues(0, 0, 0, 0),
+    selectionBg: undefined,
+    selectionFg: undefined,
+    selectable: true,
+    attributes: 0,
+    wrapMode: "word" as "none" | "char" | "word",
+    tabIndicator: undefined,
+    tabIndicatorColor: undefined,
+    truncate: false,
+  } satisfies Partial<TextBufferOptions>
+
+  constructor(ctx: RenderContext, options: TextBufferOptions) {
+    super(ctx, options)
+
+    this._defaultFg = parseColor(options.fg ?? this._defaultOptions.fg)
+    this._defaultBg = parseColor(options.bg ?? this._defaultOptions.bg)
+    this._defaultAttributes = options.attributes ?? this._defaultOptions.attributes
+    this._selectionBg = options.selectionBg ? parseColor(options.selectionBg) : this._defaultOptions.selectionBg
+    this._selectionFg = options.selectionFg ? parseColor(options.selectionFg) : this._defaultOptions.selectionFg
+    this.selectable = options.selectable ?? this._defaultOptions.selectable
+    this._wrapMode = options.wrapMode ?? this._defaultOptions.wrapMode
+    this._tabIndicator = options.tabIndicator ?? this._defaultOptions.tabIndicator
+    this._tabIndicatorColor = options.tabIndicatorColor
+      ? parseColor(options.tabIndicatorColor)
+      : this._defaultOptions.tabIndicatorColor
+    this._truncate = options.truncate ?? this._defaultOptions.truncate
+
+    this.textBuffer = TextBuffer.create(this._ctx.widthMethod)
+    this.textBufferView = TextBufferView.create(this.textBuffer)
+    this._firstLineOffset = ctx.claimFirstLineOffset?.(this) ?? 0
+
+    this._textBufferSyntaxStyle = SyntaxStyle.create()
+    this.textBuffer.setSyntaxStyle(this._textBufferSyntaxStyle)
+
+    this.textBufferView.setWrapMode(this._wrapMode)
+    this.textBufferView.setFirstLineOffset(this._firstLineOffset)
+    this.setupNativeRenderable()
+
+    this.textBuffer.setDefaultFg(this._defaultFg)
+    this.textBuffer.setDefaultBg(this._defaultBg)
+    this.textBuffer.setDefaultAttributes(this._defaultAttributes)
+
+    if (this._tabIndicator !== undefined) {
+      this.textBufferView.setTabIndicator(this._tabIndicator)
+    }
+    if (this._tabIndicatorColor !== undefined) {
+      this.textBufferView.setTabIndicatorColor(this._tabIndicatorColor)
+    }
+
+    if (this._wrapMode !== "none" && this.width > 0) {
+      this.textBufferView.setWrapWidth(this.width)
+    }
+
+    if (this.width > 0 && this.height > 0) {
+      this.textBufferView.setViewport(this._scrollX, this._scrollY, this.width, this.height)
+    }
+
+    this.textBufferView.setTruncate(this._truncate)
+
+    this.updateTextInfo()
+  }
+
+  protected onMouseEvent(event: any): void {
+    if (event.type === "scroll") {
+      this.handleScroll(event)
+    }
+  }
+
+  protected handleScroll(event: any): void {
+    if (!event.scroll) return
+
+    const { direction, delta } = event.scroll
+
+    if (direction === "up") {
+      this.scrollY -= delta
+    } else if (direction === "down") {
+      this.scrollY += delta
+    }
+
+    if (this._wrapMode === "none") {
+      if (direction === "left") {
+        this.scrollX -= delta
+      } else if (direction === "right") {
+        this.scrollX += delta
+      }
+    }
+  }
+
+  public get lineInfo(): LineInfo {
+    return this.textBufferView.logicalLineInfo
+  }
+
+  public get lineCount(): number {
+    return this.textBuffer.getLineCount()
+  }
+
+  public get virtualLineCount(): number {
+    return this.textBufferView.getVirtualLineCount()
+  }
+
+  public get scrollY(): number {
+    return this._scrollY
+  }
+
+  public set scrollY(value: number) {
+    const maxScrollY = Math.max(0, this.scrollHeight - this.height)
+    const clamped = Math.max(0, Math.min(value, maxScrollY))
+    if (this._scrollY !== clamped) {
+      this._scrollY = clamped
+      this.updateViewportOffset()
+      this.requestRender()
+    }
+  }
+
+  public get scrollX(): number {
+    return this._scrollX
+  }
+
+  public set scrollX(value: number) {
+    const maxScrollX = Math.max(0, this.scrollWidth - this.width)
+    const clamped = Math.max(0, Math.min(value, maxScrollX))
+    if (this._scrollX !== clamped) {
+      this._scrollX = clamped
+      this.updateViewportOffset()
+      this.requestRender()
+    }
+  }
+
+  public get scrollWidth(): number {
+    return this.lineInfo.lineWidthColsMax
+  }
+
+  public get scrollHeight(): number {
+    return this.lineInfo.lineStartCols.length
+  }
+
+  public get maxScrollY(): number {
+    return Math.max(0, this.scrollHeight - this.height)
+  }
+
+  public get maxScrollX(): number {
+    return Math.max(0, this.scrollWidth - this.width)
+  }
+
+  protected updateViewportOffset(): void {
+    // Update the viewport with the new scroll position
+    if (this.width > 0 && this.height > 0) {
+      this.textBufferView.setViewport(this._scrollX, this._scrollY, this.width, this.height)
+    }
+  }
+
+  get plainText(): string {
+    return this.textBuffer.getPlainText()
+  }
+
+  get textLength(): number {
+    return this.textBuffer.length
+  }
+
+  get fg(): RGBA {
+    return this._defaultFg
+  }
+
+  set fg(value: RGBA | string | undefined) {
+    const newColor = parseColor(value ?? this._defaultOptions.fg)
+    if (this._defaultFg !== newColor) {
+      this._defaultFg = newColor
+      this.textBuffer.setDefaultFg(this._defaultFg)
+      this.onFgChanged(newColor)
+      this.requestRender()
+    }
+  }
+
+  get selectionBg(): RGBA | undefined {
+    return this._selectionBg
+  }
+
+  set selectionBg(value: RGBA | string | undefined) {
+    const newColor = value ? parseColor(value) : this._defaultOptions.selectionBg
+    if (this._selectionBg !== newColor) {
+      this._selectionBg = newColor
+      if (this.lastLocalSelection) {
+        this.updateLocalSelection(this.lastLocalSelection)
+      }
+      this.requestRender()
+    }
+  }
+
+  get selectionFg(): RGBA | undefined {
+    return this._selectionFg
+  }
+
+  set selectionFg(value: RGBA | string | undefined) {
+    const newColor = value ? parseColor(value) : this._defaultOptions.selectionFg
+    if (this._selectionFg !== newColor) {
+      this._selectionFg = newColor
+      if (this.lastLocalSelection) {
+        this.updateLocalSelection(this.lastLocalSelection)
+      }
+      this.requestRender()
+    }
+  }
+
+  get bg(): RGBA {
+    return this._defaultBg
+  }
+
+  set bg(value: RGBA | string | undefined) {
+    const newColor = parseColor(value ?? this._defaultOptions.bg)
+    if (this._defaultBg !== newColor) {
+      this._defaultBg = newColor
+      this.textBuffer.setDefaultBg(this._defaultBg)
+      this.onBgChanged(newColor)
+      this.requestRender()
+    }
+  }
+
+  get attributes(): number {
+    return this._defaultAttributes
+  }
+
+  set attributes(value: number) {
+    if (this._defaultAttributes !== value) {
+      this._defaultAttributes = value
+      this.textBuffer.setDefaultAttributes(this._defaultAttributes)
+      this.onAttributesChanged(value)
+      this.requestRender()
+    }
+  }
+
+  get wrapMode(): "none" | "char" | "word" {
+    return this._wrapMode
+  }
+
+  set wrapMode(value: "none" | "char" | "word") {
+    if (this._wrapMode !== value) {
+      this._wrapMode = value
+      this.textBufferView.setWrapMode(this._wrapMode)
+      if (value !== "none" && this.width > 0) {
+        this.textBufferView.setWrapWidth(this.width)
+      }
+      // Changing wrap mode can change dimensions, so mark yoga node dirty to trigger re-measurement
+      this.yogaNode.markDirty()
+      this.requestRender()
+    }
+  }
+
+  get tabIndicator(): string | number | undefined {
+    return this._tabIndicator
+  }
+
+  set tabIndicator(value: string | number | undefined) {
+    if (this._tabIndicator !== value) {
+      this._tabIndicator = value
+      if (value !== undefined) {
+        this.textBufferView.setTabIndicator(value)
+      }
+      this.requestRender()
+    }
+  }
+
+  get tabIndicatorColor(): RGBA | undefined {
+    return this._tabIndicatorColor
+  }
+
+  set tabIndicatorColor(value: RGBA | string | undefined) {
+    const newColor = value ? parseColor(value) : undefined
+    if (this._tabIndicatorColor !== newColor) {
+      this._tabIndicatorColor = newColor
+      if (newColor !== undefined) {
+        this.textBufferView.setTabIndicatorColor(newColor)
+      }
+      this.requestRender()
+    }
+  }
+
+  get truncate(): boolean {
+    return this._truncate
+  }
+
+  set truncate(value: boolean) {
+    if (this._truncate !== value) {
+      this._truncate = value
+      this.textBufferView.setTruncate(value)
+      this.requestRender()
+    }
+  }
+
+  protected onResize(width: number, height: number): void {
+    this.textBufferView.setViewport(this._scrollX, this._scrollY, width, height)
+    this.yogaNode.markDirty()
+    this.requestRender()
+    this.emit("line-info-change")
+  }
+
+  protected refreshLocalSelection(): boolean {
+    if (this.lastLocalSelection) {
+      return this.updateLocalSelection(this.lastLocalSelection)
+    }
+    return false
+  }
+
+  private updateLocalSelection(localSelection: LocalSelectionBounds | null): boolean {
+    if (!localSelection?.isActive) {
+      this.textBufferView.resetLocalSelection()
+      return true
+    }
+
+    return this.textBufferView.setLocalSelection(
+      localSelection.anchorX,
+      localSelection.anchorY,
+      localSelection.focusX,
+      localSelection.focusY,
+      this._selectionBg,
+      this._selectionFg,
+    )
+  }
+
+  protected updateTextInfo(): void {
+    if (this.lastLocalSelection) {
+      this.updateLocalSelection(this.lastLocalSelection)
+    }
+
+    this.yogaNode.markDirty()
+    this.requestRender()
+    this.emit("line-info-change")
+  }
+
+  private setupNativeRenderable(): void {
+    const lib = resolveRenderLib()
+    // Transitional native backing: JS still owns the render tree and Yoga nodes,
+    // while native owns only hot measurement state. Attach the existing JS-created
+    // Yoga node for now. The intended direction is for every Renderable to become
+    // native-backed and for Yoga node ownership to move native-side with it.
+    const nativeRenderable = lib.createNativeRenderable()
+    if (!lib.nativeRenderableAttachYogaNode(nativeRenderable, this.yogaNode.ptr)) {
+      lib.destroyNativeRenderable(nativeRenderable)
+      throw new Error("Failed to attach native renderable Yoga node")
+    }
+    if (
+      !lib.nativeRenderableSetMeasureTarget(
+        nativeRenderable,
+        NativeMeasureTargetKind.TextBufferView,
+        this.textBufferView.ptr,
+      )
+    ) {
+      lib.destroyNativeRenderable(nativeRenderable)
+      throw new Error("Failed to attach text buffer native measure target")
+    }
+    this.nativeRenderable = nativeRenderable
+  }
+
+  shouldStartSelection(x: number, y: number): boolean {
+    if (!this.selectable) return false
+
+    const localX = x - this.x
+    const localY = y - this.y
+
+    return localX >= 0 && localX < this.width && localY >= 0 && localY < this.height
+  }
+
+  onSelectionChanged(selection: Selection | null): boolean {
+    const localSelection = convertGlobalToLocalSelection(selection, this.x, this.y)
+    this.lastLocalSelection = localSelection
+
+    let changed: boolean
+    if (!localSelection?.isActive) {
+      this.textBufferView.resetLocalSelection()
+      changed = true
+    } else if (selection?.isStart) {
+      changed = this.textBufferView.setLocalSelection(
+        localSelection.anchorX,
+        localSelection.anchorY,
+        localSelection.focusX,
+        localSelection.focusY,
+        this._selectionBg,
+        this._selectionFg,
+      )
+    } else {
+      changed = this.textBufferView.updateLocalSelection(
+        localSelection.anchorX,
+        localSelection.anchorY,
+        localSelection.focusX,
+        localSelection.focusY,
+        this._selectionBg,
+        this._selectionFg,
+      )
+    }
+
+    if (changed) {
+      this.requestRender()
+    }
+
+    return this.hasSelection()
+  }
+
+  getSelectedText(): string {
+    return this.textBufferView.getSelectedText()
+  }
+
+  hasSelection(): boolean {
+    return this.textBufferView.hasSelection()
+  }
+
+  getSelection(): { start: number; end: number } | null {
+    return this.textBufferView.getSelection()
+  }
+
+  render(buffer: OptimizedBuffer, deltaTime: number): void {
+    if (!this.visible) return
+    // Text views do enough per-frame work that avoiding recursive x/y lookups is
+    // measurable; use the layout cache for hit-grid and draw entry points.
+    const screenX = this._screenX
+    const screenY = this._screenY
+
+    this.markClean()
+    this._ctx.addToHitGrid(screenX, screenY, this.width, this.height, this.num)
+
+    this.renderSelf(buffer)
+
+    if (this.buffered && this.frameBuffer) {
+      buffer.drawFrameBuffer(screenX, screenY, this.frameBuffer)
+    }
+  }
+
+  protected renderSelf(buffer: OptimizedBuffer): void {
+    if (this.textBuffer.ptr) {
+      buffer.drawTextBuffer(this.textBufferView, this._screenX, this._screenY)
+    }
+  }
+
+  destroy(): void {
+    if (this.isDestroyed) return
+
+    if (this.nativeRenderable) {
+      resolveRenderLib().destroyNativeRenderable(this.nativeRenderable)
+      this.nativeRenderable = null
+    }
+    this.textBuffer.setSyntaxStyle(null)
+    this._textBufferSyntaxStyle.destroy()
+    this.textBufferView.destroy()
+    this.textBuffer.destroy()
+    super.destroy()
+  }
+
+  protected onFgChanged(newColor: RGBA): void {
+    // Override in subclasses if needed
+  }
+
+  protected onBgChanged(newColor: RGBA): void {
+    // Override in subclasses if needed
+  }
+
+  protected onAttributesChanged(newAttributes: number): void {
+    // Override in subclasses if needed
+  }
+}