@xincli/opentui-core 0.4.6 → 0.4.7

package/src/renderables/ScrollBox.ts

@@ -1,903 +0,0 @@
-import { type KeyEvent } from "../lib/index.js"
-import { getObjectsInViewport } from "../lib/objects-in-viewport.js"
-import { LinearScrollAccel, MacOSScrollAccel, type ScrollAcceleration } from "../lib/scroll-acceleration.js"
-import type { BaseRenderable, Renderable, RenderableOptions } from "../Renderable.js"
-import type { MouseEvent } from "../renderer.js"
-import type { RenderContext } from "../types.js"
-import { BoxRenderable, type BoxOptions } from "./Box.js"
-import type { VNode } from "./composition/vnode.js"
-import { ScrollBarRenderable, type ScrollBarOptions, type ScrollUnit } from "./ScrollBar.js"
-
-class ContentRenderable extends BoxRenderable {
-  private viewport: BoxRenderable
-  private _viewportCulling: boolean
-
-  constructor(
-    ctx: RenderContext,
-    viewport: BoxRenderable,
-    viewportCulling: boolean,
-    options: RenderableOptions<BoxRenderable>,
-  ) {
-    super(ctx, options)
-    this.viewport = viewport
-    this._viewportCulling = viewportCulling
-  }
-
-  get viewportCulling(): boolean {
-    return this._viewportCulling
-  }
-
-  set viewportCulling(value: boolean) {
-    this._viewportCulling = value
-  }
-
-  protected _hasVisibleChildFilter(): boolean {
-    return this._viewportCulling
-  }
-
-  protected _getVisibleChildren(): number[] {
-    if (this._viewportCulling) {
-      // The viewport is in terminal coordinates, so culling has to compare it
-      // against each child's absolute screen position rather than local x/y.
-      return getObjectsInViewport(
-        {
-          x: this.viewport.screenX,
-          y: this.viewport.screenY,
-          width: this.viewport.width,
-          height: this.viewport.height,
-        },
-        this.getChildrenSortedByPrimaryAxis(),
-        this.primaryAxis,
-        0,
-      ).map((child) => child.num)
-    }
-    return super._getVisibleChildren()
-  }
-}
-
-export interface ScrollBoxOptions extends BoxOptions<ScrollBoxRenderable> {
-  rootOptions?: BoxOptions
-  wrapperOptions?: BoxOptions
-  viewportOptions?: BoxOptions
-  contentOptions?: BoxOptions
-  scrollbarOptions?: Omit<ScrollBarOptions, "orientation">
-  verticalScrollbarOptions?: Omit<ScrollBarOptions, "orientation">
-  horizontalScrollbarOptions?: Omit<ScrollBarOptions, "orientation">
-  stickyScroll?: boolean
-  stickyStart?: "bottom" | "top" | "left" | "right"
-  scrollX?: boolean
-  scrollY?: boolean
-  scrollAcceleration?: ScrollAcceleration
-  viewportCulling?: boolean
-}
-
-const SCROLLBOX_PADDING_KEYS = [
-  "padding",
-  "paddingX",
-  "paddingY",
-  "paddingTop",
-  "paddingRight",
-  "paddingBottom",
-  "paddingLeft",
-] as const
-
-type ScrollBoxPaddingKey = (typeof SCROLLBOX_PADDING_KEYS)[number]
-type ScrollBoxPaddingOptions = Pick<ScrollBoxOptions, ScrollBoxPaddingKey>
-
-function pickScrollBoxPadding(options: Partial<ScrollBoxOptions> | undefined): Partial<ScrollBoxPaddingOptions> {
-  if (!options) return {}
-
-  const picked: Partial<ScrollBoxPaddingOptions> = {}
-  for (const key of SCROLLBOX_PADDING_KEYS) {
-    const value = options[key]
-    if (value !== undefined) {
-      picked[key] = value
-    }
-  }
-
-  return picked
-}
-
-function stripScrollBoxPadding<T extends object>(options: T): Omit<T, ScrollBoxPaddingKey> {
-  const sanitized = { ...options }
-  for (const key of SCROLLBOX_PADDING_KEYS) {
-    delete (sanitized as Partial<Record<ScrollBoxPaddingKey, unknown>>)[key]
-  }
-  return sanitized as Omit<T, ScrollBoxPaddingKey>
-}
-
-export class ScrollBoxRenderable extends BoxRenderable {
-  static idCounter = 0
-  private internalId = 0
-  public readonly wrapper: BoxRenderable
-  public readonly viewport: BoxRenderable
-  public readonly content: ContentRenderable
-  public readonly horizontalScrollBar: ScrollBarRenderable
-  public readonly verticalScrollBar: ScrollBarRenderable
-
-  protected _focusable: boolean = true
-  private selectionListener?: () => void
-
-  private autoScrollMouseX: number = 0
-  private autoScrollMouseY: number = 0
-  private readonly autoScrollThresholdVertical = 3
-  private readonly autoScrollThresholdHorizontal = 3
-  private readonly autoScrollSpeedSlow = 6
-  private readonly autoScrollSpeedMedium = 36
-  private readonly autoScrollSpeedFast = 72
-  private isAutoScrolling: boolean = false
-  private cachedAutoScrollSpeed: number = 3
-  private autoScrollAccumulatorX: number = 0
-  private autoScrollAccumulatorY: number = 0
-
-  private scrollAccumulatorX: number = 0
-  private scrollAccumulatorY: number = 0
-
-  private _stickyScroll: boolean
-  private _stickyScrollTop: boolean = false
-  private _stickyScrollBottom: boolean = false
-  private _stickyScrollLeft: boolean = false
-  private _stickyScrollRight: boolean = false
-  private _stickyStart?: "bottom" | "top" | "left" | "right"
-  private _hasManualScroll: boolean = false
-  private _isApplyingStickyScroll: boolean = false
-  private scrollAccel: ScrollAcceleration
-
-  get stickyScroll(): boolean {
-    return this._stickyScroll
-  }
-
-  set stickyScroll(value: boolean) {
-    this._stickyScroll = value
-    this.updateStickyState()
-  }
-
-  get stickyStart(): "bottom" | "top" | "left" | "right" | undefined {
-    return this._stickyStart
-  }
-
-  set stickyStart(value: "bottom" | "top" | "left" | "right" | undefined) {
-    this._stickyStart = value
-    this.updateStickyState()
-  }
-
-  get scrollTop(): number {
-    return this.verticalScrollBar.scrollPosition
-  }
-
-  set scrollTop(value: number) {
-    this.verticalScrollBar.scrollPosition = value
-    this.updateStickyState()
-  }
-
-  get scrollLeft(): number {
-    return this.horizontalScrollBar.scrollPosition
-  }
-
-  set scrollLeft(value: number) {
-    this.horizontalScrollBar.scrollPosition = value
-    this.updateStickyState()
-  }
-
-  get scrollWidth(): number {
-    return this.horizontalScrollBar.scrollSize
-  }
-
-  get scrollHeight(): number {
-    return this.verticalScrollBar.scrollSize
-  }
-
-  private updateStickyState(): void {
-    if (!this._stickyScroll) {
-      this.syncManualScrollState()
-      return
-    }
-
-    const maxScrollTop = Math.max(0, this.scrollHeight - this.viewport.height)
-    const maxScrollLeft = Math.max(0, this.scrollWidth - this.viewport.width)
-
-    if (this.scrollTop <= 0) {
-      this._stickyScrollTop = true
-      this._stickyScrollBottom = false
-    } else if (this.scrollTop >= maxScrollTop) {
-      this._stickyScrollTop = false
-      this._stickyScrollBottom = true
-    } else {
-      this._stickyScrollTop = false
-      this._stickyScrollBottom = false
-    }
-
-    if (this.scrollLeft <= 0) {
-      this._stickyScrollLeft = true
-      this._stickyScrollRight = false
-    } else if (this.scrollLeft >= maxScrollLeft) {
-      this._stickyScrollLeft = false
-      this._stickyScrollRight = true
-    } else {
-      this._stickyScrollLeft = false
-      this._stickyScrollRight = false
-    }
-
-    this.syncManualScrollState()
-  }
-
-  private syncManualScrollState(): void {
-    if (!this._stickyScroll) {
-      this._hasManualScroll = false
-      return
-    }
-
-    const maxScrollTop = Math.max(0, this.scrollHeight - this.viewport.height)
-    const maxScrollLeft = Math.max(0, this.scrollWidth - this.viewport.width)
-    const hasScrollableContent = maxScrollTop > 1 || maxScrollLeft > 1
-
-    if (this._isApplyingStickyScroll) {
-      if (this._hasManualScroll && hasScrollableContent && this.isAtStickyPosition()) {
-        this._hasManualScroll = false
-      }
-      return
-    }
-
-    this._hasManualScroll = hasScrollableContent && !this.isAtStickyPosition()
-  }
-
-  private applyStickyStart(stickyStart: "bottom" | "top" | "left" | "right"): void {
-    const wasApplyingStickyScroll = this._isApplyingStickyScroll
-    this._isApplyingStickyScroll = true
-    try {
-      switch (stickyStart) {
-        case "top":
-          this._stickyScrollTop = true
-          this._stickyScrollBottom = false
-          this.verticalScrollBar.scrollPosition = 0
-          break
-        case "bottom":
-          this._stickyScrollTop = false
-          this._stickyScrollBottom = true
-          this.verticalScrollBar.scrollPosition = Math.max(0, this.scrollHeight - this.viewport.height)
-          break
-        case "left":
-          this._stickyScrollLeft = true
-          this._stickyScrollRight = false
-          this.horizontalScrollBar.scrollPosition = 0
-          break
-        case "right":
-          this._stickyScrollLeft = false
-          this._stickyScrollRight = true
-          this.horizontalScrollBar.scrollPosition = Math.max(0, this.scrollWidth - this.viewport.width)
-          break
-      }
-    } finally {
-      this._isApplyingStickyScroll = wasApplyingStickyScroll
-    }
-  }
-
-  constructor(ctx: RenderContext, options: ScrollBoxOptions) {
-    const {
-      wrapperOptions,
-      viewportOptions,
-      contentOptions,
-      rootOptions,
-      scrollbarOptions,
-      verticalScrollbarOptions,
-      horizontalScrollbarOptions,
-      stickyScroll = false,
-      stickyStart,
-      scrollX = false,
-      scrollY = true,
-      scrollAcceleration,
-      viewportCulling = true,
-      ...rootBoxOptions
-    } = options
-
-    const forwardedContentPadding = {
-      ...pickScrollBoxPadding(rootBoxOptions),
-      ...pickScrollBoxPadding(rootOptions),
-    }
-
-    const sanitizedRootBoxOptions = stripScrollBoxPadding(rootBoxOptions)
-    const sanitizedRootOptions = rootOptions ? stripScrollBoxPadding(rootOptions) : undefined
-    const mergedContentOptions = {
-      ...forwardedContentPadding,
-      ...contentOptions,
-    }
-
-    // Root
-    super(ctx, {
-      flexDirection: "row",
-      alignItems: "stretch",
-      ...(sanitizedRootBoxOptions as BoxOptions),
-      ...(sanitizedRootOptions as BoxOptions),
-    })
-
-    this.internalId = ScrollBoxRenderable.idCounter++
-    this._stickyScroll = stickyScroll
-    this._stickyStart = stickyStart
-    this.scrollAccel = scrollAcceleration ?? new LinearScrollAccel()
-
-    this.wrapper = new BoxRenderable(ctx, {
-      flexDirection: "column",
-      flexGrow: 1,
-      ...wrapperOptions,
-      id: `scroll-box-wrapper-${this.internalId}`,
-    })
-    super.add(this.wrapper)
-
-    this.viewport = new BoxRenderable(ctx, {
-      flexDirection: "column",
-      flexGrow: 1,
-      // NOTE: Overflow scroll makes the content size behave weird
-      // when the scrollbox is in a container with max-width/height
-      overflow: "hidden",
-      onSizeChange: () => {
-        this.recalculateBarProps()
-      },
-      ...viewportOptions,
-      id: `scroll-box-viewport-${this.internalId}`,
-    })
-    this.wrapper.add(this.viewport)
-
-    this.content = new ContentRenderable(ctx, this.viewport, viewportCulling, {
-      alignSelf: "flex-start",
-      flexShrink: 0,
-      ...(scrollX ? { minWidth: "100%" } : { minWidth: "100%", maxWidth: "100%" }),
-      ...(scrollY ? { minHeight: "100%" } : { minHeight: "100%", maxHeight: "100%" }),
-      onSizeChange: () => {
-        this.recalculateBarProps()
-      },
-      ...mergedContentOptions,
-      id: `scroll-box-content-${this.internalId}`,
-    })
-    this.viewport.add(this.content)
-
-    this.verticalScrollBar = new ScrollBarRenderable(ctx, {
-      ...scrollbarOptions,
-      ...verticalScrollbarOptions,
-      arrowOptions: {
-        ...scrollbarOptions?.arrowOptions,
-        ...verticalScrollbarOptions?.arrowOptions,
-      },
-      id: `scroll-box-vertical-scrollbar-${this.internalId}`,
-      orientation: "vertical",
-      onChange: (position) => {
-        this.content.translateY = -position
-        this.updateStickyState()
-      },
-    })
-    super.add(this.verticalScrollBar)
-
-    this.horizontalScrollBar = new ScrollBarRenderable(ctx, {
-      ...scrollbarOptions,
-      ...horizontalScrollbarOptions,
-      arrowOptions: {
-        ...scrollbarOptions?.arrowOptions,
-        ...horizontalScrollbarOptions?.arrowOptions,
-      },
-      id: `scroll-box-horizontal-scrollbar-${this.internalId}`,
-      orientation: "horizontal",
-      onChange: (position) => {
-        this.content.translateX = -position
-        this.updateStickyState()
-      },
-    })
-    this.wrapper.add(this.horizontalScrollBar)
-
-    this.recalculateBarProps()
-
-    if (stickyStart && stickyScroll) {
-      this.applyStickyStart(stickyStart)
-    }
-
-    this.selectionListener = () => {
-      const selection = this._ctx.getSelection()
-      if (!selection || !selection.isDragging) {
-        this.stopAutoScroll()
-      }
-    }
-    this._ctx.on("selection", this.selectionListener)
-  }
-
-  protected onUpdate(deltaTime: number): void {
-    this.handleAutoScroll(deltaTime)
-  }
-
-  public scrollBy(delta: number | { x: number; y: number }, unit: ScrollUnit = "absolute"): void {
-    if (typeof delta === "number") {
-      this.verticalScrollBar.scrollBy(delta, unit)
-    } else {
-      this.verticalScrollBar.scrollBy(delta.y, unit)
-      this.horizontalScrollBar.scrollBy(delta.x, unit)
-    }
-    // Note: scrollBy doesn't need to set _hasManualScroll here because the scrollbar
-    // change will trigger the scrollTop setter which handles it
-  }
-
-  public scrollChildIntoView(childId: string): void {
-    const child = this.content.findDescendantById(childId)
-    if (!child) return
-
-    const getNearestDelta = (
-      elementStart: number,
-      elementEnd: number,
-      viewportStart: number,
-      viewportEnd: number,
-    ): number => {
-      const elementSize = elementEnd - elementStart
-      const viewportSize = viewportEnd - viewportStart
-      const elementStartOutside = elementStart < viewportStart
-      const elementEndOutside = elementEnd > viewportEnd
-
-      if (elementStartOutside && elementEndOutside) {
-        return 0
-      }
-
-      if ((elementStartOutside && elementSize < viewportSize) || (elementEndOutside && elementSize > viewportSize)) {
-        return elementStart - viewportStart
-      }
-
-      if ((elementStartOutside && elementSize > viewportSize) || (elementEndOutside && elementSize < viewportSize)) {
-        return elementEnd - viewportEnd
-      }
-
-      return 0
-    }
-
-    const childTop = child.y
-    const childBottom = child.y + child.height
-    const viewportTop = this.viewport.y
-    const viewportBottom = this.viewport.y + this.viewport.height
-
-    const dy = getNearestDelta(childTop, childBottom, viewportTop, viewportBottom)
-
-    const childLeft = child.x
-    const childRight = child.x + child.width
-    const viewportLeft = this.viewport.x
-    const viewportRight = this.viewport.x + this.viewport.width
-
-    const dx = getNearestDelta(childLeft, childRight, viewportLeft, viewportRight)
-
-    if (dx !== 0 || dy !== 0) {
-      this.scrollBy({ x: dx, y: dy })
-    }
-  }
-
-  public scrollTo(position: number | { x: number; y: number }): void {
-    if (typeof position === "number") {
-      this.scrollTop = position
-    } else {
-      this.scrollTop = position.y
-      this.scrollLeft = position.x
-    }
-    // Note: scrollTo doesn't need to set _hasManualScroll here because
-    // the scrollTop/scrollLeft setters handle it
-  }
-
-  private isAtStickyPosition(): boolean {
-    if (!this._stickyScroll || !this._stickyStart) {
-      return false
-    }
-
-    const maxScrollTop = Math.max(0, this.scrollHeight - this.viewport.height)
-    const maxScrollLeft = Math.max(0, this.scrollWidth - this.viewport.width)
-
-    switch (this._stickyStart) {
-      case "top":
-        return this.scrollTop === 0
-      case "bottom":
-        return this.scrollTop >= maxScrollTop
-      case "left":
-        return this.scrollLeft === 0
-      case "right":
-        return this.scrollLeft >= maxScrollLeft
-      default:
-        return false
-    }
-  }
-
-  private isAtStickyReengagePoint(
-    stickyStart: "bottom" | "top" | "left" | "right",
-    maxScrollTop: number,
-    maxScrollLeft: number,
-  ): boolean {
-    switch (stickyStart) {
-      case "top":
-        return maxScrollTop > 0 && this.scrollTop <= 0
-      case "bottom":
-        return maxScrollTop > 0 && this.scrollTop >= maxScrollTop - 1
-      case "left":
-        return maxScrollLeft > 0 && this.scrollLeft <= 0
-      case "right":
-        return maxScrollLeft > 0 && this.scrollLeft >= maxScrollLeft - 1
-    }
-  }
-
-  public add(obj: Renderable | VNode<any, any[]>, index?: number): number {
-    return this.content.add(obj, index)
-  }
-
-  public insertBefore(obj: Renderable | VNode<any, any[]> | unknown, anchor?: Renderable | unknown): number {
-    return this.content.insertBefore(obj, anchor)
-  }
-
-  public remove(child: BaseRenderable): void {
-    // Internal parts (wrapper, scrollbars) are direct children of the root,
-    // not of content. Route by actual parentage so destroy() and explicit
-    // removals of internals detach them instead of silently no-oping through
-    // the content delegation.
-    if (child.parent === this) {
-      super.remove(child)
-      return
-    }
-    this.content.remove(child)
-  }
-
-  public getChildren(): Renderable[] {
-    return this.content.getChildren()
-  }
-
-  public getRenderable(id: string): Renderable | undefined {
-    return this.content.getRenderable(id)
-  }
-
-  protected onMouseEvent(event: MouseEvent): void {
-    if (event.type === "scroll") {
-      let dir = event.scroll?.direction
-      if (event.modifiers.shift)
-        dir = dir === "up" ? "left" : dir === "down" ? "right" : dir === "right" ? "down" : "up"
-
-      const baseDelta = event.scroll?.delta ?? 0
-      const now = Date.now()
-      const multiplier = this.scrollAccel.tick(now)
-      const scrollAmount = baseDelta * multiplier
-
-      if (dir === "up") {
-        this.scrollAccumulatorY -= scrollAmount
-        const integerScroll = Math.trunc(this.scrollAccumulatorY)
-        if (integerScroll !== 0) {
-          this.scrollTop += integerScroll
-          this.scrollAccumulatorY -= integerScroll
-        }
-      } else if (dir === "down") {
-        this.scrollAccumulatorY += scrollAmount
-        const integerScroll = Math.trunc(this.scrollAccumulatorY)
-        if (integerScroll !== 0) {
-          this.scrollTop += integerScroll
-          this.scrollAccumulatorY -= integerScroll
-        }
-      } else if (dir === "left") {
-        this.scrollAccumulatorX -= scrollAmount
-        const integerScroll = Math.trunc(this.scrollAccumulatorX)
-        if (integerScroll !== 0) {
-          this.scrollLeft += integerScroll
-          this.scrollAccumulatorX -= integerScroll
-        }
-      } else if (dir === "right") {
-        this.scrollAccumulatorX += scrollAmount
-        const integerScroll = Math.trunc(this.scrollAccumulatorX)
-        if (integerScroll !== 0) {
-          this.scrollLeft += integerScroll
-          this.scrollAccumulatorX -= integerScroll
-        }
-      }
-
-      this.syncManualScrollState()
-    }
-
-    if (event.type === "drag" && event.isDragging) {
-      this.updateAutoScroll(event.x, event.y)
-    } else if (event.type === "up") {
-      this.stopAutoScroll()
-    }
-  }
-
-  public handleKeyPress(key: KeyEvent): boolean {
-    // Let scrollbars handle their own acceleration
-    if (this.verticalScrollBar.handleKeyPress(key)) {
-      this.scrollAccel.reset()
-      this.resetScrollAccumulators()
-      this.syncManualScrollState()
-      return true
-    }
-    if (this.horizontalScrollBar.handleKeyPress(key)) {
-      this.scrollAccel.reset()
-      this.resetScrollAccumulators()
-      this.syncManualScrollState()
-      return true
-    }
-    return false
-  }
-
-  private resetScrollAccumulators(): void {
-    this.scrollAccumulatorX = 0
-    this.scrollAccumulatorY = 0
-  }
-
-  public startAutoScroll(mouseX: number, mouseY: number): void {
-    this.stopAutoScroll()
-    this.autoScrollMouseX = mouseX
-    this.autoScrollMouseY = mouseY
-    this.cachedAutoScrollSpeed = this.getAutoScrollSpeed(mouseX, mouseY)
-    this.isAutoScrolling = true
-
-    if (!this.live) {
-      this.live = true
-    }
-  }
-
-  public updateAutoScroll(mouseX: number, mouseY: number): void {
-    this.autoScrollMouseX = mouseX
-    this.autoScrollMouseY = mouseY
-
-    // Cache the speed based on current mouse position
-    this.cachedAutoScrollSpeed = this.getAutoScrollSpeed(mouseX, mouseY)
-
-    const scrollX = this.getAutoScrollDirectionX(mouseX)
-    const scrollY = this.getAutoScrollDirectionY(mouseY)
-
-    if (scrollX === 0 && scrollY === 0) {
-      this.stopAutoScroll()
-    } else if (!this.isAutoScrolling) {
-      this.startAutoScroll(mouseX, mouseY)
-    }
-  }
-
-  public stopAutoScroll(): void {
-    const wasAutoScrolling = this.isAutoScrolling
-    this.isAutoScrolling = false
-    this.autoScrollAccumulatorX = 0
-    this.autoScrollAccumulatorY = 0
-
-    // Only turn off live if no other features need it
-    // For now, auto-scroll is the only feature using live, but this could be extended
-    if (wasAutoScrolling && !this.hasOtherLiveReasons()) {
-      this.live = false
-    }
-  }
-
-  private hasOtherLiveReasons(): boolean {
-    // Placeholder for future features that might need live mode
-    // For now, always return false since auto-scroll is the only user
-    return false
-  }
-
-  private handleAutoScroll(deltaTime: number): void {
-    if (!this.isAutoScrolling) return
-
-    const scrollX = this.getAutoScrollDirectionX(this.autoScrollMouseX)
-    const scrollY = this.getAutoScrollDirectionY(this.autoScrollMouseY)
-    const scrollAmount = this.cachedAutoScrollSpeed * (deltaTime / 1000)
-
-    let scrolled = false
-
-    if (scrollX !== 0) {
-      this.autoScrollAccumulatorX += scrollX * scrollAmount
-      const integerScrollX = Math.trunc(this.autoScrollAccumulatorX)
-      if (integerScrollX !== 0) {
-        this.scrollLeft += integerScrollX
-        this.autoScrollAccumulatorX -= integerScrollX
-        scrolled = true
-      }
-    }
-
-    if (scrollY !== 0) {
-      this.autoScrollAccumulatorY += scrollY * scrollAmount
-      const integerScrollY = Math.trunc(this.autoScrollAccumulatorY)
-      if (integerScrollY !== 0) {
-        this.scrollTop += integerScrollY
-        this.autoScrollAccumulatorY -= integerScrollY
-        scrolled = true
-      }
-    }
-
-    if (scrolled) {
-      this._ctx.requestSelectionUpdate()
-    }
-
-    if (scrollX === 0 && scrollY === 0) {
-      this.stopAutoScroll()
-    }
-  }
-
-  private getAutoScrollDirectionX(mouseX: number): number {
-    const relativeX = mouseX - this.x
-    const distToLeft = relativeX
-    const distToRight = this.width - relativeX
-
-    if (distToLeft <= this.autoScrollThresholdHorizontal) {
-      return this.scrollLeft > 0 ? -1 : 0
-    } else if (distToRight <= this.autoScrollThresholdHorizontal) {
-      const maxScrollLeft = this.scrollWidth - this.viewport.width
-      return this.scrollLeft < maxScrollLeft ? 1 : 0
-    }
-    return 0
-  }
-
-  private getAutoScrollDirectionY(mouseY: number): number {
-    const relativeY = mouseY - this.y
-    const distToTop = relativeY
-    const distToBottom = this.height - relativeY
-
-    if (distToTop <= this.autoScrollThresholdVertical) {
-      return this.scrollTop > 0 ? -1 : 0
-    } else if (distToBottom <= this.autoScrollThresholdVertical) {
-      const maxScrollTop = this.scrollHeight - this.viewport.height
-      return this.scrollTop < maxScrollTop ? 1 : 0
-    }
-    return 0
-  }
-
-  private getAutoScrollSpeed(mouseX: number, mouseY: number): number {
-    const relativeX = mouseX - this.x
-    const relativeY = mouseY - this.y
-
-    const distToLeft = relativeX
-    const distToRight = this.width - relativeX
-    const distToTop = relativeY
-    const distToBottom = this.height - relativeY
-
-    const minDistance = Math.min(distToLeft, distToRight, distToTop, distToBottom)
-
-    if (minDistance <= 1) {
-      return this.autoScrollSpeedFast
-    } else if (minDistance <= 2) {
-      return this.autoScrollSpeedMedium
-    } else {
-      return this.autoScrollSpeedSlow
-    }
-  }
-
-  private recalculateBarProps(): void {
-    // Wrap entire method to prevent scroll changes from being treated as manual
-    const wasApplyingStickyScroll = this._isApplyingStickyScroll
-    this._isApplyingStickyScroll = true
-
-    try {
-      this.verticalScrollBar.scrollSize = this.content.height
-      this.verticalScrollBar.viewportSize = this.viewport.height
-      this.horizontalScrollBar.scrollSize = this.content.width
-      this.horizontalScrollBar.viewportSize = this.viewport.width
-
-      if (this._stickyScroll) {
-        const newMaxScrollTop = Math.max(0, this.scrollHeight - this.viewport.height)
-        const newMaxScrollLeft = Math.max(0, this.scrollWidth - this.viewport.width)
-        const stickyStart = this._stickyStart
-
-        if (stickyStart && !this._hasManualScroll) {
-          this.applyStickyStart(stickyStart)
-        } else if (
-          stickyStart &&
-          this._hasManualScroll &&
-          this.isAtStickyReengagePoint(stickyStart, newMaxScrollTop, newMaxScrollLeft)
-        ) {
-          // User scrolled back to the sticky edge during streaming; re-engage sticky.
-          this._hasManualScroll = false
-          this.applyStickyStart(stickyStart)
-        } else if (!this._hasManualScroll) {
-          if (this._stickyScrollTop) {
-            this.scrollTop = 0
-          } else if (this._stickyScrollBottom && newMaxScrollTop > 0) {
-            this.scrollTop = newMaxScrollTop
-          }
-
-          if (this._stickyScrollLeft) {
-            this.scrollLeft = 0
-          } else if (this._stickyScrollRight && newMaxScrollLeft > 0) {
-            this.scrollLeft = newMaxScrollLeft
-          }
-        }
-      }
-    } finally {
-      this._isApplyingStickyScroll = wasApplyingStickyScroll
-    }
-
-    // NOTE: This is obviously a workaround for something,
-    // which is that the bar props are recalculated when the viewport is resized,
-    // which intially happens onUpdate but is the viewport does not have the correct dimensions yet,
-    // then when it does, no update is triggered and when we do we are in the middle of a render,
-    // which just ignores the request. ¯\_(ツ)_/¯
-    // TODO: Fix this properly. How? Move yoga to native, get all changes for elements in one go
-    // and update all renderables in one go before rendering.
-    // OR: Move this logic to the viewport. IMHO the wrapper and viewport are overkill and not necessary.
-    //     The Scrollbox can be the viewport, we are using translations on the content anyway.
-    process.nextTick(() => {
-      this.requestRender()
-    })
-  }
-
-  // Setters for reactive properties
-  public set padding(value: number | `${number}%` | null | undefined) {
-    this.content.padding = value
-    this.requestRender()
-  }
-
-  public set paddingX(value: number | `${number}%` | null | undefined) {
-    this.content.paddingX = value
-    this.requestRender()
-  }
-
-  public set paddingY(value: number | `${number}%` | null | undefined) {
-    this.content.paddingY = value
-    this.requestRender()
-  }
-
-  public set paddingTop(value: number | `${number}%` | null | undefined) {
-    this.content.paddingTop = value
-    this.requestRender()
-  }
-
-  public set paddingRight(value: number | `${number}%` | null | undefined) {
-    this.content.paddingRight = value
-    this.requestRender()
-  }
-
-  public set paddingBottom(value: number | `${number}%` | null | undefined) {
-    this.content.paddingBottom = value
-    this.requestRender()
-  }
-
-  public set paddingLeft(value: number | `${number}%` | null | undefined) {
-    this.content.paddingLeft = value
-    this.requestRender()
-  }
-
-  public set rootOptions(options: ScrollBoxOptions["rootOptions"]) {
-    Object.assign(this, options)
-    this.requestRender()
-  }
-
-  public set wrapperOptions(options: ScrollBoxOptions["wrapperOptions"]) {
-    Object.assign(this.wrapper, options)
-    this.requestRender()
-  }
-
-  public set viewportOptions(options: ScrollBoxOptions["viewportOptions"]) {
-    Object.assign(this.viewport, options)
-    this.requestRender()
-  }
-
-  public set contentOptions(options: ScrollBoxOptions["contentOptions"]) {
-    Object.assign(this.content, options)
-    this.requestRender()
-  }
-
-  public set scrollbarOptions(options: ScrollBoxOptions["scrollbarOptions"]) {
-    Object.assign(this.verticalScrollBar, options)
-    Object.assign(this.horizontalScrollBar, options)
-    this.requestRender()
-  }
-
-  public set verticalScrollbarOptions(options: ScrollBoxOptions["verticalScrollbarOptions"]) {
-    Object.assign(this.verticalScrollBar, options)
-    this.requestRender()
-  }
-
-  public set horizontalScrollbarOptions(options: ScrollBoxOptions["horizontalScrollbarOptions"]) {
-    Object.assign(this.horizontalScrollBar, options)
-    this.requestRender()
-  }
-
-  public get scrollAcceleration(): ScrollAcceleration {
-    return this.scrollAccel
-  }
-
-  public set scrollAcceleration(value: ScrollAcceleration) {
-    this.scrollAccel = value
-  }
-
-  get viewportCulling(): boolean {
-    return this.content.viewportCulling
-  }
-
-  set viewportCulling(value: boolean) {
-    this.content.viewportCulling = value
-    this.requestRender()
-  }
-
-  protected destroySelf(): void {
-    if (this.selectionListener) {
-      this._ctx.off("selection", this.selectionListener)
-      this.selectionListener = undefined
-    }
-    super.destroySelf()
-  }
-}