Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extract out common Yoga FlexContainer logic #1378

Merged
merged 1 commit into from
Jan 16, 2024
Merged

Extract out common Yoga FlexContainer logic #1378

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions build-support/src/main/resources/app/cash/redwood/buildsupport/flexboxHelpers.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,38 @@ import app.cash.redwood.layout.modifier.Shrink as ShrinkModifier
import app.cash.redwood.layout.modifier.Size as SizeModifier
import app.cash.redwood.layout.modifier.VerticalAlignment as VerticalAlignmentModifier
import app.cash.redwood.layout.modifier.Width as WidthModifier
import app.cash.redwood.layout.widget.FlexContainer
import app.cash.redwood.ui.Density
import app.cash.redwood.ui.Margin
import app.cash.redwood.yoga.AlignItems
import app.cash.redwood.yoga.AlignSelf
import app.cash.redwood.yoga.JustifyContent
import app.cash.redwood.yoga.Node

internal interface YogaFlexContainer<W : Any> : FlexContainer<W> {
val rootNode: Node
val density: Density

override fun margin(margin: Margin) {
with(rootNode) {
with(density) {
marginStart = margin.start.toPx().toFloat()
marginEnd = margin.end.toPx().toFloat()
marginTop = margin.top.toPx().toFloat()
marginBottom = margin.bottom.toPx().toFloat()
}
}
}

override fun crossAxisAlignment(crossAxisAlignment: CrossAxisAlignment) {
rootNode.alignItems = crossAxisAlignment.toAlignItems()
}

override fun mainAxisAlignment(mainAxisAlignment: MainAxisAlignment) {
rootNode.justifyContent = mainAxisAlignment.toJustifyContent()
}
}

internal fun MainAxisAlignment.toJustifyContent() = when (this) {
MainAxisAlignment.Start -> JustifyContent.FlexStart
MainAxisAlignment.Center -> JustifyContent.Center
Expand Down
19 changes: 6 additions & 13 deletions ...mposeui/src/commonMain/kotlin/app/cash/redwood/layout/composeui/ComposeUiFlexContainer.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ import app.cash.redwood.layout.api.Constraint
import app.cash.redwood.layout.api.CrossAxisAlignment
import app.cash.redwood.layout.api.MainAxisAlignment
import app.cash.redwood.layout.api.Overflow
import app.cash.redwood.layout.widget.FlexContainer
import app.cash.redwood.ui.Density
import app.cash.redwood.ui.Margin
import app.cash.redwood.widget.compose.ComposeWidgetChildren
Expand All @@ -53,8 +52,8 @@ import app.cash.redwood.yoga.isHorizontal

internal class ComposeUiFlexContainer(
private val flexDirection: FlexDirection,
) : FlexContainer<@Composable () -> Unit> {
private val rootNode = Node().apply {
) : YogaFlexContainer<@Composable () -> Unit> {
override val rootNode = Node().apply {
flexDirection = [email protected]
}
override val children = ComposeWidgetChildren()
Expand All @@ -65,7 +64,7 @@ internal class ComposeUiFlexContainer(
private var height by mutableStateOf(Constraint.Wrap)
private var overflow by mutableStateOf(Overflow.Clip)
private var margin by mutableStateOf(Margin.Zero)
private var density = Density(1.0)
override var density = Density(1.0)

internal var testOnlyModifier: Modifier? = null

Expand All @@ -86,12 +85,12 @@ internal class ComposeUiFlexContainer(
}

override fun crossAxisAlignment(crossAxisAlignment: CrossAxisAlignment) {
rootNode.alignItems = crossAxisAlignment.toAlignItems()
super.crossAxisAlignment(crossAxisAlignment)
invalidate()
}

override fun mainAxisAlignment(mainAxisAlignment: MainAxisAlignment) {
rootNode.justifyContent = mainAxisAlignment.toJustifyContent()
super.mainAxisAlignment(mainAxisAlignment)
invalidate()
}

Expand All @@ -112,14 +111,8 @@ internal class ComposeUiFlexContainer(
LayoutDirection.Ltr -> Direction.LTR
LayoutDirection.Rtl -> Direction.RTL
}

with(density) {
marginStart = margin.start.toPx().toFloat()
marginEnd = margin.end.toPx().toFloat()
marginTop = margin.top.toPx().toFloat()
marginBottom = margin.bottom.toPx().toFloat()
}
}
super.margin(margin)

children.render()
},
Expand Down
27 changes: 3 additions & 24 deletions ...layout-uiview/src/commonMain/kotlin/app/cash/redwood/layout/uiview/UIViewFlexContainer.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,9 @@ package app.cash.redwood.layout.uiview

import app.cash.redwood.Modifier
import app.cash.redwood.layout.api.Constraint
import app.cash.redwood.layout.api.CrossAxisAlignment
import app.cash.redwood.layout.api.MainAxisAlignment
import app.cash.redwood.layout.api.Overflow
import app.cash.redwood.layout.widget.FlexContainer
import app.cash.redwood.ui.Default
import app.cash.redwood.ui.Density
import app.cash.redwood.ui.Margin
import app.cash.redwood.widget.ChangeListener
import app.cash.redwood.widget.UIViewChildren
import app.cash.redwood.yoga.FlexDirection
Expand All @@ -34,12 +30,14 @@ import platform.darwin.NSInteger

internal class UIViewFlexContainer(
direction: FlexDirection,
) : FlexContainer<UIView>, ChangeListener {
) : YogaFlexContainer<UIView>, ChangeListener {
private val yogaView: YogaUIView = YogaUIView(
applyModifier = { node, index ->
node.applyModifier(children.widgets[index].modifier, Density.Default)
},
)
override val rootNode: Node get() = yogaView.rootNode
override val density: Density get() = Density.Default
override val value: UIView get() = yogaView
override val children = UIViewChildren(
parent = value,
Expand Down Expand Up @@ -68,29 +66,10 @@ internal class UIViewFlexContainer(
yogaView.height = height
}

override fun margin(margin: Margin) {
with(yogaView.rootNode) {
with(Density.Default) {
marginStart = margin.start.toPx().toFloat()
marginEnd = margin.end.toPx().toFloat()
marginTop = margin.top.toPx().toFloat()
marginBottom = margin.bottom.toPx().toFloat()
}
}
}

override fun overflow(overflow: Overflow) {
yogaView.scrollEnabled = overflow == Overflow.Scroll
}

override fun crossAxisAlignment(crossAxisAlignment: CrossAxisAlignment) {
yogaView.rootNode.alignItems = crossAxisAlignment.toAlignItems()
}

override fun mainAxisAlignment(mainAxisAlignment: MainAxisAlignment) {
yogaView.rootNode.justifyContent = mainAxisAlignment.toJustifyContent()
}

override fun onEndChanges() {
value.setNeedsLayout()
}
Expand Down
28 changes: 3 additions & 25 deletions redwood-layout-view/src/main/kotlin/app/cash/redwood/layout/view/ViewFlexContainer.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,8 @@ import androidx.core.view.updateLayoutParams
import androidx.core.widget.NestedScrollView
import app.cash.redwood.Modifier
import app.cash.redwood.layout.api.Constraint
import app.cash.redwood.layout.api.CrossAxisAlignment
import app.cash.redwood.layout.api.MainAxisAlignment
import app.cash.redwood.layout.api.Overflow
import app.cash.redwood.layout.widget.FlexContainer
import app.cash.redwood.ui.Density
import app.cash.redwood.ui.Margin
import app.cash.redwood.widget.ChangeListener
import app.cash.redwood.widget.ViewGroupChildren
import app.cash.redwood.yoga.Direction
Expand All @@ -43,14 +39,15 @@ import app.cash.redwood.yoga.isHorizontal
internal class ViewFlexContainer(
private val context: Context,
private val direction: FlexDirection,
) : FlexContainer<View>, ChangeListener {
) : YogaFlexContainer<View>, ChangeListener {
private val yogaLayout: YogaLayout = YogaLayout(
context,
applyModifier = { node, index ->
node.applyModifier(children.widgets[index].modifier, density)
},
)
private val density = Density(context.resources)
override val rootNode: Node get() = yogaLayout.rootNode
override val density = Density(context.resources)

private val hostView = HostView()
override val value: View get() = hostView
Expand Down Expand Up @@ -90,17 +87,6 @@ internal class ViewFlexContainer(
}
}

override fun margin(margin: Margin) {
with(yogaLayout.rootNode) {
with(density) {
marginStart = margin.start.toPx().toFloat()
marginEnd = margin.end.toPx().toFloat()
marginTop = margin.top.toPx().toFloat()
marginBottom = margin.bottom.toPx().toFloat()
}
}
}

override fun overflow(overflow: Overflow) {
hostView.scrollEnabled = when (overflow) {
Overflow.Clip -> false
Expand All @@ -109,14 +95,6 @@ internal class ViewFlexContainer(
}
}

override fun crossAxisAlignment(crossAxisAlignment: CrossAxisAlignment) {
yogaLayout.rootNode.alignItems = crossAxisAlignment.toAlignItems()
}

override fun mainAxisAlignment(mainAxisAlignment: MainAxisAlignment) {
yogaLayout.rootNode.justifyContent = mainAxisAlignment.toJustifyContent()
}

override fun onEndChanges() {
hostView.invalidate()
hostView.requestLayout()
Expand Down