react-zoom-pan-pinch icon indicating copy to clipboard operation
react-zoom-pan-pinch copied to clipboard

Propose: option to lock the panning bounds to the parent element bounding box

Open zpetukhov opened this issue 5 years ago • 3 comments

to illustrate what I mean:

in src/store/pan/index.ts

39,40c39,40
<   const newPositionX = lockAxisX ? positionX : Math.max(Math.min(mouseX,10),this.bounds.minPositionX-10);
<   const newPositionY = lockAxisY ? positionY : Math.max(Math.min(mouseY,10),this.bounds.minPositionY-10);
---
>   const newPositionX = lockAxisX ? positionX : mouseX;
>   const newPositionY = lockAxisY ? positionY : mouseY;
56,57d55

I hardcoded there, but need to add some setting...

zpetukhov avatar Mar 04 '20 03:03 zpetukhov

@zpetukhov I'm using your solution temporarily, but agreed it should be part of the library if possible!

markovchainz avatar Mar 21 '20 19:03 markovchainz

Voicing support for this, I'll be grabbing your solution until then. Thanks!

green6060 avatar Oct 27 '20 19:10 green6060

isn't it just a limitToBounds prop?

prc5 avatar Jun 26 '21 16:06 prc5

We can also disable animation which goes beyond wrapper - it's disablePadding prop.

prc5 avatar Feb 27 '23 17:02 prc5