[FR] A freehand drawing board

[annieappflowy]

Description

A free-hand sketch/drawing element, just like other elements - text, image, callout, heading etc. Because, no matter how many embeds we offer, sometimes there is something that a user can only write it down by itself and needs to edit it on spot. For this, I even thought of offering an embed to Microsoft Whiteboard, but I prefer it to be something that is a part of the application itself, with features that resonates with other elements. Because, an embed is, still depending on a third-party.

Impact

Users who express via hand drawing

Additional Context

No response

[a-wallen]

Whoever picks this up can refer to this tutorial as an example.

Just an FYI @annieappflowy, this feature might require some constraints for the following reason: Embedding the freehand drawing widget in a document will run into issues in the gesture arena. For example, if a user swipes up inside of the freehand drawing widget, it's hard to disambiguate whether the user's intent is to scroll down on the page or to draw upwards inside of the widget.

For the aforementioned reason, a reasonable constraint might be that we can embed a AppFlowy FreeHandDrawingWidget in a document, but while it's inside a document, it cannot be editable.

[rileyhawk1417]

@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?

[Xazin]

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]

@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.

[a-wallen]

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

[Xazin]

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

[Svk1190]

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.