refactor(drawing-tools): drag handle sizing

[eatyourgreens]

• Remove defaultProps from functional components.
• Refactor transcription lines to use translation and scale transforms for the line handles.
• Style drag handles and point marks with non-scaling-size.
• Fixes a small issue, introduced by refactor(classifier): use native browser SVG scaling for drawing tools #6066, where drag handles aren't rendered in the correct proportion with respect to marks.

Here are screenshots of the sizing issue:

Main branch (drag handles are too small):

This branch (drag handles are correctly proportioned):

Test cases in the dev classifier:

• point, line, and rectangle tools on a relatively small image: https://localhost:8080/?project=908&workflow=3370
• transcription lines on a relatively large image: https://localhost:8080/?project=mainehistory/beyond-borders-transcribing-historic-maine-land-documents&env=production

Please request review from @zooniverse/frontend team or an individual member of that team.

Package

lib-classifier

Checklist

PR Creator - Please cater the checklist to fit the review needed for your code changes.
PR Reviewer - Use the checklist during your review. Each point should be checkmarked or discussed before PR approval.

General

• Tests are passing locally and on Github
• Documentation is up to date and changelog has been updated if appropriate
• You can yarn panic && yarn bootstrap or docker-compose up --build and FEM works as expected
• FEM works in all major desktop browsers: Firefox, Chrome, Edge, Safari (Use Browserstack account as needed)
• FEM works in a mobile browser

General UX

Example Staging Project: i-fancy-cats

• All pages of a FEM project load: Home Page, Classify Page, and About Pages
• Can submit a classification
• Can sign-in and sign-out
• The component is accessible
  • Can be used with a screen reader BBC guide to VoiceOver
  • Can be used from the keyboard WebAIM guide to keyboard testing
  • It is passing accessibility checks in the storybook

Refactoring

• The PR creator has described the reason for refactoring
• The refactored component(s) continue to work as expected

[eatyourgreens]

I thought it would be safer to make the drag handle size a multiple of the base stroke width here. If the stroke width changes, the default handle size will change proportionately.

[mcbouslog]

Nice! I thought maybe it should be 2 * STROKE_WIDTH for the first condition (to match the previous calculation), but I think 3 is the right amount after reviewing visually.

[eatyourgreens]

Yeah, 4px seems a bit small to me, so I bumped it to 6.

[mcbouslog]

This looks good, thank you @eatyourgreens !

Tested locally on projects linked and additional staging project with drawing tools.
Per your suggestion I had been trying non-scaling-size, but was missing the related transform that makes it work.

[mcbouslog]

Nice! I thought maybe it should be 2 * STROKE_WIDTH for the first condition (to match the previous calculation), but I think 3 is the right amount after reviewing visually.

[eatyourgreens]

The SVG spec says that non-scaling-size ignores scale transforms, but points render much too large without scaling them down here. Could be a case of browsers not implementing the SVG spec, I'm not sure.

[eatyourgreens]

These scale transforms may not be needed once the SVG zoom is handled with scale transforms, rather than cropping the viewbox.

[eatyourgreens]

By the way, CI is failing because coveralls.io had a major outage yesterday and they're still recovering. https://status.coveralls.io/ says use this workaround to avoid blocking CI pipelines:

fail-on-error: false if using Coveralls GitHub Action.

[eatyourgreens]

Per your suggestion I had been trying non-scaling-size, but was missing the related transform that makes it work.

The spec says that non-scaling-size ignores any scaling transforms applied from the element's parent, so I'm confused that I had to scale circles down to the correct radius for a given image size.

EDIT: according to the first comment here, only non-scaling-stroke has been implemented in browsers. 🙄
https://stackoverflow.com/questions/77930441/difficulties-with-understanding-the-svg-specs-description-of-the-vector-effect