zach-klippenstein / compose-fractal-nav

A proof-of-concept of a fractal/recursive navigation system.

compose-fractal-nav

A proof-of-concept of a fractal/recursive navigation system.

Instead of defining a bunch of top-level routes with navigation moving laterally between them, you define your navigation recursively. You can think of it like showing your entire composable UI at once, where certain parts can be zoomed-into. It's hard to explain and I'm writing this README after 3 straight days of hacking on my vacation, so easier to just show you. This is the app in this repo:

fractal-nav-long-demo.mp4

API

Like most navigation libraries, this one starts with a wrapper composable that defines the navigable area. It's called FractalNavHost. It provides a FractalNavScope to its content composable. Inside that block, you can define "zoomable" children with the FractalNavChild composable. Each child is identified with a string key, and you can zoom into a child by calling zoomToChild().

The content block of a FractalNavChild gets access to a few properties that describe whether or not it's zoomed in, how far it's zoomed, and a function that zooms it back out to its parent.

Children can also define their own children, recursing as deep as you like. The library will only compose what's necessary to show the active child. Everything between the FractalNavHost and the FractalNavChild will be removed from the composition – even when multiple children are nested. When a child zooms back out, its parent content is composed again, with any state from rememberSaveables restored.

For more details, take a look at FractalNavScope and FractalNavChildScope.

API sample

Let's build this simple app:

sample-demo.mp4

Here's the code:

// The host should wrap the root of your app.
FractalNavHost(Modifier.fillMaxSize()) {
    Row(Modifier.wrapContentSize()) {
        Text("Click ")
        Link("here") {
            Text(
                "42",
                // Scale the text in when clicked.
                modifier = Modifier.scaleByZoomFactor(),
                style = MaterialTheme.typography.h1,
                maxLines = 1
            )
        }
        Text(" to learn more.")
    }
}

And here's the Link function:

@Composable
fun FractalNavScope.Link(
    text: String,
    content: @Composable FractalNavChildScope.() -> Unit
) {
    // This creates some content that can be zoomed into.
    FractalNavChild(
        // It's identified by a string key…
        key = "link",
        modifier = Modifier.clickable {
            // …which can be used to expand its content. This will animate
            // the content block below to take up the full screen and also
            // zoom the parent content, that called this composable, out of
            // view.
            zoomToChild("link")
        }
    ) {
        Box(contentAlignment = Alignment.Center) {
            Text(text, Modifier.graphicsLayer {
                // The zoomFactor property is available inside the FractalNavChild
                // block. It starts at 0, then when zoomToChild is called it will
                // be animated up to 1. In this case, we want this text to start
                // at the full size and shrink when zoomed in.
                alpha = 1f - zoomFactor
            })

            // The isActive flag is also provided inside the FractalNavChild
            // content block, and means `zoomFactor > 0` – but is backed by
            // a derivedStateOf so it won't invalidate more than once during
            // the zoom animation.
            if (isActive) {
                content()
                BackHandler {
                    // This will animate zoomFactor back down to 0.
                    zoomToParent()
                }
            }
        }
    }
}

compose-fractal-nav's Issues

Support restoring navigation state from saved state

• FractalNavState should have a Saver implementation that stores only the string key of the active child.
• When restoring it puts that key in a property in the state: childToRestore: String.
• When FractalNavChild is called it checks if the state has a key to restore. If that key matches its key, then during composition it updates the state to look as though a zoom in just finished: sets the state's activeChild and snaps the zoom factor to 1 (direction is left null). Since activeChild is now the current child, it won't call its movable content in place.
• When the content finishes composing, the host will compose the now-active child itself, and immediately recompose to remove the content from the composition.
• The content should have a layout modifier that checks if the content is about to be removed for this restore case and, if so, doesn't measure or place it.
• If the content doesn't use SubcomposeLayout, that's it. When the content finishes
• Otherwise, there are two more cases to handle since the child to restore might only be composed during the measure or placement phases.
• If the content's layout modifier sees that the child to restore hasn't been composed yet, it should measure the content, then check again.
• If the active child has been set after measure, that means it was subcomposed during measure. It should not place the content. The next composition will compose the child in the main composition.
• If no active child has been set after measure, then place it and check again to see if it was subcomposed during placement.

In addition,

• The content should check after every phase (composition, measure, placement) to see if a child is being restored, and only participate in as many phases as necessary to determine that. Subsequent phases should be skipped (don't measure, don't place, don't draw) to avoid unnecessary work but more importantly to avoid drawing the content on the first frame.
• If the child to restore is subcomposed after the initial composition pass, then we need to make sure the child's movable content is actually present in the composition somewhere. We can still have it draw for the first frame: The host's composition should check if it is trying to restore a child but the child has not been composed yet after the content composable returns. If so, it should compose a SubcomposeLayout that checks for the child to restore after measure and placement passes, and if it finds one, subcomposes its movable content to fill the viewport. On the next frame, the subcompose layout will be removed and the movable content will be moved to the main composition.

Add support for multiplatform

This library looks cool, going through the dependencies, it seems that you don't depend on android only code, it could be migrated to compose-jb to make it available for Desktop as well(web and iOS in the future).