Parent interaction is gone once it has a child on top #600

peposdd · 2023-09-18T20:04:44Z

Context about our use case:
Showing Google Maps on the background all the time and show our own UI on top of the map. Transitions between our UI keeps Google Maps on the background the whole time, since destroy/create new maps is very expensive.

Using Appyx 1.3.0 we were having a Google Maps root node and our UI nodes being children of it. We were able to interact with our UI and with the Map below without any issue.
Using Appyx 2.0.0-alpha05, same configuration makes the Map below non interactive, only the children UI is getting proper interaction.

Attached videos and minimum reproducible code for 1.3.0 and 2.0.0-alpha05:

Version Appyx 1.3.0

class MainActivity : ComponentActivity() {

    private lateinit var appyxIntegrationPoint: ActivityIntegrationPoint

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        appyxIntegrationPoint = ActivityIntegrationPoint(
            activity = this,
            savedInstanceState = savedInstanceState
        )
        setContent {
            NodeHost(appyxIntegrationPoint) {
                RootNode(it)
            }
        }
    }
}

class RootNode(
    buildContext: BuildContext,
    private val backStack: BackStack<NavTarget> = BackStack(
        initialElement = NavTarget.Child1,
        savedStateMap = buildContext.savedStateMap
    )
) : ParentNode<RootNode.NavTarget>(
    buildContext = buildContext,
    navModel = backStack
) {

    sealed class NavTarget : Parcelable {
        @Parcelize
        data object Child1 : NavTarget()
    }

    override fun resolve(navTarget: NavTarget, buildContext: BuildContext): Node =
        when (navTarget) {
            NavTarget.Child1 -> Child1Node(
                buildContext = buildContext
            )
        }

    @Composable
    override fun View(modifier: Modifier) {

        Box(modifier = modifier.fillMaxSize()) {
            var selected by remember { mutableStateOf(true) }
            Box(
                modifier = modifier
                    .fillMaxSize()
                    .background(
                        if (selected) {
                            Color.Cyan
                        } else {
                            Color.Red
                        }
                    ).clickable {
                        selected = !selected
                    },
                contentAlignment = Alignment.Center,
            ) {
                Text(
                    text = "Google Maps Appyx 1.3.0"
                )
            }
            Children(
                modifier = modifier.fillMaxSize(),
                navModel = backStack,
                transitionHandler = rememberBackstackSlider(transitionSpec = { spring() })
            )
        }
    }
}

class Child1Node(
    buildContext: BuildContext
) : Node(buildContext) {

    @Composable
    override fun View(modifier: Modifier) {
        Box(
            modifier = modifier,
            contentAlignment = Alignment.BottomCenter
        ) {
            Box(modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .padding(10.dp)
                .background(Color.Black.copy(alpha = 0.3f))
                .clickable {  }
            )
        }
    }
}

Version Appyx 2.0.0

class MainActivity : ComponentActivity() {

    private lateinit var appyxIntegrationPoint: ActivityIntegrationPoint

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        appyxIntegrationPoint = ActivityIntegrationPoint(
            activity = this,
            savedInstanceState = savedInstanceState
        )
        setContent {
            NodeHost(
                lifecycle = AndroidLifecycle(LocalLifecycleOwner.current.lifecycle),
                integrationPoint = appyxIntegrationPoint
            ) {
                RootNode(it)
            }
        }
    }
}

class RootNode(
    nodeContext: NodeContext,
    private val backStack: BackStack<NavTarget> = BackStack(
        model = BackStackModel(
            initialTarget = NavTarget.Child1,
            savedStateMap = nodeContext.savedStateMap,
        ),
        visualisation = { BackStackFader(it) }
    )
) : Node<RootNode.NavTarget>(
    appyxComponent = backStack,
    nodeContext = nodeContext,

) {

    sealed class NavTarget : Parcelable {
        @Parcelize
        data object Child1 : NavTarget()
    }

    override fun buildChildNode(navTarget: NavTarget, nodeContext: NodeContext): Node<*> {
        return when (navTarget) {
            NavTarget.Child1 -> ChildNode1(nodeContext)
        }
    }

    @Composable
    override fun Content(modifier: Modifier) {
        Box(modifier = modifier.fillMaxSize()) {
            var selected by remember { mutableStateOf(true) }
            Box(
                modifier = modifier
                    .fillMaxSize()
                    .background(
                        if (selected) {
                            Color.Cyan
                        } else {
                            Color.Red
                        }
                    )
                    .clickable {
                        selected = !selected
                    },
                contentAlignment = Alignment.Center,
            ) {
                Text(
                    text = "Google Maps Appyx 2.0.0"
                )
            }
            AppyxNavigationContainer(
                appyxComponent = backStack,
                modifier = Modifier
            )
        }
    }
}

class ChildNode1(
    nodeContext: NodeContext
) : LeafNode(nodeContext) {

    @Composable
    override fun Content(modifier: Modifier) {
        Box(
            modifier = modifier.fillMaxSize(),
            contentAlignment = Alignment.BottomCenter
        ) {
            Box(modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .padding(10.dp)
                .background(Color.Black.copy(alpha = 0.3f))
                .clickable { }
            )
        }
    }
}

Video:

appyx_200_parent_interaction.mp4

The text was updated successfully, but these errors were encountered:

…bled

peposdd changed the title ~~Parent interaction is gone once it has a children~~ Parent interaction is gone once it has a child on top Sep 18, 2023

peposdd added a commit to peposdd/appyx that referenced this issue Jun 9, 2024

[bumble-tech#600] Avoid gesture-related modifier if gestures are disa…

a8c6ca4

…bled

peposdd linked a pull request Jun 9, 2024 that will close this issue

[#600] Avoid gesture-related modifier if gestures are disabled #707

Open

2 tasks

peposdd added a commit to peposdd/appyx that referenced this issue Sep 6, 2024

[bumble-tech#600] Avoid gesture-related modifier if gestures are disa…

0c461a8

…bled

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Parent interaction is gone once it has a child on top #600

Parent interaction is gone once it has a child on top #600

peposdd commented Sep 18, 2023 •

edited

Loading

Parent interaction is gone once it has a child on top #600

Parent interaction is gone once it has a child on top #600

Comments

peposdd commented Sep 18, 2023 • edited Loading

peposdd commented Sep 18, 2023 •

edited

Loading