I want to draw a tree graph, how should I procede? I doubt putting everything into a single Canvas w...

# compose

[jaqxues]

I want to draw a tree graph, how should I procede? I doubt putting everything into a single Canvas would work well, so I suppose a custom Layout, where I can put the Node Composables?

But what would be the best way to keep track of what is connected to what?

[Colton Idle]

Graphs are hard and kinda suck when they reach a certain size. I draw graphs programatically with graphviz.

besides that, I don't really get the rest of your question and how it relates to compose. What are you trying to do, what have you tried?

[jaqxues]

I have a tree with some nodes, I just do not know how I would get a nice compose-like slot thing where I could compose nodes inside the graph, and it would automatically connect the correct nodes

kotlin
@Composable fun x() {
Graph {
    for (node in node)
        NodeComposable(node.content)
}

Its more of a 'hey how should i do it if anyone has an idea' not a 'solve it for me' question

[Zach Klippenstein (he/him) [MOD]]

So you want to use compose’s layout system to layout the nodes themselves?

[jaqxues]

Not sure yet, I will have to implement it tomorrow

But I think I will have a custom layout that places the nodes and that draws the edges, yes

[Zach Klippenstein (he/him) [MOD]]

Wrt using a canvas and doing layout yourself vs using Compose’s layouts, depends how fancy you want your graph layout to be I guess. I’m not sure if you can adequately describe a complicated graph layout using compose’s layout system, which uses a box model, but for a simple tree I could see that working.

If you do decide to use compose’s layout system, i think you could wire up a custom layout that would draw the connectors automatically. The tricky bit is reporting the final positions of each of your graph nodes in an arbitrarily deep hierarchy of LayoutNodes. You could do this with onGloballyPositioned, but you’d always have a frame of lag between drawing your graph nodes and drawing the connectors. You might be able to do something hacky where you cast Placeables to `LayoutNode`s and figure out their position relative to your custom layout, but i’m not sure if that’s possible, and even if it is, it would be hacky and brittle.

[jaqxues]

Thanks, I will definitely give the layout approach a try