@fairyhunter13/opentui-core 0.1.88 → 0.1.90

package/src/renderables/ASCIIFont.ts

@@ -0,0 +1,219 @@
+import {
+  getCharacterPositions,
+  measureText,
+  renderFontToFrameBuffer,
+  type ASCIIFontName,
+  type fonts,
+} from "../lib/ascii.font.js"
+import { parseColor, type ColorInput } from "../lib/RGBA.js"
+import {
+  ASCIIFontSelectionHelper,
+  convertGlobalToLocalSelection,
+  Selection,
+  type LocalSelectionBounds,
+} from "../lib/selection.js"
+import type { RenderableOptions } from "../Renderable.js"
+import type { RenderContext } from "../types.js"
+import { FrameBufferRenderable, type FrameBufferOptions } from "./FrameBuffer.js"
+
+export interface ASCIIFontOptions extends Omit<RenderableOptions<ASCIIFontRenderable>, "width" | "height"> {
+  text?: string
+  font?: ASCIIFontName
+  color?: ColorInput | ColorInput[]
+  backgroundColor?: ColorInput
+  selectionBg?: ColorInput
+  selectionFg?: ColorInput
+  selectable?: boolean
+}
+
+export class ASCIIFontRenderable extends FrameBufferRenderable {
+  public selectable: boolean = true
+
+  protected static readonly _defaultOptions = {
+    text: "",
+    font: "tiny",
+    color: "#FFFFFF",
+    backgroundColor: "transparent",
+    selectionBg: undefined,
+    selectionFg: undefined,
+    selectable: true,
+  } satisfies Partial<ASCIIFontOptions>
+
+  protected _text: string
+  protected _font: keyof typeof fonts
+  protected _color: ColorInput | ColorInput[]
+  protected _backgroundColor: ColorInput
+  protected _selectionBg: ColorInput | undefined
+  protected _selectionFg: ColorInput | undefined
+  protected lastLocalSelection: LocalSelectionBounds | null = null
+
+  private selectionHelper: ASCIIFontSelectionHelper
+
+  constructor(ctx: RenderContext, options: ASCIIFontOptions) {
+    const defaultOptions = ASCIIFontRenderable._defaultOptions
+    const font = options.font || defaultOptions.font
+    const text = options.text || defaultOptions.text
+    const measurements = measureText({ text: text, font })
+
+    super(ctx, {
+      flexShrink: 0,
+      ...options,
+      width: measurements.width || 1,
+      height: measurements.height || 1,
+      respectAlpha: true,
+    } as FrameBufferOptions)
+
+    this._text = text
+    this._font = font
+    this._color = options.color || defaultOptions.color
+    this._backgroundColor = options.backgroundColor || defaultOptions.backgroundColor
+    this._selectionBg = options.selectionBg ? parseColor(options.selectionBg) : undefined
+    this._selectionFg = options.selectionFg ? parseColor(options.selectionFg) : undefined
+    this.selectable = options.selectable ?? true
+
+    this.selectionHelper = new ASCIIFontSelectionHelper(
+      () => this._text,
+      () => this._font,
+    )
+
+    this.renderFontToBuffer()
+  }
+
+  get text(): string {
+    return this._text
+  }
+
+  set text(value: string) {
+    this._text = value
+    this.updateDimensions()
+
+    if (this.lastLocalSelection) {
+      this.selectionHelper.onLocalSelectionChanged(this.lastLocalSelection, this.width, this.height)
+    }
+
+    this.renderFontToBuffer()
+    this.requestRender()
+  }
+
+  get font(): keyof typeof fonts {
+    return this._font
+  }
+
+  set font(value: keyof typeof fonts) {
+    this._font = value
+    this.updateDimensions()
+
+    if (this.lastLocalSelection) {
+      this.selectionHelper.onLocalSelectionChanged(this.lastLocalSelection, this.width, this.height)
+    }
+
+    this.renderFontToBuffer()
+    this.requestRender()
+  }
+
+  get color(): ColorInput | ColorInput[] {
+    return this._color
+  }
+
+  set color(value: ColorInput | ColorInput[]) {
+    this._color = value
+    this.renderFontToBuffer()
+    this.requestRender()
+  }
+
+  get backgroundColor(): ColorInput {
+    return this._backgroundColor
+  }
+
+  set backgroundColor(value: ColorInput) {
+    this._backgroundColor = value
+    this.renderFontToBuffer()
+    this.requestRender()
+  }
+
+  private updateDimensions(): void {
+    const measurements = measureText({ text: this._text, font: this._font })
+    this.width = measurements.width
+    this.height = measurements.height
+  }
+
+  shouldStartSelection(x: number, y: number): boolean {
+    const localX = x - this.x
+    const localY = y - this.y
+    return this.selectionHelper.shouldStartSelection(localX, localY, this.width, this.height)
+  }
+
+  onSelectionChanged(selection: Selection | null): boolean {
+    const localSelection = convertGlobalToLocalSelection(selection, this.x, this.y)
+    this.lastLocalSelection = localSelection
+    const changed = this.selectionHelper.onLocalSelectionChanged(localSelection, this.width, this.height)
+    if (changed) {
+      this.renderFontToBuffer()
+      this.requestRender()
+    }
+    return changed
+  }
+
+  getSelectedText(): string {
+    const selection = this.selectionHelper.getSelection()
+    if (!selection) return ""
+    return this._text.slice(selection.start, selection.end)
+  }
+
+  hasSelection(): boolean {
+    return this.selectionHelper.hasSelection()
+  }
+
+  protected onResize(width: number, height: number): void {
+    super.onResize(width, height)
+    this.renderFontToBuffer()
+  }
+
+  private renderFontToBuffer(): void {
+    if (this.isDestroyed) return
+    this.frameBuffer.clear(parseColor(this._backgroundColor))
+
+    renderFontToFrameBuffer(this.frameBuffer, {
+      text: this._text,
+      x: 0,
+      y: 0,
+      color: this.color,
+      backgroundColor: this._backgroundColor,
+      font: this._font,
+    })
+
+    const selection = this.selectionHelper.getSelection()
+    if (selection && (this._selectionBg || this._selectionFg)) {
+      this.renderSelectionHighlight(selection)
+    }
+  }
+
+  private renderSelectionHighlight(selection: { start: number; end: number }): void {
+    if (!this._selectionBg && !this._selectionFg) return
+
+    const selectedText = this._text.slice(selection.start, selection.end)
+    if (!selectedText) return
+
+    const positions = getCharacterPositions(this._text, this._font)
+    const startX = positions[selection.start] || 0
+    const endX =
+      selection.end < positions.length
+        ? positions[selection.end]
+        : measureText({ text: this._text, font: this._font }).width
+
+    if (this._selectionBg) {
+      this.frameBuffer.fillRect(startX, 0, endX - startX, this.height, parseColor(this._selectionBg))
+    }
+
+    if (this._selectionFg || this._selectionBg) {
+      renderFontToFrameBuffer(this.frameBuffer, {
+        text: selectedText,
+        x: startX,
+        y: 0,
+        color: this._selectionFg ? this._selectionFg : this._color,
+        backgroundColor: this._selectionBg ? this._selectionBg : this._backgroundColor,
+        font: this._font,
+      })
+    }
+  }
+}

package/src/renderables/Box.test.ts

@@ -0,0 +1,160 @@
+import { test, expect, describe, beforeEach, afterEach, spyOn } from "bun:test"
+import { BoxRenderable, type BoxOptions } from "./Box.js"
+import { createTestRenderer, type TestRenderer } from "../testing/test-renderer.js"
+import type { BorderStyle } from "../lib/border.js"
+
+let testRenderer: TestRenderer
+let renderOnce: () => Promise<void>
+let warnSpy: ReturnType<typeof spyOn>
+
+beforeEach(async () => {
+  ;({ renderer: testRenderer, renderOnce } = await createTestRenderer({}))
+  warnSpy = spyOn(console, "warn").mockImplementation(() => {})
+})
+
+afterEach(() => {
+  testRenderer.destroy()
+  warnSpy.mockRestore()
+})
+
+describe("BoxRenderable - focusable option", () => {
+  test("is not focusable by default", async () => {
+    const box = new BoxRenderable(testRenderer, {
+      id: "test-box",
+      width: 10,
+      height: 5,
+    })
+
+    expect(box.focusable).toBe(false)
+    box.focus()
+    expect(box.focused).toBe(false)
+  })
+
+  test("can be made focusable via option", async () => {
+    const box = new BoxRenderable(testRenderer, {
+      id: "test-box",
+      focusable: true,
+      width: 10,
+      height: 5,
+    })
+
+    expect(box.focusable).toBe(true)
+    box.focus()
+    expect(box.focused).toBe(true)
+  })
+})
+
+describe("BoxRenderable - borderStyle validation", () => {
+  describe("regression: invalid borderStyle via constructor does not crash", () => {
+    test("handles invalid string borderStyle in constructor", async () => {
+      const box = new BoxRenderable(testRenderer, {
+        id: "test-box",
+        borderStyle: "invalid-style" as BorderStyle,
+        border: true,
+        width: 10,
+        height: 5,
+      })
+
+      testRenderer.root.add(box)
+      await renderOnce()
+
+      expect(box.borderStyle).toBe("single")
+      expect(box.isDestroyed).toBe(false)
+    })
+
+    test("handles undefined borderStyle in constructor", async () => {
+      const box = new BoxRenderable(testRenderer, {
+        id: "test-box",
+        borderStyle: undefined,
+        border: true,
+        width: 10,
+        height: 5,
+      })
+
+      testRenderer.root.add(box)
+      await renderOnce()
+
+      expect(box.borderStyle).toBe("single")
+      expect(box.isDestroyed).toBe(false)
+    })
+  })
+
+  describe("regression: invalid borderStyle via setter does not crash", () => {
+    test("handles invalid string borderStyle via setter", async () => {
+      const box = new BoxRenderable(testRenderer, {
+        id: "test-box",
+        borderStyle: "double",
+        border: true,
+        width: 10,
+        height: 5,
+      })
+
+      testRenderer.root.add(box)
+      await renderOnce()
+
+      expect(box.borderStyle).toBe("double")
+
+      box.borderStyle = "invalid-style" as BorderStyle
+      await renderOnce()
+
+      expect(box.borderStyle).toBe("single")
+      expect(box.isDestroyed).toBe(false)
+    })
+
+    test("renders correctly after fallback from invalid borderStyle", async () => {
+      const box = new BoxRenderable(testRenderer, {
+        id: "test-box",
+        borderStyle: "invalid" as BorderStyle,
+        border: true,
+        width: 10,
+        height: 5,
+      })
+
+      testRenderer.root.add(box)
+
+      // Should not throw during render
+      await expect(renderOnce()).resolves.toBeUndefined()
+      expect(box.isDestroyed).toBe(false)
+    })
+  })
+
+  describe("valid borderStyle values work correctly", () => {
+    test.each(["single", "double", "rounded", "heavy"] as BorderStyle[])(
+      "accepts valid borderStyle '%s' in constructor",
+      async (style) => {
+        const box = new BoxRenderable(testRenderer, {
+          id: "test-box",
+          borderStyle: style,
+          border: true,
+          width: 10,
+          height: 5,
+        })
+
+        testRenderer.root.add(box)
+        await renderOnce()
+
+        expect(box.borderStyle).toBe(style)
+      },
+    )
+
+    test.each(["single", "double", "rounded", "heavy"] as BorderStyle[])(
+      "accepts valid borderStyle '%s' via setter",
+      async (style) => {
+        const box = new BoxRenderable(testRenderer, {
+          id: "test-box",
+          border: true,
+          width: 10,
+          height: 5,
+        })
+
+        testRenderer.root.add(box)
+        await renderOnce()
+
+        box.borderStyle = style
+        await renderOnce()
+
+        expect(box.borderStyle).toBe(style)
+      },
+    )
+  })
+})

package/src/renderables/Box.ts

@@ -0,0 +1,295 @@
+import { Edge, Gutter } from "yoga-layout"
+import { type RenderableOptions, Renderable } from "../Renderable.js"
+import type { OptimizedBuffer } from "../buffer.js"
+import {
+  type BorderCharacters,
+  type BorderSides,
+  type BorderSidesConfig,
+  type BorderStyle,
+  borderCharsToArray,
+  getBorderSides,
+  parseBorderStyle,
+} from "../lib/index.js"
+import { type ColorInput, RGBA, parseColor } from "../lib/RGBA.js"
+import { isValidPercentage } from "../lib/renderable.validations.js"
+import type { RenderContext } from "../types.js"
+
+export interface BoxOptions<TRenderable extends Renderable = BoxRenderable> extends RenderableOptions<TRenderable> {
+  backgroundColor?: string | RGBA
+  borderStyle?: BorderStyle
+  border?: boolean | BorderSides[]
+  borderColor?: string | RGBA
+  customBorderChars?: BorderCharacters
+  shouldFill?: boolean
+  title?: string
+  titleAlignment?: "left" | "center" | "right"
+  focusedBorderColor?: ColorInput
+  focusable?: boolean
+  gap?: number | `${number}%`
+  rowGap?: number | `${number}%`
+  columnGap?: number | `${number}%`
+}
+
+function isGapType(value: any): value is number | undefined {
+  if (value === undefined) {
+    return true
+  }
+  if (typeof value === "number" && !Number.isNaN(value)) {
+    return true
+  }
+  return isValidPercentage(value)
+}
+
+export class BoxRenderable extends Renderable {
+  protected _backgroundColor: RGBA
+  protected _border: boolean | BorderSides[]
+  protected _borderStyle: BorderStyle
+  protected _borderColor: RGBA
+  protected _focusedBorderColor: RGBA
+  private _customBorderCharsObj: BorderCharacters | undefined
+  protected _customBorderChars?: Uint32Array
+  protected borderSides: BorderSidesConfig
+  public shouldFill: boolean
+  protected _title?: string
+  protected _titleAlignment: "left" | "center" | "right"
+
+  protected _defaultOptions = {
+    backgroundColor: "transparent",
+    borderStyle: "single",
+    border: false,
+    borderColor: "#FFFFFF",
+    shouldFill: true,
+    titleAlignment: "left",
+    focusedBorderColor: "#00AAFF",
+  } satisfies Partial<BoxOptions>
+
+  constructor(ctx: RenderContext, options: BoxOptions) {
+    super(ctx, options)
+
+    if (options.focusable === true) {
+      this._focusable = true
+    }
+
+    this._backgroundColor = parseColor(options.backgroundColor || this._defaultOptions.backgroundColor)
+    this._border = options.border ?? this._defaultOptions.border
+    if (
+      !options.border &&
+      (options.borderStyle || options.borderColor || options.focusedBorderColor || options.customBorderChars)
+    ) {
+      this._border = true
+    }
+    this._borderStyle = parseBorderStyle(options.borderStyle, this._defaultOptions.borderStyle)
+    this._borderColor = parseColor(options.borderColor || this._defaultOptions.borderColor)
+    this._focusedBorderColor = parseColor(options.focusedBorderColor || this._defaultOptions.focusedBorderColor)
+    this._customBorderCharsObj = options.customBorderChars
+    this._customBorderChars = this._customBorderCharsObj ? borderCharsToArray(this._customBorderCharsObj) : undefined
+    this.borderSides = getBorderSides(this._border)
+    this.shouldFill = options.shouldFill ?? this._defaultOptions.shouldFill
+    this._title = options.title
+    this._titleAlignment = options.titleAlignment || this._defaultOptions.titleAlignment
+
+    this.applyYogaBorders()
+
+    const hasInitialGapProps =
+      options.gap !== undefined || options.rowGap !== undefined || options.columnGap !== undefined
+    if (hasInitialGapProps) {
+      this.applyYogaGap(options)
+    }
+  }
+
+  private initializeBorder(): void {
+    // https://github.com/anomalyco/opentui/issues/186
+    // Solid-js reconciler does not pass props to constructor on init,
+    // so we need to initialize the border when supporting properties are set.
+    // borderStyle, borderColor, focusedBorderColor
+    if (this._border === false) {
+      this._border = true
+      this.borderSides = getBorderSides(this._border)
+      this.applyYogaBorders()
+    }
+  }
+
+  public get customBorderChars(): BorderCharacters | undefined {
+    return this._customBorderCharsObj
+  }
+
+  public set customBorderChars(value: BorderCharacters | undefined) {
+    this._customBorderCharsObj = value
+    this._customBorderChars = value ? borderCharsToArray(value) : undefined
+    this.requestRender()
+  }
+
+  public get backgroundColor(): RGBA {
+    return this._backgroundColor
+  }
+
+  public set backgroundColor(value: RGBA | string | undefined) {
+    const newColor = parseColor(value ?? this._defaultOptions.backgroundColor)
+    if (this._backgroundColor !== newColor) {
+      this._backgroundColor = newColor
+      this.requestRender()
+    }
+  }
+
+  public get border(): boolean | BorderSides[] {
+    return this._border
+  }
+
+  public set border(value: boolean | BorderSides[]) {
+    if (this._border !== value) {
+      this._border = value
+      this.borderSides = getBorderSides(value)
+      this.applyYogaBorders()
+      this.requestRender()
+    }
+  }
+
+  public get borderStyle(): BorderStyle {
+    return this._borderStyle
+  }
+
+  public set borderStyle(value: BorderStyle) {
+    const _value = parseBorderStyle(value, this._defaultOptions.borderStyle)
+    if (this._borderStyle !== _value || !this._border) {
+      this._borderStyle = _value
+      this._customBorderChars = undefined
+      this.initializeBorder()
+      this.requestRender()
+    }
+  }
+
+  public get borderColor(): RGBA {
+    return this._borderColor
+  }
+
+  public set borderColor(value: RGBA | string) {
+    const newColor = parseColor(value ?? this._defaultOptions.borderColor)
+    if (this._borderColor !== newColor) {
+      this._borderColor = newColor
+      this.initializeBorder()
+      this.requestRender()
+    }
+  }
+
+  public get focusedBorderColor(): RGBA {
+    return this._focusedBorderColor
+  }
+
+  public set focusedBorderColor(value: RGBA | string) {
+    const newColor = parseColor(value ?? this._defaultOptions.focusedBorderColor)
+    if (this._focusedBorderColor !== newColor) {
+      this._focusedBorderColor = newColor
+      this.initializeBorder()
+      if (this._focused) {
+        this.requestRender()
+      }
+    }
+  }
+
+  public get title(): string | undefined {
+    return this._title
+  }
+
+  public set title(value: string | undefined) {
+    if (this._title !== value) {
+      this._title = value
+      this.requestRender()
+    }
+  }
+
+  public get titleAlignment(): "left" | "center" | "right" {
+    return this._titleAlignment
+  }
+
+  public set titleAlignment(value: "left" | "center" | "right") {
+    if (this._titleAlignment !== value) {
+      this._titleAlignment = value
+      this.requestRender()
+    }
+  }
+
+  protected renderSelf(buffer: OptimizedBuffer): void {
+    const currentBorderColor = this._focused ? this._focusedBorderColor : this._borderColor
+
+    buffer.drawBox({
+      x: this.x,
+      y: this.y,
+      width: this.width,
+      height: this.height,
+      borderStyle: this._borderStyle,
+      customBorderChars: this._customBorderChars,
+      border: this._border,
+      borderColor: currentBorderColor,
+      backgroundColor: this._backgroundColor,
+      shouldFill: this.shouldFill,
+      title: this._title,
+      titleAlignment: this._titleAlignment,
+    })
+  }
+
+  protected getScissorRect(): { x: number; y: number; width: number; height: number } {
+    const baseRect = super.getScissorRect()
+
+    if (!this.borderSides.top && !this.borderSides.right && !this.borderSides.bottom && !this.borderSides.left) {
+      return baseRect
+    }
+
+    const leftInset = this.borderSides.left ? 1 : 0
+    const rightInset = this.borderSides.right ? 1 : 0
+    const topInset = this.borderSides.top ? 1 : 0
+    const bottomInset = this.borderSides.bottom ? 1 : 0
+
+    return {
+      x: baseRect.x + leftInset,
+      y: baseRect.y + topInset,
+      width: Math.max(0, baseRect.width - leftInset - rightInset),
+      height: Math.max(0, baseRect.height - topInset - bottomInset),
+    }
+  }
+
+  private applyYogaBorders(): void {
+    const node = this.yogaNode
+    node.setBorder(Edge.Left, this.borderSides.left ? 1 : 0)
+    node.setBorder(Edge.Right, this.borderSides.right ? 1 : 0)
+    node.setBorder(Edge.Top, this.borderSides.top ? 1 : 0)
+    node.setBorder(Edge.Bottom, this.borderSides.bottom ? 1 : 0)
+    this.requestRender()
+  }
+
+  private applyYogaGap(options: BoxOptions): void {
+    const node = this.yogaNode
+
+    if (isGapType(options.gap)) {
+      node.setGap(Gutter.All, options.gap)
+    }
+
+    if (isGapType(options.rowGap)) {
+      node.setGap(Gutter.Row, options.rowGap)
+    }
+
+    if (isGapType(options.columnGap)) {
+      node.setGap(Gutter.Column, options.columnGap)
+    }
+  }
+
+  public set gap(gap: number | `${number}%` | undefined) {
+    if (isGapType(gap)) {
+      this.yogaNode.setGap(Gutter.All, gap)
+      this.requestRender()
+    }
+  }
+
+  public set rowGap(rowGap: number | `${number}%` | undefined) {
+    if (isGapType(rowGap)) {
+      this.yogaNode.setGap(Gutter.Row, rowGap)
+      this.requestRender()
+    }
+  }
+
+  public set columnGap(columnGap: number | `${number}%` | undefined) {
+    if (isGapType(columnGap)) {
+      this.yogaNode.setGap(Gutter.Column, columnGap)
+      this.requestRender()
+    }
+  }
+}