@fairyhunter13/opentui-core 0.1.88 → 0.1.90

package/src/examples/simple-layout-example.ts

@@ -0,0 +1,591 @@
+import { CliRenderer, BoxRenderable, TextRenderable, createCliRenderer, type KeyEvent } from "../index.js"
+import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
+
+interface LayoutDemo {
+  name: string
+  description: string
+  setup: () => void
+}
+
+let renderer: CliRenderer | null = null
+let header: BoxRenderable | null = null
+let headerText: TextRenderable | null = null
+let contentArea: BoxRenderable | null = null
+let sidebar: BoxRenderable | null = null
+let sidebarText: TextRenderable | null = null
+let mainContent: BoxRenderable | null = null
+let mainContentText: TextRenderable | null = null
+let rightSidebar: BoxRenderable | null = null
+let rightSidebarText: TextRenderable | null = null
+let footer: BoxRenderable | null = null
+let footerText: TextRenderable | null = null
+let moveableElement: BoxRenderable | null = null
+let moveableText: TextRenderable | null = null
+let absolutePositionedBox: BoxRenderable | null = null
+let absolutePositionedText: TextRenderable | null = null
+let currentDemoIndex = 0
+let autoAdvanceTimeout: Timer | null = null
+let autoplayEnabled = true
+let moveableElementVisible = true
+let moveableElementX = 0
+let moveableElementY = 0
+
+const layoutDemos: LayoutDemo[] = [
+  {
+    name: "Horizontal Layout",
+    description: "Sidebar on left, main content on right",
+    setup: () => setupHorizontalLayout(),
+  },
+  {
+    name: "Vertical Layout",
+    description: "Sidebar on top, main content below",
+    setup: () => setupVerticalLayout(),
+  },
+  {
+    name: "Centered Layout",
+    description: "Content centered with margins",
+    setup: () => setupCenteredLayout(),
+  },
+  {
+    name: "Three Column",
+    description: "Left sidebar, center content, right sidebar",
+    setup: () => setupThreeColumnLayout(),
+  },
+]
+
+function resetElementLayout(element: BoxRenderable): void {
+  element.flexBasis = "auto"
+  element.flexGrow = 0
+  element.flexShrink = 0
+  element.width = "auto"
+  element.height = "auto"
+
+  element.minWidth = undefined
+  element.maxWidth = undefined
+  element.minHeight = undefined
+  element.maxHeight = undefined
+}
+
+function setupHorizontalLayout(): void {
+  if (!contentArea || !sidebar || !mainContent || !rightSidebar) return
+
+  sidebar.visible = true
+  mainContent.visible = true
+  rightSidebar.visible = false
+
+  resetElementLayout(sidebar)
+  resetElementLayout(mainContent)
+
+  contentArea.flexDirection = "row"
+  contentArea.alignItems = "stretch"
+
+  const sidebarWidth = Math.max(15, Math.floor(renderer!.terminalWidth * 0.2))
+  sidebar.flexBasis = sidebarWidth
+  sidebar.flexGrow = 0
+  sidebar.flexShrink = 0
+  sidebar.width = sidebarWidth
+  sidebar.minWidth = 15
+  sidebar.height = "auto"
+  if (sidebarText) sidebarText.content = "LEFT SIDEBAR"
+  sidebar.backgroundColor = "#64748b"
+
+  mainContent.flexBasis = "auto"
+  mainContent.flexGrow = 1
+  mainContent.flexShrink = 1
+  mainContent.width = "auto"
+  mainContent.minWidth = 20
+  mainContent.height = "auto"
+  if (mainContentText) mainContentText.content = "MAIN CONTENT"
+  mainContent.backgroundColor = "#eab308"
+}
+
+function setupVerticalLayout(): void {
+  if (!contentArea || !sidebar || !mainContent || !rightSidebar) return
+
+  sidebar.visible = true
+  mainContent.visible = true
+  rightSidebar.visible = false
+
+  resetElementLayout(sidebar)
+  resetElementLayout(mainContent)
+
+  contentArea.flexDirection = "column"
+  contentArea.alignItems = "stretch"
+
+  const contentHeight = renderer!.terminalHeight - 6
+  const topBarHeight = Math.max(3, Math.floor(contentHeight * 0.2))
+  sidebar.flexBasis = topBarHeight
+  sidebar.flexGrow = 0
+  sidebar.flexShrink = 0
+  sidebar.height = topBarHeight
+  sidebar.minHeight = 3
+  sidebar.width = "auto"
+  if (sidebarText) sidebarText.content = "TOP BAR"
+  sidebar.backgroundColor = "#059669"
+
+  mainContent.flexBasis = "auto"
+  mainContent.flexGrow = 1
+  mainContent.flexShrink = 1
+  mainContent.height = "auto"
+  mainContent.minHeight = 5
+  mainContent.width = "auto"
+  if (mainContentText) mainContentText.content = "MAIN CONTENT"
+  mainContent.backgroundColor = "#eab308"
+}
+
+function setupCenteredLayout(): void {
+  if (!contentArea || !sidebar || !mainContent || !rightSidebar) return
+
+  sidebar.visible = false
+  mainContent.visible = true
+  rightSidebar.visible = false
+
+  resetElementLayout(mainContent)
+
+  contentArea.flexDirection = "row"
+  contentArea.alignItems = "stretch"
+  contentArea.justifyContent = "center"
+
+  const centerWidth = Math.max(30, Math.floor(renderer!.terminalWidth * 0.6))
+  mainContent.flexBasis = centerWidth
+  mainContent.flexGrow = 0
+  mainContent.flexShrink = 0
+  mainContent.width = centerWidth
+  mainContent.minWidth = 30
+  mainContent.maxWidth = Math.floor(renderer!.terminalWidth * 0.8)
+  mainContent.height = "auto"
+  if (mainContentText) mainContentText.content = "CENTERED CONTENT"
+  mainContent.backgroundColor = "#7c3aed"
+}
+
+function setupThreeColumnLayout(): void {
+  if (!contentArea || !sidebar || !mainContent || !rightSidebar) return
+
+  sidebar.visible = true
+  mainContent.visible = true
+  rightSidebar.visible = true
+
+  resetElementLayout(sidebar)
+  resetElementLayout(mainContent)
+  resetElementLayout(rightSidebar)
+
+  contentArea.flexDirection = "row"
+  contentArea.alignItems = "stretch"
+
+  const terminalWidth = renderer!.terminalWidth
+  const sidebarWidth = Math.max(12, Math.floor(terminalWidth * 0.15))
+
+  sidebar.flexBasis = sidebarWidth
+  sidebar.flexGrow = 0
+  sidebar.flexShrink = 0
+  sidebar.width = sidebarWidth
+  sidebar.minWidth = 12
+  sidebar.height = "auto"
+  if (sidebarText) sidebarText.content = "LEFT"
+  sidebar.backgroundColor = "#dc2626"
+
+  mainContent.flexBasis = "auto"
+  mainContent.flexGrow = 1
+  mainContent.flexShrink = 1
+  mainContent.width = "auto"
+  mainContent.minWidth = 20
+  mainContent.height = "auto"
+  if (mainContentText) mainContentText.content = "CENTER"
+  mainContent.backgroundColor = "#059669"
+
+  rightSidebar.flexBasis = sidebarWidth
+  rightSidebar.flexGrow = 0
+  rightSidebar.flexShrink = 0
+  rightSidebar.width = sidebarWidth
+  rightSidebar.minWidth = 12
+  rightSidebar.height = "auto"
+  if (rightSidebarText) rightSidebarText.content = "RIGHT"
+  rightSidebar.backgroundColor = "#7c3aed"
+}
+
+function createLayoutElements(rendererInstance: CliRenderer): void {
+  renderer = rendererInstance
+  renderer.setBackgroundColor("#001122")
+
+  header = new BoxRenderable(renderer, {
+    id: "header",
+    zIndex: 0,
+    width: "auto",
+    height: 3,
+    backgroundColor: "#3b82f6",
+    borderStyle: "single",
+    alignItems: "center",
+    border: true,
+  })
+
+  headerText = new TextRenderable(renderer, {
+    id: "header-text",
+    content: "LAYOUT DEMO",
+    fg: "#ffffff",
+    bg: "transparent",
+    zIndex: 1,
+  })
+
+  header.add(headerText)
+
+  contentArea = new BoxRenderable(renderer, {
+    id: "content-area",
+    zIndex: 0,
+    width: "auto",
+    height: "auto",
+    flexDirection: "row",
+    flexGrow: 1,
+    flexShrink: 1,
+  })
+
+  sidebar = new BoxRenderable(renderer, {
+    id: "sidebar",
+    zIndex: 0,
+    width: "auto",
+    height: "auto",
+    backgroundColor: "#64748b",
+    borderStyle: "single",
+    flexGrow: 0,
+    flexShrink: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    border: true,
+  })
+
+  sidebarText = new TextRenderable(renderer, {
+    id: "sidebar-text",
+    content: "SIDEBAR",
+    fg: "#ffffff",
+    bg: "transparent",
+    zIndex: 1,
+  })
+
+  sidebar.add(sidebarText)
+
+  mainContent = new BoxRenderable(renderer, {
+    id: "main-content",
+    zIndex: 0,
+    width: "auto",
+    height: "auto",
+    backgroundColor: "#919599",
+    borderStyle: "single",
+    flexGrow: 1,
+    flexShrink: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    border: true,
+  })
+
+  mainContentText = new TextRenderable(renderer, {
+    id: "main-content-text",
+    content: "MAIN CONTENT",
+    fg: "#1e293b",
+    bg: "transparent",
+    zIndex: 1,
+  })
+
+  mainContent.add(mainContentText)
+
+  rightSidebar = new BoxRenderable(renderer, {
+    id: "right-sidebar",
+    zIndex: 0,
+    width: "auto",
+    height: "auto",
+    backgroundColor: "#7c3aed",
+    borderStyle: "single",
+    flexGrow: 0,
+    flexShrink: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    border: true,
+  })
+
+  rightSidebarText = new TextRenderable(renderer, {
+    id: "right-sidebar-text",
+    content: "RIGHT",
+    fg: "#ffffff",
+    bg: "transparent",
+    zIndex: 1,
+  })
+
+  rightSidebar.add(rightSidebarText)
+
+  footer = new BoxRenderable(renderer, {
+    id: "footer",
+    zIndex: 0,
+    width: "auto",
+    height: 3,
+    backgroundColor: "#1e40af",
+    borderStyle: "single",
+    flexGrow: 0,
+    flexShrink: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    border: true,
+  })
+
+  footerText = new TextRenderable(renderer, {
+    id: "footer-text",
+    content: "",
+    fg: "#ffffff",
+    bg: "transparent",
+    zIndex: 1,
+  })
+
+  footer.add(footerText)
+
+  moveableElement = new BoxRenderable(renderer, {
+    id: "moveable",
+    zIndex: 100,
+    width: 8,
+    height: 3,
+    backgroundColor: "#ff6b6b",
+    borderStyle: "single",
+    borderColor: "#ff4757",
+    position: "absolute",
+    left: 0,
+    top: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    border: true,
+  })
+
+  moveableText = new TextRenderable(renderer, {
+    id: "moveable-text",
+    content: "MOVE",
+    fg: "#ffffff",
+    bg: "transparent",
+    zIndex: 101,
+  })
+
+  moveableElement.add(moveableText)
+
+  absolutePositionedBox = new BoxRenderable(renderer, {
+    id: "absolute-positioned-box",
+    zIndex: 150,
+    width: 20,
+    height: 3,
+    backgroundColor: "#22c55e",
+    borderStyle: "single",
+    borderColor: "#16a34a",
+    position: "absolute",
+    bottom: 1,
+    right: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    border: true,
+  })
+
+  absolutePositionedText = new TextRenderable(renderer, {
+    id: "absolute-positioned-text",
+    content: "BOTTOM RIGHT",
+    fg: "#ffffff",
+    bg: "transparent",
+    zIndex: 151,
+  })
+
+  absolutePositionedBox.add(absolutePositionedText)
+
+  // Add all elements to contentArea in the correct order: left, center, right
+  contentArea.add(sidebar)
+  contentArea.add(mainContent)
+  contentArea.add(rightSidebar)
+
+  // Set initial visibility (rightSidebar is hidden for the first demo)
+  rightSidebar.visible = false
+
+  renderer.root.add(header)
+  renderer.root.add(contentArea)
+  renderer.root.add(footer)
+  renderer.root.add(moveableElement)
+  renderer.root.add(absolutePositionedBox)
+
+  centerMoveableElement()
+  updateFooterText()
+  renderer.on("resize", handleResize)
+}
+
+function handleResize(width: number, height: number): void {
+  // Root layout is automatically resized by the renderer
+  centerMoveableElement()
+}
+
+function handleKeyPress(key: KeyEvent): void {
+  switch (key.name) {
+    case "space": // Space - next layout
+      nextDemo()
+      break
+    case "r": // R - restart cycle
+      currentDemoIndex = 0
+      applyCurrentDemo()
+      break
+    case "p": // P - toggle autoplay
+      toggleAutoplay()
+      break
+    case "v": // V - toggle moveable element visibility
+      toggleMoveableElement()
+      break
+    case "w": // W - move up
+      moveMoveableElement(0, -1)
+      break
+    case "a": // A - move left
+      moveMoveableElement(-1, 0)
+      break
+    case "s": // S - move down
+      moveMoveableElement(0, 1)
+      break
+    case "d": // D - move right
+      moveMoveableElement(1, 0)
+      break
+  }
+}
+
+function nextDemo(): void {
+  currentDemoIndex = (currentDemoIndex + 1) % layoutDemos.length
+  applyCurrentDemo()
+}
+
+function toggleAutoplay(): void {
+  autoplayEnabled = !autoplayEnabled
+
+  if (autoplayEnabled) {
+    if (autoAdvanceTimeout) {
+      clearTimeout(autoAdvanceTimeout)
+    }
+    autoAdvanceTimeout = setTimeout(() => {
+      nextDemo()
+    }, 4000)
+  } else {
+    if (autoAdvanceTimeout) {
+      clearTimeout(autoAdvanceTimeout)
+      autoAdvanceTimeout = null
+    }
+  }
+
+  updateFooterText()
+}
+
+function toggleMoveableElement(): void {
+  if (!moveableElement) return
+
+  moveableElementVisible = !moveableElementVisible
+  moveableElement.visible = moveableElementVisible
+  updateFooterText()
+}
+
+function moveMoveableElement(deltaX: number, deltaY: number): void {
+  if (!moveableElement || !renderer) return
+
+  moveableElementX += deltaX
+  moveableElementY += deltaY
+
+  moveableElementX = Math.max(0, Math.min(renderer.terminalWidth - 8, moveableElementX))
+  moveableElementY = Math.max(0, Math.min(renderer.terminalHeight - 3, moveableElementY))
+
+  moveableElement.setPosition({
+    left: moveableElementX,
+    top: moveableElementY,
+  })
+}
+
+function centerMoveableElement(): void {
+  if (!renderer || !moveableElement) return
+
+  moveableElementX = Math.floor((renderer.terminalWidth - 8) / 2)
+  moveableElementY = Math.floor((renderer.terminalHeight - 3) / 2)
+
+  moveableElement.setPosition({
+    left: moveableElementX,
+    top: moveableElementY,
+  })
+}
+
+function updateFooterText(): void {
+  if (!footerText) return
+
+  const autoplayStatus = autoplayEnabled ? "ON" : "OFF"
+  const moveableStatus = moveableElementVisible ? "ON" : "OFF"
+  footerText.content = `SPACE: next | R: restart | P: autoplay (${autoplayStatus}) | V: overlay (${moveableStatus}) | WASD: move`
+}
+
+function applyCurrentDemo(): void {
+  const demo = layoutDemos[currentDemoIndex]
+  if (!headerText) return
+
+  const autoplayStatus = autoplayEnabled ? "AUTO" : "MANUAL"
+  headerText.content = `${demo.name} (${currentDemoIndex + 1}/${layoutDemos.length}) - ${autoplayStatus}`
+  demo.setup()
+
+  if (autoAdvanceTimeout) {
+    clearTimeout(autoAdvanceTimeout)
+  }
+
+  if (autoplayEnabled) {
+    autoAdvanceTimeout = setTimeout(() => {
+      nextDemo()
+    }, 4000)
+  }
+}
+
+export function run(rendererInstance: CliRenderer): void {
+  createLayoutElements(rendererInstance)
+  rendererInstance.keyInput.on("keypress", handleKeyPress)
+  currentDemoIndex = 0
+  applyCurrentDemo()
+}
+
+export function destroy(rendererInstance: CliRenderer): void {
+  if (autoAdvanceTimeout) {
+    clearTimeout(autoAdvanceTimeout)
+    autoAdvanceTimeout = null
+  }
+
+  rendererInstance.keyInput.off("keypress", handleKeyPress)
+
+  if (renderer) {
+    renderer.off("resize", handleResize)
+  }
+
+  if (header) rendererInstance.root.remove(header.id)
+  if (contentArea) rendererInstance.root.remove(contentArea.id)
+  if (footer) rendererInstance.root.remove(footer.id)
+  if (moveableElement) rendererInstance.root.remove(moveableElement.id)
+  if (absolutePositionedBox) rendererInstance.root.remove(absolutePositionedBox.id)
+
+  header = null
+  headerText = null
+  contentArea = null
+  sidebar = null
+  sidebarText = null
+  mainContent = null
+  mainContentText = null
+  rightSidebar = null
+  rightSidebarText = null
+  footer = null
+  footerText = null
+  moveableElement = null
+  moveableText = null
+  absolutePositionedBox = null
+  absolutePositionedText = null
+  renderer = null
+  currentDemoIndex = 0
+  moveableElementVisible = true
+  moveableElementX = 0
+  moveableElementY = 0
+}
+
+if (import.meta.main) {
+  const renderer = await createCliRenderer({
+    exitOnCtrlC: true,
+    targetFps: 30,
+  })
+  run(renderer)
+  setupCommonDemoKeys(renderer)
+  // renderer.start()
+}