@fairyhunter13/opentui-core 0.1.89 → 0.1.91

package/src/examples/full-unicode-demo.ts

@@ -0,0 +1,181 @@
+import {
+  createCliRenderer,
+  RGBA,
+  FrameBufferRenderable,
+  TextRenderable,
+  t,
+  blue,
+  bold,
+  underline,
+  fg,
+  type MouseEvent,
+  type CliRenderer,
+  type RenderContext,
+  BoxRenderable,
+} from "../index.js"
+
+const GRAPHEME_LINES: string[] = [
+  "👩🏽‍💻  👨‍👩‍👧‍👦  🏳️‍🌈  🇺🇸  🇩🇪  🇯🇵  🇮🇳",
+  "a̐éö̲  Z͑͗͛̒͘a̴͈͚̐̓l̷͓̱͉g̶̙̗̓͘o̵͍͈  क्‍ष",
+  "مرحبا  こんにちは  สวัสดี  Здравствуйте",
+  "𝔘𝔫𝔦𝔠𝔬𝔡𝔢  𝒻𝓊𝓁𝓁 𝓌𝒾𝒹𝓉𝒽：ＡＢＣ  ½ ⅞ ⅓",
+]
+
+class DraggableGraphemeBox extends FrameBufferRenderable {
+  private isDragging = false
+  private dragOffsetX = 0
+  private dragOffsetY = 0
+
+  constructor(
+    ctx: RenderContext,
+    id: string,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    bg: RGBA,
+    respectAlpha = true,
+  ) {
+    super(ctx, { id, width, height, position: "absolute", left: x, top: y, respectAlpha })
+
+    // Fill the internal framebuffer with graphemes
+    this.frameBuffer.clear(RGBA.fromInts(0, 0, 0, Math.round(bg.a * 255)))
+
+    const fg = RGBA.fromInts(255, 255, 255, 255)
+    let row = 0
+    for (const line of GRAPHEME_LINES) {
+      if (row >= height) break
+      this.frameBuffer.drawText(line, 1, row, fg, bg)
+      row += 1
+    }
+  }
+
+  protected override onMouseEvent(event: MouseEvent): void {
+    switch (event.type) {
+      case "down":
+        this.isDragging = true
+        this.dragOffsetX = event.x - this.x
+        this.dragOffsetY = event.y - this.y
+        event.stopPropagation()
+        break
+      case "drag":
+        if (this.isDragging) {
+          this.x = event.x - this.dragOffsetX
+          this.y = event.y - this.dragOffsetY
+          event.stopPropagation()
+        }
+        break
+      case "drag-end":
+        if (this.isDragging) {
+          this.isDragging = false
+          event.stopPropagation()
+        }
+        break
+    }
+  }
+}
+
+class GraphemeBackground extends FrameBufferRenderable {
+  constructor(ctx: RenderContext, id: string, width: number, height: number) {
+    super(ctx, { id, width, height, position: "absolute", left: 0, top: 0, respectAlpha: false })
+
+    // Fill entire background with repeating grapheme lines
+    const fg = RGBA.fromInts(220, 220, 220, 255)
+    const bg = RGBA.fromInts(0, 17, 34, 255)
+    this.frameBuffer.clear(RGBA.fromInts(0, 17, 34, 255))
+    for (let y = 0; y < height; y++) {
+      const line = GRAPHEME_LINES[y % GRAPHEME_LINES.length]
+      this.frameBuffer.drawText(line, 2, y, fg, bg)
+    }
+  }
+}
+
+class DraggableStyledText extends TextRenderable {
+  private isDragging = false
+  private dragOffsetX = 0
+  private dragOffsetY = 0
+
+  constructor(ctx: RenderContext, id: string, x: number, y: number) {
+    super(ctx, {
+      id,
+      position: "absolute",
+      left: x,
+      top: y,
+      zIndex: 2,
+      selectable: false,
+    })
+
+    // Styled text content with graphemes
+    const content = t`${bold(blue("Graphemes:"))} 👩🏽‍💻  👨‍👩‍👧‍👦  🏳️‍🌈  🇺🇸  🇩🇪  🇯🇵  🇮🇳
+${underline("Complex:")} a̐éö̲  Z͑͗͛̒͘a̴͈͚̐̓l̷͓̱͉g̶̙̗̓͘o̵͍͈  क्‍ष`
+
+    this.content = content
+    this.fg = RGBA.fromInts(255, 255, 255, 255)
+    this.bg = RGBA.fromInts(0, 0, 0, 0)
+  }
+
+  protected override onMouseEvent(event: MouseEvent): void {
+    switch (event.type) {
+      case "down":
+        this.isDragging = true
+        this.dragOffsetX = event.x - this.x
+        this.dragOffsetY = event.y - this.y
+        event.stopPropagation()
+        break
+      case "drag":
+        if (this.isDragging) {
+          this.x = event.x - this.dragOffsetX
+          this.y = event.y - this.dragOffsetY
+          event.stopPropagation()
+        }
+        break
+      case "drag-end":
+        if (this.isDragging) {
+          this.isDragging = false
+          event.stopPropagation()
+        }
+        break
+    }
+  }
+}
+
+export function run(renderer: CliRenderer): void {
+  renderer.start()
+  renderer.setBackgroundColor(RGBA.fromInts(0, 17, 34, 255))
+
+  const rootGroup = new BoxRenderable(renderer, { id: "full-unicode-root", zIndex: 1 })
+  renderer.root.add(rootGroup)
+
+  const bg = new GraphemeBackground(renderer, "grapheme-bg", renderer.terminalWidth, renderer.terminalHeight)
+  rootGroup.add(bg)
+
+  const box1 = new DraggableGraphemeBox(renderer, "grapheme-box-1", 6, 4, 30, 6, RGBA.fromInts(32, 96, 192, 160), true)
+  const box2 = new DraggableGraphemeBox(
+    renderer,
+    "grapheme-box-2",
+    24,
+    10,
+    28,
+    6,
+    RGBA.fromInts(192, 96, 128, 180),
+    true,
+  )
+  const box3 = new DraggableGraphemeBox(renderer, "grapheme-box-3", 42, 7, 26, 6, RGBA.fromInts(64, 176, 96, 128), true)
+
+  rootGroup.add(box1)
+  rootGroup.add(box2)
+  rootGroup.add(box3)
+
+  // Draggable styled text using TextRenderable (grapheme-aware via TextBuffer)
+  const styledText = new DraggableStyledText(renderer, "draggable-styled-text", 8, 12)
+  rootGroup.add(styledText)
+}
+
+export function destroy(renderer: CliRenderer): void {
+  renderer.root.remove("full-unicode-root")
+}
+
+if (import.meta.main) {
+  const renderer = await createCliRenderer({ exitOnCtrlC: true })
+  run(renderer)
+}