Focal zoom with flex-centered images

[enxi2]

Describe the bug

Hello, I'm trying to add panzoom to an image gallery popup, but am running into issues with the focal zoom when using a centered image. I've read through the previous issues on this topic, but still can't quite understand why the focal zoom isn't working as expected when using a centered image.

Expected behavior

Here's an implementation of what I would like with focal zoom using plain JS: https://codepen.io/erinxi/pen/WNXzovm

Actual behavior

Here's a minimal reproduction of the gallery popup with panzoom: https://codepen.io/erinxi/pen/GROxNVa
Zooming in to the tiger's eye does not focus on the eye like it would in the demo https://timmywil.com/panzoom/demo/.

If I understand correctly, calculations are done in the parent element's coordinates space (with 0, 0 in the top left)? And in the panzoom demo this is accommodated for using margins, however when using flexbox there are no margins? Any insight or suggestions on the appropriate workaround on this would be greatly appreciated!

[timmywil]

Thanks for opening an issue. I see you're adjusting the clientX to the middle. I've considered doing the same whenever flex is set to centered, but that just sounds janky and I'd be bound to miss some use case.

That said, there's got to be a better way to account for both use cases and I think it's possible by accounting for the elem's position, but I'm getting the math wrong somewhere. I've adjusted your plain JS example to do the same calculations done in Panzoom. I'm going to play with your example more and see if I can work out calculations to account for both use cases.

https://codepen.io/timmywil/pen/rNYrpNz

[enxi2]

Thanks for the example! For now I've been setting the image to the top-left and manually calculating a starting position / scale (needed for fitting the image to the parent container anyways).

const zoom =
  imageAspect > parentAspect // wide or tall
    ? parentW / imageW : parentH / imageH;
panzoom.current.zoom(zoom);
panzoom.current.pan((parentW - imageW) / 2 / zoom, (parentH - imageH) / 2 / zoom);