Feature: Ability to set a pan limit or padding limit

[kylegoines]

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

[timmywil]

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'?

[kylegoines]

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

[timmywil]

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.

[kylegoines]

@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 :)

[mozzi]

I got the same issue, initial size of panzoom element is smaller than container, but user need to be able too zoom it in, and have possibility to pan it after this.