@fairyhunter13/opentui-core 0.1.90 → 0.1.92

package/src/examples/slider-demo.ts

@@ -1,617 +0,0 @@
-import { type CliRenderer, createCliRenderer, t, fg, bold, BoxRenderable, TextRenderable } from "../index.js"
-import { SliderRenderable } from "../renderables/Slider.js"
-import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
-
-let horizontalSlider1: SliderRenderable | null = null
-let horizontalSlider2: SliderRenderable | null = null
-let horizontalSlider3: SliderRenderable | null = null
-let verticalSlider1: SliderRenderable | null = null
-let verticalSlider2: SliderRenderable | null = null
-let verticalSlider3: SliderRenderable | null = null
-let animatedVerticalSlider: SliderRenderable | null = null
-let renderer: CliRenderer | null = null
-let mainContainer: BoxRenderable | null = null
-let instructionsBox: BoxRenderable | null = null
-let keyboardHandler: ((key: any) => void) | null = null
-let frameCallback: ((deltaTime: number) => Promise<void>) | null = null
-let animationTime = 0
-
-let lastActionText: string = "Welcome to SliderRenderable demo! Use mouse to interact with sliders."
-let lastActionColor: string = "#FFCC00"
-
-// Value display elements
-let h1ValueText: TextRenderable | null = null
-let h2ValueText: TextRenderable | null = null
-let h3ValueText: TextRenderable | null = null
-let v1ValueText: TextRenderable | null = null
-let v2ValueText: TextRenderable | null = null
-let v3ValueText: TextRenderable | null = null
-let vAValueText: TextRenderable | null = null
-
-function updateDisplays() {
-  // Update individual slider value displays
-  if (h1ValueText && horizontalSlider1) {
-    h1ValueText.content = t`${bold(fg("#e0af68")("Value:"))} ${horizontalSlider1.value.toFixed(1)}`
-  }
-  if (h2ValueText && horizontalSlider2) {
-    h2ValueText.content = t`${bold(fg("#bb9af7")("Value:"))} ${horizontalSlider2.value.toFixed(1)}`
-  }
-  if (h3ValueText && horizontalSlider3) {
-    h3ValueText.content = t`${bold(fg("#FF6B6B")("Value:"))} ${horizontalSlider3.value.toFixed(2)}`
-  }
-  if (v1ValueText && verticalSlider1) {
-    v1ValueText.content = t`${bold(fg("#f7768e")(verticalSlider1.value.toFixed(1)))}`
-  }
-  if (v2ValueText && verticalSlider2) {
-    v2ValueText.content = t`${bold(fg("#ff9e64")(verticalSlider2.value.toFixed(1)))}`
-  }
-  if (v3ValueText && verticalSlider3) {
-    v3ValueText.content = t`${bold(fg("#73daca")(verticalSlider3.value.toFixed(1)))}`
-  }
-  if (vAValueText && animatedVerticalSlider) {
-    vAValueText.content = t`${bold(fg("#FF6B6B")(animatedVerticalSlider.value.toFixed(2)))}`
-  }
-}
-
-function resetSliders() {
-  if (horizontalSlider1) horizontalSlider1.value = 25
-  if (horizontalSlider2) horizontalSlider2.value = 100
-  if (horizontalSlider3) horizontalSlider3.value = 25
-  if (verticalSlider1) verticalSlider1.value = 0
-  if (verticalSlider2) verticalSlider2.value = 0
-  if (verticalSlider3) verticalSlider3.value = 50
-  if (animatedVerticalSlider) animatedVerticalSlider.value = 50
-
-  lastActionText = "*** All sliders reset to default values ***"
-  lastActionColor = "#FF00FF"
-  updateDisplays()
-
-  setTimeout(() => {
-    lastActionColor = "#FFCC00"
-    updateDisplays()
-  }, 1000)
-}
-
-function focusSlider(index: number) {
-  // Remove focus from all sliders first
-  horizontalSlider1?.blur()
-  horizontalSlider2?.blur()
-  horizontalSlider3?.blur()
-  verticalSlider1?.blur()
-  verticalSlider2?.blur()
-  verticalSlider3?.blur()
-  animatedVerticalSlider?.blur()
-
-  let slider: SliderRenderable | null = null
-  let sliderName = ""
-
-  switch (index) {
-    case 1:
-      slider = horizontalSlider1
-      sliderName = "H1 (1h×100w)"
-      break
-    case 2:
-      slider = horizontalSlider2
-      sliderName = "H2 (5h×100w)"
-      break
-    case 3:
-      slider = horizontalSlider3
-      sliderName = "H3 (1h×80w, animated)"
-      break
-    case 4:
-      slider = verticalSlider1
-      sliderName = "V1 (15h×1w)"
-      break
-    case 5:
-      slider = verticalSlider2
-      sliderName = "V2 (15h×3w)"
-      break
-    case 6:
-      slider = verticalSlider3
-      sliderName = "V3 (15h×5w)"
-      break
-    case 7:
-      slider = animatedVerticalSlider
-      sliderName = "VA (10h×2w, animated)"
-      break
-  }
-
-  if (slider) {
-    slider.focus()
-    lastActionText = `Focused: ${sliderName}`
-    lastActionColor = "#00FF00"
-    updateDisplays()
-  }
-}
-
-export function run(rendererInstance: CliRenderer): void {
-  renderer = rendererInstance
-  renderer.setBackgroundColor("#1a1b26")
-  renderer.start()
-
-  mainContainer = new BoxRenderable(renderer, {
-    id: "slider-demo-main-container",
-    flexGrow: 1,
-    maxHeight: "100%",
-    maxWidth: "100%",
-    flexDirection: "column",
-    backgroundColor: "#1a1b26",
-  })
-  renderer.root.add(mainContainer)
-
-  // Create sliders container
-  const slidersContainer = new BoxRenderable(renderer, {
-    id: "sliders-container",
-    width: "100%",
-    flexGrow: 1,
-    flexDirection: "column",
-    backgroundColor: "#1a1b26",
-    padding: 2,
-  })
-
-  // Horizontal Slider 1 - 1-height (very thin) - now H1
-  const h1Container = new BoxRenderable(renderer, {
-    id: "h1-container",
-    width: "100%",
-    flexDirection: "column",
-    backgroundColor: "#24283b",
-    marginBottom: 1,
-    padding: 1,
-  })
-
-  const h1Label = new TextRenderable(renderer, {
-    content: t`${bold(fg("#e0af68")("H1"))} ${fg("#565f89")("- 1h×100w (0-50)")}`,
-  })
-
-  h1ValueText = new TextRenderable(renderer, {
-    content: t`${bold(fg("#e0af68")("Value:"))} 25.0`,
-  })
-
-  horizontalSlider1 = new SliderRenderable(renderer, {
-    id: "horizontal-slider-1",
-    orientation: "horizontal",
-    width: "100%",
-    height: 1,
-    value: 25,
-    min: 0,
-    max: 50,
-    viewPortSize: 1,
-    backgroundColor: "#414868",
-    foregroundColor: "#e0af68",
-    onChange: (value: number) => {
-      lastActionText = `H1: ${value.toFixed(1)}`
-      lastActionColor = "#FFA500"
-      updateDisplays()
-    },
-  })
-
-  h1Container.add(h1Label)
-  h1Container.add(h1ValueText)
-  h1Container.add(horizontalSlider1)
-
-  // Horizontal Slider 2 - 5-height (thick) - now H2
-  const h2Container = new BoxRenderable(renderer, {
-    id: "h2-container",
-    width: "100%",
-    flexDirection: "column",
-    backgroundColor: "#24283b",
-    marginBottom: 1,
-    padding: 1,
-  })
-
-  const h2Label = new TextRenderable(renderer, {
-    content: t`${bold(fg("#bb9af7")("H2"))} ${fg("#565f89")("- 5h×100w (0-200)")}`,
-  })
-
-  h2ValueText = new TextRenderable(renderer, {
-    content: t`${bold(fg("#bb9af7")("Value:"))} 100.0`,
-  })
-
-  horizontalSlider2 = new SliderRenderable(renderer, {
-    id: "horizontal-slider-2",
-    orientation: "horizontal",
-    width: "100%",
-    height: 5,
-    value: 100,
-    min: 0,
-    max: 200,
-    viewPortSize: 50,
-    backgroundColor: "#414868",
-    foregroundColor: "#bb9af7",
-    onChange: (value: number) => {
-      lastActionText = `H2: ${value.toFixed(1)}`
-      lastActionColor = "#BB9AF7"
-      updateDisplays()
-    },
-  })
-
-  h2Container.add(h2Label)
-  h2Container.add(h2ValueText)
-  h2Container.add(horizontalSlider2)
-
-  // Horizontal Slider 3 - Animated (sub-cell rendering) - now H3
-  const h3Container = new BoxRenderable(renderer, {
-    id: "h3-container",
-    width: "100%",
-    flexDirection: "column",
-    backgroundColor: "#24283b",
-    marginBottom: 1,
-    padding: 1,
-  })
-
-  const h3Label = new TextRenderable(renderer, {
-    content: t`${bold(fg("#FF6B6B")("H3"))} ${fg("#565f89")("- 1h×80w (animated, sub-cell rendering)")}`,
-  })
-
-  h3ValueText = new TextRenderable(renderer, {
-    content: t`${bold(fg("#FF6B6B")("Value:"))} 25.00`,
-  })
-
-  horizontalSlider3 = new SliderRenderable(renderer, {
-    id: "horizontal-slider-3",
-    orientation: "horizontal",
-    height: 1,
-    value: 25,
-    min: 0,
-    max: 50,
-    viewPortSize: 0.1, // Fine step size for smooth animation
-    backgroundColor: "#414868",
-    foregroundColor: "#FF6B6B",
-    onChange: (value: number) => {
-      // Update the animated horizontal slider value display
-      updateDisplays()
-    },
-  })
-
-  h3Container.add(h3Label)
-  h3Container.add(h3ValueText)
-  h3Container.add(horizontalSlider3)
-
-  // Vertical sliders container
-  const verticalContainer = new BoxRenderable(renderer, {
-    id: "vertical-container",
-    width: "100%",
-    height: 17,
-    flexDirection: "row",
-    backgroundColor: "#1a1b26",
-    marginBottom: 1,
-    padding: 1,
-  })
-
-  // Vertical Slider 1 - 1-width (very narrow)
-  const v1Container = new BoxRenderable(renderer, {
-    id: "v1-container",
-    width: 8,
-    height: "100%",
-    flexDirection: "column",
-    alignItems: "flex-end",
-    backgroundColor: "#24283b",
-    marginRight: 1,
-    padding: 1,
-  })
-
-  const v1SliderWrapper = new BoxRenderable(renderer, {
-    id: "v1-slider-wrapper",
-    flexDirection: "row",
-    height: "100%",
-    flexGrow: 1,
-  })
-
-  const v1Label = new TextRenderable(renderer, {
-    content: t`${bold(fg("#f7768e")("V1"))}
-${fg("#565f89")("1w")}`,
-    width: 3,
-  })
-
-  verticalSlider1 = new SliderRenderable(renderer, {
-    id: "vertical-slider-1",
-    orientation: "vertical",
-    width: 1,
-    height: "100%",
-    value: 0,
-    min: -10,
-    max: 10,
-    viewPortSize: 1,
-    backgroundColor: "#414868",
-    foregroundColor: "#f7768e",
-    onChange: (value: number) => {
-      lastActionText = `V1: ${value.toFixed(1)}`
-      lastActionColor = "#FF00FF"
-      updateDisplays()
-    },
-  })
-
-  v1ValueText = new TextRenderable(renderer, {
-    content: t`${bold(fg("#f7768e")("0.0"))}`,
-  })
-
-  v1SliderWrapper.add(v1Label)
-  v1SliderWrapper.add(verticalSlider1)
-  v1Container.add(v1SliderWrapper)
-  v1Container.add(v1ValueText)
-
-  // Vertical Slider 2 - 3-width (medium)
-  const v2Container = new BoxRenderable(renderer, {
-    id: "v2-container",
-    width: 10,
-    height: "100%",
-    flexDirection: "column",
-    alignItems: "flex-end",
-    backgroundColor: "#24283b",
-    marginRight: 1,
-    padding: 1,
-  })
-
-  const v2SliderWrapper = new BoxRenderable(renderer, {
-    id: "v2-slider-wrapper",
-    flexDirection: "row",
-    height: "100%",
-    flexGrow: 1,
-  })
-
-  const v2Label = new TextRenderable(renderer, {
-    content: t`${bold(fg("#ff9e64")("V2"))}
-${fg("#565f89")("3w")}`,
-    width: 3,
-  })
-
-  verticalSlider2 = new SliderRenderable(renderer, {
-    id: "vertical-slider-2",
-    orientation: "vertical",
-    width: 3,
-    height: "100%",
-    value: 0,
-    min: -50,
-    max: 50,
-    viewPortSize: 5,
-    backgroundColor: "#414868",
-    foregroundColor: "#ff9e64",
-    onChange: (value: number) => {
-      lastActionText = `V2: ${value.toFixed(1)}`
-      lastActionColor = "#FF9E64"
-      updateDisplays()
-    },
-  })
-
-  v2ValueText = new TextRenderable(renderer, {
-    content: t`${bold(fg("#ff9e64")("0.0"))}`,
-  })
-
-  v2SliderWrapper.add(v2Label)
-  v2SliderWrapper.add(verticalSlider2)
-  v2Container.add(v2SliderWrapper)
-  v2Container.add(v2ValueText)
-
-  // Vertical Slider 3 - 5-width (wide)
-  const v3Container = new BoxRenderable(renderer, {
-    id: "v3-container",
-    width: 12,
-    height: "100%",
-    flexDirection: "column",
-    alignItems: "flex-end",
-    backgroundColor: "#24283b",
-    marginRight: 1,
-    padding: 1,
-  })
-
-  const v3SliderWrapper = new BoxRenderable(renderer, {
-    id: "v3-slider-wrapper",
-    flexDirection: "row",
-    height: "100%",
-    flexGrow: 1,
-  })
-
-  const v3Label = new TextRenderable(renderer, {
-    content: t`${bold(fg("#73daca")("V3"))}
-${fg("#565f89")("5w")}`,
-    width: 3,
-  })
-
-  verticalSlider3 = new SliderRenderable(renderer, {
-    id: "vertical-slider-3",
-    orientation: "vertical",
-    width: 5,
-    height: "100%",
-    value: 50,
-    min: 0,
-    max: 100,
-    viewPortSize: 10,
-    backgroundColor: "#414868",
-    foregroundColor: "#73daca",
-    onChange: (value: number) => {
-      lastActionText = `V3: ${value.toFixed(1)}`
-      lastActionColor = "#73DACA"
-      updateDisplays()
-    },
-  })
-
-  v3ValueText = new TextRenderable(renderer, {
-    content: t`${bold(fg("#73daca")("50.0"))}`,
-  })
-
-  v3SliderWrapper.add(v3Label)
-  v3SliderWrapper.add(verticalSlider3)
-  v3Container.add(v3SliderWrapper)
-  v3Container.add(v3ValueText)
-
-  // Animated Vertical Slider - demonstrates sub-cell rendering
-  const animatedVContainer = new BoxRenderable(renderer, {
-    id: "animated-v-container",
-    width: 10,
-    height: "100%",
-    flexDirection: "column",
-    alignItems: "flex-end",
-    backgroundColor: "#24283b",
-    marginRight: 1,
-    padding: 1,
-  })
-
-  const animatedVSliderWrapper = new BoxRenderable(renderer, {
-    id: "animated-v-slider-wrapper",
-    flexDirection: "row",
-    height: "100%",
-    flexGrow: 1,
-  })
-
-  const animatedVLabel = new TextRenderable(renderer, {
-    content: t`${bold(fg("#FF6B6B")("VA"))}
-${fg("#565f89")("2w")}`,
-    width: 3,
-  })
-
-  animatedVerticalSlider = new SliderRenderable(renderer, {
-    id: "animated-vertical-slider",
-    orientation: "vertical",
-    width: 2,
-    height: 10,
-    value: 50,
-    min: 0,
-    max: 100,
-    viewPortSize: 0.2, // Fine step size for smooth animation
-    backgroundColor: "#414868",
-    foregroundColor: "#FF6B6B",
-    onChange: (value: number) => {
-      // Update the animated vertical slider value display
-      updateDisplays()
-    },
-  })
-
-  vAValueText = new TextRenderable(renderer, {
-    content: t`${bold(fg("#FF6B6B")("50.00"))}`,
-  })
-
-  animatedVSliderWrapper.add(animatedVLabel)
-  animatedVSliderWrapper.add(animatedVerticalSlider)
-  animatedVContainer.add(animatedVSliderWrapper)
-  animatedVContainer.add(vAValueText)
-
-  verticalContainer.add(v1Container)
-  verticalContainer.add(v2Container)
-  verticalContainer.add(v3Container)
-  verticalContainer.add(animatedVContainer)
-
-  // Add some spacing
-  const spacer = new BoxRenderable(renderer, {
-    id: "spacer",
-    width: "100%",
-    flexGrow: 1,
-  })
-
-  slidersContainer.add(h1Container)
-  slidersContainer.add(h2Container)
-  slidersContainer.add(h3Container)
-  slidersContainer.add(verticalContainer)
-  slidersContainer.add(spacer)
-
-  // Instructions box
-  instructionsBox = new BoxRenderable(renderer, {
-    id: "instructions",
-    width: "100%",
-    flexDirection: "column",
-    backgroundColor: "#2a2b3a",
-    paddingLeft: 1,
-  })
-
-  const instructionsText1 = new TextRenderable(renderer, {
-    content: t`${bold(fg("#7aa2f7")("Slider Demo"))} ${fg("#565f89")("-")} ${bold(fg("#FFFF00")("Mouse"))} ${fg("#c0caf5")("Click & drag on sliders")} ${fg("#565f89")("|")} ${bold(fg("#FFAA00")("R"))} ${fg("#c0caf5")("Reset all")} ${fg("#565f89")("|")} ${bold(fg("#00FF00")("1-7"))} ${fg("#c0caf5")("Focus sliders")}`,
-  })
-
-  const instructionsText2 = new TextRenderable(renderer, {
-    content: t`${bold(fg("#7aa2f7")("Features:"))} ${fg("#c0caf5")("Different ranges, step sizes, orientations & dimensions (1-5 height/width)")}`,
-  })
-
-  instructionsBox.add(instructionsText1)
-  instructionsBox.add(instructionsText2)
-
-  mainContainer.add(slidersContainer)
-  mainContainer.add(instructionsBox)
-
-  updateDisplays()
-
-  keyboardHandler = (key) => {
-    if (key.name === "r") {
-      resetSliders()
-    } else if (key.name === "1") {
-      focusSlider(1)
-    } else if (key.name === "2") {
-      focusSlider(2)
-    } else if (key.name === "3") {
-      focusSlider(3)
-    } else if (key.name === "4") {
-      focusSlider(4)
-    } else if (key.name === "5") {
-      focusSlider(5)
-    } else if (key.name === "6") {
-      focusSlider(6)
-    } else if (key.name === "7") {
-      focusSlider(7)
-    }
-  }
-
-  rendererInstance.keyInput.on("keypress", keyboardHandler)
-
-  // Set up animation frame callback for animated sliders
-  frameCallback = async (deltaTime: number) => {
-    animationTime += deltaTime
-
-    // Animate horizontal slider - smooth sine wave motion covering full range
-    if (horizontalSlider3) {
-      const hValue = 25 + Math.sin(animationTime * 0.002) * 25
-      horizontalSlider3.value = Math.max(0, Math.min(50, hValue))
-    }
-
-    // Animate vertical slider - smooth cosine wave motion covering full range
-    if (animatedVerticalSlider) {
-      const vValue = 50 + Math.cos(animationTime * 0.0015) * 50
-      animatedVerticalSlider.value = Math.max(0, Math.min(100, vValue))
-    }
-  }
-  renderer.setFrameCallback(frameCallback)
-}
-
-export function destroy(rendererInstance: CliRenderer): void {
-  if (keyboardHandler) {
-    rendererInstance.keyInput.off("keypress", keyboardHandler)
-    keyboardHandler = null
-  }
-
-  if (frameCallback) {
-    rendererInstance.removeFrameCallback(frameCallback)
-    frameCallback = null
-  }
-
-  rendererInstance.root.getRenderable("slider-demo-main-container")?.destroyRecursively()
-
-  mainContainer = null
-  horizontalSlider1 = null
-  horizontalSlider2 = null
-  horizontalSlider3 = null
-  verticalSlider1 = null
-  verticalSlider2 = null
-  verticalSlider3 = null
-  animatedVerticalSlider = null
-  h1ValueText = null
-  h2ValueText = null
-  h3ValueText = null
-  v1ValueText = null
-  v2ValueText = null
-  v3ValueText = null
-  vAValueText = null
-  instructionsBox = null
-  // Note: slider wrappers are automatically cleaned up by destroyRecursively
-  renderer = null
-  frameCallback = null
-  animationTime = 0
-
-  lastActionText = "Welcome to SliderRenderable demo! Use mouse to interact with sliders."
-  lastActionColor = "#FFCC00"
-}
-
-if (import.meta.main) {
-  const renderer = await createCliRenderer({
-    exitOnCtrlC: true,
-  })
-
-  run(renderer)
-  setupCommonDemoKeys(renderer)
-}