feat: add scroll-box component (anomalyco#120)

Author: KurtGokhan

packages/core/src/Renderable.ts

@@ -101,6 +101,8 @@ export interface RenderableOptions<T extends Renderable = Renderable> extends Pa
   onMouseScroll?: (this: T, event: MouseEvent) => void
 
   onKeyDown?: (key: ParsedKey) => void
+
+  onSizeChange?: (this: T) => void
 }
 
 function validateOptions(id: string, options: RenderableOptions<Renderable>): void {
@@ -213,6 +215,7 @@ export abstract class Renderable extends EventEmitter {
   private _live: boolean = false
   protected _liveCount: number = 0
 
+  private _sizeChangeListener: (() => void) | undefined = undefined
   private _mouseListener: ((event: MouseEvent) => void) | null = null
   private _mouseListeners: Partial<Record<MouseEventType, (event: MouseEvent) => void>> = {}
   private _keyListeners: Partial<Record<"down", (key: ParsedKey) => void>> = {}
@@ -958,6 +961,7 @@ export abstract class Renderable extends EventEmitter {
   }
 
   protected onResize(width: number, height: number): void {
+    this.onSizeChange?.()
     this.emit("resize")
     // Override in subclasses for additional resize logic
   }
@@ -1249,6 +1253,13 @@ export abstract class Renderable extends EventEmitter {
     return this._keyListeners["down"]
   }
 
+  public set onSizeChange(handler: (() => void) | undefined) {
+    this._sizeChangeListener = handler
+  }
+  public get onSizeChange(): (() => void) | undefined {
+    return this._sizeChangeListener
+  }
+
   private applyEventOptions(options: RenderableOptions<Renderable>): void {
     this.onMouse = options.onMouse
     this.onMouseDown = options.onMouseDown
@@ -1261,6 +1272,7 @@ export abstract class Renderable extends EventEmitter {
     this.onMouseOut = options.onMouseOut
     this.onMouseScroll = options.onMouseScroll
     this.onKeyDown = options.onKeyDown
+    this.onSizeChange = options.onSizeChange
   }
 }
 

packages/core/src/examples/index.ts

@@ -24,6 +24,7 @@ import * as opentuiDemo from "./opentui-demo"
 import * as nestedZIndexDemo from "./nested-zindex-demo"
 import * as relativePositioningDemo from "./relative-positioning-demo"
 import * as transparencyDemo from "./transparency-demo"
+import * as scrollExample from "./scroll-example"
 import * as shaderCubeExample from "./shader-cube-demo"
 import * as spriteAnimationExample from "./sprite-animation-demo"
 import * as spriteParticleExample from "./sprite-particle-generator-demo"
@@ -170,6 +171,12 @@ const examples: Example[] = [
     run: textureLoadingExample.run,
     destroy: textureLoadingExample.destroy,
   },
+  {
+    name: "ScrollBox Demo",
+    description: "Scrollable container with customization",
+    run: scrollExample.run,
+    destroy: scrollExample.destroy,
+  },
   {
     name: "Shader Cube",
     description: "3D cube with custom shaders",

packages/core/src/examples/scroll-example.ts

@@ -0,0 +1,90 @@
+import { ASCIIFontRenderable, BoxRenderable, type CliRenderer, createCliRenderer, TextRenderable } from "../index"
+import { ScrollBoxRenderable } from "../renderables/ScrollBox"
+import { setupCommonDemoKeys } from "./lib/standalone-keys"
+
+let scrollBox: ScrollBoxRenderable | null = null
+let renderer: CliRenderer | null = null
+
+export function run(rendererInstance: CliRenderer): void {
+  renderer = rendererInstance
+  renderer.setBackgroundColor("#001122")
+
+  scrollBox = new ScrollBoxRenderable(renderer, {
+    id: "scroll-box",
+    width: "100%",
+    height: "100%",
+    rootOptions: {
+      backgroundColor: "#730000",
+      border: true,
+    },
+    wrapperOptions: {
+      backgroundColor: "#9f0045",
+    },
+    viewportOptions: {
+      backgroundColor: "#005dbb",
+    },
+    contentOptions: {
+      backgroundColor: "#7fbfff",
+    },
+    scrollbarOptions: {
+      showArrows: true,
+      thumbOptions: {
+        backgroundColor: "#fe9d15",
+      },
+      trackOptions: {
+        backgroundColor: "#fff693",
+      },
+    },
+  })
+
+  scrollBox.focus()
+
+  renderer.root.add(scrollBox)
+
+  for (let index = 0; index < 20; index++) addItem(`Item ${index + 1}`)
+
+  const item = new BoxRenderable(renderer, {
+    id: "scroll-item",
+    width: 120,
+    margin: 5,
+    height: 5,
+    backgroundColor: "red",
+  })
+
+  scrollBox.content.add(item)
+
+  item.add(
+    new ASCIIFontRenderable(renderer, {
+      text: "OPENTUI Scroll",
+      margin: "auto",
+    }),
+  )
+
+  for (let index = 0; index < 20; index++) addItem(`Item ${index + 1}`)
+
+  function addItem(content: string) {
+    scrollBox!.content.add(
+      new TextRenderable(renderer!, {
+        content,
+      }),
+    )
+  }
+}
+
+export function destroy(rendererInstance: CliRenderer): void {
+  if (scrollBox) {
+    rendererInstance.root.remove(scrollBox.id)
+    scrollBox.destroy()
+    scrollBox = null
+  }
+  renderer = null
+}
+
+if (import.meta.main) {
+  const renderer = await createCliRenderer({
+    exitOnCtrlC: true,
+  })
+
+  run(renderer)
+  setupCommonDemoKeys(renderer)
+}

packages/core/src/lib/parse.mouse.ts

@@ -18,10 +18,10 @@ export class MouseParser {
   private mouseButtonsPressed = new Set<number>()
 
   private static readonly SCROLL_DIRECTIONS: Record<number, "up" | "down" | "left" | "right"> = {
-    64: "up",
-    65: "down",
-    66: "left",
-    67: "right",
+    0: "up",
+    1: "down",
+    2: "left",
+    3: "right",
   }
 
   public reset(): void {
@@ -36,10 +36,10 @@ export class MouseParser {
       const [, buttonCode, x, y, pressRelease] = sgrMatch
       const rawButtonCode = parseInt(buttonCode)
 
-      const scrollDirection = MouseParser.SCROLL_DIRECTIONS[rawButtonCode]
-      const isScroll = scrollDirection !== undefined
-
       const button = rawButtonCode & 3
+      const isScroll = (rawButtonCode & 64) !== 0
+      const scrollDirection = !isScroll ? undefined : MouseParser.SCROLL_DIRECTIONS[button]
+
       const isMotion = (rawButtonCode & 32) !== 0
       const modifiers = {
         shift: (rawButtonCode & 4) !== 0,
@@ -93,10 +93,10 @@ export class MouseParser {
       const x = str.charCodeAt(4) - 33
       const y = str.charCodeAt(5) - 33
 
-      const scrollDirection = MouseParser.SCROLL_DIRECTIONS[buttonByte]
-      const isScroll = scrollDirection !== undefined
-
       const button = buttonByte & 3
+      const isScroll = (buttonByte & 64) !== 0
+      const scrollDirection = !isScroll ? undefined : MouseParser.SCROLL_DIRECTIONS[button]
+
       const modifiers = {
         shift: (buttonByte & 4) !== 0,
         alt: (buttonByte & 8) !== 0,