I spent a bit of time working on arrows (and not d...

# storyboard

[Alex Vanyo]

I spent a bit of time working on arrows (and not done with my talk yet 🙈)

Pretty happy with the usage though ->

[Alex Vanyo]

Usage looks like this:

val configChangeLayoutCoordinatesHolder = remember { LayoutCoordinatesHolder() }
val recreationLayoutCoordinatesHolder = remember { LayoutCoordinatesHolder() }
val onConfigurationChangedLayoutCoordinatesHolder = remember { LayoutCoordinatesHolder() }

Box(
    modifier = Modifier.fillMaxSize()
) {
    Row(
        Modifier.fillMaxSize(),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.Center,
    ) {
        Column(
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier
                .layoutCoordinates(configChangeLayoutCoordinatesHolder)
                .padding(16.dp),
        ) {
            Text(
                "Configuration",
                style = MaterialTheme.typography.h4,
            )
            Text(
                "Changes",
                style = MaterialTheme.typography.h4,
            )
        }

        Spacer(Modifier.size(100.dp))

        Column(
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.Start,
        ) {
            Text(
                "Activity Recreation",
                style = MaterialTheme.typography.h4,
                modifier = Modifier
                    .layoutCoordinates(recreationLayoutCoordinatesHolder)
                    .padding(16.dp)
            )

            Spacer(Modifier.height(64.dp))

            Text(
                "onConfigurationChanged",
                style = MaterialTheme.typography.h4,
                fontFamily = jetBrainsMono,
                modifier = Modifier
                    .layoutCoordinates(onConfigurationChangedLayoutCoordinatesHolder)
                    .padding(horizontal = 16.dp)
            )
        }
    }

    LineCanvas(
        lines = listOf(
            Arrow(
                start = configChangeLayoutCoordinatesHolder,
                startAlignment = Alignment.CenterEnd,
                end = recreationLayoutCoordinatesHolder,
                endAlignment = Alignment.CenterStart,
                color = MaterialTheme.colors.onSurface,
            ),
            Arrow(
                start = configChangeLayoutCoordinatesHolder,
                startAlignment = Alignment.CenterEnd,
                end = onConfigurationChangedLayoutCoordinatesHolder,
                endAlignment = Alignment.CenterStart,
                color = MaterialTheme.colors.onSurface,
            ),
        ),
        modifier = Modifier.fillMaxSize(),
    )
}

[Alex Vanyo]

You effectively create a LayoutCoordinates reference, that you can attach arbitrarily with a Modifier.

Then, you can have an overlaying LineCanvas that can draw stuff using those references.
The thing I needed was just a simple straight-line arrow from start to end, so that's what I went with, but the idea could be expanded to any other sort of overlaying-y anchoring-y thing

[bnorm]

That's awesome! Much more elegant than what I did... Never did draw the arrow head, just a curved line. I'd love to have this sort of "connected layout" scaffold in Storyboard somewhere, maybe a storyboard-diagram artifact. Could have a couple built in things like arrows. If you'd be open to collaborating on something (after droidcon...), I would love that!

[bnorm]

My dream API would be something like this, and I think you're really close!

ConnectedLayout(
  connections = listOf(
    Arrow(start = startKey, end = endKey, ...),
    ...
  )
) {
  Box(Modifier.connected(startKey)...) { ... }
  Box(Modifier.connected(endKey)...) { ... }
}

[Alex Vanyo]

Yeah definitely open to that - but post Droidcon for sure! A little bit of wrapping could make it easy to do more powerful things