@fairyhunter13/opentui-core 0.1.91 → 0.1.94

package/src/examples/mouse-interaction-demo.ts

@@ -1,428 +0,0 @@
-#!/usr/bin/env bun
-
-import {
-  CliRenderer,
-  createCliRenderer,
-  RGBA,
-  TextAttributes,
-  FrameBufferRenderable,
-  TextRenderable,
-  t,
-  type MouseEvent,
-  OptimizedBuffer,
-  BoxRenderable,
-  createTimeline,
-  engine,
-  Box,
-  type ProxiedVNode,
-  type BoxOptions,
-  Text,
-  type VChild,
-} from "../index.js"
-import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
-
-interface TrailCell {
-  x: number
-  y: number
-  timestamp: number
-  isDrag?: boolean
-}
-
-let demoContainer: MouseInteractionFrameBuffer | null = null
-let titleText: TextRenderable | null = null
-let instructionsText: TextRenderable | null = null
-let draggableBoxes: ProxiedVNode<typeof BoxRenderable>[] = []
-let nextZIndex = 101
-
-function DraggableBox(
-  props: BoxOptions & {
-    x: number
-    y: number
-    width: number
-    height: number
-    color: RGBA
-    label: string
-  },
-  children?: VChild,
-) {
-  const bgColor = RGBA.fromValues(props.color.r, props.color.g, props.color.b, 0.8)
-  const borderColor = RGBA.fromValues(props.color.r * 1.2, props.color.g * 1.2, props.color.b * 1.2, 1.0)
-
-  let isDragging = false
-  let gotText = ""
-  let scrollText = ""
-  let scrollTimestamp = 0
-  let dragOffsetX = 0
-  let dragOffsetY = 0
-  let bounceScale = { value: 1 }
-  let baseWidth: number = props.width
-  let baseHeight: number = props.height
-  let originalBg: RGBA = bgColor
-  let dragBg: RGBA = RGBA.fromValues(props.color.r, props.color.g, props.color.b, 0.3)
-  let originalBorderColor: RGBA = borderColor
-  let dragBorderColor: RGBA = RGBA.fromValues(props.color.r * 1.2, props.color.g * 1.2, props.color.b * 1.2, 0.5)
-
-  return Box(
-    {
-      ...props,
-      position: "absolute",
-      left: props.x,
-      top: props.y,
-      width: props.width,
-      height: props.height,
-      backgroundColor: bgColor,
-      borderColor: borderColor,
-      borderStyle: "rounded",
-      title: props.label,
-      titleAlignment: "center",
-      border: true,
-      zIndex: 100,
-      renderAfter(buffer, deltaTime) {
-        const currentTime = Date.now()
-        if (scrollText && currentTime - scrollTimestamp > 2000) {
-          scrollText = ""
-        }
-
-        const baseCenterX = this.x + Math.floor(this.width / 2)
-        const baseCenterY = this.y + Math.floor(this.height / 2)
-
-        let textLines = 0
-        if (isDragging) textLines++
-        if (scrollText) textLines++
-        if (gotText) textLines += 2
-
-        let currentY = textLines > 1 ? baseCenterY - Math.floor(textLines / 2) : baseCenterY
-
-        if (isDragging) {
-          const centerX = baseCenterX - 2
-          buffer.drawText("drag", centerX, currentY, RGBA.fromInts(64, 224, 208))
-          currentY++
-        }
-
-        if (scrollText) {
-          const age = currentTime - scrollTimestamp
-          const fadeRatio = Math.max(0, 1 - age / 2000)
-          const alpha = Math.round(255 * fadeRatio)
-
-          const centerX = baseCenterX - Math.floor(scrollText.length / 2)
-          buffer.drawText(scrollText, centerX, currentY, RGBA.fromInts(255, 255, 0, alpha))
-          currentY++
-        }
-
-        if (gotText) {
-          const gotX = baseCenterX - 2
-          const gotTextX = baseCenterX - Math.floor(gotText.length / 2)
-          buffer.drawText("got", gotX, currentY, RGBA.fromInts(255, 182, 193))
-          currentY++
-          buffer.drawText(gotText, gotTextX, currentY, RGBA.fromInts(147, 226, 255))
-        }
-      },
-      onMouse(event: MouseEvent): void {
-        switch (event.type) {
-          case "down":
-            gotText = ""
-            isDragging = true
-            dragOffsetX = event.x - this.x
-            dragOffsetY = event.y - this.y
-            this.zIndex = nextZIndex++
-            this.backgroundColor = dragBg
-            this.borderColor = dragBorderColor
-            event.stopPropagation()
-            break
-
-          case "drag-end":
-            if (isDragging) {
-              isDragging = false
-              this.zIndex = 100
-              this.backgroundColor = originalBg
-              this.borderColor = originalBorderColor
-              event.stopPropagation()
-            }
-            break
-
-          case "drag":
-            if (isDragging) {
-              const newX = event.x - dragOffsetX
-              const newY = event.y - dragOffsetY
-
-              const boundedX = Math.max(0, Math.min(newX, this._ctx.width - this.width))
-              const boundedY = Math.max(4, Math.min(newY, this._ctx.height - this.height))
-
-              this.x = boundedX
-              this.y = boundedY
-
-              event.stopPropagation()
-            }
-            break
-
-          case "over":
-            gotText = "over " + (event.source?.id || "")
-            break
-
-          case "out":
-            gotText = "out"
-            break
-
-          case "drop":
-            gotText = event.source?.id || ""
-            const timeline = createTimeline()
-
-            timeline.add(bounceScale, {
-              value: 1.5,
-              duration: 200,
-              ease: "outExpo",
-              onUpdate: (values) => {
-                const scale = values.targets[0].value
-                this.width = Math.round(baseWidth * scale)
-                this.height = Math.round(baseHeight * scale)
-              },
-            })
-
-            timeline.add(
-              bounceScale,
-              {
-                value: 1.0,
-                duration: 400,
-                ease: "outExpo",
-                onUpdate: (values) => {
-                  const scale = values.targets[0].value
-                  this.width = Math.round(baseWidth * scale)
-                  this.height = Math.round(baseHeight * scale)
-                },
-              },
-              200,
-            )
-            break
-
-          case "scroll":
-            if (event.scroll) {
-              scrollText = `scroll ${event.scroll.direction}`
-              scrollTimestamp = Date.now()
-              event.stopPropagation()
-            }
-            break
-        }
-      },
-    },
-    children,
-  )
-}
-
-class MouseInteractionFrameBuffer extends FrameBufferRenderable {
-  private readonly trailCells = new Map<string, TrailCell>()
-  private readonly activatedCells = new Set<string>()
-  private readonly TRAIL_FADE_DURATION = 3000
-
-  private readonly TRAIL_COLOR = RGBA.fromInts(64, 224, 208, 255)
-  private readonly DRAG_COLOR = RGBA.fromInts(255, 165, 0, 255)
-  private readonly ACTIVATED_COLOR = RGBA.fromInts(255, 20, 147, 255)
-  private readonly BACKGROUND_COLOR = RGBA.fromInts(15, 15, 35, 255)
-  private readonly CURSOR_COLOR = RGBA.fromInts(255, 255, 255, 255)
-
-  constructor(id: string, renderer: CliRenderer) {
-    super(renderer, {
-      id,
-      width: renderer.terminalWidth,
-      height: renderer.terminalHeight,
-      zIndex: 0,
-    })
-  }
-
-  protected override renderSelf(buffer: OptimizedBuffer): void {
-    const currentTime = Date.now()
-
-    this.frameBuffer.clear(this.BACKGROUND_COLOR)
-
-    for (const [key, cell] of this.trailCells.entries()) {
-      if (currentTime - cell.timestamp > this.TRAIL_FADE_DURATION) {
-        this.trailCells.delete(key)
-      }
-    }
-
-    for (const [, cell] of this.trailCells.entries()) {
-      const age = currentTime - cell.timestamp
-      const fadeRatio = 1 - age / this.TRAIL_FADE_DURATION
-
-      if (fadeRatio > 0) {
-        const baseColor = cell.isDrag ? this.DRAG_COLOR : this.TRAIL_COLOR
-        const smoothAlpha = fadeRatio
-
-        const fadedColor = RGBA.fromValues(baseColor.r, baseColor.g, baseColor.b, smoothAlpha)
-
-        this.frameBuffer.setCellWithAlphaBlending(cell.x, cell.y, "█", fadedColor, this.BACKGROUND_COLOR)
-      }
-    }
-
-    for (const cellKey of this.activatedCells) {
-      const [x, y] = cellKey.split(",").map(Number)
-
-      this.frameBuffer.drawText("█", x, y, this.ACTIVATED_COLOR, this.BACKGROUND_COLOR)
-    }
-
-    const recentTrails = Array.from(this.trailCells.values())
-      .filter((cell) => currentTime - cell.timestamp < 100)
-      .sort((a, b) => b.timestamp - a.timestamp)
-
-    if (recentTrails.length > 0) {
-      const latest = recentTrails[0]
-      this.frameBuffer.setCellWithAlphaBlending(latest.x, latest.y, "+", this.CURSOR_COLOR, this.BACKGROUND_COLOR)
-    }
-
-    super.renderSelf(buffer)
-  }
-
-  protected override onMouseEvent(event: MouseEvent): void {
-    if (event.propagationStopped) return
-
-    const cellKey = `${event.x},${event.y}`
-
-    switch (event.type) {
-      case "move":
-        this.trailCells.set(cellKey, {
-          x: event.x,
-          y: event.y,
-          timestamp: Date.now(),
-          isDrag: false,
-        })
-        this.requestRender()
-        break
-
-      case "drag":
-        this.trailCells.set(cellKey, {
-          x: event.x,
-          y: event.y,
-          timestamp: Date.now(),
-          isDrag: true,
-        })
-        this.requestRender()
-        break
-
-      case "down":
-        if (this.activatedCells.has(cellKey)) {
-          this.activatedCells.delete(cellKey)
-        } else {
-          this.activatedCells.add(cellKey)
-        }
-        this.requestRender()
-        break
-    }
-  }
-
-  public clearState(): void {
-    this.trailCells.clear()
-    this.activatedCells.clear()
-  }
-}
-
-export function run(renderer: CliRenderer): void {
-  renderer.start()
-  const backgroundColor = RGBA.fromInts(15, 15, 35, 255)
-  renderer.setBackgroundColor(backgroundColor)
-
-  engine.attach(renderer)
-
-  const mainGroup = new BoxRenderable(renderer, {
-    id: "mouse-demo-main-group",
-    zIndex: 10,
-  })
-  renderer.root.add(mainGroup)
-
-  titleText = new TextRenderable(renderer, {
-    id: "mouse_demo_title",
-    content: "Mouse Interaction Demo with Draggable Objects",
-    width: "100%",
-    position: "absolute",
-    left: 2,
-    top: 1,
-    fg: RGBA.fromInts(72, 209, 204),
-    attributes: TextAttributes.BOLD,
-    zIndex: 1000,
-  })
-  mainGroup.add(titleText)
-
-  instructionsText = new TextRenderable(renderer, {
-    id: "mouse_demo_instructions",
-    content: t`Drag boxes around • Move mouse: turquoise trails
-Hold + move: orange drag trails • Click cells: toggle pink
-Scroll on boxes: shows direction • Escape: menu`,
-    position: "absolute",
-    left: 2,
-    top: 2,
-    width: renderer.width - 4,
-    height: 3,
-    fg: RGBA.fromInts(176, 196, 222),
-    zIndex: 1000,
-  })
-  mainGroup.add(instructionsText)
-
-  demoContainer = new MouseInteractionFrameBuffer("mouse-demo-buffer", renderer)
-  mainGroup.add(demoContainer)
-
-  draggableBoxes = [
-    DraggableBox({
-      id: "drag-box-1",
-      x: 10,
-      y: 8,
-      width: 20,
-      height: 10,
-      color: RGBA.fromInts(200, 100, 150),
-      label: "Box 1",
-    }),
-    DraggableBox({
-      id: "drag-box-2",
-      x: 30,
-      y: 12,
-      width: 18,
-      height: 10,
-      color: RGBA.fromInts(100, 200, 150),
-      label: "Box 2",
-    }),
-    DraggableBox({
-      id: "drag-box-3",
-      x: 50,
-      y: 15,
-      width: 20,
-      height: 11,
-      color: RGBA.fromInts(150, 150, 200),
-      label: "Box 3",
-    }),
-    DraggableBox(
-      {
-        id: "drag-box-4",
-        x: 15,
-        y: 20,
-        width: 18,
-        height: 11,
-        color: RGBA.fromInts(200, 200, 100),
-        label: "O hidden",
-        overflow: "hidden",
-      },
-      Text({
-        id: "overflow-hidden-box",
-        content: "This should be cut off to the right",
-        width: 25,
-        height: 25,
-        onMouse: (event: MouseEvent) => {
-          console.log("mouse", event.type)
-        },
-      }),
-    ),
-  ]
-
-  for (const box of draggableBoxes) {
-    mainGroup.add(box)
-  }
-}
-
-export function destroy(renderer: CliRenderer): void {
-  renderer.clearFrameCallbacks()
-  renderer.root.getRenderable("mouse-demo-main-group")?.destroyRecursively()
-}
-
-if (import.meta.main) {
-  const renderer = await createCliRenderer({
-    exitOnCtrlC: true,
-  })
-  run(renderer)
-  setupCommonDemoKeys(renderer)
-}