mirror of
https://github.com/anomalyco/opentui.git
synced 2026-04-25 04:55:58 +03:00
[GH-ISSUE #76] [Proposal] Scroll Containers #16
Labels
No labels
bug
core
documentation
feature
good first issue
help wanted
pull-request
question
react
solid
tmux
windows
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
starred/opentui#16
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @ReverseGem7 on GitHub (Aug 25, 2025).
Original GitHub issue: https://github.com/anomalyco/opentui/issues/76
Summary
Currently, there is no straightforward way to determine the height and width of a rendered child element in the terminal renderer. The only way to get it is to calculate the size of each component manually using
measureTextorstringWidth. This proposal suggests adding a utility function that calculates these dimensions automatically based on content and wrapping rules.Motivation
Knowing the exact size of a child element is necessary for:
@kommander commented on GitHub (Aug 25, 2025):
I want to provide a ScrollContainer renderable for exactly that. Yoga nodes can have an
overflowset toscroll, but only in the main axis direction of the container (column/row), so for scroll in both directions one needs a nested container setup and handle that. With overflow set, yoga provides the content size by letting the first level container grow it's layout naturally across the main axis as if there were no boundaries. So we can take the sub container dimensions and handle a scrollOffset in the scrollable root and set x/y accordingly. Combining that with a framebuffer that only has the clipping dimensions (buffered=true in scroll root), that will only draw elements that are within the clipping area. As buffer draws already check bounds, it will just not draw elements that are out of bounds and performance should come with it automatically.@msmps commented on GitHub (Aug 25, 2025):
As a side note for the interim - you can grab the dimensions by using refs in solid/react and directly in core
@ReverseGem7 commented on GitHub (Aug 25, 2025):
It works for height, but for width it seems they aren’t calculating the actual width.
@kommander commented on GitHub (Aug 25, 2025):
It is calculating the width, but the width of the node within the layout and the boundary is the terminal. That's the measure function in the TextRenderable, which is called by yoga layout. It does not respect any overflow settings yet.
@ReverseGem7 commented on GitHub (Aug 25, 2025):
Oh, thanks for the explanation
@ReverseGem7 commented on GitHub (Sep 3, 2025):
Was solved in https://github.com/sst/opentui/pull/120 and https://github.com/sst/opentui/pull/125