Plugin: js-draw integration

Summary

This plugin adds support for freehand drawing with js-draw. Online demo.

Links

About

Creating a new drawing

An "insert drawing" button is added to the toolbar:

Editing an image

Like the draw.io plugin, hovering over an image in the preview pane displays an "edit" button.
Image: Reads "test", edit button visible at top left
This "edit" button is shown for any SVG image. Although js-draw has limited SVG support, it tries to pass unrecognized portions of the SVG unchanged to its output. As such, even if parts of existing SVGs don't show up in the editor, they shouldn't be removed from the image when saving.

Keyboard shortcuts

  • w/s: Zoom in/out
    • Ctrl+scroll and touchscreen pinch gestures also zoom
  • r/R: Rotate the view
  • h/j/k/l and arrow keys: Move the view

Installation

What still needs to be done

  • Localization (Currently English, Spanish (partial), and German)
  • Better stroke smoothing
  • Match Joplin's theme
  • Improve performance with large images
    • A cache has been implemented — all visible strokes are no longer re-rendered while moving the viewport.
  • Bind ctrl+z and ctrl+shift+z to undo/redo.
  • Text tool
    • Add text
    • Move/rotate/scale text
    • Change text already added to document
  • Copy/paste
    • With ctrl+C/ctrl+V/drag and drop from other program
    • Copy content as SVG data.
    • Also attach content as text/PNG data (to allow pasting into other applications, many of which seem to expect clipboard data in a different format than js-draw currently supplies).
  • Very large files
    • Better handle large (13+ MiB) files.
  • Autosave
    • An autosave file is updated every two minutes. At present there is only one autosave file.
    • Press Ctrl+Shift+P, then type Restore from autosave to restore from the autosaved drawing.
18 Likes

With version 1.0.14, the js-draw plugin switches between Spanish and English based on the user's locale. I haven't found a way to get Joplin's locale from settings, so it uses navigator.languages (the system locale).

The editor currently only has Spanish and English translations. Help translating it would be appreciated! To do so, please follow the instructions on GitHub.

4 Likes

I plan to open a pull request adding a version of this plugin as a beta feature in the mobile app (clicking attach would give an option to draw a picture). Is this something people would be interested in? Are there changes I should make first? Should I focus instead on

Feel free to provide design feedback on js-draw and ideas about whether I should add js-draw (or another image editor) to the mobile app in the comments on this post!

If the plugin system was ready for mobile then I'd say it should be a mobile plugin.

However I think for inclusion to the application itself it needs a bit more polish yet.
For example the panning menu is still a bit clunky and unintuitive. It also doesn't disappear when you select a tool.

I'm also not really sure what the benefit is for drawing outside of the "frame" when it just gets cut off?
I'll have another play and give some more feedback.

2 Likes

Thank you for the feedback! The frame can be moved/resized after creating the drawing. I've been using this frequently when doing math work/taking math notes to make the drawing area larger when I run out of space (similar-ish to OneNote's infinite canvas). Perhaps it would make more sense to resize the frame automatically when more content is added...

I can see the logic in both but I think resizing automatically makes more sense. I strongly suspect most people will scribble outside the lines then wonder why it isn't showing. Or at least make the "invisible" area more obvious like having it as a different colour.

1 Like

This has been fixed! It should be in the next release.

Do you have suggestions for the panning menu?

1 Like

My dream : this also on the Android version...
I currently use it on a tablet, building large notes with lots of text & pics but for sketches I need to switch to an external app, save, then import and basically all of this is too slow for real-time conference tracking...
I'll desperately track you here :wink:

1 Like