Mobile: Image editor prototype

Summary

As a part of GSoC 2022, I've been working on an image editor for the mobile app.

The editor can be tested here.

Pull request

Screenshot

Sample output

Example SVG saved by the editor (drawing/large file)

Sample image created with the editor: Drawing of a hot-air balloon. The balloon is shaded.
(469 KB)

Example SVG saved by the editor (handwriting/smaller file)

Blocky handwriting in different sizes
(34 KB)

What still needs to be done

Add to the mobile app
Clicking 'Attach' should give an option to draw an image.
Clicking (double-clicking?) SVGs embedded in notes should open the image editor.
Save SVGs as image assets/load from SVGs embedded as image assets.
Loading/saving to/from SVGs (as text data, not connected to Joplin yet)
Insert text/geometric shapes
Add icons for save, undo, redo.

Known issues

  • Strokes can sometimes flash if drawn slowly
  • Resizing/moving a large number of strokes can be very slow.

Implementation notes

Currently, the editor loads/saves SVGs. This is primarily because the note viewer can already display SVG images. Additionally, because SVGs are vector images, users can save images/diagrams without loss of data.

The (still rather messy) code can be found here.

Feedback is welcome!

6 Likes

All sounds fantastic!

Two things:

Clicking (double-clicking?) SVGs embedded in notes should open the image editor.

Definitely double clicking imo, I already have some issues with Joplin jumping to other notes if I click links accidentally while scrolling, having an editor open if the same happened to an image would be very annoying....

Could you also add an option to save the SVG as an external image too? (Maybe also as PNG, etc?) I'm aware Joplin isn't a drawing app but very often when I make a little picture like that, I'm both saving it to a note and sending it to someone else. Being able to do all of that in Joplin would be very nice!

Thanks again for all your hard work! This has been a long awaited feature and your work so far looks very good!

1 Like

Many native iOS apps have a tap and hold gesture to share/edit images. I think this gesture might make sense for both editing/sharing (sharing as a PNG)!

2 Likes

Tap and hold is another very good idea! And sharing fits very well for that too, both options under the same gesture👌

Maybe add an option to toggle to double tap though? I think I read somewhere tap and hold can be painful for old people with bad fingers so it's a nice little accessibility features

1 Like

It's not painful, but many people have problems with keeping a steady pressure for the required period of time. The same goes for those with shaky hands. However, double click isn't necessary any better, as it's usually affected by the same problems. That's why, for example, there's usually a setting in desktop operating systems to open files with a single click, etc.

The only really accessible solution is probably to have some kind of a menu always visible, e.g. 3 dots in a corner of the image that can be clicked to expand.

It looks like a long-press action already exists:

It doesn't seem to work on iOS, however...