@fairyhunter13/opentui-core 0.1.90 → 0.1.92

package/src/examples/nested-zindex-demo.ts

@@ -1,357 +0,0 @@
-import { TextAttributes, createCliRenderer, TextRenderable, BoxRenderable, type KeyEvent } from "../index.js"
-import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
-import type { CliRenderer } from "../index.js"
-
-let globalKeyboardHandler: ((key: KeyEvent) => void) | null = null
-let zIndexPhase = 0
-let animationSpeed = 2000
-
-export function run(renderer: CliRenderer): void {
-  renderer.start()
-  renderer.setBackgroundColor("#001122")
-
-  const parentContainer = new BoxRenderable(renderer, {
-    id: "parent-container",
-    zIndex: 10,
-  })
-  renderer.root.add(parentContainer)
-
-  const title = new TextRenderable(renderer, {
-    id: "main-title",
-    content: "Nested Render Objects & Z-Index Demo",
-    position: "absolute",
-    left: 10,
-    top: 2,
-    fg: "#FFFF00",
-    attributes: TextAttributes.BOLD | TextAttributes.UNDERLINE,
-    zIndex: 1000,
-  })
-  parentContainer.add(title)
-
-  // Parent group with high z-index
-  const parentGroupA = new BoxRenderable(renderer, {
-    id: "parent-group-a",
-    position: "absolute",
-    zIndex: 100,
-    visible: true,
-  })
-  parentContainer.add(parentGroupA)
-
-  // Parent group with medium z-index
-  const parentGroupB = new BoxRenderable(renderer, {
-    id: "parent-group-b",
-    position: "absolute",
-    zIndex: 50,
-    visible: true,
-  })
-  parentContainer.add(parentGroupB)
-
-  // Parent group with low z-index
-  const parentGroupC = new BoxRenderable(renderer, {
-    id: "parent-group-c",
-    position: "absolute",
-    zIndex: 20,
-    visible: true,
-  })
-  parentContainer.add(parentGroupC)
-
-  // Group A - High Z-Index Parent (z=100)
-  const boxA1 = new BoxRenderable(renderer, {
-    id: "box-a1",
-    position: "absolute",
-    left: 15,
-    top: 8,
-    width: 25,
-    height: 6,
-    backgroundColor: "#220044",
-    zIndex: 10,
-    borderStyle: "single",
-    borderColor: "#FF44FF",
-    title: "Parent A (z=100)",
-    titleAlignment: "center",
-    border: true,
-  })
-  parentGroupA.add(boxA1)
-
-  const textA1 = new TextRenderable(renderer, {
-    id: "text-a1",
-    content: "Child A1 (z=10)",
-    position: "absolute",
-    left: 17,
-    top: 10,
-    fg: "#FF44FF",
-    attributes: TextAttributes.BOLD,
-    zIndex: 10,
-  })
-  parentGroupA.add(textA1)
-
-  const boxA2 = new BoxRenderable(renderer, {
-    id: "box-a2",
-    position: "absolute",
-    left: 20,
-    top: 11,
-    width: 15,
-    height: 4,
-    backgroundColor: "#440044",
-    zIndex: 5,
-    borderStyle: "single",
-    borderColor: "#FF88FF",
-    border: true,
-  })
-  parentGroupA.add(boxA2)
-
-  const textA2 = new TextRenderable(renderer, {
-    id: "text-a2",
-    content: "Child A2 (z=5)",
-    position: "absolute",
-    left: 22,
-    top: 12,
-    fg: "#FF88FF",
-    zIndex: 5,
-  })
-  parentGroupA.add(textA2)
-
-  // Group B - Medium Z-Index Parent (z=50)
-  const boxB1 = new BoxRenderable(renderer, {
-    id: "box-b1",
-    position: "absolute",
-    left: 30,
-    top: 12,
-    width: 25,
-    height: 6,
-    backgroundColor: "#004422",
-    zIndex: 20,
-    borderStyle: "double",
-    borderColor: "#44FF44",
-    title: "Parent B (z=50)",
-    titleAlignment: "center",
-    border: true,
-  })
-  parentGroupB.add(boxB1)
-
-  const textB1 = new TextRenderable(renderer, {
-    id: "text-b1",
-    content: "Child B1 (z=20)",
-    position: "absolute",
-    left: 32,
-    top: 14,
-    fg: "#44FF44",
-    attributes: TextAttributes.BOLD,
-    zIndex: 20,
-  })
-  parentGroupB.add(textB1)
-
-  const boxB2 = new BoxRenderable(renderer, {
-    id: "box-b2",
-    position: "absolute",
-    left: 35,
-    top: 15,
-    width: 15,
-    height: 4,
-    backgroundColor: "#004400",
-    zIndex: 15,
-    borderStyle: "single",
-    borderColor: "#88FF88",
-    border: true,
-  })
-  parentGroupB.add(boxB2)
-
-  const textB2 = new TextRenderable(renderer, {
-    id: "text-b2",
-    content: "Child B2 (z=15)",
-    position: "absolute",
-    left: 37,
-    top: 16,
-    fg: "#88FF88",
-    zIndex: 15,
-  })
-  parentGroupB.add(textB2)
-
-  // Group C - Low Z-Index Parent (z=20)
-  const boxC1 = new BoxRenderable(renderer, {
-    id: "box-c1",
-    position: "absolute",
-    left: 45,
-    top: 16,
-    width: 25,
-    height: 6,
-    backgroundColor: "#442200",
-    zIndex: 30,
-    borderStyle: "rounded",
-    borderColor: "#FFFF44",
-    title: "Parent C (z=20)",
-    titleAlignment: "center",
-    border: true,
-  })
-  parentGroupC.add(boxC1)
-
-  const textC1 = new TextRenderable(renderer, {
-    id: "text-c1",
-    content: "Child C1 (z=30)",
-    position: "absolute",
-    left: 47,
-    top: 18,
-    fg: "#FFFF44",
-    attributes: TextAttributes.BOLD,
-    zIndex: 30,
-  })
-  parentGroupC.add(textC1)
-
-  const boxC2 = new BoxRenderable(renderer, {
-    id: "box-c2",
-    position: "absolute",
-    left: 50,
-    top: 19,
-    width: 15,
-    height: 4,
-    backgroundColor: "#444400",
-    zIndex: 25,
-    borderStyle: "single",
-    borderColor: "#FFFF88",
-    border: true,
-  })
-  parentGroupC.add(boxC2)
-
-  const textC2 = new TextRenderable(renderer, {
-    id: "text-c2",
-    content: "Child C2 (z=25)",
-    position: "absolute",
-    left: 52,
-    top: 20,
-    fg: "#FFFF88",
-    zIndex: 25,
-  })
-  parentGroupC.add(textC2)
-
-  const explanation1 = new TextRenderable(renderer, {
-    id: "explanation1",
-    content: "Key Concept: Parent z-index determines group layering, child z-index determines order within group",
-    position: "absolute",
-    left: 10,
-    top: 25,
-    fg: "#AAAAAA",
-    zIndex: 1000,
-  })
-  parentContainer.add(explanation1)
-
-  const explanation2 = new TextRenderable(renderer, {
-    id: "explanation2",
-    content: "Even if Child C1 has z=30, it renders behind Parent A & B because Parent C has z=20",
-    position: "absolute",
-    left: 10,
-    top: 26,
-    fg: "#AAAAAA",
-    zIndex: 1000,
-  })
-  parentContainer.add(explanation2)
-
-  const phaseIndicator = new TextRenderable(renderer, {
-    id: "phase-indicator",
-    content: "Animation Phase: 1/4",
-    position: "absolute",
-    left: 10,
-    top: 28,
-    fg: "#FFFFFF",
-    attributes: TextAttributes.BOLD,
-    zIndex: 1000,
-  })
-  parentContainer.add(phaseIndicator)
-
-  const zIndexDisplay = new TextRenderable(renderer, {
-    id: "zindex-display",
-    content: "Current Z-Indices - A:100, B:50, C:20",
-    position: "absolute",
-    left: 10,
-    top: 29,
-    fg: "#FFFFFF",
-    zIndex: 1000,
-  })
-  parentContainer.add(zIndexDisplay)
-
-  renderer.setFrameCallback(async (deltaMs) => {
-    const time = Date.now()
-    const newPhase = Math.floor((time % (animationSpeed * 4)) / animationSpeed)
-
-    if (newPhase !== zIndexPhase) {
-      zIndexPhase = newPhase
-
-      // Reset to original z-indices
-      parentGroupA.zIndex = 100
-      parentGroupB.zIndex = 50
-      parentGroupC.zIndex = 20
-
-      // Update box titles and colors based on phase
-      switch (zIndexPhase) {
-        case 0: // Original state
-          parentGroupA.zIndex = 100
-          parentGroupB.zIndex = 50
-          parentGroupC.zIndex = 20
-          boxA1.title = "Parent A (z=100)"
-          boxB1.title = "Parent B (z=50)"
-          boxC1.title = "Parent C (z=20)"
-          break
-        case 1: // C becomes highest
-          parentGroupA.zIndex = 50
-          parentGroupB.zIndex = 20
-          parentGroupC.zIndex = 100
-          boxA1.title = "Parent A (z=50)"
-          boxB1.title = "Parent B (z=20)"
-          boxC1.title = "Parent C (z=100)"
-          break
-        case 2: // B becomes highest
-          parentGroupA.zIndex = 20
-          parentGroupB.zIndex = 100
-          parentGroupC.zIndex = 50
-          boxA1.title = "Parent A (z=20)"
-          boxB1.title = "Parent B (z=100)"
-          boxC1.title = "Parent C (z=50)"
-          break
-        case 3: // All equal - shows child z-index importance
-          parentGroupA.zIndex = 60
-          parentGroupB.zIndex = 60
-          parentGroupC.zIndex = 60
-          boxA1.title = "Parent A (z=60)"
-          boxB1.title = "Parent B (z=60)"
-          boxC1.title = "Parent C (z=60)"
-          break
-      }
-
-      const phases = ["Original Hierarchy", "C Group on Top", "B Group on Top", "Equal Parents (Child z-index matters)"]
-      phaseIndicator.content = `Animation Phase: ${zIndexPhase + 1}/4 - ${phases[zIndexPhase]}`
-
-      zIndexDisplay.content = `Current Z-Indices - A:${parentGroupA.zIndex}, B:${parentGroupB.zIndex}, C:${parentGroupC.zIndex}`
-    }
-  })
-
-  globalKeyboardHandler = (key: KeyEvent) => {
-    if (key.name === "+" || key.name === "=") {
-      animationSpeed = Math.max(500, animationSpeed - 200)
-    } else if (key.name === "-" || key.name === "_") {
-      animationSpeed = Math.min(5000, animationSpeed + 200)
-    }
-  }
-
-  renderer.keyInput.on("keypress", globalKeyboardHandler)
-}
-
-export function destroy(renderer: CliRenderer): void {
-  if (globalKeyboardHandler) {
-    renderer.keyInput.off("keypress", globalKeyboardHandler)
-    globalKeyboardHandler = null
-  }
-
-  renderer.root.remove("main-title")
-  renderer.root.remove("parent-container")
-
-  renderer.clearFrameCallbacks()
-  renderer.setCursorPosition(0, 0, false)
-}
-
-if (import.meta.main) {
-  const renderer = await createCliRenderer({
-    exitOnCtrlC: true,
-  })
-
-  run(renderer)
-  setupCommonDemoKeys(renderer)
-}

package/src/examples/opacity-example.ts

@@ -1,235 +0,0 @@
-import { CliRenderer, BoxRenderable, TextRenderable, createCliRenderer, type KeyEvent } from "../index.js"
-import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
-
-let renderer: CliRenderer | null = null
-let header: BoxRenderable | null = null
-let container: BoxRenderable | null = null
-let infoText: TextRenderable | null = null
-let boxes: BoxRenderable[] = []
-let opacityValues = [1.0, 0.8, 0.5, 0.3]
-let animationInterval: Timer | null = null
-
-function createOpacityDemo(rendererInstance: CliRenderer): void {
-  renderer = rendererInstance
-  renderer.setBackgroundColor("#1a1a2e")
-
-  // Info header
-  header = new BoxRenderable(renderer, {
-    id: "opacity-demo-header",
-    width: "auto",
-    height: 3,
-    backgroundColor: "#16213e",
-    border: true,
-    borderStyle: "single",
-    alignItems: "center",
-    justifyContent: "center",
-  })
-
-  infoText = new TextRenderable(renderer, {
-    id: "info",
-    content: "OPACITY DEMO | 1-4: Toggle opacity | A: Animate | Ctrl+C: Exit",
-    fg: "#e94560",
-    bg: "transparent",
-  })
-  header.add(infoText)
-
-  // Main container
-  container = new BoxRenderable(renderer, {
-    id: "opacity-demo-container",
-    width: "auto",
-    height: "auto",
-    flexGrow: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: 2,
-  })
-
-  // Create 4 overlapping boxes with different opacities
-  const colors = ["#e94560", "#0f3460", "#533483", "#16a085"]
-  const labels = ["Box 1", "Box 2", "Box 3", "Box 4"]
-
-  for (let i = 0; i < 4; i++) {
-    const box = new BoxRenderable(renderer, {
-      id: `box-${i}`,
-      width: 20,
-      height: 8,
-      backgroundColor: colors[i],
-      border: true,
-      borderStyle: "double",
-      borderColor: "#ffffff",
-      position: "absolute",
-      left: 10 + i * 8,
-      top: 5 + i * 2,
-      opacity: opacityValues[i],
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: "column",
-    })
-
-    const label = new TextRenderable(renderer, {
-      id: `label-${i}`,
-      content: labels[i],
-      fg: "#ffffff",
-      bg: "transparent",
-    })
-
-    const opacityLabel = new TextRenderable(renderer, {
-      id: `opacity-${i}`,
-      content: `Opacity: ${opacityValues[i].toFixed(1)}`,
-      fg: "#ffffff",
-      bg: "transparent",
-    })
-
-    box.add(label)
-    box.add(opacityLabel)
-    boxes.push(box)
-    container.add(box)
-  }
-
-  // Nested opacity demo
-  const nestedContainer = new BoxRenderable(renderer, {
-    id: "nested-container",
-    width: 35,
-    height: 10,
-    backgroundColor: "#e94560",
-    border: true,
-    borderStyle: "single",
-    position: "absolute",
-    right: 5,
-    top: 5,
-    opacity: 0.7,
-    padding: 1,
-    flexDirection: "column",
-  })
-
-  const nestedLabel = new TextRenderable(renderer, {
-    id: "nested-label",
-    content: "Parent: 0.7 opacity",
-    fg: "#ffffff",
-    bg: "transparent",
-  })
-
-  const nestedChild = new BoxRenderable(renderer, {
-    id: "nested-child",
-    width: "auto",
-    height: 5,
-    backgroundColor: "#0f3460",
-    border: true,
-    opacity: 0.5, // Effective: 0.7 * 0.5 = 0.35
-    alignItems: "center",
-    justifyContent: "center",
-    flexDirection: "column",
-  })
-
-  const childLabel = new TextRenderable(renderer, {
-    id: "child-label",
-    content: "Child: 0.5 opacity",
-    fg: "#ffffff",
-    bg: "transparent",
-  })
-
-  const effectiveLabel = new TextRenderable(renderer, {
-    id: "effective-label",
-    content: "Effective: 0.35",
-    fg: "#ffcc00",
-    bg: "transparent",
-  })
-
-  nestedChild.add(childLabel)
-  nestedChild.add(effectiveLabel)
-  nestedContainer.add(nestedLabel)
-  nestedContainer.add(nestedChild)
-  container.add(nestedContainer)
-
-  renderer.root.add(header)
-  renderer.root.add(container)
-}
-
-function updateOpacityLabels(): void {
-  for (let i = 0; i < boxes.length; i++) {
-    const opacityLabel = boxes[i].getRenderable(`opacity-${i}`) as TextRenderable | undefined
-    if (opacityLabel) {
-      opacityLabel.content = `Opacity: ${boxes[i].opacity.toFixed(1)}`
-    }
-  }
-}
-
-function handleKeyPress(key: KeyEvent): void {
-  switch (key.name) {
-    case "1":
-      boxes[0].opacity = boxes[0].opacity === 1.0 ? 0.3 : 1.0
-      updateOpacityLabels()
-      break
-    case "2":
-      boxes[1].opacity = boxes[1].opacity === 1.0 ? 0.3 : 1.0
-      updateOpacityLabels()
-      break
-    case "3":
-      boxes[2].opacity = boxes[2].opacity === 1.0 ? 0.3 : 1.0
-      updateOpacityLabels()
-      break
-    case "4":
-      boxes[3].opacity = boxes[3].opacity === 1.0 ? 0.3 : 1.0
-      updateOpacityLabels()
-      break
-    case "a":
-      toggleAnimation()
-      break
-  }
-}
-
-function toggleAnimation(): void {
-  if (animationInterval) {
-    clearInterval(animationInterval)
-    animationInterval = null
-    if (infoText) {
-      infoText.content = "OPACITY DEMO | 1-4: Toggle opacity | A: Animate | Ctrl+C: Exit"
-    }
-  } else {
-    let phase = 0
-    animationInterval = setInterval(() => {
-      phase += 0.05
-      for (let i = 0; i < boxes.length; i++) {
-        boxes[i].opacity = 0.3 + 0.7 * Math.abs(Math.sin(phase + i * 0.5))
-      }
-      updateOpacityLabels()
-    }, 50)
-    if (infoText) {
-      infoText.content = "OPACITY DEMO | Animating... | A: Stop | Ctrl+C: Exit"
-    }
-  }
-}
-
-export function run(rendererInstance: CliRenderer): void {
-  createOpacityDemo(rendererInstance)
-  rendererInstance.keyInput.on("keypress", handleKeyPress)
-}
-
-export function destroy(rendererInstance: CliRenderer): void {
-  if (animationInterval) {
-    clearInterval(animationInterval)
-    animationInterval = null
-  }
-  rendererInstance.keyInput.off("keypress", handleKeyPress)
-  if (header) {
-    rendererInstance.root.remove("opacity-demo-header")
-    header = null
-  }
-  if (container) {
-    rendererInstance.root.remove("opacity-demo-container")
-    container = null
-  }
-  boxes = []
-  infoText = null
-  renderer = null
-}
-
-if (import.meta.main) {
-  const renderer = await createCliRenderer({
-    exitOnCtrlC: true,
-    targetFps: 30,
-  })
-  run(renderer)
-  setupCommonDemoKeys(renderer)
-}