I need a node graph editor for my cross-platform c...

# multiplatform

[kotlinforandroid]

I need a node graph editor for my cross-platform compose application. A node graph editor is a canvas where a user connects nodes together to create some kind of workflow/data description. An example image is attached.

Since I need to draw arrows and connections freely on the UI, I thought of using Canvas. However, there do not seem to exist methods to draw other @Composable components into the Canvas. Is this somehow possible? What approaches can I take?

The only one I came up with was using Box and zIndex to draw the Canvas in the background and draw the nodes on top of it. I was hoping for a "cleaner" solution.

[Sebastian Schuberth]

This looks interesting, are you going to make the node code public?

[ephemient]

do you need a Canvas? there's nothing special about it, it's just a Box with a draw lambda

[electrolobzik]

I am also interested in your source code. Would appreciate if you can share some working example. I am working on a project with a similar task: it should include simple diagramming tool.

[kotlinforandroid]

> do you need a Canvas? there's nothing special about it, it's just a Box with a draw lambda
@ephemient I thought it would be more performant to use the Canvas tbh. A simple box with draw call might make it easier actually.

I will share the code once I am done.

[ephemient]

https://developer.android.com/jetpack/compose/graphics/draw/overview

The Canvas composable is a convenient wrapper around Modifier.drawBehind.

https://github.com/androidx/androidx/blob/androidx-main/compose/foundation/foundat[…]ion/src/commonMain/kotlin/androidx/compose/foundation/Canvas.kt

[ephemient]

oh I guess it's a Spacer and not a Box, but that's the same thing just with a slightly different default layout policy