@fairyhunter13/opentui-core 0.1.88 → 0.1.90

package/src/editor-view.ts

@@ -0,0 +1,284 @@
+import { RGBA } from "./lib/RGBA.js"
+import { resolveRenderLib, type RenderLib, type VisualCursor, type LineInfo } from "./zig.js"
+import { type Pointer } from "bun:ffi"
+import type { EditBuffer } from "./edit-buffer.js"
+import { createExtmarksController } from "./lib/index.js"
+
+export interface Viewport {
+  offsetY: number
+  offsetX: number
+  height: number
+  width: number
+}
+
+export type { VisualCursor }
+
+export class EditorView {
+  private lib: RenderLib
+  private viewPtr: Pointer
+  private editBuffer: EditBuffer
+  private _destroyed: boolean = false
+  private _extmarksController?: any
+  private _textBufferViewPtr?: Pointer
+
+  constructor(lib: RenderLib, ptr: Pointer, editBuffer: EditBuffer) {
+    this.lib = lib
+    this.viewPtr = ptr
+    this.editBuffer = editBuffer
+  }
+
+  static create(editBuffer: EditBuffer, viewportWidth: number, viewportHeight: number): EditorView {
+    const lib = resolveRenderLib()
+    const viewPtr = lib.createEditorView(editBuffer.ptr, viewportWidth, viewportHeight)
+    return new EditorView(lib, viewPtr, editBuffer)
+  }
+
+  private guard(): void {
+    if (this._destroyed) throw new Error("EditorView is destroyed")
+  }
+
+  public get ptr(): Pointer {
+    this.guard()
+    return this.viewPtr
+  }
+
+  public setViewportSize(width: number, height: number): void {
+    this.guard()
+    this.lib.editorViewSetViewportSize(this.viewPtr, width, height)
+  }
+
+  public setViewport(x: number, y: number, width: number, height: number, moveCursor: boolean = true): void {
+    this.guard()
+    this.lib.editorViewSetViewport(this.viewPtr, x, y, width, height, moveCursor)
+  }
+
+  public getViewport(): Viewport {
+    this.guard()
+    return this.lib.editorViewGetViewport(this.viewPtr)
+  }
+
+  public setScrollMargin(margin: number): void {
+    this.guard()
+    this.lib.editorViewSetScrollMargin(this.viewPtr, margin)
+  }
+
+  public setWrapMode(mode: "none" | "char" | "word"): void {
+    this.guard()
+    this.lib.editorViewSetWrapMode(this.viewPtr, mode)
+  }
+
+  public getVirtualLineCount(): number {
+    this.guard()
+    return this.lib.editorViewGetVirtualLineCount(this.viewPtr)
+  }
+
+  public getTotalVirtualLineCount(): number {
+    this.guard()
+    return this.lib.editorViewGetTotalVirtualLineCount(this.viewPtr)
+  }
+
+  public setSelection(start: number, end: number, bgColor?: RGBA, fgColor?: RGBA): void {
+    this.guard()
+    this.lib.editorViewSetSelection(this.viewPtr, start, end, bgColor || null, fgColor || null)
+  }
+
+  public updateSelection(end: number, bgColor?: RGBA, fgColor?: RGBA): void {
+    this.guard()
+    this.lib.editorViewUpdateSelection(this.viewPtr, end, bgColor || null, fgColor || null)
+  }
+
+  public resetSelection(): void {
+    this.guard()
+    this.lib.editorViewResetSelection(this.viewPtr)
+  }
+
+  public getSelection(): { start: number; end: number } | null {
+    this.guard()
+    return this.lib.editorViewGetSelection(this.viewPtr)
+  }
+
+  public hasSelection(): boolean {
+    this.guard()
+    return this.getSelection() !== null
+  }
+
+  public setLocalSelection(
+    anchorX: number,
+    anchorY: number,
+    focusX: number,
+    focusY: number,
+    bgColor?: RGBA,
+    fgColor?: RGBA,
+    updateCursor?: boolean,
+    followCursor?: boolean,
+  ): boolean {
+    this.guard()
+    return this.lib.editorViewSetLocalSelection(
+      this.viewPtr,
+      anchorX,
+      anchorY,
+      focusX,
+      focusY,
+      bgColor || null,
+      fgColor || null,
+      updateCursor ?? false,
+      followCursor ?? false,
+    )
+  }
+
+  public updateLocalSelection(
+    anchorX: number,
+    anchorY: number,
+    focusX: number,
+    focusY: number,
+    bgColor?: RGBA,
+    fgColor?: RGBA,
+    updateCursor?: boolean,
+    followCursor?: boolean,
+  ): boolean {
+    this.guard()
+    return this.lib.editorViewUpdateLocalSelection(
+      this.viewPtr,
+      anchorX,
+      anchorY,
+      focusX,
+      focusY,
+      bgColor || null,
+      fgColor || null,
+      updateCursor ?? false,
+      followCursor ?? false,
+    )
+  }
+
+  public resetLocalSelection(): void {
+    this.guard()
+    this.lib.editorViewResetLocalSelection(this.viewPtr)
+  }
+
+  public getSelectedText(): string {
+    this.guard()
+    // TODO: native can stack alloc all the text and decode will alloc as js string then
+    const maxLength = 1024 * 1024 // 1MB should be enough for most selections
+    const selectedBytes = this.lib.editorViewGetSelectedTextBytes(this.viewPtr, maxLength)
+
+    if (!selectedBytes) return ""
+
+    return this.lib.decoder.decode(selectedBytes)
+  }
+
+  public getCursor(): { row: number; col: number } {
+    this.guard()
+    return this.lib.editorViewGetCursor(this.viewPtr)
+  }
+
+  public getText(): string {
+    this.guard()
+    const maxLength = 1024 * 1024 // 1MB buffer
+    const textBytes = this.lib.editorViewGetText(this.viewPtr, maxLength)
+    if (!textBytes) return ""
+    return this.lib.decoder.decode(textBytes)
+  }
+
+  public getVisualCursor(): VisualCursor {
+    this.guard()
+    return this.lib.editorViewGetVisualCursor(this.viewPtr)
+  }
+
+  public moveUpVisual(): void {
+    this.guard()
+    this.lib.editorViewMoveUpVisual(this.viewPtr)
+  }
+
+  public moveDownVisual(): void {
+    this.guard()
+    this.lib.editorViewMoveDownVisual(this.viewPtr)
+  }
+
+  public deleteSelectedText(): void {
+    this.guard()
+    this.lib.editorViewDeleteSelectedText(this.viewPtr)
+  }
+
+  public setCursorByOffset(offset: number): void {
+    this.guard()
+    this.lib.editorViewSetCursorByOffset(this.viewPtr, offset)
+  }
+
+  public getNextWordBoundary(): VisualCursor {
+    this.guard()
+    return this.lib.editorViewGetNextWordBoundary(this.viewPtr)
+  }
+
+  public getPrevWordBoundary(): VisualCursor {
+    this.guard()
+    return this.lib.editorViewGetPrevWordBoundary(this.viewPtr)
+  }
+
+  public getEOL(): VisualCursor {
+    this.guard()
+    return this.lib.editorViewGetEOL(this.viewPtr)
+  }
+
+  public getVisualSOL(): VisualCursor {
+    this.guard()
+    return this.lib.editorViewGetVisualSOL(this.viewPtr)
+  }
+
+  public getVisualEOL(): VisualCursor {
+    this.guard()
+    return this.lib.editorViewGetVisualEOL(this.viewPtr)
+  }
+
+  public getLineInfo(): LineInfo {
+    this.guard()
+    return this.lib.editorViewGetLineInfo(this.viewPtr)
+  }
+
+  public getLogicalLineInfo(): LineInfo {
+    this.guard()
+    return this.lib.editorViewGetLogicalLineInfo(this.viewPtr)
+  }
+
+  public get extmarks(): any {
+    if (!this._extmarksController) {
+      this._extmarksController = createExtmarksController(this.editBuffer, this)
+    }
+    return this._extmarksController
+  }
+
+  public setPlaceholderStyledText(chunks: { text: string; fg?: RGBA; bg?: RGBA; attributes?: number }[]): void {
+    this.guard()
+    this.lib.editorViewSetPlaceholderStyledText(this.viewPtr, chunks)
+  }
+
+  public setTabIndicator(indicator: string | number): void {
+    this.guard()
+    const codePoint = typeof indicator === "string" ? (indicator.codePointAt(0) ?? 0) : indicator
+    this.lib.editorViewSetTabIndicator(this.viewPtr, codePoint)
+  }
+
+  public setTabIndicatorColor(color: RGBA): void {
+    this.guard()
+    this.lib.editorViewSetTabIndicatorColor(this.viewPtr, color)
+  }
+
+  public measureForDimensions(width: number, height: number): { lineCount: number; widthColsMax: number } | null {
+    this.guard()
+    if (!this._textBufferViewPtr) {
+      this._textBufferViewPtr = this.lib.editorViewGetTextBufferView(this.viewPtr)
+    }
+    return this.lib.textBufferViewMeasureForDimensions(this._textBufferViewPtr, width, height)
+  }
+
+  public destroy(): void {
+    if (this._destroyed) return
+
+    if (this._extmarksController) {
+      this._extmarksController.destroy()
+      this._extmarksController = undefined
+    }
+
+    this._destroyed = true
+    this.lib.destroyEditorView(this.viewPtr)
+  }
+}

package/src/examples/ascii-font-selection-demo.ts

@@ -0,0 +1,245 @@
+#!/usr/bin/env bun
+
+import { CliRenderer, createCliRenderer, BoxRenderable, TextRenderable, RGBA } from "../index.js"
+import { ASCIIFontRenderable } from "../renderables/ASCIIFont.js"
+import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
+
+let mainContainer: BoxRenderable | null = null
+let fontGroup: BoxRenderable | null = null
+let statusBox: BoxRenderable | null = null
+let statusText: TextRenderable | null = null
+let selectionStartText: TextRenderable | null = null
+let selectionMiddleText: TextRenderable | null = null
+let selectionEndText: TextRenderable | null = null
+let debugText: TextRenderable | null = null
+let allFontRenderables: ASCIIFontRenderable[] = []
+
+export function run(renderer: CliRenderer): void {
+  renderer.setBackgroundColor("#0d1117")
+
+  mainContainer = new BoxRenderable(renderer, {
+    id: "mainContainer",
+    position: "absolute",
+    left: 1,
+    top: 1,
+    width: 95,
+    height: 30,
+    backgroundColor: "#161b22",
+    zIndex: 1,
+    borderColor: "#50565d",
+    title: "ASCII Font Selection Demo",
+    titleAlignment: "center",
+    border: true,
+  })
+  renderer.root.add(mainContainer)
+
+  fontGroup = new BoxRenderable(renderer, {
+    id: "fontGroup",
+    position: "absolute",
+    left: 2,
+    top: 2,
+    zIndex: 10,
+  })
+  mainContainer.add(fontGroup)
+
+  const tinyFont = new ASCIIFontRenderable(renderer, {
+    id: "tinyFont",
+    text: "TINY FONT DEMO",
+    font: "tiny",
+    color: RGBA.fromInts(255, 255, 0, 255),
+    backgroundColor: RGBA.fromInts(0, 0, 40, 255),
+    selectionBg: "#4a5568",
+    selectionFg: "#ffffff",
+    zIndex: 20,
+  })
+  fontGroup.add(tinyFont)
+  allFontRenderables.push(tinyFont)
+
+  const blockFont = new ASCIIFontRenderable(renderer, {
+    id: "blockFont",
+    text: "opentui",
+    font: "block",
+    color: [RGBA.fromInts(255, 100, 100, 255), RGBA.fromInts(100, 255, 100, 255)],
+    backgroundColor: RGBA.fromInts(0, 0, 40, 255),
+    selectionBg: "#4a5568",
+    selectionFg: "#ffffff",
+    zIndex: 20,
+  })
+  fontGroup.add(blockFont)
+  allFontRenderables.push(blockFont)
+
+  const shadeFont = new ASCIIFontRenderable(renderer, {
+    id: "shadeFont",
+    text: "SHADE",
+    font: "shade",
+    color: [RGBA.fromInts(255, 200, 100, 255), RGBA.fromInts(100, 150, 200, 255)],
+    backgroundColor: RGBA.fromInts(0, 0, 40, 255),
+    selectionBg: "#4a5568",
+    selectionFg: "#ffffff",
+    zIndex: 20,
+  })
+  fontGroup.add(shadeFont)
+  allFontRenderables.push(shadeFont)
+
+  const slickFont = new ASCIIFontRenderable(renderer, {
+    id: "slickFont",
+    text: "SLICK",
+    font: "slick",
+    color: [RGBA.fromInts(100, 255, 100, 255), RGBA.fromInts(255, 100, 255, 255)],
+    backgroundColor: RGBA.fromInts(0, 0, 40, 255),
+    selectionBg: "#4a5568",
+    selectionFg: "#ffffff",
+    zIndex: 20,
+  })
+  fontGroup.add(slickFont)
+  allFontRenderables.push(slickFont)
+
+  const instructions = new TextRenderable(renderer, {
+    id: "ascii-font-instructions",
+    content: "Click and drag to select text across any ASCII font elements. Press 'C' to clear selection.",
+    left: 2,
+    top: 26,
+    zIndex: 2,
+    fg: "#f0f6fc",
+  })
+  mainContainer.add(instructions)
+
+  statusBox = new BoxRenderable(renderer, {
+    id: "statusBox",
+    position: "absolute",
+    left: 1,
+    top: 32,
+    width: 95,
+    height: 10,
+    backgroundColor: "#0d1117",
+    borderColor: "#50565d",
+    title: "Selection Status",
+    titleAlignment: "left",
+    border: true,
+  })
+  renderer.root.add(statusBox)
+
+  statusText = new TextRenderable(renderer, {
+    id: "statusText",
+    content: "No selection - try selecting across different ASCII fonts",
+    fg: "#f0f6fc",
+  })
+  statusBox.add(statusText)
+
+  selectionStartText = new TextRenderable(renderer, {
+    id: "selectionStartText",
+    content: "",
+    left: 3,
+    zIndex: 2,
+    fg: "#7dd3fc",
+  })
+  statusBox.add(selectionStartText)
+
+  selectionMiddleText = new TextRenderable(renderer, {
+    id: "selectionMiddleText",
+    content: "",
+    left: 3,
+    zIndex: 2,
+    fg: "#94a3b8",
+  })
+  statusBox.add(selectionMiddleText)
+
+  selectionEndText = new TextRenderable(renderer, {
+    id: "selectionEndText",
+    content: "",
+    left: 3,
+    zIndex: 2,
+    fg: "#7dd3fc",
+  })
+  statusBox.add(selectionEndText)
+
+  debugText = new TextRenderable(renderer, {
+    id: "debugText",
+    content: "",
+    left: 3,
+    zIndex: 2,
+    fg: "#e6edf3",
+  })
+  statusBox.add(debugText)
+
+  renderer.on("selection", (selection) => {
+    if (selection && statusText && debugText && selectionStartText && selectionMiddleText && selectionEndText) {
+      const selectedText = selection.getSelectedText()
+
+      const selectedCount = allFontRenderables.filter((r) => r.hasSelection()).length
+      const container = renderer.getSelectionContainer()
+      const containerInfo = container ? `Container: ${container.id}` : "Container: none"
+      debugText.content = `Selected fonts: ${selectedCount}/${allFontRenderables.length} | ${containerInfo}`
+
+      if (selectedText) {
+        const lines = selectedText.split("\n")
+        const totalLength = selectedText.length
+
+        if (lines.length > 1) {
+          statusText.content = `Selected ${lines.length} lines (${totalLength} chars):`
+          selectionStartText.content = lines[0]
+          selectionMiddleText.content = "..."
+          selectionEndText.content = lines[lines.length - 1]
+        } else if (selectedText.length > 60) {
+          statusText.content = `Selected ${totalLength} chars:`
+          selectionStartText.content = selectedText.substring(0, 30)
+          selectionMiddleText.content = "..."
+          selectionEndText.content = selectedText.substring(selectedText.length - 30)
+        } else {
+          statusText.content = `Selected ${totalLength} chars:`
+          selectionStartText.content = `"${selectedText}"`
+          selectionMiddleText.content = ""
+          selectionEndText.content = ""
+        }
+      } else {
+        statusText.content = "Empty selection"
+        selectionStartText.content = ""
+        selectionMiddleText.content = ""
+        selectionEndText.content = ""
+      }
+    }
+  })
+
+  renderer.keyInput.on("keypress", (event) => {
+    const key = event.sequence
+    if (key === "c" || key === "C") {
+      renderer.clearSelection()
+      if (statusText && debugText && selectionStartText && selectionMiddleText && selectionEndText) {
+        statusText.content = "Selection cleared"
+        selectionStartText.content = ""
+        selectionMiddleText.content = ""
+        selectionEndText.content = ""
+        debugText.content = ""
+      }
+    }
+  })
+}
+
+export function destroy(renderer: CliRenderer): void {
+  allFontRenderables = []
+
+  fontGroup?.destroyRecursively()
+  mainContainer?.destroyRecursively()
+  statusBox?.destroyRecursively()
+
+  fontGroup = null
+  mainContainer = null
+  statusBox = null
+  statusText = null
+  selectionStartText = null
+  selectionMiddleText = null
+  selectionEndText = null
+  debugText = null
+
+  renderer.clearSelection()
+}
+
+if (import.meta.main) {
+  const renderer = await createCliRenderer({
+    targetFps: 30,
+    enableMouseMovement: true,
+    exitOnCtrlC: true,
+  })
+  run(renderer)
+  setupCommonDemoKeys(renderer)
+}