New note type `canvas-note` using excalidraw (hand drawn notes, sketching, pen) #2798

thfrei · 2022-04-17T22:09:07Z

New Features:

Use excalidraw for new note type: canvas-note Allows basic sketching and hand-drawn notes
Book-View, Revisions
Image API without filename allowed
Serve node_modules folder (is this secure?)

ToDo:

fix share view (maybe someone with more css-flex knowledge can solve this?
include all assetts/prevent loading fonts/js from https://unpkg.com or excalidraw.
- path set, but
- bug in excalidraw might force us to string-replace the url in svg - see mention in exportToSvg() does not respect window.EXCALIDRAW_ASSET_PATH excalidraw/excalidraw#5063

Suggestion for Roadmap for next PR (not doing right now):

Include trilium-image or canvas-note via reference in excalidraw?
Change colors and pen sizes via theme?
Indicate status of note (note content changed, note content saved to backend)
Use excalidraw user libraries of icons, by adding them as js-notes (https://libraries.excalidraw.com/?theme=light&sort=default)
Dark theme (actually, right now, it is more of an inverted theme)
It would be nice to have a possibility to add canvas-notes to text-note ckeditor by dragging it onto the editor. Right now, we can only convert it to source-code, and then manually add an img-tag with the api/image-link.
Update excalidraw as soon as 0.12.0 is released:
- eraser: https://twitter.com/excalidraw/status/1502300183362781190 (right now it is in excalidraw-next, and not yet excalidraw main)
- fixed asset path (no more string.replace needed)

Related to:

Impressions:

Share view:

sigaloid · 2022-04-18T00:49:38Z

src/public/app/widgets/type_widgets/canvas_note.js

+                    onCollabButtonClick: () => {
+                        window.alert("You clicked on collab button")
+                    },


Is it possible to outright remove the collab button? It might be more helpful to say something like "Collaboration disabled within Trilium" if not, rather than just "you clicked it".

I am not sure. I think it would be good to disable some buttons and stuff. It is not possible via configuration, I think. We could hide them via CSS maybe, which is quite hacky.

Now, when I think about it, the Collab button could be used to enable shareing? Or maybe we can open a box that shows all the links to embed the canvas-note (api/image..., share/api/image...)

The collab button can be used to actually collaborate; it is a pretty small server. I'm not sure if it's in scope though (probably not) but it would be pretty cool.

Regardless the error message could be changed to something a bit more descriptive in case someone sees that and thinks it is enabled

I think in the near term it would be nice to hide such buttons, with CSS if needed. But it's not a blocker.

sigaloid · 2022-04-18T01:05:35Z

This is awesome. Can't wait for this to be merged. A few questions:

Does it render an interaction window for shared notes? It looks like it just renders the SVG and I'm curious if it would make sense to have an option to render it for people who want to zoom/pan/etc (especially with oversized notes).
Also: Does embedding a canvas note into another note allow it to update (ie, when I change child note, does it update image in parent)?

thfrei · 2022-04-18T21:46:01Z

Does it render an interaction window for shared notes? It looks like it just renders the SVG and I'm curious if it would make sense to have an option to render it for people who want to zoom/pan/etc (especially with oversized notes).

It does render the view mode. I got heavily inspired by the screenshot of your code (#2328 (comment)) . What is missing, is the correct placement with the css and the flex attributes. Maybe you can give a hand there?

Also: Does embedding a canvas note into another note allow it to update (ie, when I change child note, does it update image in parent)?

It is embedded via link, so yes (image must be reloaded after a change, of course). What I still need is embedding a canvas-note in another canvas-note via link. I think that would be fun. Or, more generally speaking, embedding images into canvas-note via link. Since we store the svg in the canvas-note, it should be possible to handle this in the same way. See also: https://github.com/zadam/trilium/pull/2798/files#diff-bd7fd937c20ac950412e1e84c91ca7a6c36694eaa9de924f9862c1edcc21a887R237

Conflicts: src/public/app/services/library_loader.js src/public/app/services/tree_context_menu.js src/public/app/widgets/note_actions.js src/services/consistency_checks.js src/services/utils.js

Conflicts: src/public/app/entities/note_short.js src/public/app/services/tree_context_menu.js

due to some upstream changes, this was necessary. otherwise complete inside container was not visible.

…y for canvas

thfrei · 2022-05-10T12:19:19Z

@zadam I worked on all issues. Except for 3, where I have open questions. The others, I fixed and marked the conversation as resolved (not sure, if that is how you guys do it with github though). How do you want to proceed?

zadam · 2022-05-10T17:44:25Z

@thfrei great, thanks for the fast turnaround. Where are those 3 items with open questions? Somehow I don't see any ...

thfrei · 2022-05-10T18:31:35Z

Yeah, it is quite confusing with this PR. I think they disappeared, because I changed the filename from canvas_note.js to canvas.js

If you click on Conversations, you can see them:

zadam · 2022-05-10T21:53:42Z

@thfrei I see, I think that was a misunderstanding. I thought you had some questions which you wrote into those unresolved conversations ...

thfrei · 2022-05-11T07:35:58Z

@thfrei I see, I think that was a misunderstanding. I thought you had some questions which you wrote into those unresolved conversations ...

I left them, so that you can decide how to proceed:

Should we change the WidgetType to AbstractTextTypeWidget so that we can use this.initialized?
I left the constant this.DEBOUNCE_TIME_ONCHANGEHANDLER = 750; // ms in the constructor, so as to indicate, that it belongs to this class.
this.$widget.toggleClass("full-height", true); // only add is required. I am not sure about why.

thfrei · 2022-05-13T07:15:18Z

🎆
Thank you for merging :-)

capi · 2022-06-10T17:51:51Z

I'm a very heavy user of both Trilium and Excalidraw, and seeing the two of them being combined like that is a dream I never knew I had come true! Thank you very much! The navigation between multiple drawings is so easy now, it's awesome!

thfrei · 2022-06-10T19:39:00Z

The navigation between multiple drawings is so easy now, it's awesome!

Thank you for your kind words capi. I'm really glad you like it. I never thought of it that way, but you are right, even if you would not use trilium for notes, having like kind of a "file-browser" for different excalidraw drawings is a win :-)

4abhinavjain · 2022-06-23T08:26:50Z

Thanks for this feature. Really amazing. I knew of Trilium but didn't use it as the draw feature was missing. I have installed the latest 0.52.3 on windows but could not find a way to make a Canvas notes. When I click the '+' sign, as a new note, I don't get an option to add Canvas/Excalidraw

You may also want to check out: https://www.youtube.com/watch?v=o0exK-xFP3k . They are doing some amazing work with Obsidian and I think many will be more comfortable with an open-source program like Trilium over Obsidian.

capi · 2022-06-23T08:45:01Z

You have to change the entire node type to "Canvas" in the "Basic Properties"

zadam · 2022-06-23T16:55:02Z

You can also create it directly from menu:

thfrei · 2022-06-24T18:04:30Z

@zadam When I think about it, it might be nice to have an attribute that defines the type of child notes. Like so:
#childrenNoteType="canvas"?? (this would be a new feature)

@4abhinavjain Another option:
If you want to create a lot of canvas notes in the same place, you could do this:

Create one note, under which you want to create all the canvas notes. Let's call it: CanvasParent
Create a JS backend note with the following content and title: change note type to canvas:

api.log('set to canvas test');
const note = api.originEntity;
note.type="canvas";
note.save();

Now add the relateion from CanvasParent: ~runOnChildNoteCreation=change note type to canvas
This will chane the note type on the backend for every child note to canvas.

I exported the notes into the attached zip. (uncheck safe import, since it contains a js backend note):

A lot of canvas notes - Trilium Export.zip

PS: the title of the notes does not matter in the end, just the relation.

sigaloid reviewed Apr 18, 2022

View reviewed changes

thfrei added 27 commits April 19, 2022 00:13

wip: canvas-note patch

0469962

Conflicts: src/public/app/services/library_loader.js src/public/app/services/tree_context_menu.js src/public/app/widgets/note_actions.js src/services/consistency_checks.js src/services/utils.js

add missing canvas-note entries in helper functions

a894c19

Conflicts: src/public/app/entities/note_short.js src/public/app/services/tree_context_menu.js

update libraries

2f2d832

basic infinite-drawing-canvas integration

5ebe717

minor update for canvas

2a2c82c

working trilium canvas note

22363f5

remove console.image

93e485c

add note-detail height to make canvas visible

8897d98

due to some upstream changes, this was necessary. otherwise complete inside container was not visible.

lint

53666cb

excalidraw include works, removed infinitedrawingcanvas

da84d16

use react production build

24911da

optimized canvas placement in trilium

12185fb

working canvas_note PoC save and load for one note

bd28ed0

updated react unmounting

a33b0f1

use widget element to render for multiple excalidraw instances

5c46fe7

add noteid to console to differentiate logs

ae75ac4

compare sceneVersion to omit unnecessary save/reloads of content

3b1dcc7

ensure isNewSceneVersion() does not increment currentVersion

6e535ba

make pasted images in excalidraw work (save and load "files")

220df66

example for trilium image-link usage and svg export

49f4ce7

some notes about loading and container width

45a66ab

fix curser mismatch by manually setting offset

4266156

remove some debug/testing code

15a3b42

make note revisions work

025032d

add some comments

27d0388

make canvas_note height 100%

272bb13

fix initial load and safe issue by storing noteId

afe2a03

thfrei added 9 commits May 9, 2022 17:05

remove debug helper with uniqueId

92adcf8

remove logs, add explanation to collab

065e4f5

move debounce to library, remove unnecessary binds, replaceassets onl…

6165708

…y for canvas

rename ExcalidrawReactApp() to createExcalidrawReactApp()

11bd48a

simplify code

81e0c6d

remove commented logs to clean up code

160bd0a

refactor canvas-note to canvas

3df712b

remove obsolete errorSvg

c85f70e

handle note.type changing

3491e71

thfrei added 2 commits May 11, 2022 09:06

rename canvas_note_share to canvas_share to align witih refactor

26f3c1d

update comment and discussion about canvas note

1cbf918

Merge branch 'master' into excalidraw

8df3b0a

zadam merged commit 87b75a9 into zadam:master May 12, 2022

This was referenced May 20, 2022

Handwritten notes #671

Closed

Drawing support for better concept mapping? #858

Closed

(Feature request) new note type: Draw #2328

Closed

thfrei deleted the excalidraw branch July 15, 2022 17:21

thfrei mentioned this pull request Feb 15, 2024

Announcement: Trilium transitions into maintenance mode #4620

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New note type `canvas-note` using excalidraw (hand drawn notes, sketching, pen) #2798

New note type `canvas-note` using excalidraw (hand drawn notes, sketching, pen) #2798

thfrei commented Apr 17, 2022 •

edited

Loading

sigaloid Apr 18, 2022

thfrei Apr 18, 2022

sigaloid Apr 19, 2022

zadam May 8, 2022

sigaloid commented Apr 18, 2022

thfrei commented Apr 18, 2022 •

edited

Loading

thfrei commented May 10, 2022

zadam commented May 10, 2022

thfrei commented May 10, 2022

zadam commented May 10, 2022 •

edited

Loading

thfrei commented May 11, 2022

thfrei commented May 13, 2022 •

edited

Loading

capi commented Jun 10, 2022

thfrei commented Jun 10, 2022

4abhinavjain commented Jun 23, 2022

capi commented Jun 23, 2022

zadam commented Jun 23, 2022

thfrei commented Jun 24, 2022

New note type canvas-note using excalidraw (hand drawn notes, sketching, pen) #2798

New note type canvas-note using excalidraw (hand drawn notes, sketching, pen) #2798

Conversation

thfrei commented Apr 17, 2022 • edited Loading

sigaloid Apr 18, 2022

Choose a reason for hiding this comment

thfrei Apr 18, 2022

Choose a reason for hiding this comment

sigaloid Apr 19, 2022

Choose a reason for hiding this comment

zadam May 8, 2022

Choose a reason for hiding this comment

sigaloid commented Apr 18, 2022

thfrei commented Apr 18, 2022 • edited Loading

thfrei commented May 10, 2022

zadam commented May 10, 2022

thfrei commented May 10, 2022

zadam commented May 10, 2022 • edited Loading

thfrei commented May 11, 2022

thfrei commented May 13, 2022 • edited Loading

capi commented Jun 10, 2022

thfrei commented Jun 10, 2022

4abhinavjain commented Jun 23, 2022

capi commented Jun 23, 2022

zadam commented Jun 23, 2022

thfrei commented Jun 24, 2022

New note type `canvas-note` using excalidraw (hand drawn notes, sketching, pen) #2798

New note type `canvas-note` using excalidraw (hand drawn notes, sketching, pen) #2798

thfrei commented Apr 17, 2022 •

edited

Loading

thfrei commented Apr 18, 2022 •

edited

Loading

zadam commented May 10, 2022 •

edited

Loading

thfrei commented May 13, 2022 •

edited

Loading