search

timmywil / panzoom

A library for panning and zooming elements using CSS transforms :mag:
https://timmywil.com/panzoom/
MIT License
2.17k stars 418 forks source link

Feature: adjust the zoom rate to increase with element size #643

Closed folsze closed 1 year ago

folsze commented 1 year ago

Hi,

I am not sure whether this is the correct way to do this (I wanted to ask in Discussion Tab but there was none for this github repo).

I am not sure whether this is a bug or just a trait of this library.

What problem does this feature solve? basically with my svgs the pinch-zooming gets really slow when I get like 50% zoomed in.

Here is a GIF: ezgif-3-12717332c1

Describe the solution you'd like

Here is a GIF: ezgif-3-9e091e3756 It's from https://apps.apple.com/us/app/what-is-there/id660164295 and uses React Native

As you can see the zoom is really constantly fast (same speed) on this app, there is no "progressively slowing down more" like @panzoom/panzoom does it

I can provide a minimal reproducible example if this would be helpful. Let me know and I will upload it right away. But I thought I'd wait first since maybe this is just a known trait of this library? I can somewhat see it when testing https://timmywil.com/panzoom/ but not as much as in my video I guess

I just wanted to report this as I did not find any hints on this in the docs. So maybe it could be helpful for other people who have the same problem too.

folsze commented 1 year ago

I fixed the problem by using another library: https://www.npmjs.com/package/panzoom

For anyone wanting to see the differences in how the two libraries behave see here: https://github.com/folsze/panzoom-bug

I created two ionic pages: panzoom (from this library) anvaka-panzoom (another library, see package.json)

folsze commented 1 year ago

@timmywil Feel free to view the difference in the repo. Maybe it would serve as a good comparison for you to make the zoom-speed behave faster in your panzoom as well

EDIT: actually this other library has a weird thing where you have to do: https://github.com/anvaka/panzoom#handling-touch-events for click events. And then when I do that, the pan gets laggy in my application unfortunately. BUG: https://github.com/anvaka/panzoom/issues/299

THUS: It would be amazing if we got the same zoom-speed behaviour as the other library since I think yours is otherwise superior in terms of other things.

timmywil commented 1 year ago

Thanks for opening an issue. This has been debated a lot and I don't think any library gets it perfect for all cases. That said, I'm open to adjustments.

Before I make another change to zoom rate, though, I'd like to send this through voting.

Also, if you haven't already tried it, play with the step option.

folsze commented 1 year ago

Hey I don't know why I didn't try the 'step' option. It really helps my app.

I set it to 3 and limited the maxScale to 10, such that the user is never able to reach the awkward "slow-zoom" zoomed-in-point.

This is my code:

      minScale: 1,
      maxScale: 10,
      step: 2,

Maybe this could be documented in the library? That if users are experiencing slow zoom like in my repo above, then they could use the trick of upping the step and limting the maxScale to prevent users from ever reaching this weird slow-zoom point? I could make a PR, lmk

folsze commented 1 year ago

So I think you can close the 'Votes needed' as your library already provides a solution to the mentioned problem :)

beginner library-users like me are just not aware of it

EDIT: this is somewhat of a workaround. I am still not satisfied with this solution, since now my zoom is awkwardly fast. The step(=the zoom speed) should not be the necessary change to get this working. Whoever wants to achieve this consider using the other famous panzoom library.

However with the other one I am having very weird performance problems on mobile when zooming (after attaching click listeners to paths)

folsze commented 1 year ago

I don't know if this might pose itself as a solution, but the zoom with the mousewheel is actually not that slow when it gets zoomed in. It's really only the finger zoom that gets so slow when zoomed in.

Just dropping this here for anyone interested.

Is it possible to somehow reuse the mousewheel zoom mechanic for the finger-zoom-mechanic?

folsze commented 1 year ago

I might try to implement this in a fork this month or so, if it's not too hard. Do you think it would be very hard?

Maybe you could give me some pointers just on where in this repository to start working on this? And what I should look into first? Only if it's not a lot of work for you. Thanks for creating this amazing library @timmywil

folsze commented 7 months ago

@timmywil gonna actually do a spike in a fork this April or May still. Do you have any advice or pointers right now already? Would be much appreciated :)

Basically I just wanna have this be the case: "Feature: adjust the zoom rate to increase with element size"

otaviogaiao commented 6 months ago

@timmywil gonna actually do a spike in a fork this April or May still. Do you have any advice or pointers right now already? Would be much appreciated :)

Basically I just wanna have this be the case: "Feature: adjust the zoom rate to increase with element size"

Do you have any update on this? I'm facing the same issue right now.