@xincli/opentui-core 0.4.6 → 0.4.7

package/src/renderables/Text.ts

@@ -1,147 +0,0 @@
-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

@@ -1,504 +0,0 @@
-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
-  }
-}