Drawing is broken for zoomed-in images in Firefox

[eatyourgreens]

Package

Examples

• lib-classifier

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.

Screen.Recording.2024-11-23.at.17.16.58.mov

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:

front-end-monorepo/packages/lib-classifier/src/plugins/drawingTools/components/draggable/draggable.js

Line 51 in 1862ade

const { canvas } = useContext(SVGContext)

Creating a mark here gets the CTM from the DrawingCanvas component in the InteractionLayer component.

front-end-monorepo/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/InteractionLayer/InteractionLayer.js

Line 88 in 1862ade

? svgPoint.matrixTransform(canvas.current?.getScreenCTM().inverse())

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]

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

[eatyourgreens]

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

[eatyourgreens]

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

Screen.Recording.2024-11-24.at.11.20.13.mov

[eatyourgreens]

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

Screen.Recording.2024-11-25.at.09.14.26.mov