Add node type: drawing #27

New Issue

garrettmills · 2020-10-19T21:28:35Z

garrettmills commented

2020-10-19 21:28:35 +00:00

Add a new node type which embeds an HTML5 canvas.

This canvas should allow the user to draw using the mouse (or tablet)
There should be a toolbar above for selecting the pen color and/or thickness
Future enhancements?
- Export drawing as image
- Add text items to drawing

Add a new node type which embeds an HTML5 canvas. - This canvas should allow the user to draw using the mouse (or tablet) - There should be a toolbar above for selecting the pen color and/or thickness - Future enhancements? - Export drawing as image - Add text items to drawing

garrettmills added the

Out-there Idea

Feature Request

labels 2020-10-19 21:28:35 +00:00

garrettmills commented

2021-02-05 17:30:51 +00:00

Should be pretty straightforward to get this up and running using the HTML5 canvas.

Create a new node type that adds a canvas of a pre-defined size. Allow the user to re-size. (Will need to horizontally scroll on smaller devices.)

This stack overflow thread has some examples of setting up basic drawing events for the canvas. Should be able to do something similar in Angular.

Allow multiple "pages" which are just separate canvases.

Will need to come up with a way to save and restore canvas data. (ctx.getImageData() from the canvas?)

As an additional enhancement, allow users to upload PDFs which will be imported into the drawing node.

This should make a call to the server to use the pdf-image Node package to convert the PDF to a series of images which are then used as the background of the canvas. Each image is a "page" in the canvas.

Not sure if we will be able to do this in-line with the request, or if it should log a job. Will need to test.

Allow opening the drawing node as a full-screen node. Like the database and file-box which should make it a full-screen modal with its own close button. This will make it easier to use on smaller screens.

Also, need to allow users to add text boxes and maybe KaTeX as images?

Should be pretty straightforward to get this up and running using the HTML5 canvas. Create a new node type that adds a canvas of a pre-defined size. Allow the user to re-size. (Will need to horizontally scroll on smaller devices.) [This stack overflow thread](https://stackoverflow.com/questions/2368784/draw-on-html5-canvas-using-a-mouse) has some examples of setting up basic drawing events for the canvas. Should be able to do something similar in Angular. Allow multiple "pages" which are just separate canvases. Will need to come up with a way to save and restore canvas data. (`ctx.getImageData()` from the canvas?) As an additional enhancement, allow users to upload PDFs which will be imported into the drawing node. This should make a call to the server to use the `pdf-image` Node package to convert the PDF to a series of images which are then used as the background of the canvas. Each image is a "page" in the canvas. Not sure if we will be able to do this in-line with the request, or if it should log a job. Will need to test. Allow opening the drawing node as a full-screen node. Like the database and file-box which should make it a full-screen modal with its own close button. This will make it easier to use on smaller screens. Also, need to allow users to add text boxes and maybe KaTeX as images?

garrettmills commented

2021-02-05 17:31:50 +00:00

Might also want to enable the user to re-export the annotation as a PDF.

Sign in to join this conversation.