Overlay Destinations

[aschulz90]

Hi,

I am currently tinkering with the new 2.0 Alpha and NavigationScene to implement a "OverlayDestination", that can be used to navigate to and from overlays (bottomsheets or dialogs) that are also part of the backstack. So you can navigate from a destination to an overlay and all overlay destinations are rendered on top of the screen destination.

E.g. backstack: (Screen1 -> BottomSheet1 -> Bottomsheet2) -> (Screen2 -> Dialog1) will render Screen2 and the dialog. When you leave Screen2, then Screen1 and both bottomsheets will be rendered.

This is my current implementation for it:

class OverlayDestinationExtension<T : Any>: NavExtension<T>

data class SceneGroup(
    val root: NavEntry<*>?,
    val overlays: List<NavEntry<*>>,
)

NavigationScene(
    navController = navController,
    handleSystemBackEvent = handleSystemBackEvent,
    destinations = graph.destinations(),
) {
    val current by navController.currentNavEntryAsState()
    val backstack by navController.currentBackStackFlow.collectAsState()
    val state by navController.currentTransitionFlow.collectAsState()
    
    val sceneGroup: SceneGroup = remember(current, backstack) {
        var sceneRoot = current
        val overlays: List<NavEntry<*>> = buildList {
            if (sceneRoot?.destination?.ext<OverlayDestinationExtension<*>>() != null) {
                add(sceneRoot)
                for (entry in backstack.reversed()) {
                    if (entry.destination.ext<OverlayDestinationExtension<*>>() != null) {
                        add(entry)
                    } else {
                        sceneRoot = entry
                        break
                    }
                }
            }
        }.reversed()

        SceneGroup(
            root = sceneRoot,
            overlays = overlays,
        )
    }

    AnimatedContent(
        targetState = sceneGroup.root,
        contentKey = { it?.contentKey() },
        modifier = modifier,
        transitionSpec = {
            contentTransformProvider(state?.isForward ?: true)
        },
    ) {
        CompositionLocalProvider(
            LocalNavAnimatedVisibilityScope provides this,
        ) {
            EntryContent(it)
        }
    }

    for (entry in sceneGroup.overlays) {
        EntryContent(entry)
    }
}

This works mostly as expected (expect #215), BUT I can no longer use the default TransitionController for gesture navigation (when sceneGroup is empty), because neither TransitionController::updates/TransitionController::Event is public, nor is the class open.

Would you be willing to make TransitionController::updates/TransitionController::Event public? Or make TransitionController open?

Or even better, support this navigation pattern directly in Tiamat?

[vkatz]

Good catch. Will take a look onto this right after #215
To make TransitionController open is not a problem

support this navigation pattern directly -> we will discuss

[vkatz]

main...feature/tiamat-2.0.0-alpha03
Initial changes is here, added pre-render resolution of destinations. I will perform some tests and see if there any other feedbacks.
In case all ok - release would be somwhere in a 2-3 days

[aschulz90]

Thank you for looking into it!
I have created an example with the full implementation here: https://github.com/aschulz90/Tiamat/blob/main/example/content/src/commonMain/kotlin/composegears/tiamat/example/content/content/advanced/AdvOverlayDestinations.kt

[vkatz]

Can i take this example and add into our codebase? (we will add some ref to you in the code to mention that it was your idea/contribution)
Alternative you can create a PR, so we can merge and post-refactor a bit to follow our rules

[aschulz90]

Sure! I created a PR #221

[vkatz]

@aschulz90
Your example in the code base now

I made some changes in order to follow our UI/code style and made some minor improvements, here is commit:
342c22a

We will release fix + example in the neares release (think it will happen soon, will also think on adding overlays an native lib part)

Thanks alot.