@xincli/opentui-core 0.4.6

package/src/renderables/Box.ts

@@ -0,0 +1,353 @@
+import { Edge, Gutter } from "../yoga.js"
+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
+  titleColor?: string | RGBA
+  titleAlignment?: "left" | "center" | "right"
+  bottomTitle?: string
+  bottomTitleAlignment?: "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 _titleColor?: RGBA
+  protected _titleAlignment: "left" | "center" | "right"
+  protected _bottomTitle?: string
+  protected _bottomTitleAlignment: "left" | "center" | "right"
+
+  protected _defaultOptions = {
+    backgroundColor: "transparent",
+    borderStyle: "single",
+    border: false,
+    borderColor: "#FFFFFF",
+    shouldFill: true,
+    titleAlignment: "left",
+    bottomTitleAlignment: "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._titleColor = options.titleColor ? parseColor(options.titleColor) : undefined
+    this._titleAlignment = options.titleAlignment || this._defaultOptions.titleAlignment
+    this._bottomTitle = options.bottomTitle
+    this._bottomTitleAlignment = options.bottomTitleAlignment || this._defaultOptions.bottomTitleAlignment
+
+    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 titleColor(): RGBA | undefined {
+    return this._titleColor
+  }
+
+  public set titleColor(value: string | RGBA | undefined) {
+    const newColor = value ? parseColor(value) : undefined
+    if (this._titleColor !== newColor) {
+      this._titleColor = newColor
+      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()
+    }
+  }
+
+  public get bottomTitle(): string | undefined {
+    return this._bottomTitle
+  }
+
+  public set bottomTitle(value: string | undefined) {
+    if (this._bottomTitle !== value) {
+      this._bottomTitle = value
+      this.requestRender()
+    }
+  }
+
+  public get bottomTitleAlignment(): "left" | "center" | "right" {
+    return this._bottomTitleAlignment
+  }
+
+  public set bottomTitleAlignment(value: "left" | "center" | "right") {
+    if (this._bottomTitleAlignment !== value) {
+      this._bottomTitleAlignment = value
+      this.requestRender()
+    }
+  }
+
+  protected renderSelf(buffer: OptimizedBuffer): void {
+    const hasBorder = this.borderSides.top || this.borderSides.right || this.borderSides.bottom || this.borderSides.left
+    const hasVisibleFill = this.shouldFill && this._backgroundColor.a > 0
+    // Many boxes are used only for layout. Skip drawBox entirely when a box
+    // would not draw pixels so wrapper nodes do not pay the FFI/native cost.
+    if (!hasBorder && !hasVisibleFill) {
+      return
+    }
+
+    const hasFocusWithin = this._focusable && (this._focused || this._hasFocusedDescendant)
+    const currentBorderColor = hasFocusWithin ? this._focusedBorderColor : this._borderColor
+    const screenX = this._screenX
+    const screenY = this._screenY
+
+    buffer.drawBox({
+      x: screenX,
+      y: screenY,
+      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,
+      titleColor: this._titleColor ?? currentBorderColor,
+      titleAlignment: this._titleAlignment,
+      bottomTitle: this._bottomTitle,
+      bottomTitleAlignment: this._bottomTitleAlignment,
+    })
+  }
+
+  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()
+    }
+  }
+}