Restricting pan and zoom to view port height width

[rahul-avaghan]

Hello i'm using angular-pan-zoom plugin in my project .I wanted to restrict the pan & zoom to view port height width .Kindly suggest some way that i can do this thing.
Thanks in advance

[mvindahl]

Hello Rahul, and thanks for using the plugin :)
I'll look into it as soon as I get time and get back to you. Probably within a few days.
Regards,
/Martin

[chepilot]

+1
It is quite useful feature : )

[KrzysztofWrobel]

+1
I'm also looking forward to this enhancement :)

[mvindahl]

Whoa :) .. seems to be very much in demand. I haven't had the time to look at the code yet but let me try to understand exactly what you are asking for.

1. It should be enabled through a config setting as to not break existing functionality
2. When enabled, it's no longer possible to zoom further away than the "neutral level" (viewport displayed as 1:1). It's only possible to zoom into the contents, and back out to neutral.
3. Also, I presume, it should not be possible to pan or zoom beyond the borders of the viewport. When trying to do so, the viewport will be panned as to avoid this.
4. As a result of 2) and 3), no matter which state the pan or zoom is in, zooming away will eventually lead to the pan/zoom controlling displaying the full contents of the viewport af 1:1 scale.

I'd say it's certainly doable. Just want to make sure that I got it right.

[KrzysztofWrobel]

I would propose a following behaviour:

1. when I zoom-out, if both left and right edges of the content are visible it should be horizontaly-centered. I should be able to move content freely up and down
2. Accordingly when top and bottom edges are visible it should be vertically centered. I should be able to move content left and right
3. Both 1) and 2) can happen in the same time. I shouldn't be able to pan
4. Whenever I zoom-in I shouldn't be able to pan beyond the borders of the viewport, the same as you stated in 3)
   At least the image galleries I know work like this when zooming and that's all from me :).

I don't know if others will agree with such behaviour.
I don't know either if that is the same behaviour you propose. :)

[chepilot]

Agree with first point of @mvindahl, should put it into a config setting.

Based on my understanding, the behavior description of @mvindahl and @KrzysztofWrobel are the same and sounds correct to me.

[mvindahl]

Thanks for the feedback, it's much appreciated.

@KrzysztofWrobel, would it be possible for you to provide a link to an image gallery which behaves in the desired way? I think it would be very good for clarifying the specs.

[KrzysztofWrobel]

Actually can't find good web example, but for example both FB and Google Photos apps on mobile behave like this. Don't know if this will help you out with specs : /

[rahul-avaghan]

Here is one example of pan and zoom restriction to view port width and height
http://codecanyon.net/item/jquery-mega-image-viewer-animated-zoom-and-pan/full_screen_preview/2586378

[mvindahl]

Thanks for the pointers. I fired up an image viewer in Facebook on my cell phone and it illustrated the point nicely. So did the codecanyon URL.

Having thought about it, I think the main point of the new config setting would be to prevent panning beyond the edges of the viewport. As for making it possible to only zoom in, that's would already be possible to do by setting properties "neutralZoomLevel" and "initialZoomLevel" to zero (at least as far as I recall, haven't tested it right now).

I would propose a new config setting named something like "keepInBounds" which, when applied, would simply prevent the user from panning beyond the edges of the contained image. I'd like for it to be orthogonal to the remaining settings, as config easily becomes confusing if that's not the case. There are a few wrinkles to the design but I think I have them ironed out in my head.

Bottom line is that, yes, it seems both reasonable and feasible, and I'll certainly give it a shot. I'll keep everyone updated in this thread.

[mvindahl]

I've added a keepInBounds property which I believe addresses the issue. It works best when setting the neutralZoomLevel property to zero, i.e. when telling the system that it's only possible to zoom in. When testing, I've set the size of the panzoom directive and the size of the contents to be equal as it seemed to make the most sense. (Yeah, I know, I should test the "weird" configurations as well, I'll try to get around to it..)

When panning, the directive will do kind of the same neat thing as Facebook on mobile, i.e. will acknowledge that you are trying to drag the image but will apply a kind of virtual rubber band to pull it back in place.

When zooming, you will not be allowed to go below the neutral zoom level. Also, during zoom, it will keep the viewport in bounds.

There are a few other new properties, mainly constants for fine tuning the algorithm for pulling the contents back in place when dragging off limits.

I've published version 1.0.15 on bower and npm.

Unless I hear any vocal protests during the next couple of days, I'll close the issue. :)

[rahul-avaghan]

Thats awsome :) 👍 ...thanks a ton Martin :)

[KrzysztofWrobel]

👍 that was quick. I'm going to test it today. Thanks a lot:)