fix: custom drawing render #271
Merged
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
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.
Description
Targets PR #270 to help fix issue of generated SVG not rendering.
Discussion
The main issue appears to be not actually related to rendering, but the positioning of the generated paths. When using the drawing tool within another container the generated path sits outside of the container (path is calculated relative to the entire page not the current container)
There is possibly a separate issue where listening for
mouseevents don't correctly supportsetPointerCaptureoperation, and so have been replaced bypointerevents - TBC whether these still work on touch devices... (follow-up PR)While trying to diagnose the issue I also did a quick github search for projects that use both
perfect-freehandwith angular:https://github.com/search?q=perfect-freehand+angular+language%3AJSON&type=code
An interesting project that stuck out was: https://github.com/mostafazke/ng-whiteboard
I think the component is possibly a little overly complex for our current use case, but may be of future interest if trying to expand to a more feature-rich whiteboard.
Screenshots / Videos
Before - svg path renders outside area of svg element (and so does not show). drawing will only work if drawing container fixed to top-left corner ([0,0] position)
Screenity.video.-.May.13.2024.1.webm
After - svg path correctly computes to relative container
Screenity.video.-.May.13.2024.webm