zoom focal on contain invert panzooms

[rogerlos]

Some experimenting has me suspecting that "contain invert" panzooms might need to have this line (roughly near line 600):

var offsetM = new Matrix( 1, 0, o.left - this.$doc.scrollLeft(), 0, 1, o.top - this.$doc.scrollTop() );

changed to this:

var offsetM = new Matrix( 1, 0, 0, 0, 1, 0 );

The latter keeps the focal point where I specify (in this case, passing the values via "clientX" and "clientY" on the zoom method). The original introduces an X, Y error which is related to the parent offset values.

Thanks again for your continued efforts.

[timmywil]

Thanks for opening an issue. It would be a big help if you could provide a test case on http://codepen.io or http://jsbin.com.

[rogerlos]

If you click on the panzoom in this code pen, you can see (click on one of the intersections for clearest illustration) that the zoom is offset and not directly under the mouse:

http://codepen.io/rogerlos/pen/hrKxE

Edited to add: I know I could pass the mouse event instead of finding the x,y, but I have other code in my app which requires me to do it this way. Also, thanks!

[timmywil]

@rogerlos I've forked your codepen and passed the real clientX/clientY to the focal option and that seems to work correctly:

http://codepen.io/timmywil/pen/tnkrf

Does that work for you too?

[rogerlos]

I think that works, it was essentially what I came up with, too. Many thanks for looking into it.

[adrianosmond]

I'm also having issues with this: http://codepen.io/adrianosmond/pen/KjJCH

If I set the initial size of the tiger image to be 450x450 (the size of my container) the focal zooming works, but when I make the tiger start at 900x900 zooming happens in the wrong place. Is this due to me misunderstanding "Should either be a jQuery event or an object containing clientX/clientY to specify the point's position relative to the parent."? Or is this a bug?

Also, I contain invert doesn't calculate and enforce the minimum zoom for you in order to ensure that the whole image isn't smaller than its parent? I'm wanting to use this on a responsive site, so I have pretty much no control over the size of the parent element.

Really nice work though, thanks!

[timmywil]

@adrianosmond I believe the first is an issue with focal point zooming when the container is smaller than the image. I'll look into this.

I will also take a look at enforcing inverted containment. Thus far, I've only had use cases where I could simply set the minScale to enforce it, but that could be calculated.

As far as a responsive parent container, all dimensions are cached on initialization in order to facilitate fast panning and zooming. These cached dimensions need to be reset whenever they change. You could do this with a resize event:

$(window).resize(function() {
  $panzoom.panzoom('resetDimensions');
});

[pensionera]

Hi,
Im trying to make a zoom tool with panzoom on one image. But when image isn't fix in container (with "contain: invert") focal zoom doesnt work correct.
When the container size is 100% of width and height focal zoom work perfect, but when width of image is 100%, height isnt 100%, zoom isnt work (like img size - 400x600, img container - 400x400 on scale 1).
I tried with resetDimensions, but doesnt work. Can I do something to fix this?

[timmywil]

@pensionera Thanks for letting me know. There does seem to be an issue with focal point zooming. You can track the bug with this open issue, which I hope to fix sometime this week.