zooniverse / front-end-monorepo / 13252430262

77%

Build Type

push

github

Committed by web-flow

Commit Message

refactor(classifier): use native browser SVG scaling for drawing tools (#6066)

* refactor: use native browser SVG scaling for drawing tools

- remove manual scaling code from `strokeWidth` for all the SVG drawing marks. To be honest, it has never worked very well.
- add `vector-effect="non-scaling-stroke"` to all the SVG drawing marks. This will make the displayed stroke width independent of the scaling of the SVG element, at all zoom levels.
- style marks with `:focus-visible` so that the focus ring is only shown for keyboard interactions.

* Update transcription and freehand Lines

- Use SVG presentation attributes for line styles.
- Specify a stroke width of 2px.

* Update packages/lib-classifier/src/plugins/drawingTools/experimental/components/FreehandLine/FreehandLine.js

Co-authored-by: Delilah C. <23665803+goplayoutside3@users.noreply.github.com>

* Update Mark

- remove redundant `scale` prop.
- adjust stroke width.

* Style freehand lines with CSS

* Use medium outlines for focus rings

* Bump the default mark stroke widths to 3/6px

* Style drawn marks with CSS

* Add non-scaling-stroke to Circle and Rectangle elements

* Remove scale from guides and crosshairSpace

* Fix Circle delete button position per zoom

---------

Co-authored-by: Delilah C. <23665803+goplayoutside3@users.noreply.github.com>
Co-authored-by: Mark Bouslog <mcbouslog@gmail.com>
Co-authored-by: Mark Bouslog <mark@zooniverse.org>

Run Details

10802 of 16462 branches covered (65.62%)

Branch coverage included in aggregate %.

12 of 14 new or added lines in 8 files covered. (85.71%)

10 existing lines in 4 files now uncovered.

16910 of 20197 relevant lines covered (83.73%)

396.84 hits per line