Merge pull request #1329 from Textualize/auto-width

Fix for auto dimensions on containers, with relative children.
This commit is contained in:
Will McGugan
2022-12-08 14:59:07 +00:00
committed by GitHub
12 changed files with 742 additions and 374 deletions

View File

@@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
- Type selectors can now contain numbers https://github.com/Textualize/textual/issues/1253
- Fixed visibility not affecting children https://github.com/Textualize/textual/issues/1313
- Fixed issue with auto width/height and relative children https://github.com/Textualize/textual/issues/1319
## [0.5.0] - 2022-11-20

View File

@@ -46,7 +46,7 @@ class Layout(ABC):
"""
def get_content_width(self, widget: Widget, container: Size, viewport: Size) -> int:
"""Get the width of the content.
"""Get the optimal content width by arranging children.
Args:
widget (Widget): The container widget.
@@ -56,19 +56,18 @@ class Layout(ABC):
Returns:
int: Width of the content.
"""
width: int | None = None
gutter_width = widget.gutter.width
for child in widget.displayed_children:
if not child.is_container:
child_width = (
child.get_content_width(container, viewport)
+ gutter_width
+ child.gutter.width
)
width = child_width if width is None else max(width, child_width)
if width is None:
if not widget.children:
width = 0
else:
# Use a size of 0, 0 to ignore relative sizes, since those are flexible anyway
placements, _, _ = widget._arrange(Size(0, 0))
width = max(
[
placement.region.right + placement.margin.right
for placement in placements
],
default=0,
)
return width
def get_content_height(
@@ -85,12 +84,17 @@ class Layout(ABC):
Returns:
int: Content height (in lines).
"""
if not widget.displayed_children:
if not widget.children:
height = 0
else:
placements, *_ = widget._arrange(Size(width, container.height))
# Use a height of zero to ignore relative heights
placements, _, _ = widget._arrange(Size(width, 0))
height = max(
placement.region.bottom + placement.margin.bottom
for placement in placements
[
placement.region.bottom + placement.margin.bottom
for placement in placements
],
default=0,
)
return height

View File

@@ -1,3 +1,6 @@
Label {
width: 100%;
}
ColorButtons {
dock: left;

View File

@@ -1,3 +1,7 @@
Label {
width: 100%;
}
EasingButtons > Button {
width: 100%;
}

View File

@@ -190,7 +190,7 @@ LocationLink {
padding: 1 2;
background: $boost;
color: $text;
box-sizing: content-box;
content-align: center middle;
}

View File

@@ -322,7 +322,7 @@ class DemoApp(App):
example_css = "\n".join(Path(self.css_path[0]).read_text().splitlines()[:50])
yield Container(
Sidebar(classes="-hidden"),
Header(show_clock=True),
Header(show_clock=False),
TextLog(classes="-hidden", wrap=False, highlight=True, markup=True),
Body(
QuickAccess(

View File

@@ -59,25 +59,3 @@ class HorizontalLayout(Layout):
x = next_x + margin
return placements, set(displayed_children)
def get_content_width(self, widget: Widget, container: Size, viewport: Size) -> int:
"""Get the width of the content. In Horizontal layout, the content width of
a widget is the sum of the widths of its children.
Args:
widget (Widget): The container widget.
container (Size): The container size.
viewport (Size): The viewport size.
Returns:
int: Width of the content.
"""
if not widget.displayed_children:
width = 0
else:
placements, *_ = widget._arrange(container)
width = max(
placement.region.right + placement.margin.right
for placement in placements
)
return width

View File

@@ -37,6 +37,7 @@ from rich.text import Text
from . import errors, events, messages
from ._animator import DEFAULT_EASING, Animatable, BoundAnimator, EasingFunction
from ._arrange import DockArrangeResult, arrange
from ._cache import LRUCache
from ._context import active_app
from ._easing import DEFAULT_SCROLL_EASING
from ._layout import Layout
@@ -246,8 +247,8 @@ class Widget(DOMNode):
self._content_width_cache: tuple[object, int] = (None, 0)
self._content_height_cache: tuple[object, int] = (None, 0)
self._arrangement: DockArrangeResult | None = None
self._arrangement_cache_key: tuple[int, Size] = (-1, Size())
self._arrangement_cache_updates: int = -1
self._arrangement_cache: LRUCache[Size, DockArrangeResult] = LRUCache(4)
self._styles_cache = StylesCache()
self._rich_style_cache: dict[str, tuple[Style, Style]] = {}
@@ -457,21 +458,24 @@ class Widget(DOMNode):
Returns:
ArrangeResult: Widget locations.
"""
assert self.is_container
arrange_cache_key = (self.children._updates, size)
if (
self._arrangement is not None
and arrange_cache_key == self._arrangement_cache_key
):
return self._arrangement
if self._arrangement_cache_updates != self.children._updates:
self._arrangement_cache_updates = self.children._updates
self._arrangement_cache.clear()
self._arrangement_cache_key = arrange_cache_key
self._arrangement = arrange(self, self.children, size, self.screen.size)
return self._arrangement
cached_arrangement = self._arrangement_cache.get(size, None)
if cached_arrangement is not None:
return cached_arrangement
arrangement = self._arrangement_cache[size] = arrange(
self, self.children, size, self.screen.size
)
return arrangement
def _clear_arrangement_cache(self) -> None:
"""Clear arrangement cache, forcing a new arrange operation."""
self._arrangement = None
self._arrangement_cache.clear()
def _get_virtual_dom(self) -> Iterable[Widget]:
"""Get widgets not part of the DOM.

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,37 @@
from textual.app import App, ComposeResult
from textual.containers import Horizontal
from textual.widgets import Static
class HeightApp(App[None]):
CSS = """
Horizontal {
border: solid red;
height: auto;
}
Static {
border: solid green;
width: auto;
}
#fill_parent {
height: 100%;
}
#static {
height: 16;
}
"""
def compose(self) -> ComposeResult:
yield Horizontal(
Static("As tall as container", id="fill_parent"),
Static("This has default\nheight\nbut a\nfew lines"),
Static("I have a static height", id="static"),
)
if __name__ == "__main__":
HeightApp().run()

View File

@@ -16,7 +16,7 @@ class Body1(Vertical):
class Body2(Vertical):
def compose(self) -> ComposeResult:
yield Label("I'm sorry, Dave. I'm afraid I can't do that. " * 300)
yield Label("My God! It's full of stars! " * 300)
class Good(Screen):
@@ -52,6 +52,10 @@ class Layers(App[None]):
background: red;
color: yellow;
}
Body2 {
background: green;
}
"""
SCREENS = {"good": Good, "bad": Bad}

View File

@@ -139,17 +139,25 @@ def test_multiple_css(snap_compare):
def test_order_independence(snap_compare):
# Interaction between multiple CSS files and app-level/classvar CSS
assert snap_compare("snapshot_apps/order_independence.py")
def test_order_independence_toggle(snap_compare):
# Interaction between multiple CSS files and app-level/classvar CSS
assert snap_compare("snapshot_apps/order_independence.py", press="t,_")
def test_columns_height(snap_compare):
# Interaction with height auto, and relative heights to make columns
assert snap_compare("snapshot_apps/columns_height.py")
# --- Other ---
def test_key_display(snap_compare):
assert snap_compare(SNAPSHOT_APPS_DIR / "key_display.py")
def test_demo(snap_compare):
"""Test the demo app (python -m textual)"""
assert snap_compare(Path("../../src/textual/demo.py"))