JS-draw integration for Joplin — a plugin for creating and editing freehand drawings.

License: MIT License

TypeScript 85.87% CSS 3.26% JavaScript 10.13% Shell 0.12% HTML 0.62%

joplin-plugin-freehand-drawing's Introduction

`joplin-plugin-freehand-drawing`

On GitHub | On the Joplin Forum | Online Demo | Installing

A Joplin plugin for creating and editing freehand drawings using js-draw.

Installing

Search for "freehand drawing" under the plugins tab in Joplin's settings:

After installation, an "insert drawing" button should appear in the toolbar:

Existing drawings can be edited by hovering over the drawing in the markdown preview pane, then clicking "edit".

FAQ

How do I edit drawings from the rich text editor?

Editing an existing drawing: Double-click on the drawing.

Adding a new drawing: Click either the toolbar button or "Insert Drawing" from the Edit menu.

I only use the markdown editor (no viewer). How do I edit drawings?

First, select the full resource URL for an image created with this plugin

Next, click the "Insert Image" button in the toolbar.

How do I assign a keyboard shortcut to the "Insert Image" button?

Open Joplin's settings
Click on "Keyboard Shortcuts"
Search for "Insert Drawing"
Click "Disabled"
Entering a new key combination (e.g. Ctrl-Shift-D).

How do I disable drawing with touch?

Pen/mouse-only drawing can be enabled under the "Pan" tool's menu by enabling "Touchscreen panning":

How do I open a drawing in a new window?

This feature is still in beta and is currently difficult to access. Issue reports are welcome!

Open the markdown editor.
Select the drawing's ID:
Open the Command Pallete
- On Windows and Linux, the keyboard shortcut for this is ctrl-shift-p.
- On MacOS, the keyboard shortcut is cmd-shift-p.
Type "insertDrawing" and select the "insert drawing in a new window" option.

Joplin closed while editing a drawing. How do I recover the unsaved changes?

joplin-plugin-freehand-drawing autosaves every two minutes. The last autosave can be recovered by

Switching to the markdown editor
pressing Ctrl-Shift-P (Cmd-Shift-P),
typing :restore autosave, then
clicking "Restore from autosaved drawing"

This should add a copy of the autosaved drawing to the current note.

How do I customize the image editor's keyboard shortcuts?

The procedure to do this is currently very complicated, as there is no GUI for this. (Making this simpler is planned!).

Customizing keyboard shortcuts

First, open Joplin's profile directory ("Help" > "Open profile directory").

Next, open settings.json in a text editor.

Near the end, there should be a line similar to this:

    "plugin-io.github.personalizedrefrigerator.js-draw.keyboard-shortcuts": { }

Shortcuts can be added between the { and the }. For example,

	"plugin-io.github.personalizedrefrigerator.js-draw.keyboard-shortcuts": {
		"jsdraw.toolbar.ExitActionWidget.exit": [
			"ctrlOrMeta-w",
			"alt-q"
		],
		"jsdraw.toolbar.SaveActionWidget.save": [
			"ctrlOrMeta-s",
			"ctrlOrMeta-shift-s"
		],
		"jsdraw.toolbar.PenTool.select-pen-1": [
			"CtrlOrMeta-1",
			"alt-1"
		],
		"jsdraw.toolbar.SelectionTool.resizeImageToSelection": [
			"ctrlOrMeta-r",
			"m"
		]
	}

The above adds additional shortcuts for exiting, selecting pen style 1, and resizing the visible region to the selection.

Joplin must be restarted for the changes to be applied.

[!NOTE]

Additional keyboard shortcut IDs can be found in js-draw's source code.

How do I report a bug related to the image editor?

This plugin uses js-draw to edit/create freehand drawings. Bugs related to js-draw can be reported using its issue tracker.

If you're unsure whether a bug is related to js-draw or this plugin, consider first reporting the bug on this plugin's GitHub repository. If it's more relevant to js-draw than this plugin, it will be moved by a maintainer.

joplin-plugin-freehand-drawing's People

Contributors

Stargazers

Watchers

Forkers

anunknownerror

joplin-plugin-freehand-drawing's Issues

Support linking to other Joplin notes

Summary

It would be useful to be able to link to or even embed Joplin notes. This might be added as a part of the existing text tool, be a part of a rich-text tool, or its own tool in the toolbar.

Latency and smoothness issues on iPad with Apple Pencil

First of all - thank you for developing this plugin. A dream came true in Joplin!

Describe the bug

Bug description is simple: if you have Apple Notes app on iPad and Joplin with this plugin pre-installed, there's a noticeable difference in writing. Apple Notes provides a smooth experience with near-instant latency, while canvas created with freehand-drawing plugin lags. This would have been less of an issue if the actual text was more of what I wrote, however, the result text appears highly skewed with lots of precision lost and, as a result, sometimes unrecognizeable word (e.g. word "would" in 2nd line on the screenshot).

To Reproduce

.. just write something with handwriting on iPad (any ipad, any Apple Pencil). Compare with Apple Notes.

Expected behavior

Handwritten text is smooth. Latency is not so high.

Screenshots

Notice overall rough edges everywhere.

Platform:

OS: iPad OS 17.2
Plugin Version: idk, from latest Joplin (I guess it was just released with handwriting in AppStore)
Joplin Version: 12.13.10

Additional context

Apologies if this issue has to be created in js-draw repository instead. I just thought that actually might be something to do with the plugin first

gzip compression

See the corresponding issue in js-draw.

GZip compression may be best addressed here (and not in js-draw) because joplin plugins have access to a node runtime.

Note: Joplin seems to be unable to display .svgz files at present.

Adjust the size of the image space and faster anti-mistouch buttons

Is your feature request related to a problem? Please describe.

The inserted image takes up so much space that all I need is a small svg image, like a post-it note on my desk, to provide annotations.

2.The anti-touch button is not convenient enough. It is not as convenient as clicking a pen to write or clicking an eraser to erase.

Describe the solution you'd like
1.Image resizing, like in Word or something, I'm sure you know what I mean, because it's pretty common.

2.I learned that it consists of three different buttons, two different anti-touch buttons and a zoom button for the stroke stage.

I suggest turning the first two functions into two separate buttons.

Put the third one in the bottom right corner and make it scale like the bottom right corner of the PDF editor.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context

Thank you for your contribution.

Making editor/canvas area larger

First of all: thank you for this project, it makes Joplin so much more convenient!

Is your feature request related to a problem? Please describe.
I think the actual drawing area is relatively small, when zoomed to fill the maximum editor area while still keeping the entire canvas visible, only about a 1/4th of the total area of the whole joplin window. For taking notes in class this can be frustrating as right now I have to scroll up and down a bunch to see everything I have written. I also need to zoom in quite a lot because else the canvas is too small and I have to start new ones to often, which can be disruptive for concentration and workflow. Personally, I work with a wacom tablet and it is hard for me to draw accurately if the work area is too small relative to the total available screen space.

This is what it looks like at a zoom level so the whole canvas is visible, normally I zoom in further to get a bit more real estate.

Describe the solution you'd like
Would it be possible to make the editor overlay the same size as the whole joplin window or even give a full screen option? This would allow me to take written notes or lecture drawings more intuitively because I have a larger area to work with and don't have to move the canvas around as often.

Describe alternatives you've considered
Right now I just zoom into the canvas more and move it around, while also enlarging joplin as much as possible. This is not ideal for the reasons mentioned above but also has the downside that line thickness is not consistent as this depends on the level of zoom. I think it would be better if the canvas would fill the whole window/screen so zooming isn't necessary.

Again, thank you for your work and for your consideration of this request.

Selection tool is randomly activated while drawing with a stylus

Describe the bug
I am using the Freehand Drawing Plugin in Joplin on an HP Envy x360 (which has a touchscreen). When I use my Stylus to take handwritten notes with the plugin the Select Tool is randomly activated while writing with thePen Tool. This happens roughly every 5 minutes.

To Reproduce
Steps to reproduce the behavior:

Edit a new or existing Freehand Drawing in Joplin
Choose the Pen Tool
Write for a few minutes
Suddenly mid-stroke the Select Tool is activated and you have to manually choose the Pen Tool to continue writing.
Sometimes you have to re-select the Pen Tool multiple times because it jumps back to the Select Tool after touching the canvas.

Expected behavior

The Select Tool should not be randomly activated while writing.

Screenshots

At the beginning all my settings are shown and at 0:20 you can see the described behavior (after writing the letter P)

untitled.mp4

Platform:

OS: Linux (Fedora 39)
Plugin Version: 2.7.0
Joplin Version: 2.13.8

Additional context

I had the feeling that this behavior occurs less often when deactivating Touchscreen panning but I can not confirm that.

Include .exe in realeses

It would be more user-friendly if there would be an already compiled file ready. As I would like to test it, even if it is in beta, but I don't want to waste time on learning how to compile it for a one time use.
Thank you for reading and considering it
Kind regards

Cannot save

And the /tmp/joplin-js-drawOvSkIF/tmp17.svg doesn't exist.

To Reproduce

Write anything
Click on 'Save'
See error

Expected behavior
Images being saved

Platform:

OS: Arch Linux
Plugin Version: 2.7.1
Joplin Version: 2.14.19

personalizedrefrigerator / joplin-plugin-freehand-drawing Goto Github PK

joplin-plugin-freehand-drawing's Introduction

joplin-plugin-freehand-drawing

Installing

FAQ

How do I edit drawings from the rich text editor?

I only use the markdown editor (no viewer). How do I edit drawings?

How do I assign a keyboard shortcut to the "Insert Image" button?

How do I disable drawing with touch?

How do I open a drawing in a new window?

Joplin closed while editing a drawing. How do I recover the unsaved changes?

How do I customize the image editor's keyboard shortcuts?

How do I report a bug related to the image editor?

joplin-plugin-freehand-drawing's People

Contributors

Stargazers

Watchers

Forkers

joplin-plugin-freehand-drawing's Issues

Summary

Recommend Projects

Recommend Topics

Recommend Org

`joplin-plugin-freehand-drawing`