zooniverse / front-end-monorepo / 10007593228

77%

Build Type

push

github

Committed by web-flow

Commit Message

fix(classifier): Fix wonky drag when image is rotated (#6065)

* fix: smoother image dragging for pan/zoom

- Refactor `SVGPanZoom` to use a ref for `zoom`, rather than component state. Hopefully, this will lead to fewer rerenders when dragging a zoomed image, and smoother performance.
- Use a ref to store pointer coordinates in the `draggable` decorator, to avoid unnecessary rerenders.
- Move the cropped SVG viewbox into a nested SVG, for better performance when dragging a zoomed image.
- Remove the `1.5` easing factor on dragged images, so that they 'stick' to the pointer when dragged.
- Use `focus-visible` so that focus rings are only shown for keyboard interactions.

* rename the drawing canvas layer for clarity

* fix the delete button position for I Fancy Cats

* fix a stray console.log

* clean up draggable

- remove unused variables.
- use a ref to remember the current pointerId across renders.
- clean up pointer capture.

* Explicitly hide the focus ring in Chrome

* refactor useKeyZoom to allow for image rotation

* Add a small amount of smoothing for Chrome

Coverage Stats

11594 of 16848 branches covered (68.82%)

Branch coverage included in aggregate %.

54 of 72 new or added lines in 12 files covered. (75.0%)

4 existing lines in 3 files now uncovered.

16989 of 19305 relevant lines covered (88.0%)

417.69 hits per line