hi, I was wondering if something like this is poss...

# compose-desktop

[Matt]

hi, I was wondering if something like this is possible to do in compose desktop, and if so if someone could give me some tips with how to achieve it, I am very new to using it
the plane slides of infinitely as well as zooming in and out

chrome_yDWNAEzT9B.mp4

[Alexander Zhirkevich]

It is 100% possible in multiplatform compose. But the code is not currently public

Screen Recording 2024-02-06 at 22.56.33.mov

[Matt]

that is awesome! knowing it's possible at least makes me want to continue the project with compose, I'll research a bit more on how to do it, thank you!

[Alexander Zhirkevich]

But note, there is a bug in compose that makes it very hard to implement an infinite canvas. I can share with you that part. DM me later if you'll need it

[Garret Yoder]

You built a node editor in compose? Thats actually pretty dope.

Did you just draw directly to the canvas or are you actually using compose widgets?

[Alexander Zhirkevich]

Grid and connecting lines are drawn on canvas. Nodes are separate composables

[Alexander Zhirkevich]

I’ll maybe make it public In the future. These nodes are represented by classes with deep inheritance hierarchy and are generated from simple Kotlin functions using KSP

[Garret Yoder]

Huh, I didn't even know it was possible to even do a zoom in/out on composables. Totally get not wanting to public that, I don't public much of my code just a handful of libraries, I used to have a 2k+ star one in my early android days but that was about it.

Out of that I think what'd be most useful is the infinite canvas & the zoom part, from that anyone could build their own node editor. Really cool though!

[Alexander Zhirkevich]

It’s actually the simplest part and driven by scale and translation grapchicsLayer modifier together with detectTransformGestures pointerInput modifier

[Garret Yoder]

That's actually pretty clever. And you're just doing that on the root container that contains all of them? I don't have any need to do something like that I just think it's cool, I never imagined compose would support that.

[Alexander Zhirkevich]

Yep, there are 2 root boxes. Outer one captures gestures and mouse wheel and inner one applies offset/scale, draws grid/lines and holds nodes

[Garret Yoder]

Thats a lot simpler than I thought it would be, but still pretty awesome. Thanks!

[Alexander Zhirkevich]

But there are some extra hacks with density and container size to workaround issue i mentioned above and to display nodes equally when opening the same saved structure from different devices

[Garret Yoder]

Well if you do decide to release it in the future, I'll happily take a look through, it sounds pretty cool

[Kaanixir]

if you open source this, it will be very cool ! But thanks for describing the work behind it as well.

[Matt]

I have gotten pretty far with this, here is the base I have so far.
There are a few issues to solve still, for example: states, right now the way I do it is I have a list state of composables where each composable is. This was the first way I thought about handling it, however this means I can't access their location to draw a line between them, so I need to figure something else.
Or just need to figure out how to handle dynamic states for the offsets.
I'll share my code once I'm done so it's easier for others to do it!
It has been very fun so far!

java_7eJ2RZ1Qvk.mp4

[darkmoon_uk]

Looks like a nice start @Matt - do those 'layout state access' requirement go beyond what you might call 'normal' state hoisting - injecting some common registry of components' mutable layout states down into the nodes that they can all 'see/manipulate' it? This can also be used by a separate graph-edge-drawing layer. Pragmatic from a rendering perspective to have this Z-ordered either beneath or above all the nodes, depending on the style you're going for, I would have thought.
Could be interested in a collaboration if you're thinking of opening this up - but completely understand if that's not your vibe rn 👌

[Matt]

Right now the way I am handling the state is genuinely just a list. This is my first time using compose so I have not dived into state hoisting yet, but I'll definitely give it a look!
As for collaboration, it sounds lovely, but I am not sure how to turn this into a library since it is so integrated in my project. But here is what I have so far, https://pastes.dev/uX6KZk4BUb
This is just the base that has all the main functionality from that video.

[Matt]

Played a bit more with it and started using a state list of states which are then passed down to the "node" composable, which means I can now access the offsets on the draw scope, so I made a simple system to draw a line between the nodes.
Basically window(2, 1) to group nodes in 2 then drawing a line between their center.

NVIDIA_Share_TdcfKqMK7T.mp4

[Garret Yoder]

You can probably just use quadraticBezierTo and get a smooth curve without much effort. Then you'd be pretty close to UE5's node editor