Focal point zooming running like the origin is top left when the panzoom element is large than the parent

[timmywil]

http://codepen.io/adrianosmond/pen/KjJCH

From comment

[adrianosmond]

Would having a panzoom element that's smaller than the parent also cause issues with the pan method? I've added a pan to 0,0 button to the codepen and it takes you to different places at different zoom levels.

[timmywil]

@adrianosmond That sounds like expected behavior. Panning simply sets the translation x and y values. You would see different parts of the panzoom element at different zoom levels.

[pensionera]

Hi,
After some test I find how you can fix this.
On line round 640 has
var clientX = focal.clientX - container.width / 2;
var clientY = focal.clientY - container.height / 2;
after change container.width and container.height with the panzoom element original width and height focal point work fine.
Something like this:
var clientX = focal.clientX - options.originWidth / 2;
var clientY = focal.clientY - options.originHeight / 2;
where originWidth and originHeight I added to options for first size of panzoom element.

[timmywil]

@pensionera A good suggestion, but I think we can continue automating this calculation. Patch incoming.

[RedBraceWeb]

@timmywil
I am using the contain:invert option and running into a similar problem. I tried translating the x,y coordinates based on the scale of the image but had no success. Can you look at this sample page and tell me the best method for setting the focal point? The goal is to fire the events and pan zoom to the specific coordinates. http://redbrace.com/campusmap/map.html