Pinch to zoom

[starypatyk]

Here is my initial pinch-to-zoom implementation. This should resolve #916 and #917.

I have not committed the compiled code yet, to make rebasing easier.

Some explanation of the changes:

In 003f31f I have switched from mouse events to more generic pointer events (see https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events).

e96662c is the actual implementation.

• I have re-used the original zoom handling code - a significant part of the old updateZoom method was extracted to updateZoomAndShift and I created an additional common method updateShift.
• Co-ordinates of the two touches are kept in pointerCache.
• Pinch-zoom calculations are explained in the comments.

I committed aeab2bd separately, to make it easier to follow the changes.

1f0fced was required after recent changes in master - as I removed the width/height: 100% from CSS.

I have the following questions:

• Regarding 1f0fced - an alternative solution would be to bring back width/height: 100%. I am not sure which one is better. Any suggestions?
• The pointerMove and pointerUp handlers are now attached all the time. I am not sure what should be done here:

  viewer/src/components/Images.vue

  Line 219 in 698afa4

  window.addEventListener('pointerout', this.pointerUp)

  and here:

  viewer/src/components/Images.vue

  Line 223 in 698afa4

  window.removeEventListener('pointerout', this.pointerUp)

  Probably also a permanent handler for pointerOut that would invoke resetZoom? I do not know how to test this case. Suggestions welcome.
• I have tested on Android and iPad. Would be good to verify on an iPhone.
• I have noticed that recent changes to NcModal (fix(NcModal): Close button should be visible even if modal content is scrolled nextcloud-libraries/nextcloud-vue#4350) affect zooming behaviour. Now, when the image is enlarged a bit from 100%, a scrollbar is shown, and this causes a slight shift in image position. This happens on Chrome and Chrome Mobile (for some reason Firefox does not show the scrollbar). This is not a major problem, but is quite a bit annoying. I wonder if we should try to have some workaround in this PR or leave it for a separate PR.

[github-actions]

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the reviewing process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR reviewing process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

[skjnldsv]

@starypatyk I don't have much time for Viewer lately, thank you for this PR (and your patience 🙈)

[starypatyk]

@skjnldsv No worries. 😉 Thanks for letting me know. Waiting patiently then. 🐌

[starypatyk]

@starypatyk I don't have much time for Viewer lately, thank you for this PR (and your patience 🙈)

Hi @skjnldsv,

Any chance to go forward with this PR?

FYI - I have rebased and re-checked the implementation. Seems to behave decently. Tested as previously on Android and iPad.

This still requires some clean-up - see my questions in the first comment (I have updated commit references after rebase in the original comment).