Dragging subject images ignores rotation transforms

[eatyourgreens]

Package

Choose from the list:

• app-content-pages
• app-project
• lib-classifier
• lib-panoptes-js
• lib-react-components
• unknown

Describe the bug

Dragging a rotated subject image ignores the rotation transformation, leading to weird and unexpected UX eg. I drag right but the image moves up (its RHS in the rotated frame.)

Panning with the keyboard isn't affected, only dragging with a pointer (mouse, trackpad or finger.)

Screen.Recording.2024-04-28.at.22.04.20.mov

To Reproduce

Zoom an image, either in or out, rotate it, and drag the rotated image to move.

Expected behavior

Dragging should move the image in the frame of the subject viewer, not the rotated frame of the image eg. dragging right should move the rotated image to my right.

Device information

Tested in desktop Firefox and Chrome, and mobile Safari on an iPhone XS. This seems to be a bug in the Zooniverse SVG code, not a browser bug.

Additional context

Dragging worked correctly when rotation was first introduced, for transcription projects.

[eatyourgreens]

After a bit of testing on a drawing workflow, on my phone, dragging to draw is not affected by this bug. Only dragging to move the image. 🤔

https://frontend.preview.zooniverse.org/projects/eatyourgreens/-project-testing-ground/classify/workflow/3370?env=staging

[goplayoutside3]

Related to #2273

[eatyourgreens]

Both #2273 and this issue should be fixed in #6065.