Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(drawing-tools): revert non-scaling-size #6689

Merged
merged 1 commit into from
Feb 13, 2025

Conversation

eatyourgreens
Copy link
Contributor

@eatyourgreens eatyourgreens commented Feb 13, 2025

vector-effect: non-scaling-size isn't implemented in browsers, so this reverts it back to non-scaling-stroke in drag handles, point marks, and transcription lines.

Test cases in the dev classifier:

This PR shouldn't change how drawn marks are rendered at all. Points and drag handles should remain the same size and width, regardless of image zoom level.

Here's a quick codepen which draws two identical SVG circles, one with 'non-scaling-stroke' and one with 'non-scaling-size'. Stroke scaling is only ignored in the first. The SVG spec says that it should be ignored in both.
https://codepen.io/eatyourgreens/pen/ZYEYqEv

If you resize the SVG image, by resizing the browser window, you'll see that the righthand circle gets thicker or thinner, but the lefthand circle remains the same.

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

Refactoring

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

`vector-effect: non-scaling-size` isn't implemented in browsers, so this reverts it back to `non-scaling-stroke` in drag handles, point marks, and transcription lines.
@eatyourgreens
Copy link
Contributor Author

MDN: vector-effect is widely supported in all browsers since 2020.

Can I Use: non-scaling-stroke is widely supported. "Other values for the vector-effect attribute/property are currently at risk of being removed from the specification as they are not being developed by browser vendors."

😠

Copy link
Contributor

@mcbouslog mcbouslog left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks for quick edit 🚀 !

@mcbouslog
Copy link
Contributor

Iteration on #6685

@mcbouslog mcbouslog merged commit 0ba440e into zooniverse:master Feb 13, 2025
8 checks passed
@eatyourgreens eatyourgreens deleted the non-scaling-size branch February 13, 2025 21:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants