search

zooniverse / front-end-monorepo

A rebuild of the front-end for zooniverse.org
https://www.zooniverse.org
Apache License 2.0
104 stars 29 forks source link

Drawing is broken for zoomed-in images in Firefox #6490

Open eatyourgreens opened 4 days ago

eatyourgreens commented 4 days ago

Package

Examples

Describe the bug

Dragging a drawn mark, in Firefox, doesn't correctly map the cursor position to the enlarged SVG image. It looks like the cursor position is mapped to the original (not zoomed-in) viewport.

https://github.com/user-attachments/assets/0eb80883-8c49-4700-bd00-6f6bc88fca17

To Reproduce

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

In Firefox, zoom in, place a point mark, then drag the point to a new position.

Alternatively, zoom in, draw a line, then drag one of the end points to a new position.

Expected behavior

Drawing works as expected in Chrome and Safari. The dragged element should follow the pointer position.

Additional context

Dragging interactions get the current transformation matrix from a svg element stored in SVGContext here: https://github.com/zooniverse/front-end-monorepo/blob/1862adebef4ddfde8d071669c99038bf3343383c/packages/lib-classifier/src/plugins/drawingTools/components/draggable/draggable.js#L51

Creating a mark here gets the CTM from the DrawingCanvas component in the InteractionLayer component. https://github.com/zooniverse/front-end-monorepo/blob/1862adebef4ddfde8d071669c99038bf3343383c/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/InteractionLayer/InteractionLayer.js#L88

I don't think those are referencing the same DOM node, so that could account for differences in behaviour between creating a mark and dragging a mark. They probably should be using the same DOM node and transformation matrix.

eatyourgreens commented 4 days ago

This bug means that Etch-A-Cell must be almost impossible in Firefox. 😳

eatyourgreens commented 4 days ago

Updating the context so that all transformations reference the same SVG rect element fixes this.

eatyourgreens commented 3 days ago

Here's a screen recording from Etch-A-Cell, showing this bug in Firefox when you edit a line.

https://www.zooniverse.org/projects/willcharlie/etch-a-cell-correct-a-cell/classify/workflow/24998/subject/93925784

https://github.com/user-attachments/assets/ad402ed7-81c2-41fd-b41a-22337c46edcb

eatyourgreens commented 3 days ago

You can also reproduce this bug on any transcription project in Firefox.

https://www.zooniverse.org/projects/printmigrationnetwork/print/classify/workflow/20199/subject-set/120739/subject/99370214

https://github.com/user-attachments/assets/7f5866b7-e6af-4a54-9688-19b371dd826e