@fairyhunter13/opentui-core 0.1.91 → 0.1.92

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

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

@@ -1,243 +0,0 @@
-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 override focus(): void {
-    this.tabSelectElement.focus()
-    this.emit(RenderableEvents.FOCUSED)
-  }
-
-  public override blur(): void {
-    this.tabSelectElement.blur()
-    this.emit(RenderableEvents.BLURRED)
-  }
-
-  public override get focused(): boolean {
-    return this.tabSelectElement.focused
-  }
-
-  public override 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 override 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 override 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

@@ -1,290 +0,0 @@
-#!/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)
-}