Panzoom: Feature: Ability to set a pan limit or padding limit

Created on 23 Jun 2020 · 4Comments · Source: timmywil/panzoom

What problem does this feature solve?

Describe the solution you'd like
The ability to set a panning limit to objects being panned
ie:
boundaryRatioVertical={0.8}
boundaryRatioHorizontal={0.8}

Describe alternatives you've considered
The contain: 'inside' value has a similar style, but i need to be able to toggle between zoom levels while maintaining the padding ratio limit

feature votes needed

Source

kylegoines

Most helpful comment

Thanks for getting back to me so quickly.

Maybe I'm not understanding contain: inside completely. As far as i understand it's implementation: the panzoom Node will no longer be-able to zoom past its parent's rect box, but i DO want the user to be able to zoom in, contain: inside is not allowing my object to zoom past the viewport.

My usecase: i have a large resolution historical map - that i want a user to be able to pan around, its too large to view the entire object but i don't want a user to "lose the map" by pushing it too far to one side, which sounds like contain: outside but i would like them to have full zoom control, to zoom out fully but to explore more by zooming in.

i think the issue is the limitations that im coming across both inside and outside

inside assumes the image is small enough to fit in the viewport, and has some strange effects if not
outside assumes the image should AT LEAST take up the entire viewport

where i could imagine a contain: 'bounds' that would let an image zoom and pan, and when the image is larger than viewport and you get to the edge or corner it would pan back to the respective edge

kylegoines on 23 Jun 2020

👍2

All 4 comments

Thanks for opening an issue. Forgive me if I misunderstand the feature, but couldn't this be accomplished by adding a wrapper element and using contain: 'inside'?

timmywil on 23 Jun 2020

Thanks for getting back to me so quickly.

i think the issue is the limitations that im coming across both inside and outside

inside assumes the image is small enough to fit in the viewport, and has some strange effects if not
outside assumes the image should AT LEAST take up the entire viewport

where i could imagine a contain: 'bounds' that would let an image zoom and pan, and when the image is larger than viewport and you get to the edge or corner it would pan back to the respective edge

kylegoines on 23 Jun 2020

👍2

This sounds like unique behavior and I'm not sure how to build it into the library. I think you could bind to the panzoomzoom event and change the contain option to 'outside' when a boundary is reached. I used to have an 'auto' option for contain that would alternate between inside and outside depending on the size of the element relative to the container. When smaller than the container, it would be set to 'inside', when larger, 'outside'. This would ensure the image was zoomable but always in view. Either way, I will leave this in the votes label for now.

timmywil on 25 Jun 2020

👀1

@timmywil over the past two days ive auctally come across that idea, to toggle between inside and outside, but that seems to not work as expected, going from {contain: outside} to {contain: inside} seems to lock the image in a position and it seems liek the zoomIn() and zoomOut are tied to the contain setting, so i cant even trigger a zoomOut unless triggering it myself. Let me know if theres settings I'm overlooking.

I guess thats alot of words for saying a contain: auto seems exactly what I'm looking for hah

if theres a voting for the auto feature, id be happy to support that :)

kylegoines on 26 Jun 2020

Was this page helpful?

0 / 5 - 0 ratings