Infinitely zooming out - limiting zoom in

[parliament718]

Is it possible to achieve the affect of being able to zoom out of the jmpress canvas as much as you want but zooming in is limited to the width of the step that the mouse is over?

Currently, it seems to be working exact opposite, with zooming in allowed to go as far as I want but zooming out is limited to the width of the step.

I've been playing around with the viewPort option but can't seem to get this effect. I can imagine I could probably start with a HUGE canvas and lay down the steps with a high scale (so that it zooms in drastically on the first step) but is this really the best approach? Aside from having the undesirable super-zoom on the first step, the steps are also added dynamically and some can be quite large so it really isn't ideal to hard code dimensions like that.

Any other way to achieve this effect?

[parliament718]

One observation worth noting is that if I set the "zoomable" property on viewPort to a negative number it has the following effect:

Reverses the zoom - so zooming in is actually out and vice versa. Zooming out works (although reversed) but it zooms out into the bottom right direction instead of at the center.

Can anyone think of a fix to reverse and center the zoom when "zoomable" is negative?

[sokra]

That's the relevant code fragment, if you want to send a pull request: https://github.com/jmpressjs/jmpress.js/blob/master/src/components/viewport.js#L100-129

[parliament718]

Thanks, I tried this on a touch screen and it actually seems to work the way I want with maxScale: 1 and zoomable: 100, allowing to zoom out as much as I want using 2 finger touch. This same setting however does not work with mouse scroll (no zoom at all, in or out).

[parliament718]

I tried fixing the way zoomBindWheel works but without luck so I simply set it to false and that ended up doinge exactly what I want using the browser's native zoom (Ctrl + scroll or Ctrl +/-)

Admittedly, it no longer zooms on the element that the mouse is hovering over (I assume that was the intended effect) but rather on the currently active step, but that's good enough for me. Turning off zoomBindWheel also fixed another issue I had where my table (DataTables plugin) was not scrolling with the mouse wheel.

I noticed 2 things about the potential problem with the code. First

https://github.com/jmpressjs/jmpress.js/blob/master/src/components/viewport.js#L105

current.userZoom == 0 when I scroll with the mouse wheel and I never make it past that. I removed this check and was able to proceed. However that's not all:

https://github.com/jmpressjs/jmpress.js/blob/master/src/components/viewport.js#L65

event.originalEvent.x and event.originalEvent.y are both undefined.

I tried using clientX and clientY just for kicks which actually results in some kind of movement but the calculation is not working (as the code rightfully warns).

Edit: Playing with it and realizing its actually not sufficient like this because you can't actually zoom in to a step since it's centered you'll just zoom into the center of it. I set maxScale: 1 which prevents this but then it's rather small and hard to see at max zoom. =\

[parliament718]

Ok I found the issue, my own fault.

Dont do this:

viewPort: { height: $(window).height() , width: $(window).width() }

I did however have to leave one of my changes:

https://github.com/parliament718/jmpress.js/blob/master/src/components/viewport.js#L65

Without that the zoom centers on the step rather than zooming into where the mouse pointer is.

Sent a pull request

[parliament718]

Is there any way to prevent zooming (lock it) on a particular step or when a particular step is active? The first step in my sequence is a landing page which should not be zoomable, all steps after that should be.

[sokra]

regarding the last comment: you can use data-view-port-zoomable="0".

regarding the other comments: There is something weird, but currently I have no free time to look deeper into that. If you have time to fix it by yourself and send pull requests, we would be happy :)