How to limit panning to size of container element?

[derwaldgeist]

We have a defined rectangle on screen in which an image will be displayed. We want the user to be able to zoom in and pan the image, but still within these defined boundaries.

However, if we wrap PrismaZoon around the image, it will allow the user to pan the image outside the container. It is even possible to push it completely out of viewport, so the empty container is the only thing the user will see. This "over-panning" even happens if we set the overflow of the ancestor elements to hidden. This works on Google Chrome, but not on iOS.

Also, we noticed that all pen gestures are propagated to the underlying elements, even if they are not ancestors of the PrismaZoom element. In our use-case, we are using PrismaZoom within a "lightbox" (image on top of a dark-transparent background) which sits inside Bootstrap React modal. Beneath the modal is content which is pannable as well (a horizontal slider). If we pan the image inside PrismaZoom, the content of the main page (i.e. the slider underneath the modal) will be panned as well. Setting allowTouchEvents to false did not change anything.

Last but not least: We would like to close our lightbox modal when the user taps on the image. But this onClick is not being propagated to the ancestor element, and there's no onClick handler on PrismaZoom either.

[sylvaindubus]

Sorry for the delay. Could you provide an example online that gather all these issues?

The first issue shouldn't happen, panning should be limited by image's dimensions, so I would need more investigation in a real case. The second one may require an additional prop in order to prevent propagation. And the last one sounds doable, at least we can propagate the onClick handler without too much concerns.

[ryanadhi]

Hi I am facing this issue too. when zooming or panning, the image goes outside the boundary

here is the sample code: https://codesandbox.io/s/tender-elgamal-h7vhkz

---

EDIT: fix it using <div> with background image instead of <img> https://codesandbox.io/s/wizardly-grass-6cggwv

[sylvaindubus]

@ryanadhi this is just pure CSS here, so you can still use an image if you add an overflow: hidden to its parent. It goes outside the boundaries because it's a simple CSS transformation under the hood.