fix(lib-classifier): canvas context for SVG drawing tools #6491
+14
−48
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
eatyourgreens
commented
Nov 23, 2024
...mponents/Classifier/components/SubjectViewer/components/InteractionLayer/InteractionLayer.js
Outdated
Show resolved
Hide resolved
eatyourgreens
commented
Nov 23, 2024
Comment on lines
+80
to
+51
| const svgContext = useContext(SVGContext) | ||
| const canvasRef = useRef() | ||
| svgContext.canvas = canvasRef.current |
There was a problem hiding this comment.
I'm not 100% sure if this is the best way to update a reference within a context object, but it works in Chrome, Safari, and Firefox.
SVGContext.canvas is a reference to the element that the draggable decorator (and drawing tools in general) will use to calculate the screen CTM for pointer interactions (ie. to get SVG coordinates from pointer coordinates.)
eatyourgreens
commented
Nov 23, 2024
...mponents/Classifier/components/SubjectViewer/components/InteractionLayer/InteractionLayer.js
Outdated
Show resolved
Hide resolved
eatyourgreens
commented
Nov 23, 2024
| @@ -68,7 +66,6 @@ function SingleImageViewer({ | |||
| transform={transform} | |||
| > | |||
| <SVGImageCanvas | |||
| ref={canvasLayer} | |||
There was a problem hiding this comment.
This ref was originally used for dragging interactions, which caused the Firefox bug.
eatyourgreens
force-pushed
the
fix-svg-canvas-context
branch
from
6565c8d
to
e958109
Compare
27 tasks
Make sure that `SVGContext.canvas` is a reference to the SVG `rect` element that's used as a drawing canvas, so that creating new drawing marks and editing existing marks both use the same screen CTM when calculating the pointer position. This fixes a bug in Firefox where the `draggable` decorator doesn't correctly track the active pointer, in the context of a zoomed SVG image.
eatyourgreens
force-pushed
the
fix-svg-canvas-context
branch
from
8525270
to
22f3fae
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Make sure that
SVGContext.canvasis a reference to the SVGrectelement that's used as a drawing canvas, so that creating new drawing marks and editing existing marks both use the same screen CTM when calculating the pointer position in SVG space.This fixes a bug in Firefox where the
draggabledecorator doesn't correctly track the active pointer, in the context of a zoomed SVG image.Please request review from
@zooniverse/frontendteam or an individual member of that team.Package
Linked Issue and/or Talk Post
How to Review
On I Fancy Cats, you should be able to draw while zoomed in, without seeing any of the mismatched positioning described in #6490. You can try it out by drawing an ellipse while zoomed in, or by placing a point then dragging the point to a new position.
Try it out in Firefox and Chrome, while zoomed in and also after rotating the image. Pointer interactions should be correctly mapped to the SVG image now, regardless of any external transformation.
While drawing, in any browser, you should be able to pan and zoom with the keyboard too.
The stroke width of drawn marks should also stay the same as you zoom in. Lines shouldn’t be thicker at increased magnification.
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
yarn panic && yarn bootstrapordocker-compose up --buildand FEM works as expectedGeneral UX
Example Staging Project: i-fancy-cats
Bug Fix