Add node type: drawing #27

Open
opened 4 years ago by garrettmills · 2 comments
Owner

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 4 years ago
Poster
Owner

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?
Poster
Owner

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

Might also want to enable the user to re-export the annotation as a PDF.
Sign in to join this conversation.
Loading…
There is no content yet.