Basic panzoom use case, but having an issue making sense of the results

First off just wanted to thanks the contributors and author for this, it’s a great tool, and I’m glad it exists! 👍

Subject of the issue

I’ve setup a jsfiddle to demonstrate my issue.

I’m building a system where I have data like the following:

[
  {
    x: 200,
    y: 200,
    zoomFactor: 1.2
  },
  ...
]

Based on certain user input, I need to pan and zoom the image to the above defined points. (pretty basic) However, I’m having some weird behavior that I’m not entirely understanding.

The pan and zoom features of the library seem to affect each other in odd ways. I’ll describe in detail in the “Steps to reproduce” section. This is issue makes me feel like I’m missing something big about this library, but I don’t see anyone talking about the issue I’m having nor any example to account for this.

Any pointers, advice, or examples are much appreciated!

My environment

• jquery == 3.1.0
• jquery.panzoom == 3.2.2
• chrome == 52.0.2743.116
• ubuntu == 16.04

Steps to reproduce

1. open the above jsfiddle
2. open dev tools for info logged to the console
3. click the ‘Details’ button in the demo
4. notice that the position of the image is logged to the console. Currently it’s at (0, 0).
5. click the ‘Pan’ button, then again click the ‘Details’ button
6. notice that the image was moved to (200, 200), where we want it.
7. now click the ‘Zoom’ button, and again click the details button
8. notice that the image has moved from (200, 200) and is now at (208, 244) NOTE This same issue happens when zooming first, then panning, although the coordinates differ.

Expected behaviour

I naively expect that the image will be zoomed to the given zoomFactor AND the image should stay where I’ve panned it to, namely (200, 200).

Actual behaviour

When zooming the image pans away from the previously set coordinates

[kgraves]

Ah, there we go. The first example in your above comment does the trick.

.panzoom {
  ...
  transform-origin: 0 0 !important;
}

I tried doing that, but forgot to set the !important on it, so it probably got overridden shortly thereafter.

Thanks for your help @timmywil, I really appreciate it!

[kgraves]

I think I may have not explained my problem well. I’ve definitely taken a look at the demo page many times, but haven’t seen examples there, or elsewhere, like what I’m trying to achieve. All the examples I’ve seen rely on human input to pan and zoom, and are not trying to get the image placed precisely via data. I’m looking to pan and zoom programmatically, via your API. Given a predefined set of data: an (x,y) pair and a (width, height) (which I convert to a zoom factor) of a specific section of an image, I want to move and zoom the image to the section defined in the data.

The thing I’m misunderstanding the most is the API that I’m given. For pan I’m supposed to specify an (x,y) pair in pixels. However, if I do anything other than panning, for instance a call to zoom, quickly invalidates those (x,y) coordinates. They no longer represent the correct point on the image.

I may be wrong here, but does the library not account for this change in zoom when the pan method is called? The example you wrote above demonstrates this exactly:

$('.panzoom')
    .panzoom('zoom', 2)
    .panzoom('pan', 200, 200);

I read it as: zoom with a factor of 2, then move the image to (200,200) pixels. However, what I see happen is that the image moves up and to the left, in the negative direction. Precisely, it was moved to (-186.5, -100). These coordinates do not seem to represent (200,200) respective to the parent container, nor the origin of the parent container. They don’t seem the represent the coordinates when taking the zoom factor into account, which might be something like (400, 400) for a zoom factor of 2.