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.

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

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

Open
peposdd opened this issue Sep 18, 2023 · 0 comments
Open

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

peposdd opened this issue Sep 18, 2023 · 0 comments

Comments

@peposdd
Copy link

peposdd commented Sep 18, 2023

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-alpha05
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(
    buildContext: BuildContext,
    private val backStack: BackStack<NavTarget> = BackStack(
        model = BackStackModel(
            initialTarget = NavTarget.Child1,
            savedStateMap = buildContext.savedStateMap
        ),
        motionController = { BackStackSlider(it) }
    )
) : ParentNode<RootNode.NavTarget>(
    appyxComponent = backStack,
    buildContext = buildContext
) {

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

    override fun resolve(interactionTarget: NavTarget, buildContext: BuildContext): Node =
        when (interactionTarget) {
            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 2.0.0-alpha05"
                )
            }
            AppyxComponent(
                appyxComponent = backStack,
                modifier = modifier.fillMaxSize()
            )
        }
    }
}

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 {  }
            )
        }
    }
}

Video:

appyx_200_parent_interaction.mp4
@peposdd 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant