search

timmywil / panzoom

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

Wheel zoom and pinch with dynamic content #635

Closed bscheribel closed 1 year ago

bscheribel commented 1 year ago

Hello,

I have a page where I am using this library along with an expandable tree diagram library. One issue I'm having is when the trees get expanded, zooming with the mouse wheel as well as pinching on a phone no longer zoom to the focal point.

The zooming works fine when the page initially loads, it's only after the trees are expanded that the problem arises. If I remove overflow: hidden from the parent panzoom element the issue is fixed, but that introduces scrollbars on the page which I don't want.

I was just wondering if there is something I could try to fix this, or if you could point me in the right direction. Here is a link to the page I'm working on as well as a video of the issue.

https://test.touchecontrols.com/smartpack-video-library/

https://user-images.githubusercontent.com/120147589/206612417-826e4c3f-5a73-46ed-8170-c95bbed492f1.mp4

timmywil commented 1 year ago

Thanks for opening an issue. I'm not sure exactly what's happening, but try adding flex-shrink: 0 to the panzoom parent and see if you can work it out from there. If not, please make an editable example on codepen.io or similar site and I take a closer look.

bscheribel commented 1 year ago

Thanks so much for your comment, and for the awesome work on this plugin!

I created a codepen, and also another video just so you can see the same thing is still happening. Any help you could give me would be much appreciated.

https://codepen.io/benscheribel/pen/XWYwOov

https://user-images.githubusercontent.com/120147589/207200402-7a728d5e-361b-4d9e-87f3-16733d8358ce.mp4

bscheribel commented 1 year ago

Hello, I was just wondering if you were ever able to take a look at the codepen I created. Thanks!

timmywil commented 1 year ago

I took a look, but there's a lot of code in the example to sift through. I'm not sure exactly what's going on, but it seems like when you click one of the plus buttons, something besides Panzoom is panning the element. When that happens, the x and y values Panzoom has stored become out of sync. Part of Panzoom's strategy to stay small and simple works on the assumption that Panzoom has full control of the position of Panzoom element. If anything interferes with that, it can get out of sync. More complex applications like yours may be better served by another zooming library. I know that's not the answer you wanted to hear. The other zooming libraries I've seen can be much larger, but they are also more robust and can better handle conflicts caused by other libraries on the same page.

bscheribel commented 1 year ago

No problem, I really appreciate you taking the time to look in to it. Do you by chance have any recommendations for other panzoom libraries that you think might work better? I've tried a couple other ones, but still run in to the same issues. Thanks again!

bscheribel commented 1 year ago

Hello, just wanted to check in and see if you had any recommendations for other zooming libraries I could try to use. I've been looking around but there are so many out there that I'm not sure which one is best. Thanks!