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

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

1 Like

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

This is a beta release for the android version! Note that the image editor doesn't have auto-save yet, so be sure to save often.

  • To attach an image, click "Attach...", then "draw image".
  • To edit an existing image (created with the image editor), long-press on an image in the markdown viewer, then click "open".
3 Likes

It's amazing!

1 Like

Excellent!
That's basically all I need, maybe with a larger drawing board.
And all this with the extra frightening shiver, as this beta releases installs silently aside the normal one, and when launched shows an... empty contents :cold_sweat: -until you discover that yes, the other one is till there!

Please be aware that, as it's still in beta, there are some rather significant bugs:

  • No autosave (so please save often!)
  • I've found that small notes generally produce images < 500 KiB and larger (e.g. notes on a textbook chapter or some drawings) are 1-2 MiB. Images larger than 12-13 MiB aren't handled well (high RAM usage).
2 Likes

Android beta app update:

Changes (compared to beta v1):

  • Merges changes from joplin/dev
  • Updates js-draw
  • Adds (currently very hard-to-use) autosave
    • The (single) autosave file is stored in a directory similar to /data/user/0/net.cozic.joplin/files/ which, to my knowledge, can't be accessed without adb.
    • Autosave happens once every minute.

.

Edit: The next version merges in changes from laurent22/joplin and allows editing existing text fields:

3 Likes

It took me a while to realise why I don't see the plugin - because it's only in toolbar and I don't use that, I'm keyboard only when typing content, and in md editor only.
I turned toolbar on just to see how the plugin works and is perfect for what I had in mind! Thank you for making it :smiley:

I wanted to ask for help to get the plugin working in my regular setup, but I've dug around and found a working solution. If someone else has the same problem, here it is:

Go to tools > options > keyboard shortcuts, export them, edit them and add "jop-freehand-drawing-jsdraw-plugin-insertDrawing" in the same manner as the rest of the items are, leave null, save file, import file back into joplin, set up shortcut.

Now you can edit and it will show pic inline (if you set that one up). However, if you work from markdown only mode, you need to switch editor mode (ctrl+L) to get markdown preview, and then pic shows edit button when hovering over it and voila - you can edit it. Since that one I can do with keyboard shortcut (as opposed to editing that css file and restarting joplin if I want to turn on the toolbar), I'm happy with the solution :smiley:

1 Like

Will this feature be part of the coming 2.9 release?
(it seems not announced in the current prerelease 2.9.6)
That's just to know, I don't want to stress : I've no more frantic notetaking+gaphics straight in the coming month :wink:

It isn't planned for the 2.9 release — there's already many new features/changes in 2.9 and I would prefer not to delay the release any further due to issues/bugs that need to be found and fixed.

New beta release:

5 Likes

No problem, I'll just track it :slightly_smiling_face: -and I definitely appreciate your continuous work there!

1 Like

The Android beta release has been updated! Among other things,

  • Updates js-draw to v0.9.0.
    • Changes to tools are saved (Changing the color/size/thickness of a pen and restarting the editor preserves the changes to that pen.)
    • Adds a 'rotation lock' toggle button
  • Merges upstream changes
    • Updates to React Native 67
    • Fixes "attach file" action

Edit:
Syntax highlighting was partially broken in the beta markdown editor. This is fixed in the below release:

3 Likes

It's really great, very good implementation of the infinite canvas size feature. Thank you for your efforts.
Since I use a huge canvas more often, I suggest that I can give the canvas a scroll bar to find the specific content inside it.
In addition, I think the find function is also necessary when the canvas is very large, and I don't know if it can be implemented. I don't know if it's possible to search for it in the canvas, or even in joplin. (For example, the rough feature: you can copy the text in the diagram to the current note with one click to make it easier to search).
The current version as well is great, thanks again.

1 Like