membrane 2023-02-16 | Slack Archive

jlmr16:02:56

I’m struggling with translating the concept of panning and zooming as explained here: https://medium.com/@benjamin.botto/zooming-at-the-mouse-coordinates-with-affine-transformations-86e7312fd50b to membrane. This article assumes an approach where you can translate, scale and then translate back. However using membrane I have defined in my state scale , offset-x and offset-y values which are “applied” (`ui/scrollview [width height] [offset-x offset-y (ui/scale scale scale <other components>))`) once when rendering the component. I guess this might be more of a “maths” question than a membrane question, but I’m curious if someone has an insight in how I can achieve panning and zooming in membrane.

phronmophobic20:02:55

I think your approach looks pretty good. Is that not working for you? I think I have similar component lying around somewhere. Let me check...

jlmr21:02:44

Yes it "works", but I'm having trouble with the "math" part of it: calculating the correct offsets based on the new scale en the mouse position. To create the feeling of zooming in on the cursor

phronmophobic21:02:56

Ah, got it. Are you familiar with vector math? If not, that's ok, but there some operations that might be helpful that are pretty straightforward if you write it in terms of vectors.

phronmophobic22:02:57

Another way to think about it instead of a scale and offset is in terms of a viewport. Panning corresponds to moving all of the corners of the viewport by the same fixed amount. Zooming would correspond to moving the corners of the viewport towards the cursor. Given a view port, you can calculate the scale (sx, sy) and offset (ox, oy) as follows:

(ox, oy) := the top left of the corner of the viewport
sx := (width of the viewport) / (width of the scrollview)
sy := (height of the viewport) / (height of the scrollview)

jlmr09:02:23

Thanks for the tips! It took me a (rather long) time but I fixed it!

2023-02-16

Channels