@fairyhunter13/opentui-core 0.1.91 → 0.1.94

package/src/renderables/ASCIIFont.ts

@@ -1,219 +0,0 @@
-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 override 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
-  }
-
-  override 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)
-  }
-
-  override 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
-  }
-
-  override getSelectedText(): string {
-    const selection = this.selectionHelper.getSelection()
-    if (!selection) return ""
-    return this._text.slice(selection.start, selection.end)
-  }
-
-  override hasSelection(): boolean {
-    return this.selectionHelper.hasSelection()
-  }
-
-  protected override 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

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

@@ -1,295 +0,0 @@
-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 override 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 override 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()
-    }
-  }
-}