@fairyhunter13/opentui-core 0.1.88 → 0.1.90

package/src/examples/lib/standalone-keys.ts

@@ -0,0 +1,25 @@
+import { resolveRenderLib, type CliRenderer, type KeyEvent } from "../../index.js"
+
+export function setupCommonDemoKeys(renderer: CliRenderer) {
+  renderer.keyInput.on("keypress", (key: KeyEvent) => {
+    if (key.name === "`" || key.name === '"') {
+      renderer.console.toggle()
+    } else if (key.name === ".") {
+      renderer.toggleDebugOverlay()
+    } else if (key.name === "g" && key.ctrl) {
+      console.log("dumping hit grid")
+      renderer.dumpHitGrid()
+    } else if (key.name === "l" && key.shift) {
+      renderer.start()
+    } else if (key.name === "s" && key.shift) {
+      renderer.stop()
+    } else if (key.name === "a" && key.shift) {
+      renderer.auto()
+    } else if (key.name === "a" && key.ctrl) {
+      const lib = resolveRenderLib()
+      const rawBytes = lib.getArenaAllocatedBytes()
+      const formattedBytes = `${(rawBytes / 1024 / 1024).toFixed(2)} MB`
+      console.log("arena allocated bytes:", formattedBytes)
+    }
+  })
+}

package/src/examples/lib/tab-controller.ts

@@ -0,0 +1,243 @@
+import { Renderable, type RenderableOptions, RenderableEvents } from "../../Renderable.js"
+import { OptimizedBuffer } from "../../buffer.js"
+import { BoxRenderable } from "../../renderables/index.js"
+import { TabSelectRenderable, TabSelectRenderableEvents } from "../../renderables/TabSelect.js"
+import type { CliRenderer, TabSelectOption } from "../../index.js"
+import { parseColor, type ColorInput } from "../../lib/RGBA.js"
+
+export interface TabObject {
+  title: string
+  init(tabGroup: Renderable): void
+  update?(deltaMs: number, tabGroup: Renderable): void
+  show?(): void
+  hide?(): void
+}
+
+interface Tab {
+  title: string
+  tabObject: TabObject
+  group: Renderable
+  initialized: boolean
+}
+
+export interface TabControllerOptions extends RenderableOptions<TabControllerRenderable> {
+  backgroundColor?: ColorInput
+  textColor?: ColorInput
+  tabBarHeight?: number
+  tabBarBackgroundColor?: ColorInput
+  selectedBackgroundColor?: ColorInput
+  selectedTextColor?: ColorInput
+  selectedDescriptionColor?: ColorInput
+  showDescription?: boolean
+  showUnderline?: boolean
+  showScrollArrows?: boolean
+}
+
+export enum TabControllerEvents {
+  TAB_CHANGED = "tabChanged",
+}
+
+export class TabControllerRenderable extends Renderable {
+  public tabs: Tab[] = []
+  private currentTabIndex = 0
+  private tabSelectElement: TabSelectRenderable
+  private tabBarHeight: number
+  private frameCallback: ((deltaMs: number) => Promise<void>) | null = null
+
+  constructor(
+    id: string,
+    private renderer: CliRenderer,
+    options: TabControllerOptions,
+  ) {
+    super(renderer, { ...options, id, buffered: options.backgroundColor ? true : false })
+
+    this.tabBarHeight = options.tabBarHeight || 4
+
+    this.tabSelectElement = new TabSelectRenderable(renderer, {
+      id: `${id}-tabs`,
+      width: "100%",
+      height: this.tabBarHeight,
+      options: [],
+      zIndex: this.zIndex + 100,
+      selectedBackgroundColor: options.selectedBackgroundColor || "#333333",
+      selectedTextColor: options.selectedTextColor || "#FFFF00",
+      textColor: parseColor(options.textColor || "#FFFFFF"),
+      selectedDescriptionColor: options.selectedDescriptionColor || "#FFFFFF",
+      backgroundColor: options.tabBarBackgroundColor || options.backgroundColor || "transparent",
+      showDescription: options.showDescription ?? true,
+      showUnderline: options.showUnderline ?? true,
+      showScrollArrows: options.showScrollArrows ?? true,
+    })
+
+    this.tabSelectElement.on(TabSelectRenderableEvents.SELECTION_CHANGED, (index: number) => {
+      this.switchToTab(index)
+    })
+
+    this.add(this.tabSelectElement)
+
+    this.frameCallback = async (deltaMs) => {
+      this.update(deltaMs)
+    }
+    this.renderer.setFrameCallback(this.frameCallback)
+  }
+
+  public addTab(tabObject: TabObject): Tab {
+    const tabGroup = new BoxRenderable(this.ctx, {
+      id: `${this.id}-tab-${this.tabs.length}`,
+      left: 0,
+      top: this.tabBarHeight,
+      zIndex: this.zIndex + 50,
+      visible: false,
+      width: "100%",
+      height: 1,
+    })
+
+    this.add(tabGroup)
+
+    const tab: Tab = {
+      title: tabObject.title,
+      tabObject,
+      group: tabGroup,
+      initialized: false,
+    }
+    this.tabs.push(tab)
+
+    this.updateTabSelectOptions()
+    return tab
+  }
+
+  private updateTabSelectOptions(): void {
+    const options: TabSelectOption[] = this.tabs.map((tab, index) => ({
+      name: tab.title,
+      description: `Tab ${index + 1}/${this.tabs.length} - Use Left/Right arrows to navigate | Press Ctrl+C to exit | D: toggle debug`,
+      value: index,
+    }))
+
+    this.tabSelectElement.setOptions(options)
+
+    if (this.tabs.length === 1) {
+      const firstTab = this.getCurrentTab()
+      firstTab.group.visible = true
+      this.initializeTab(firstTab)
+
+      if (firstTab.tabObject.show) {
+        firstTab.tabObject.show()
+      }
+    }
+  }
+
+  private initializeTab(tab: Tab): void {
+    if (!tab.initialized) {
+      tab.tabObject.init(tab.group)
+      tab.initialized = true
+    }
+  }
+
+  public getCurrentTab(): Tab {
+    return this.tabs[this.currentTabIndex]
+  }
+
+  public getCurrentTabGroup(): Renderable {
+    return this.getCurrentTab().group
+  }
+
+  public switchToTab(index: number): void {
+    if (index < 0 || index >= this.tabs.length) return
+    if (index === this.currentTabIndex) return
+
+    const currentTab = this.getCurrentTab()
+    currentTab.group.visible = false
+    if (currentTab.tabObject.hide) {
+      currentTab.tabObject.hide()
+    }
+
+    this.currentTabIndex = index
+    this.tabSelectElement.setSelectedIndex(index)
+
+    const newTab = this.getCurrentTab()
+    newTab.group.visible = true
+
+    this.initializeTab(newTab)
+
+    if (newTab.tabObject.show) {
+      newTab.tabObject.show()
+    }
+
+    this.emit(TabControllerEvents.TAB_CHANGED, index, newTab)
+  }
+
+  public nextTab(): void {
+    this.switchToTab((this.currentTabIndex + 1) % this.tabs.length)
+  }
+
+  public previousTab(): void {
+    this.switchToTab((this.currentTabIndex - 1 + this.tabs.length) % this.tabs.length)
+  }
+
+  public update(deltaMs: number): void {
+    const currentTab = this.getCurrentTab()
+    if (currentTab && currentTab.tabObject.update) {
+      currentTab.tabObject.update(deltaMs, currentTab.group)
+    }
+  }
+
+  public getCurrentTabIndex(): number {
+    return this.currentTabIndex
+  }
+
+  public getTabSelectElement(): TabSelectRenderable {
+    return this.tabSelectElement
+  }
+
+  public focus(): void {
+    this.tabSelectElement.focus()
+    this.emit(RenderableEvents.FOCUSED)
+  }
+
+  public blur(): void {
+    this.tabSelectElement.blur()
+    this.emit(RenderableEvents.BLURRED)
+  }
+
+  public get focused(): boolean {
+    return this.tabSelectElement.focused
+  }
+
+  public onResize(width: number, height: number): void {
+    if (this.width === width && this.height === height) return
+
+    this.width = width
+    this.height = height
+
+    this.tabSelectElement.width = width
+    this.tabSelectElement.height = this.tabBarHeight
+
+    for (const tab of this.tabs) {
+      tab.group.y = this.tabBarHeight
+      tab.group.width = width
+      tab.group.height = height - this.tabBarHeight
+    }
+  }
+
+  protected renderSelf(buffer: OptimizedBuffer, deltaTime: number): void {
+    // TabController doesn't render content directly, it manages tab selection and tab content
+    // The tab select element and tab content groups handle their own rendering
+  }
+
+  protected destroySelf(): void {
+    this.blur()
+
+    if (this.frameCallback) {
+      this.renderer.removeFrameCallback(this.frameCallback)
+      this.frameCallback = null
+    }
+
+    for (const tab of this.tabs) {
+      tab.group.destroy()
+    }
+
+    this.tabSelectElement.destroy()
+
+    this.removeAllListeners()
+  }
+}

package/src/examples/lights-phong-demo.ts

@@ -0,0 +1,290 @@
+#!/usr/bin/env bun
+
+import {
+  CliRenderer,
+  createCliRenderer,
+  RGBA,
+  BoxRenderable,
+  TextRenderable,
+  FrameBufferRenderable,
+  type KeyEvent,
+} from "../index.js"
+import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
+import { TextureUtils } from "../3d/TextureUtils.js"
+import {
+  Scene as ThreeScene,
+  Mesh as ThreeMesh,
+  PerspectiveCamera,
+  PointLight as ThreePointLight,
+  SphereGeometry,
+  RepeatWrapping,
+  DataTexture,
+} from "three"
+import { MeshPhongNodeMaterial } from "three/webgpu"
+import { lights } from "three/tsl"
+import { color, fog, rangeFogFactor, checker, uv, mix, texture, normalMap } from "three/tsl"
+import { TeapotGeometry } from "three/addons/geometries/TeapotGeometry.js"
+
+// @ts-ignore
+import normalTexPath from "./assets/Water_2_M_Normal.jpg" with { type: "image/jpeg" }
+// @ts-ignore
+import alphaTexPath from "./assets/roughness_map.jpg" with { type: "image/jpeg" }
+import { ThreeCliRenderer } from "../3d.js"
+
+interface PhongDemoState {
+  camera: PerspectiveCamera
+  sceneRoot: ThreeScene
+  engine: ThreeCliRenderer
+  light1: ThreePointLight
+  light2: ThreePointLight
+  light3: ThreePointLight
+  light4: ThreePointLight
+  normalMapTexture: DataTexture | null
+  alphaTexture: DataTexture | null
+  parentContainer: BoxRenderable
+  titleText: TextRenderable
+  statusText: TextRenderable
+  controlsText: TextRenderable
+  cleanup: () => void
+}
+
+let demoState: PhongDemoState | null = null
+
+export async function run(renderer: CliRenderer): Promise<void> {
+  renderer.start()
+  if (demoState) {
+    destroy(renderer)
+  }
+
+  const WIDTH = renderer.terminalWidth
+  const HEIGHT = renderer.terminalHeight
+
+  const parentContainer = new BoxRenderable(renderer, {
+    id: "phong-container",
+    zIndex: 15,
+  })
+  renderer.root.add(parentContainer)
+
+  const framebufferRenderable = new FrameBufferRenderable(renderer, {
+    id: "phong-main",
+    width: WIDTH,
+    height: HEIGHT,
+    zIndex: 10,
+  })
+  renderer.root.add(framebufferRenderable)
+  const { frameBuffer: framebuffer } = framebufferRenderable
+
+  const engine = new ThreeCliRenderer(renderer, {
+    width: WIDTH,
+    height: HEIGHT,
+    focalLength: 8,
+    backgroundColor: RGBA.fromValues(0.0, 0.0, 0.0, 1.0),
+  })
+  await engine.init()
+
+  const camera = new PerspectiveCamera(50, engine.aspectRatio, 0.01, 100)
+  camera.position.z = 7
+
+  const sceneRoot = new ThreeScene()
+  sceneRoot.fogNode = fog(color(0xff00ff), rangeFogFactor(12, 30))
+
+  const sphereGeometry = new SphereGeometry(0.1, 16, 8)
+
+  const normalMapTexture = await TextureUtils.fromFile(normalTexPath)
+  const alphaTexture = await TextureUtils.fromFile(alphaTexPath)
+
+  if (normalMapTexture) {
+    normalMapTexture.wrapS = RepeatWrapping
+    normalMapTexture.wrapT = RepeatWrapping
+  }
+  if (alphaTexture) {
+    alphaTexture.wrapS = RepeatWrapping
+    alphaTexture.wrapT = RepeatWrapping
+  }
+
+  const addLight = (hexColor: number, power = 1700, distance = 100) => {
+    const material = new MeshPhongNodeMaterial()
+    material.colorNode = color(hexColor)
+    material.lights = false
+
+    const mesh = new ThreeMesh(sphereGeometry, material)
+
+    const light = new ThreePointLight(hexColor, 1, distance)
+    light.power = power
+    light.decay = 2
+    light.add(mesh)
+
+    sceneRoot.add(light)
+    return light
+  }
+
+  const light1 = addLight(0x0040ff)
+  const light2 = addLight(0xffffff)
+  const light3 = addLight(0x80ff80)
+  const light4 = addLight(0xffaa00)
+
+  const blueLightsNode = lights([light1])
+  const whiteLightsNode = lights([light2])
+  const allLightsNode = lights([light1, light2, light3, light4])
+
+  const geometryTeapot = new TeapotGeometry(0.8, 18)
+
+  const leftMaterial = new MeshPhongNodeMaterial({ color: 0x555555 })
+  leftMaterial.lightsNode = blueLightsNode
+  if (alphaTexture) {
+    leftMaterial.specularNode = texture(alphaTexture)
+  }
+  const leftObject = new ThreeMesh(geometryTeapot, leftMaterial)
+  leftObject.position.x = -3
+  sceneRoot.add(leftObject)
+
+  const centerMaterial = new MeshPhongNodeMaterial({ color: 0x555555 })
+  if (normalMapTexture) {
+    centerMaterial.normalNode = normalMap(texture(normalMapTexture))
+  }
+  centerMaterial.shininess = 80
+  centerMaterial.lightsNode = allLightsNode
+  const centerObject = new ThreeMesh(geometryTeapot, centerMaterial)
+  sceneRoot.add(centerObject)
+
+  const rightMaterial = new MeshPhongNodeMaterial({ color: 0x555555 })
+  rightMaterial.lightsNode = whiteLightsNode
+  rightMaterial.specularNode = mix(color(0x0000ff), color(0xff0000), checker(uv().mul(5)))
+  rightMaterial.shininess = 90
+  const rightObject = new ThreeMesh(geometryTeapot, rightMaterial)
+  rightObject.position.x = 3
+  sceneRoot.add(rightObject)
+
+  leftObject.rotation.y = centerObject.rotation.y = rightObject.rotation.y = Math.PI * -0.5
+  leftObject.position.y = centerObject.position.y = rightObject.position.y = -1
+
+  engine.setActiveCamera(camera)
+  sceneRoot.add(camera)
+
+  const titleText = new TextRenderable(renderer, {
+    id: "phong-title",
+    content: "WebGPU Phong Lights Demo",
+    position: "absolute",
+    fg: "#FFFFFF",
+    zIndex: 20,
+  })
+  parentContainer.add(titleText)
+
+  const statusText = new TextRenderable(renderer, {
+    id: "phong-status",
+    content: "Ready.",
+    position: "absolute",
+    top: 1,
+    fg: "#FFFFFF",
+    zIndex: 20,
+  })
+  parentContainer.add(statusText)
+
+  const controlsText = new TextRenderable(renderer, {
+    id: "phong-controls",
+    content: "WASD: Move | QE: Rotate | ZX: Zoom | R: Reset | U: Super Sample",
+    position: "absolute",
+    top: HEIGHT - 2,
+    fg: "#FFFFFF",
+    zIndex: 20,
+  })
+  parentContainer.add(controlsText)
+
+  const resizeHandler = (width: number, height: number) => {
+    framebuffer.resize(width, height)
+    engine.setSize(width, height)
+    camera.aspect = engine.aspectRatio
+    camera.updateProjectionMatrix()
+    controlsText.y = height - 2
+  }
+
+  const inputHandler = (key: KeyEvent) => {
+    if (key.name === "w") camera.translateY(0.5)
+    if (key.name === "s") camera.translateY(-0.5)
+    if (key.name === "a") camera.translateX(-0.5)
+    if (key.name === "d") camera.translateX(0.5)
+    if (key.name === "q") camera.rotateY(0.1)
+    if (key.name === "e") camera.rotateY(-0.1)
+    if (key.name === "z") camera.translateZ(1)
+    if (key.name === "x") camera.translateZ(-1)
+    if (key.name === "r") {
+      camera.position.set(0, 0, 7)
+      camera.rotation.set(0, 0, 0)
+      camera.quaternion.set(0, 0, 0, 1)
+      camera.up.set(0, 1, 0)
+      camera.lookAt(0, 0, 0)
+    }
+    if (key.name === "u") {
+      engine.toggleSuperSampling()
+    }
+  }
+
+  const animate = async (deltaTime: number) => {
+    const time = performance.now() / 1000
+    const lightTime = time * 0.5
+
+    light1.position.x = Math.sin(lightTime * 0.7) * 3
+    light1.position.y = Math.cos(lightTime * 0.5) * 4
+    light1.position.z = Math.cos(lightTime * 0.3) * 3
+
+    light2.position.x = Math.cos(lightTime * 0.3) * 3
+    light2.position.y = Math.sin(lightTime * 0.5) * 4
+    light2.position.z = Math.sin(lightTime * 0.7) * 3
+
+    light3.position.x = Math.sin(lightTime * 0.7) * 3
+    light3.position.y = Math.cos(lightTime * 0.3) * 4
+    light3.position.z = Math.sin(lightTime * 0.5) * 3
+
+    light4.position.x = Math.sin(lightTime * 0.3) * 3
+    light4.position.y = Math.cos(lightTime * 0.7) * 4
+    light4.position.z = Math.sin(lightTime * 0.5) * 3
+
+    engine.drawScene(sceneRoot, framebuffer, deltaTime)
+  }
+
+  renderer.on("resize", resizeHandler)
+  renderer.keyInput.on("keypress", inputHandler)
+  renderer.setFrameCallback(animate)
+
+  const cleanup = () => {
+    renderer.off("resize", resizeHandler)
+    renderer.keyInput.off("keypress", inputHandler)
+    renderer.removeFrameCallback(animate)
+    engine.destroy()
+  }
+
+  demoState = {
+    camera,
+    sceneRoot,
+    engine,
+    light1,
+    light2,
+    light3,
+    light4,
+    normalMapTexture,
+    alphaTexture,
+    parentContainer,
+    titleText,
+    statusText,
+    controlsText,
+    cleanup,
+  }
+}
+
+export function destroy(renderer: CliRenderer): void {
+  if (demoState) {
+    demoState.cleanup()
+    renderer.root.remove("phong-main")
+    renderer.root.remove("phong-container")
+    demoState = null
+  }
+}
+
+if (import.meta.main) {
+  const renderer = await createCliRenderer({
+    exitOnCtrlC: true,
+    targetFps: 60,
+  })
+  await run(renderer)
+  setupCommonDemoKeys(renderer)
+}