touch-based pinch-zoom using Hammer.js does not keep image centered during zoom when parent container is offset to the right of the screen

[dave-doty]

I place two div's side-by-side and apply the recommended event handler usage with Hammer.js:

https://github.com/ariutta/svg-pan-zoom/blob/master/demo/mobile.html

I put together a small demo here:

http://jsfiddle.net/ngkq6L2m/9/

The leftmost container pinch-zooms as expected. However, the rightmost container does not keep the coordinate under the pinch centered while the zoom is occurring. Instead the whole SVG slides left during zoom-in and right during zoom-out. It seems as though some part of the library (not sure if it is svg-pan-zoom or Hammer.js) is assuming that the leftmost pixel offset of the parent container is 0, and when it is positive the appropriate translation is calculated incorrectly.

[ariutta]

Thanks for the report. I'm afraid I don't have the bandwidth to dig into this, but I added the "help wanted" label, if anyone else from the community has the chance to make a pull request.

[DaveWM]

I also ran into this problem. As @dave-doty said, I think the issue is that HammerJS gives you an event with a center in the coordinate space of the entire page, not the SVG element. I was able to get around this by translating the center point like this:

const el = ev.target;
const rect = el.getBoundingClientRect();
				
const pos = {
  x: (ev.center.x - rect.left),
  y: (ev.center.y - rect.top)
};
instance.zoomAtPoint(initialScale * ev.scale, {x: pos.x, y: pos.y});

I got the solution from here. Here's a fork of @dave-doty's solution with the fix applied: http://jsfiddle.net/squr9wjy/8/

[SwapnilGopale]

Is there any way to enable and disable the pinch and zoom? I am trying this for a while but unable to achieve that.