Trying to display a family tree. How do I show lines connecting people? ```@Composable fun FamilyTre...

# compose

[Sam Stone]

Trying to display a family tree. How do I show lines connecting people?

@Composable
fun FamilyTree(root: Person) {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        PersonCard(root)
        Row {
            root.children.forEach { child ->
                FamilyTree(child)
            }
        }
    }
}

[Kirill Grouchnikov]

Use Canvas to draw the relevant vertical and / or horizontal lines to create the overall visuals of the connected tree

[Sam Stone]

How can I combine regular components with Canvas? The lambda is DrawScope.() -> Unit, not @Composable

[myanmarking]

sth like this. Need to tune it:
FamilyTree(
modifier = Modifier.drawBehind{
drawLine(
Color.Black,
Offset(x = 0, y = 0),
Offset(x = size.width / 2 (do whatever here), y = 0)
)
},
child = child
)

[myanmarking]

if the composable has a background, you might need to use .drawWithContent instead

[Sam Stone]

How do I get size?

[Sam Stone]

And how do I get the x and y of each PersonCard?

[Kirill Grouchnikov]

You would draw the lines in each child, not at the level of the tree. Then you don’t need to know x,y of the child node, only its dimensions which are available to it.

[Kirill Grouchnikov]

Depending on your target look, each row is responsible not just for drawing its content, but also the line decorations - horizontal and vertical.

It needs to “know” its offset in the tree , as well as where it is relative to other nodes above and below it.

[Kirill Grouchnikov]

Like this - the row in purple is responsible for drawing all these lines within its vertical span

[dewildte]

@Kirill Grouchnikov Very clever.

[Sam Stone]

I finally got this working, but I encounter another issue: my component recurses from ancestor to descendant, but if I need to start at the bottom and draw the ancestors, or draw a descendent's in-laws, I need to start climbing back up the tree. How do I do this in Compose?