@xincli/opentui-core 0.4.6

package/src/renderables/TabSelect.ts

@@ -0,0 +1,447 @@
+import { Renderable, type RenderableOptions } from "../Renderable.js"
+import { OptimizedBuffer } from "../buffer.js"
+import { RGBA, parseColor, type ColorInput } from "../lib/RGBA.js"
+import type { KeyEvent } from "../lib/KeyHandler.js"
+import type { RenderContext } from "../types.js"
+import {
+  type KeyBinding as BaseKeyBinding,
+  mergeKeyBindings,
+  buildKeyBindingsMap,
+  getKeyBindingAction,
+  defaultKeyAliases,
+  mergeKeyAliases,
+} from "../lib/keybinding.internal.js"
+
+type KeyAliasMap = Record<string, string>
+
+export interface TabSelectOption {
+  name: string
+  description: string
+  value?: any
+}
+
+export type TabSelectAction = "move-left" | "move-right" | "select-current"
+
+export type TabSelectKeyBinding = BaseKeyBinding<TabSelectAction>
+
+const defaultTabSelectKeybindings: TabSelectKeyBinding[] = [
+  { name: "left", action: "move-left" },
+  { name: "[", action: "move-left" },
+  { name: "right", action: "move-right" },
+  { name: "]", action: "move-right" },
+  { name: "return", action: "select-current" },
+  { name: "linefeed", action: "select-current" },
+]
+
+export interface TabSelectRenderableOptions extends Omit<RenderableOptions<TabSelectRenderable>, "height"> {
+  height?: number
+  options?: TabSelectOption[]
+  tabWidth?: number
+  backgroundColor?: ColorInput
+  textColor?: ColorInput
+  focusedBackgroundColor?: ColorInput
+  focusedTextColor?: ColorInput
+  selectedBackgroundColor?: ColorInput
+  selectedTextColor?: ColorInput
+  selectedDescriptionColor?: ColorInput
+  showScrollArrows?: boolean
+  showDescription?: boolean
+  showUnderline?: boolean
+  wrapSelection?: boolean
+  keyBindings?: TabSelectKeyBinding[]
+  keyAliasMap?: KeyAliasMap
+}
+
+export enum TabSelectRenderableEvents {
+  SELECTION_CHANGED = "selectionChanged",
+  ITEM_SELECTED = "itemSelected",
+}
+
+function calculateDynamicHeight(showUnderline: boolean, showDescription: boolean): number {
+  let height = 1
+
+  if (showUnderline) {
+    height += 1
+  }
+
+  if (showDescription) {
+    height += 1
+  }
+
+  return height
+}
+
+export class TabSelectRenderable extends Renderable {
+  protected _focusable: boolean = true
+
+  private _options: TabSelectOption[] = []
+  private selectedIndex: number = 0
+  private scrollOffset: number = 0
+  private _tabWidth: number
+  private maxVisibleTabs: number
+
+  private _backgroundColor: RGBA
+  private _textColor: RGBA
+  private _focusedBackgroundColor: RGBA
+  private _focusedTextColor: RGBA
+  private _selectedBackgroundColor: RGBA
+  private _selectedTextColor: RGBA
+  private _selectedDescriptionColor: RGBA
+  private _showScrollArrows: boolean
+  private _showDescription: boolean
+  private _showUnderline: boolean
+  private _wrapSelection: boolean
+  private _keyBindingsMap: Map<string, TabSelectAction>
+  private _keyAliasMap: KeyAliasMap
+  private _keyBindings: TabSelectKeyBinding[]
+
+  constructor(ctx: RenderContext, options: TabSelectRenderableOptions) {
+    const calculatedHeight = calculateDynamicHeight(options.showUnderline ?? true, options.showDescription ?? true)
+
+    super(ctx, { ...options, height: calculatedHeight, buffered: true })
+
+    this._backgroundColor = parseColor(options.backgroundColor || "transparent")
+    this._textColor = parseColor(options.textColor || "#FFFFFF")
+    this._focusedBackgroundColor = parseColor(options.focusedBackgroundColor || options.backgroundColor || "#1a1a1a")
+    this._focusedTextColor = parseColor(options.focusedTextColor || options.textColor || "#FFFFFF")
+    this._options = options.options || []
+    this._tabWidth = options.tabWidth || 20
+    this._showDescription = options.showDescription ?? true
+    this._showUnderline = options.showUnderline ?? true
+    this._showScrollArrows = options.showScrollArrows ?? true
+    this._wrapSelection = options.wrapSelection ?? false
+
+    this.maxVisibleTabs = Math.max(1, Math.floor(this.width / this._tabWidth))
+
+    this._selectedBackgroundColor = parseColor(options.selectedBackgroundColor || "#334455")
+    this._selectedTextColor = parseColor(options.selectedTextColor || "#FFFF00")
+    this._selectedDescriptionColor = parseColor(options.selectedDescriptionColor || "#CCCCCC")
+
+    this._keyAliasMap = mergeKeyAliases(defaultKeyAliases, options.keyAliasMap || {})
+    this._keyBindings = options.keyBindings || []
+    const mergedBindings = mergeKeyBindings(defaultTabSelectKeybindings, this._keyBindings)
+    this._keyBindingsMap = buildKeyBindingsMap(mergedBindings, this._keyAliasMap)
+  }
+
+  private calculateDynamicHeight(): number {
+    return calculateDynamicHeight(this._showUnderline, this._showDescription)
+  }
+
+  protected renderSelf(buffer: OptimizedBuffer, deltaTime: number): void {
+    if (!this.visible || !this.frameBuffer) return
+
+    if (this.isDirty) {
+      this.refreshFrameBuffer()
+    }
+  }
+
+  private refreshFrameBuffer(): void {
+    if (!this.frameBuffer) return
+    // Use focused colors if focused
+    const bgColor = this._focused ? this._focusedBackgroundColor : this._backgroundColor
+    this.frameBuffer.clear(bgColor)
+    if (this._options.length === 0) return
+
+    const contentX = 0
+    const contentY = 0
+    const contentWidth = this.width
+    const contentHeight = this.height
+
+    const visibleOptions = this._options.slice(this.scrollOffset, this.scrollOffset + this.maxVisibleTabs)
+
+    // Render tab names
+    for (let i = 0; i < visibleOptions.length; i++) {
+      const actualIndex = this.scrollOffset + i
+      const option = visibleOptions[i]
+      const isSelected = actualIndex === this.selectedIndex
+      const tabX = contentX + i * this._tabWidth
+
+      if (tabX >= contentX + contentWidth) break
+
+      const actualTabWidth = Math.min(this._tabWidth, contentWidth - i * this._tabWidth)
+
+      if (isSelected) {
+        this.frameBuffer.fillRect(tabX, contentY, actualTabWidth, 1, this._selectedBackgroundColor)
+      }
+
+      const baseTextColor = this._focused ? this._focusedTextColor : this._textColor
+      const nameColor = isSelected ? this._selectedTextColor : baseTextColor
+      const nameContent = this.truncateText(option.name, actualTabWidth - 2)
+      this.frameBuffer.drawText(nameContent, tabX + 1, contentY, nameColor)
+
+      if (isSelected && this._showUnderline && contentHeight >= 2) {
+        const underlineY = contentY + 1
+        const underlineBg = isSelected ? this._selectedBackgroundColor : bgColor
+        this.frameBuffer.drawText("▬".repeat(actualTabWidth), tabX, underlineY, nameColor, underlineBg)
+      }
+    }
+
+    if (this._showDescription && contentHeight >= (this._showUnderline ? 3 : 2)) {
+      const selectedOption = this.getSelectedOption()
+      if (selectedOption) {
+        const descriptionY = contentY + (this._showUnderline ? 2 : 1)
+        const descColor = this._selectedDescriptionColor
+        const descContent = this.truncateText(selectedOption.description, contentWidth - 2)
+        this.frameBuffer.drawText(descContent, contentX + 1, descriptionY, descColor)
+      }
+    }
+
+    if (this._showScrollArrows && this._options.length > this.maxVisibleTabs) {
+      this.renderScrollArrowsToFrameBuffer(contentX, contentY, contentWidth, contentHeight)
+    }
+  }
+
+  private truncateText(text: string, maxWidth: number): string {
+    if (text.length <= maxWidth) return text
+    return text.substring(0, Math.max(0, maxWidth - 1)) + "…"
+  }
+
+  private renderScrollArrowsToFrameBuffer(
+    contentX: number,
+    contentY: number,
+    contentWidth: number,
+    contentHeight: number,
+  ): void {
+    if (!this.frameBuffer) return
+
+    const hasMoreLeft = this.scrollOffset > 0
+    const hasMoreRight = this.scrollOffset + this.maxVisibleTabs < this._options.length
+
+    if (hasMoreLeft) {
+      this.frameBuffer.drawText("‹", contentX, contentY, parseColor("#AAAAAA"))
+    }
+
+    if (hasMoreRight) {
+      this.frameBuffer.drawText("›", contentX + contentWidth - 1, contentY, parseColor("#AAAAAA"))
+    }
+  }
+
+  public setOptions(options: TabSelectOption[]): void {
+    this._options = options
+    this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, options.length - 1))
+    this.updateScrollOffset()
+    this.requestRender()
+  }
+
+  public getSelectedOption(): TabSelectOption | null {
+    return this._options[this.selectedIndex] || null
+  }
+
+  public getSelectedIndex(): number {
+    return this.selectedIndex
+  }
+
+  public moveLeft(): void {
+    if (this.selectedIndex > 0) {
+      this.selectedIndex--
+    } else if (this._wrapSelection && this._options.length > 0) {
+      this.selectedIndex = this._options.length - 1
+    } else {
+      return
+    }
+
+    this.updateScrollOffset()
+    this.requestRender()
+    this.emit(TabSelectRenderableEvents.SELECTION_CHANGED, this.selectedIndex, this.getSelectedOption())
+  }
+
+  public moveRight(): void {
+    if (this.selectedIndex < this._options.length - 1) {
+      this.selectedIndex++
+    } else if (this._wrapSelection && this._options.length > 0) {
+      this.selectedIndex = 0
+    } else {
+      return
+    }
+
+    this.updateScrollOffset()
+    this.requestRender()
+    this.emit(TabSelectRenderableEvents.SELECTION_CHANGED, this.selectedIndex, this.getSelectedOption())
+  }
+
+  public selectCurrent(): void {
+    const selected = this.getSelectedOption()
+    if (selected) {
+      this.emit(TabSelectRenderableEvents.ITEM_SELECTED, this.selectedIndex, selected)
+    }
+  }
+
+  public setSelectedIndex(index: number): void {
+    if (index >= 0 && index < this._options.length) {
+      this.selectedIndex = index
+      this.updateScrollOffset()
+      this.requestRender()
+      this.emit(TabSelectRenderableEvents.SELECTION_CHANGED, this.selectedIndex, this.getSelectedOption())
+    }
+  }
+
+  private updateScrollOffset(): void {
+    const halfVisible = Math.floor(this.maxVisibleTabs / 2)
+    const newScrollOffset = Math.max(
+      0,
+      Math.min(this.selectedIndex - halfVisible, this._options.length - this.maxVisibleTabs),
+    )
+
+    if (newScrollOffset !== this.scrollOffset) {
+      this.scrollOffset = newScrollOffset
+      this.requestRender()
+    }
+  }
+
+  protected onResize(width: number, height: number): void {
+    this.maxVisibleTabs = Math.max(1, Math.floor(width / this._tabWidth))
+    this.updateScrollOffset()
+    this.requestRender()
+  }
+
+  public setTabWidth(tabWidth: number): void {
+    if (this._tabWidth === tabWidth) return
+
+    this._tabWidth = tabWidth
+    this.maxVisibleTabs = Math.max(1, Math.floor(this.width / this._tabWidth))
+
+    this.updateScrollOffset()
+    this.requestRender()
+  }
+
+  public getTabWidth(): number {
+    return this._tabWidth
+  }
+
+  public handleKeyPress(key: KeyEvent): boolean {
+    const action = getKeyBindingAction(this._keyBindingsMap, key)
+
+    if (action) {
+      switch (action) {
+        case "move-left":
+          this.moveLeft()
+          return true
+        case "move-right":
+          this.moveRight()
+          return true
+        case "select-current":
+          this.selectCurrent()
+          return true
+      }
+    }
+
+    return false
+  }
+
+  public get options(): TabSelectOption[] {
+    return this._options
+  }
+
+  public set options(options: TabSelectOption[]) {
+    this._options = options
+    this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, options.length - 1))
+    this.updateScrollOffset()
+    this.requestRender()
+  }
+
+  public set backgroundColor(color: ColorInput) {
+    this._backgroundColor = parseColor(color)
+    this.requestRender()
+  }
+
+  public set textColor(color: ColorInput) {
+    this._textColor = parseColor(color)
+    this.requestRender()
+  }
+
+  public set focusedBackgroundColor(color: ColorInput) {
+    this._focusedBackgroundColor = parseColor(color)
+    this.requestRender()
+  }
+
+  public set focusedTextColor(color: ColorInput) {
+    this._focusedTextColor = parseColor(color)
+    this.requestRender()
+  }
+
+  public set selectedBackgroundColor(color: ColorInput) {
+    this._selectedBackgroundColor = parseColor(color)
+    this.requestRender()
+  }
+
+  public set selectedTextColor(color: ColorInput) {
+    this._selectedTextColor = parseColor(color)
+    this.requestRender()
+  }
+
+  public set selectedDescriptionColor(color: ColorInput) {
+    this._selectedDescriptionColor = parseColor(color)
+    this.requestRender()
+  }
+
+  public get showDescription(): boolean {
+    return this._showDescription
+  }
+
+  public set showDescription(show: boolean) {
+    if (this._showDescription !== show) {
+      this._showDescription = show
+      const newHeight = this.calculateDynamicHeight()
+      this.height = newHeight
+      this.requestRender()
+    }
+  }
+
+  public get showUnderline(): boolean {
+    return this._showUnderline
+  }
+
+  public set showUnderline(show: boolean) {
+    if (this._showUnderline !== show) {
+      this._showUnderline = show
+      const newHeight = this.calculateDynamicHeight()
+      this.height = newHeight
+      this.requestRender()
+    }
+  }
+
+  public get showScrollArrows(): boolean {
+    return this._showScrollArrows
+  }
+
+  public set showScrollArrows(show: boolean) {
+    if (this._showScrollArrows !== show) {
+      this._showScrollArrows = show
+      this.requestRender()
+    }
+  }
+
+  public get wrapSelection(): boolean {
+    return this._wrapSelection
+  }
+
+  public set wrapSelection(wrap: boolean) {
+    this._wrapSelection = wrap
+  }
+
+  public get tabWidth(): number {
+    return this._tabWidth
+  }
+
+  public set tabWidth(tabWidth: number) {
+    if (this._tabWidth === tabWidth) return
+
+    this._tabWidth = tabWidth
+    this.maxVisibleTabs = Math.max(1, Math.floor(this.width / this._tabWidth))
+
+    this.updateScrollOffset()
+    this.requestRender()
+  }
+
+  public set keyBindings(bindings: TabSelectKeyBinding[]) {
+    this._keyBindings = bindings
+    const mergedBindings = mergeKeyBindings(defaultTabSelectKeybindings, bindings)
+    this._keyBindingsMap = buildKeyBindingsMap(mergedBindings, this._keyAliasMap)
+  }
+
+  public set keyAliasMap(aliases: KeyAliasMap) {
+    this._keyAliasMap = mergeKeyAliases(defaultKeyAliases, aliases)
+    const mergedBindings = mergeKeyBindings(defaultTabSelectKeybindings, this._keyBindings)
+    this._keyBindingsMap = buildKeyBindingsMap(mergedBindings, this._keyAliasMap)
+  }
+}

package/src/renderables/Text.selection-buffer.test.ts

@@ -0,0 +1,118 @@
+import { describe, expect, it, beforeEach, afterEach } from "bun:test"
+import { TextRenderable } from "./Text.js"
+import { RGBA } from "../lib/RGBA.js"
+import { createTestRenderer, type MockMouse, type TestRenderer } from "../testing/test-renderer.js"
+import { BoxRenderable } from "./Box.js"
+
+let currentRenderer: TestRenderer
+let renderOnce: () => Promise<void>
+let currentMouse: MockMouse
+
+describe("TextRenderable Selection - Buffer Validation", () => {
+  beforeEach(async () => {
+    ;({
+      renderer: currentRenderer,
+      renderOnce,
+      mockMouse: currentMouse,
+    } = await createTestRenderer({
+      width: 50,
+      height: 10,
+    }))
+  })
+
+  afterEach(() => {
+    currentRenderer.destroy()
+  })
+
+  it("applies selection background colors to selected text renderables", async () => {
+    const box1 = new BoxRenderable(currentRenderer, {
+      id: "box1",
+      left: 2,
+      top: 2,
+      width: 45,
+      height: 7,
+      backgroundColor: "#1e2936",
+      borderColor: "#58a6ff",
+      title: "Document Section 1",
+      flexDirection: "column",
+      padding: 1,
+      border: true,
+    })
+    currentRenderer.root.add(box1)
+
+    const text1 = new TextRenderable(currentRenderer, {
+      id: "text1",
+      content: "This is a paragraph in the first box.",
+      fg: "#f0f6fc",
+      selectionBg: "#4a5568",
+      selectionFg: "#ffffff",
+    })
+    box1.add(text1)
+
+    const text2 = new TextRenderable(currentRenderer, {
+      id: "text2",
+      content: "It contains multiple lines of text",
+      fg: "#f0f6fc",
+      selectionBg: "#4a5568",
+      selectionFg: "#ffffff",
+    })
+    box1.add(text2)
+
+    const text3 = new TextRenderable(currentRenderer, {
+      id: "text3",
+      content: "that can be selected independently.",
+      fg: "#f0f6fc",
+      selectionBg: "#4a5568",
+      selectionFg: "#ffffff",
+    })
+    box1.add(text3)
+
+    await renderOnce()
+
+    await currentMouse.drag(text1.x, text1.y, text2.x + 10, text2.y)
+    await renderOnce()
+
+    expect(text1.hasSelection()).toBe(true)
+    expect(text2.hasSelection()).toBe(true)
+    expect(text3.hasSelection()).toBe(false)
+
+    expect(text1.getSelectedText()).toBe("This is a paragraph in the first box.")
+    expect(text2.getSelectedText()).toBe("It contain")
+
+    const buffers = currentRenderer.currentRenderBuffer.buffers
+    const width = currentRenderer.currentRenderBuffer.width
+    const expectedBg = RGBA.fromHex("#4a5568")
+
+    const getBgAt = (x: number, y: number) => {
+      const index = y * width + x
+      return RGBA.fromArray(buffers.bg.slice(index * 4, index * 4 + 4))
+    }
+
+    for (let col = text1.x; col < text1.x + text1.plainText.length; col++) {
+      const bg = getBgAt(col, text1.y)
+      const bgMatches =
+        Math.abs(bg.r - expectedBg.r) < 0.01 &&
+        Math.abs(bg.g - expectedBg.g) < 0.01 &&
+        Math.abs(bg.b - expectedBg.b) < 0.01
+      expect(bgMatches).toBe(true)
+    }
+
+    for (let col = text2.x; col < text2.x + 10; col++) {
+      const bg = getBgAt(col, text2.y)
+      const bgMatches =
+        Math.abs(bg.r - expectedBg.r) < 0.01 &&
+        Math.abs(bg.g - expectedBg.g) < 0.01 &&
+        Math.abs(bg.b - expectedBg.b) < 0.01
+      expect(bgMatches).toBe(true)
+    }
+
+    for (let col = text2.x + 10; col < text2.x + text2.plainText.length; col++) {
+      const bg = getBgAt(col, text2.y)
+      const bgMatches =
+        Math.abs(bg.r - expectedBg.r) < 0.01 &&
+        Math.abs(bg.g - expectedBg.g) < 0.01 &&
+        Math.abs(bg.b - expectedBg.b) < 0.01
+      expect(bgMatches).toBe(false)
+    }
+  })
+})