Targets PR #270 to help fix issue of generated SVG not rendering.
Fix issue where svg paths not correctly calculated relative to container
Add dialog to make it easier to draw in larger area
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 mouse events don't correctly support setPointerCapture operation, and so have been replaced by pointer events - TBC whether these still work on touch devices... (follow-up PR)
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)
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=codeAn 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