Is your feature request related to a problem? Please describe.
Previously we had a system where users could draw custom budget cards when a given activity or input is not available. This was removed due to technical incompatibility (3rd party package used wasn't maintained).
We would like to bring back the option for users to draw their own visual representations for cards that do not exist in the project. This feature would initially be used in the budget tool, but likely extended to be used across most other tools as well.
Create a standalone picsa-drawing component in libs\shared\src\features\drawing that provides a minimal ui for drawing
Integrate the component into apps\picsa-tools\budget-tool\src\app\components\card\card-new\card-new-dialog.html
Describe alternatives you've considered
After looking at a few options, I think the best drawing library suited to our needs would be perfect-freehand
The interface for this tool is nice and simple, and output looks more natural than tldraw or drawingboard.js
The most popular drawing library I could find is excalidraw. This has a lot more featuers (infinite whiteboard, text, image, shapes etc.), however it actually uses perfect-freehand to manage freestyle drawing anyway so if we later wanted more features it should be a reasonable migration process.
Getting a smooth workflow to work on a component that will only be used in a popup window is a bit tricky, you may find it easier to first work on the component first within a new page, e.g. /budget/card-editor
Is your feature request related to a problem? Please describe. Previously we had a system where users could draw custom budget cards when a given activity or input is not available. This was removed due to technical incompatibility (3rd party package used wasn't maintained).
We would like to bring back the option for users to draw their own visual representations for cards that do not exist in the project. This feature would initially be used in the budget tool, but likely extended to be used across most other tools as well.
Describe the solution you'd like
picsa-drawingcomponent inlibs\shared\src\features\drawingthat provides a minimal ui for drawingapps\picsa-tools\budget-tool\src\app\components\card\card-new\card-new-dialog.htmlDescribe alternatives you've considered After looking at a few options, I think the best drawing library suited to our needs would be perfect-freehand
The interface for this tool is nice and simple, and output looks more natural than tldraw or drawingboard.js
The most popular drawing library I could find is excalidraw. This has a lot more featuers (infinite whiteboard, text, image, shapes etc.), however it actually uses perfect-freehand to manage freestyle drawing anyway so if we later wanted more features it should be a reasonable migration process.
Additional context Perfect freehand demo available at: https://www.perfectfreehand.com/
Getting a smooth workflow to work on a component that will only be used in a popup window is a bit tricky, you may find it easier to first work on the component first within a new page, e.g.
/budget/card-editor