Merge pull request #1332 from Textualize/container-offsets-fix

Fix container offsets

Author: willmcgugan

CHANGELOG.md

@@ -26,6 +26,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
+- Fixed issue with offset applied to containers https://github.com/Textualize/textual/issues/1256
 
 ## [0.5.0] - 2022-11-20
 

docs/examples/guide/layout/combining_layouts.css

@@ -5,20 +5,22 @@
     grid-rows: 1fr;
 }
 
-#left-pane > Static {
+#left-pane > Static {    
     background: $boost;
     color: auto;
     margin-bottom: 1;
     padding: 1;
 }
 
 #left-pane {
+    height: 100%;
     row-span: 2;
     background: $panel;
     border: dodgerblue;
 }
 
 #top-right {
+    height: 100%;
     background: $panel;
     border: mediumvioletred;
 }
@@ -31,6 +33,7 @@
 }
 
 #bottom-right {
+    height: 100%;
     layout: grid;
     grid-size: 3;
     grid-columns: 1fr;

examples/calculator.css

@@ -11,6 +11,7 @@ Screen {
     margin: 1 2;
     min-height: 25;
     min-width: 26;
+    height: 100%;
 }
 
 Button {

src/textual/_compositor.py

@@ -371,7 +371,9 @@ def add_widget(
             )
 
             # Container region is minus border
-            container_region = region.shrink(widget.styles.gutter)
+            container_region = region.shrink(widget.styles.gutter).translate(
+                layout_offset
+            )
             container_size = container_region.size
 
             # Widgets with scrollbars (containers or scroll view) require additional processing
@@ -393,7 +395,7 @@ def add_widget(
                     widgets.update(arranged_widgets)
 
                     # An offset added to all placements
-                    placement_offset = container_region.offset + layout_offset
+                    placement_offset = container_region.offset
                     placement_scroll_offset = placement_offset - widget.scroll_offset
 
                     _layers = widget.layers

src/textual/_styles_cache.py

@@ -198,7 +198,7 @@ def render(
         if crop is None:
             crop = size.region
 
-        width, height = size
+        width, _height = size
         if width != self._width:
             self.clear()
             self._width = width

src/textual/geometry.py

@@ -635,6 +635,7 @@ def contains_region(self, other: Region) -> bool:
             and (y2 >= oy2 >= y1)
         )
 
+    @lru_cache(maxsize=1024)
     def translate(self, offset: tuple[int, int]) -> Region:
         """Move the offset of the Region.
 

tests/snapshot_tests/__snapshots__/test_snapshots.ambr

@@ -0,0 +1,41 @@
+from textual.app import App, ComposeResult
+from textual.containers import Vertical
+from textual.widgets import Label, Static
+
+
+class Box(Static):
+    DEFAULT_CSS = """    
+    Box {
+        border: solid white;
+        background: darkblue;
+        width: 16;
+        height: auto;
+    }    
+    """
+
+    def compose(self) -> ComposeResult:
+        yield Label("FOO\nBAR\nBAZ")
+
+
+class OffsetsApp(App):
+
+    CSS = """
+    
+    #box1 {
+        offset: 5 5;
+    }
+
+    #box2 {
+        offset: 15 10;
+    }    
+    
+    """
+
+    def compose(self) -> ComposeResult:
+        yield Box(id="box1")
+        yield Box(id="box2")
+
+
+if __name__ == "__main__":
+    app = OffsetsApp()
+    app.run()

tests/snapshot_tests/snapshot_apps/offsets.py

@@ -151,6 +151,11 @@ def test_columns_height(snap_compare):
     assert snap_compare("snapshot_apps/columns_height.py")
 
 
+def test_offsets(snap_compare):
+    """Test offsets of containers"""
+    assert snap_compare("snapshot_apps/offsets.py")
+
+
 # --- Other ---