@fairyhunter13/opentui-core 0.1.89 → 0.1.91

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

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

@@ -0,0 +1,235 @@
+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)
+}