Hi, I am working on a sort of "infinite canvas" sy...

# compose-desktop

[Matt]

Hi, I am working on a sort of "infinite canvas" system, I have managed to do dragging and zooming pretty well, I am not trying to figure how to add elements based on where you click on the canvas and I have managed to make it work if the scale is the default one, however when you zoom in or out just a little the entire position goes crazy. I was wondering how to get a relative position of where it was clicked based on the scale. I tried multiplying the offsets by the scale, I tried to divide it, but nothing really changed. Here is the snippet of my code that makes what is in the video possible https://pastebin.com/cnXQRAig

java_XmF77Ltglp.mp4

[mohamed rejeb]

First, you need to divide by scale before adding a new rectangle.

// Right click to add a rectangle
rectangles.add((clickLocation - canvasOffset) / scale)

Also you need to set transform origin to zero, it's set to center by default, which makes some calculations to be wrong.

.graphicsLayer(
    transformOrigin = TransformOrigin(0f, 0f),
    scaleX = scale,
    scaleY = scale,
    translationX = canvasOffset.x,
    translationY = canvasOffset.y,
)

[Matt]

Wow okay, so dividing by scale was correct and all I needed was the TransformOrigin :')
Thank you!

[Dragos Rachieru]

I was also working on something related:

Infinite Canvas
https://github.com/dragossusi/ktcnc/tree/develop/frontend/canvas/src/commonMain/kotlin/com/mindovercnc/linuxcnc/canvas

Actors:
https://github.com/dragossusi/ktcnc/tree/develop/frontend/actor/src/commonMain/kotlin/com/mindovercnc/linuxcnc/actor