Comments (13)
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
from angular-pan-zoom.
+1
It is quite useful feature : )
from angular-pan-zoom.
+1
I'm also looking forward to this enhancement :)
from angular-pan-zoom.
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.
- It should be enabled through a config setting as to not break existing functionality
- 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.
- 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.
- 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.
from angular-pan-zoom.
I would propose a following behaviour:
- 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
- Accordingly when top and bottom edges are visible it should be vertically centered. I should be able to move content left and right
- Both 1) and 2) can happen in the same time. I shouldn't be able to pan
- 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. :)
from angular-pan-zoom.
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.
from angular-pan-zoom.
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.
from angular-pan-zoom.
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 : /
from angular-pan-zoom.
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
from angular-pan-zoom.
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.
from angular-pan-zoom.
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. :)
from angular-pan-zoom.
Thats awsome :) 👍 ...thanks a ton Martin :)
from angular-pan-zoom.
👍 that was quick. I'm going to test it today. Thanks a lot:)
from angular-pan-zoom.
Related Issues (20)
- How about min zoom HOT 2
- TypeError: panElement.get is not a function at new controller (panzoom.js:23) HOT 2
- Pan and zoom is not working in ie 11 on windows 8 touch screen HOT 4
- <!DOCTYPE html> prevents pan to function at all HOT 3
- Print the panzoom HOT 1
- NPM version of angular-pan-zoom needs bower HOT 6
- KeepInBound issue when viewport size is smaller than the content size HOT 2
- two finger touch on mac trackpad causes zoom out HOT 4
- Throws an error on disableZoomAnimation HOT 1
- Demo page not working HOT 5
- Option to disable pan/zoom functionality HOT 1
- Reset to initial zoom and position
- keepInBounds Not Working in my App HOT 2
- .png not supported
- Panning is not working at all. HOT 3
- Support for Angular 2 HOT 16
- api to reset zoom and pan HOT 1
- How do I simply zoom to fit the contents?
- Zoom with mouse wheel
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-pan-zoom.