Invalidate the layout when the flex container's margin changes (#2539)

* Invalidate the layout when the flex container's margin changes Also when a spacer's width or height changes. * Make the new function open, not abstract * More test snapshots * More missing snapshots
cashapp · Jan 22, 2025 · f8f0f07 · f8f0f07
1 parent dc4fa22
commit f8f0f07
Show file tree

Hide file tree

Showing 45 changed files with 167 additions and 4 deletions.
diff --git a/build-support/src/main/resources/app/cash/redwood/buildsupport/flexboxHelpers.kt b/build-support/src/main/resources/app/cash/redwood/buildsupport/flexboxHelpers.kt
@@ -51,6 +51,7 @@ internal interface YogaFlexContainer<W : Any> :
         marginBottom = margin.bottom.toPx().toFloat()
       }
     }
+    invalidateSize(true)
   }
 
   override fun horizontalAlignment(horizontalAlignment: MainAxisAlignment) {
@@ -71,10 +72,15 @@ internal interface YogaFlexContainer<W : Any> :
 
   fun crossAxisAlignment(crossAxisAlignment: CrossAxisAlignment) {
     rootNode.alignItems = crossAxisAlignment.toAlignItems()
+    invalidateSize(true)
   }
 
   fun mainAxisAlignment(mainAxisAlignment: MainAxisAlignment) {
     rootNode.justifyContent = mainAxisAlignment.toJustifyContent()
+    invalidateSize(true)
+  }
+
+  open fun invalidateSize(nodeBecameDirty: Boolean = false) {
   }
 }
 

diff --git a/...ut.composeui_ComposeUiFlexContainerTest_RTL_testColumnMarginChanges_nonzero.png b/...ut.composeui_ComposeUiFlexContainerTest_RTL_testColumnMarginChanges_nonzero.png
diff --git a/...ayout.composeui_ComposeUiFlexContainerTest_RTL_testColumnMarginChanges_zero.png b/...ayout.composeui_ComposeUiFlexContainerTest_RTL_testColumnMarginChanges_zero.png
diff --git a/...ayout.composeui_ComposeUiFlexContainerTest_RTL_testRowMarginChanges_nonzero.png b/...ayout.composeui_ComposeUiFlexContainerTest_RTL_testRowMarginChanges_nonzero.png
diff --git a/...d.layout.composeui_ComposeUiFlexContainerTest_RTL_testRowMarginChanges_zero.png b/...d.layout.composeui_ComposeUiFlexContainerTest_RTL_testRowMarginChanges_zero.png
diff --git a/...layout.composeui_ComposeUiFlexContainerTest_testColumnMarginChanges_nonzero.png b/...layout.composeui_ComposeUiFlexContainerTest_testColumnMarginChanges_nonzero.png
diff --git a/...od.layout.composeui_ComposeUiFlexContainerTest_testColumnMarginChanges_zero.png b/...od.layout.composeui_ComposeUiFlexContainerTest_testColumnMarginChanges_zero.png
diff --git a/...od.layout.composeui_ComposeUiFlexContainerTest_testRowMarginChanges_nonzero.png b/...od.layout.composeui_ComposeUiFlexContainerTest_testRowMarginChanges_nonzero.png
diff --git a/...dwood.layout.composeui_ComposeUiFlexContainerTest_testRowMarginChanges_zero.png b/...dwood.layout.composeui_ComposeUiFlexContainerTest_testRowMarginChanges_zero.png
diff --git a/...ut-shared-test/src/commonMain/kotlin/app/cash/redwood/layout/AbstractFlexContainerTest.kt b/...ut-shared-test/src/commonMain/kotlin/app/cash/redwood/layout/AbstractFlexContainerTest.kt
@@ -581,6 +581,36 @@ abstract class AbstractFlexContainerTest<T : Any> {
     snapshotter.snapshot("Empty")
   }
 
+  @Test fun testRowMarginChanges() {
+    testContainerMarginChanges(FlexDirection.Row)
+  }
+
+  @Test fun testColumnMarginChanges() {
+    testContainerMarginChanges(FlexDirection.Column)
+  }
+
+  private fun testContainerMarginChanges(
+    flexDirection: FlexDirection = burstValues(FlexDirection.Column, FlexDirection.Row),
+  ) {
+    val container = flexContainer(flexDirection)
+    val snapshotter = snapshotter(container.value)
+
+    container.width(Constraint.Fill)
+    container.height(Constraint.Fill)
+    container.crossAxisAlignment(CrossAxisAlignment.Stretch)
+    container.mainAxisAlignment(MainAxisAlignment.SpaceBetween)
+
+    container.add(widgetFactory.text(shortText(), backgroundColor = Red))
+    container.add(widgetFactory.text(shortText(), backgroundColor = Green))
+    container.margin(Margin.Zero)
+    container.onEndChanges()
+    snapshotter.snapshot("Zero")
+
+    container.margin(Margin(10.dp, 20.dp, 30.dp, 40.dp))
+    container.onEndChanges()
+    snapshotter.snapshot("Nonzero")
+  }
+
   /** The view shouldn't crash if its displayed after being detached. */
   @Test fun testLayoutAfterDetach() {
     val container = flexContainer(FlexDirection.Column).apply {

diff --git a/...s/__Snapshots__/UIViewFlexContainerTestHost/testColumnMarginChanges.Nonzero.png b/...s/__Snapshots__/UIViewFlexContainerTestHost/testColumnMarginChanges.Nonzero.png
diff --git a/...ests/__Snapshots__/UIViewFlexContainerTestHost/testColumnMarginChanges.Zero.png b/...ests/__Snapshots__/UIViewFlexContainerTestHost/testColumnMarginChanges.Zero.png
diff --git a/...UIViewFlexContainerTestHost/testColumnWithUpdatedCrossAxisAlignment.FlexEnd.png b/...UIViewFlexContainerTestHost/testColumnWithUpdatedCrossAxisAlignment.FlexEnd.png
diff --git a/...ests/__Snapshots__/UIViewFlexContainerTestHost/testRowMarginChanges.Nonzero.png b/...ests/__Snapshots__/UIViewFlexContainerTestHost/testRowMarginChanges.Nonzero.png
diff --git a/...ewTests/__Snapshots__/UIViewFlexContainerTestHost/testRowMarginChanges.Zero.png b/...ewTests/__Snapshots__/UIViewFlexContainerTestHost/testRowMarginChanges.Zero.png
diff --git a/...layout-uiview/src/commonMain/kotlin/app/cash/redwood/layout/uiview/UIViewFlexContainer.kt b/...layout-uiview/src/commonMain/kotlin/app/cash/redwood/layout/uiview/UIViewFlexContainer.kt
@@ -142,7 +142,7 @@ internal class UIViewFlexContainer(
     invalidateSize()
   }
 
-  internal fun invalidateSize(nodeBecameDirty: Boolean = false) {
+  override fun invalidateSize(nodeBecameDirty: Boolean) {
     val sizeListener = this.sizeListener
     if (sizeListener == null) {
       // This is a top-level flex container. Tell the enclosing view to redo its layout.

diff --git a/redwood-layout-uiview/src/commonMain/kotlin/app/cash/redwood/layout/uiview/UIViewSpacer.kt b/redwood-layout-uiview/src/commonMain/kotlin/app/cash/redwood/layout/uiview/UIViewSpacer.kt
@@ -20,18 +20,24 @@ import app.cash.redwood.layout.widget.Spacer
 import app.cash.redwood.ui.Default
 import app.cash.redwood.ui.Density
 import app.cash.redwood.ui.Dp
+import app.cash.redwood.widget.ResizableWidget
+import app.cash.redwood.widget.ResizableWidget.SizeListener
 import kotlinx.cinterop.CValue
 import kotlinx.cinterop.cValue
 import platform.CoreGraphics.CGRectZero
 import platform.CoreGraphics.CGSize
 import platform.CoreGraphics.CGSizeMake
 import platform.UIKit.UIView
 
-internal class UIViewSpacer : Spacer<UIView> {
+internal class UIViewSpacer :
+  Spacer<UIView>,
+  ResizableWidget<UIView> {
   private val view = SpacerUIView()
   override val value: UIView get() = view
   override var modifier: Modifier = Modifier
 
+  override var sizeListener: SizeListener? = null
+
   override fun width(width: Dp) {
     view.width = with(Density.Default) { width.toPx() }
     invalidate()
@@ -44,6 +50,7 @@ internal class UIViewSpacer : Spacer<UIView> {
 
   private fun invalidate() {
     value.setNeedsLayout()
+    sizeListener?.invalidateSize()
   }
 }
 

diff --git a/...dwood.layout.view_ViewFlexContainerTest_RTL_testColumnMarginChanges_nonzero.png b/...dwood.layout.view_ViewFlexContainerTest_RTL_testColumnMarginChanges_nonzero.png
diff --git a/....redwood.layout.view_ViewFlexContainerTest_RTL_testColumnMarginChanges_zero.png b/....redwood.layout.view_ViewFlexContainerTest_RTL_testColumnMarginChanges_zero.png
diff --git a/....redwood.layout.view_ViewFlexContainerTest_RTL_testRowMarginChanges_nonzero.png b/....redwood.layout.view_ViewFlexContainerTest_RTL_testRowMarginChanges_nonzero.png
diff --git a/...ash.redwood.layout.view_ViewFlexContainerTest_RTL_testRowMarginChanges_zero.png b/...ash.redwood.layout.view_ViewFlexContainerTest_RTL_testRowMarginChanges_zero.png
diff --git a/...h.redwood.layout.view_ViewFlexContainerTest_testColumnMarginChanges_nonzero.png b/...h.redwood.layout.view_ViewFlexContainerTest_testColumnMarginChanges_nonzero.png
diff --git a/...cash.redwood.layout.view_ViewFlexContainerTest_testColumnMarginChanges_zero.png b/...cash.redwood.layout.view_ViewFlexContainerTest_testColumnMarginChanges_zero.png
diff --git a/...cash.redwood.layout.view_ViewFlexContainerTest_testRowMarginChanges_nonzero.png b/...cash.redwood.layout.view_ViewFlexContainerTest_testRowMarginChanges_nonzero.png
diff --git a/...pp.cash.redwood.layout.view_ViewFlexContainerTest_testRowMarginChanges_zero.png b/...pp.cash.redwood.layout.view_ViewFlexContainerTest_testRowMarginChanges_zero.png
diff --git a/....layout.composeui_ComposeUiLazyListTest_RTL_testColumnMarginChanges_nonzero.png b/....layout.composeui_ComposeUiLazyListTest_RTL_testColumnMarginChanges_nonzero.png
diff --git a/...ood.layout.composeui_ComposeUiLazyListTest_RTL_testColumnMarginChanges_zero.png b/...ood.layout.composeui_ComposeUiLazyListTest_RTL_testColumnMarginChanges_zero.png
diff --git a/...ood.layout.composeui_ComposeUiLazyListTest_RTL_testRowMarginChanges_nonzero.png b/...ood.layout.composeui_ComposeUiLazyListTest_RTL_testRowMarginChanges_nonzero.png
diff --git a/...edwood.layout.composeui_ComposeUiLazyListTest_RTL_testRowMarginChanges_zero.png b/...edwood.layout.composeui_ComposeUiLazyListTest_RTL_testRowMarginChanges_zero.png
diff --git a/...wood.layout.composeui_ComposeUiLazyListTest_testColumnMarginChanges_nonzero.png b/...wood.layout.composeui_ComposeUiLazyListTest_testColumnMarginChanges_nonzero.png
diff --git a/...redwood.layout.composeui_ComposeUiLazyListTest_testColumnMarginChanges_zero.png b/...redwood.layout.composeui_ComposeUiLazyListTest_testColumnMarginChanges_zero.png
diff --git a/...redwood.layout.composeui_ComposeUiLazyListTest_testRowMarginChanges_nonzero.png b/...redwood.layout.composeui_ComposeUiLazyListTest_testRowMarginChanges_nonzero.png
diff --git a/...sh.redwood.layout.composeui_ComposeUiLazyListTest_testRowMarginChanges_zero.png b/...sh.redwood.layout.composeui_ComposeUiLazyListTest_testRowMarginChanges_zero.png
diff --git a/...ots__/UIViewLazyListAsFlexContainerTestHost/testColumnMarginChanges.Nonzero.png b/...ots__/UIViewLazyListAsFlexContainerTestHost/testColumnMarginChanges.Nonzero.png
diff --git a/...pshots__/UIViewLazyListAsFlexContainerTestHost/testColumnMarginChanges.Zero.png b/...pshots__/UIViewLazyListAsFlexContainerTestHost/testColumnMarginChanges.Zero.png
diff --git a/...pshots__/UIViewLazyListAsFlexContainerTestHost/testRowMarginChanges.Nonzero.png b/...pshots__/UIViewLazyListAsFlexContainerTestHost/testRowMarginChanges.Nonzero.png
diff --git a/...Snapshots__/UIViewLazyListAsFlexContainerTestHost/testRowMarginChanges.Zero.png b/...Snapshots__/UIViewLazyListAsFlexContainerTestHost/testRowMarginChanges.Zero.png
diff --git a/...ut.view_ViewLazyListAsFlexContainerTest_RTL_testColumnMarginChanges_nonzero.png b/...ut.view_ViewLazyListAsFlexContainerTest_RTL_testColumnMarginChanges_nonzero.png
diff --git a/...ayout.view_ViewLazyListAsFlexContainerTest_RTL_testColumnMarginChanges_zero.png b/...ayout.view_ViewLazyListAsFlexContainerTest_RTL_testColumnMarginChanges_zero.png
diff --git a/...ayout.view_ViewLazyListAsFlexContainerTest_RTL_testRowMarginChanges_nonzero.png b/...ayout.view_ViewLazyListAsFlexContainerTest_RTL_testRowMarginChanges_nonzero.png
diff --git a/...zylayout.view_ViewLazyListAsFlexContainerTest_RTL_testRowMarginChanges_zero.png b/...zylayout.view_ViewLazyListAsFlexContainerTest_RTL_testRowMarginChanges_zero.png
diff --git a/...layout.view_ViewLazyListAsFlexContainerTest_testColumnMarginChanges_nonzero.png b/...layout.view_ViewLazyListAsFlexContainerTest_testColumnMarginChanges_nonzero.png
diff --git a/...azylayout.view_ViewLazyListAsFlexContainerTest_testColumnMarginChanges_zero.png b/...azylayout.view_ViewLazyListAsFlexContainerTest_testColumnMarginChanges_zero.png
diff --git a/...azylayout.view_ViewLazyListAsFlexContainerTest_testRowMarginChanges_nonzero.png b/...azylayout.view_ViewLazyListAsFlexContainerTest_testRowMarginChanges_nonzero.png
diff --git a/...d.lazylayout.view_ViewLazyListAsFlexContainerTest_testRowMarginChanges_zero.png b/...d.lazylayout.view_ViewLazyListAsFlexContainerTest_testRowMarginChanges_zero.png