annotorious / annotorious-openseadragon

An OpenSeadragon plugin for annotating high-res zoomable images
https://annotorious.github.io
BSD 3-Clause "New" or "Revised" License
121 stars 42 forks source link

OSD MouseTracker being corrupted by Annotorious on an iPad device #143

Closed EmKarr closed 1 year ago

EmKarr commented 2 years ago

Hi Rainer,

we already talked about a strange problem with the OSD MouseTracker being corrupted by Annotorious on an iPad device. I was able to observe this corruption only on an iPad (mobile Safari, Firefox, Chrome, i.e. AppleWebKit render engine), it does not occur on Windows or Linux systems.

After many hours of testing I finally found out when this happens, this problem is caused a combination of several factors.

If "disableSelect" is set to TRUE, panning the viewer canvas by dragging it with the mouse / touch device OUTSIDE of an annotation results in an error (which I already reported as issue #140, this error not only occurs on an iPad, but also e.g. on Windows desktop computers). Precondition with Annotorious-OSD 2.7.7. is that "disableSelect" is set to true after initializing (anno.disableSelect = true;) because of issue #141 (property disableSelect not initialized from Annotorious constructor parameter).

The error is as follows: Uncaught TypeError: this.hoveredShape is undefined Ah OSDAnnotationLayer.js:293 getHandler eventsource.js:174 raiseEvent eventsource.js:196 onCanvasClick viewer.js:2894 delegate openseadragon.js:1410 updatePointerUp mousetracker.js:3505 handlePointerUp mousetracker.js:2652 onPointerUp mousetracker.js:2601 pointerup mousetracker.js:251 addEvent openseadragon.js:2135 startTracking mousetracker.js:1468 setTracking mousetracker.js:342 MouseTracker mousetracker.js:296 Viewer viewer.js:284 OpenSeadragon openseadragon.js:781, ...

If "disableSelect" is NOT TRUE (i.e. either FALSE or undefined as per issue #141), or if dragging happens completely WITHIN an annotation area the error is not thrown.

After the error, on an iPad (and only an iPad, i.e. a iOS mobile browser) the OSD MouseTracker is corrupted in the way that the pinchToZoom gesture does no longer work at all and the dragToPan gesture works only partially (need to drag very fast for a little bit of pan, dragging and panning distance are not synchronized any longer). Before the error occurs everything works. Mabye that is because somehow the reference point for the gestures becomes miscalculated after the error occured? Once this happens, it seems to go on until the webpage is reloaded.

A test scenario can be found here: https://www.uni-due.de/~hb0324/osdtest/osd3_error.html (with the error occuring due to anno.disableSelect = true;) https://www.uni-due.de/~hb0324/osdtest/osd3_correct.html (without the error due to anno.disableSelect = false;)

Any help with this is very much appreciated. Best, Michael

rsimon commented 2 years ago

Hi Michael,

wow - thanks for doing this work. Finally having those steps debugged is incredibly helpful. (As I think we already discussed via email, I was aware that this problem does happen. But wasn't yet able to retrace the exact sequence that causes it; and was completely unaware it might be linked to this exception!)

In principle, the root bug that causes the JavaScript exception ("this.hoveredShape is undefined") is fixed now. I'll try to publish the next release (2.7.8) ASAP, so we can check if this now fixes the iPad touch problem, too.

rsimon commented 1 year ago

Sorry - took me longer than expected to roll the next rlease. But v2.7.8 is out now. Let me know if this changed anything.