[GH-ISSUE #2091 ] [FR] A freehand drawing board #850

Author

Owner

@rileyhawk1417 commented on GitHub (Apr 2, 2023):

@a-wallen So to embed the widget per say is like having a separate dedicated part of the document that can be recognised as a drawing area?

@rileyhawk1417 commented on GitHub (Apr 2, 2023): @a-wallen So to embed the widget per say is like having a separate dedicated part of the document that can be recognised as a drawing area?

mirror commented

Author

Owner

@Xazin commented on GitHub (May 13, 2023):

The way I see it, whilst embedded in the document, it should be a read-only "area".

The drawing should happen in an edit/expanded mode. This will also make it easier to build this feature.

What do you think @a-wallen ? I can try to make some quick example in Figma to clarify what I mean if needed.

@Xazin commented on GitHub (May 13, 2023): The way I see it, whilst embedded in the document, it should be a read-only "area". The drawing should happen in an edit/expanded mode. This will also make it easier to build this feature. What do you think @a-wallen ? I can try to make some quick example in Figma to clarify what I mean if needed.

mirror commented

Author

Owner

@Xazin commented on GitHub (May 18, 2023):

@a-wallen
Really bad example, but I didn't want to invest too much time in it, so spent 2 minutes to draw it out in Figma.

Of course when editing versus expanding in read mode, there would be color picker, etc.

@Xazin commented on GitHub (May 18, 2023): @a-wallen Really bad example, but I didn't want to invest too much time in it, so spent 2 minutes to draw it out in Figma. ![image](https://github.com/AppFlowy-IO/AppFlowy/assets/42929161/23f5ab5e-b53e-42af-8fb3-89bb776a74ae) Of course when editing versus expanding in read mode, there would be color picker, etc.

mirror commented

Author

Owner

@a-wallen commented on GitHub (May 18, 2023):

Yep @Xazin, that solution looks good to me: solves the engineering problem with UX :)

@a-wallen commented on GitHub (May 18, 2023): Yep @Xazin, that solution looks good to me: solves the engineering problem with UX :)

mirror commented

Author

Owner

@Xazin commented on GitHub (May 18, 2023):

Made this, it's not the best, I honestly haven't looked into our designs enough to work according to our design system. But maybe someone can pick it up and make something good off of it.

Figma found here

@Xazin commented on GitHub (May 18, 2023): Made this, it's not the best, I honestly haven't looked into our designs enough to work according to our design system. But maybe someone can pick it up and make something good off of it. ![image](https://github.com/AppFlowy-IO/AppFlowy/assets/42929161/baf9d566-fb05-457b-b0fd-99f73fcdc27b) [Figma found here](https://www.figma.com/file/GlyZ9AykmTXop8PiBLHBpo/AppFlowy-Dark-(Copy)?type=design&node-id=2206-382219&t=rIm9y6ca7iHNrGUz-4)

mirror commented

Author

Owner

@Svk1190 commented on GitHub (Feb 2, 2024):

I think it would be interesting if each document can have two transparent layers, one layer for text (as it is now) and one layer for handwriting / drawing. This would allow users to use their stylus to annotate/highlight/draw on top of their text notes.

The drawing tools can activate the drawing layer. Using the keyboard or the text tools can deactivate the drawing layer and activate the text layer.

Some specific tools may work on both layers simultaneously, for example, introduction of vertical space, eraser, lasso, etc.

@Svk1190 commented on GitHub (Feb 2, 2024): I think it would be interesting if each document can have two transparent layers, one layer for text (as it is now) and one layer for handwriting / drawing. This would allow users to use their stylus to annotate/highlight/draw on top of their text notes. The drawing tools can activate the drawing layer. Using the keyboard or the text tools can deactivate the drawing layer and activate the text layer. Some specific tools may work on both layers simultaneously, for example, introduction of vertical space, eraser, lasso, etc.

mirror commented

Author

Owner

@imjasoriano commented on GitHub (Feb 12, 2025):

for the text layer, I suggest to make the text rotatable and movable so that map roads or diagrams, for example, can easily fit labels. Adding formating to the text would also be nice (ex. font color, size, bold, etc).

@imjasoriano commented on GitHub (Feb 12, 2025): for the text layer, I suggest to make the text rotatable and movable so that map roads or diagrams, for example, can easily fit labels. Adding formating to the text would also be nice (ex. font color, size, bold, etc).

mirror commented

Author

Owner

@imjasoriano commented on GitHub (Feb 12, 2025):

For the drawing tool, it would be great to have:

pens - a few pen options (pen, highlighter, fountain pen), line width option, line color options
shapes - resizeable and rotatable shapes like rectangle, oval, triangle, arrow, multi arrow, bent arrow, flexible arrow
paper - adjustable page color fill, background image, grid
resizable paper size and dimensions

@imjasoriano commented on GitHub (Feb 12, 2025): For the drawing tool, it would be great to have: 1. pens - a few pen options (pen, highlighter, fountain pen), line width option, line color options 2. shapes - resizeable and rotatable shapes like rectangle, oval, triangle, arrow, multi arrow, bent arrow, flexible arrow 3. paper - adjustable page color fill, background image, grid 4. resizable paper size and dimensions

mirror commented

Author

Owner

@hackeresq commented on GitHub (Feb 22, 2025):

I would prefer an existing solution - something like Excalidraw. I think making this a block in the editor makes a lot of sense.

@hackeresq commented on GitHub (Feb 22, 2025): I would prefer an existing solution - something like Excalidraw. I think making this a block in the editor makes a lot of sense.

mirror commented

Author

Owner

@annieappflowy commented on GitHub (Feb 23, 2025):

I would like to make a suggestion, I would love for you to add a whiteboard where you could make diagrams, brainstorm so that we can be more creative with our work. Thank you.

@annieappflowy commented on GitHub (Feb 23, 2025): I would like to make a suggestion, I would love for you to add a whiteboard where you could make diagrams, brainstorm so that we can be more creative with our work. Thank you.

mirror commented

Author

Owner

@SOSeriously commented on GitHub (Mar 10, 2025):

I would like to suggest:

The whiteboard should be a separate page with its dedicated tools for drawing, creating diagrams, adding images, and adding text. Similar to other whiteboards.
To link a whiteboard similar to linking a calendar or kanban board in a document.
Drawio has a nice feature called scratchpad where you can save parts of a diagram as a preset, import/export the preset, or add an image from the device as a preset.

@SOSeriously commented on GitHub (Mar 10, 2025): I would like to suggest: 1. The whiteboard should be a separate page with its dedicated tools for drawing, creating diagrams, adding images, and adding text. Similar to other whiteboards. 2. To link a whiteboard similar to linking a calendar or kanban board in a document. 3. Drawio has a nice feature called scratchpad where you can save parts of a diagram as a preset, import/export the preset, or add an image from the device as a preset.

mirror commented

Author

Owner

@GOKORURI007 commented on GitHub (Jul 20, 2025):

This sounds like the edgeless mode in affine.

@GOKORURI007 commented on GitHub (Jul 20, 2025): This sounds like the edgeless mode in affine.

mirror commented