1

I am trying to render a large number of "nodes" in a freeform sandbox area with Jetbrains Compose. Each node has it's own X,Y position. The editor is in a graphicsLayer where it can be panned and scaled. Inside this sandbox area, each node is offset by it's X,Y values and then rendered. However, the graphicsLayer has it's own size, and when translated/panned far enough that it goes off screen, all "nodes" disappear since Compose thinks that the bounding box of the graphics layer is no longer on screen and thus the layer does not need to render, even though nodes can be at any offset (even negative offsets) within the graphics layer.

I have tried opting not to translate the graphics layer when panning, and instead offset each node by position + pan amount, but this causes a large amount of lag when panning with many nodes, since Compose will have to recompose every single node every single frame to update their position.

Ideally, I would like the best of both worlds - a graphicsLayer that can be zoomed and panned, but also one that does not do bounds checking, since that removes our ability to pan the screen too much.

Here is a video: https://i.stack.imgur.com/gfWuA.jpg Note that the cyan box displays the entire inner bounds of the graphics layer. I'd like for nodes to be able to be placed anywhere, even at negative coordinates.

Ejektaflex
  • 11
  • 3
  • I also use graphicsLayer a lot these days. Would you mind sharing any code? Here are my question about it . https://stackoverflow.com/questions/73061216/exoplayer2-with-before-after-videos-changes-first-video-when-clip-and-shape-used, https://stackoverflow.com/questions/72922205/how-to-have-natural-pan-and-zoom-with-modifier-graphicslayer-pointerinput, https://stackoverflow.com/questions/72802650/is-there-a-way-to-increase-a-composable-size-by-chaining-with-another-modifier – Thracian Jul 23 '22 at 06:36
  • Why don't you use canvas? You can use transform and scale on canvas if Modifier.graphicsLayer has problem with performance and i didn't know it resets when your nodes are out of bounds. By placing `Modifier.pointerInput().grphicsLayer{}` if you do panning with touch you can make a stationary graphicsLayer. – Thracian Jul 23 '22 at 06:39
  • @Thracian I would use Canvas, except the nodes themselves are rather complicated, having select boxes and text inputs. These are actually dataflow programming "nodes" that end up being wired together. Also, I have tried used a stationary graphics layer. But to actually implement panning of all nodes, then I need to translate every single node in it's own graphics layer, which as I'd stated in the original post would cause a lot of lag when there were lots of nodes. – Ejektaflex Jul 23 '22 at 17:21
  • Honestly, it's little bit difficult to picture without any code. Yes, graphicsLayer has dimensions of SizeModifier but if you set it after size or touch it doesn't change like right rectangle in samples in this question. https://stackoverflow.com/questions/72922205/how-to-have-natural-pan-and-zoom-with-modifier-graphicslayer-pointerinput. Of course it also prevents you from manipulating layer from the last position of touch when you lift your finger up. That's why i asked this question. I'm building place cards that can be moveable yet after translating translate and rotate origin doesn't work – Thracian Jul 23 '22 at 17:27
  • 1
    @Thracian I've added a video to show what I mean :) The cyan box shows the graphics layer bounds. – Ejektaflex Jul 24 '22 at 04:22
  • Wow. Such a good question i hope it gets answered, i had upvoted but even if i didn't i would have now:) . I'm really curious about `Modifier.graphicsLayer` questions, such a good tool to do wonders. Maybe RomainGuy or some Compose developer answer it. – Thracian Jul 25 '22 at 05:22

0 Answers0