Canvas text does not appear in Trilium 0.60.0-beta and 0.60.1-beta

[deajan]

Trilium Version

0.60.0-beta

What operating system are you using?

Windows

What is your setup?

Local + server sync

Operating System Version

Windows 10 22H2

Description

Tried to migrate from trilium 0.59-4 to 0.60.1-beta in order to get rid of a bug being:

When I show a note containing a canvas, some texts that describe the rectangles I draw don't show, unless I double click the rectangle.
I've upgraded to current 0.60.1-beta in order to see whether it gold resolved.
But now no text show at all.

Here's an image of a canvas as seen in 0.59-4:

The same canvas as seen in 0.60-0-beta and 0.60.1-beta

As a side note, it's never obvious if we are in edit mode or not in the canvas (it's small written text, grey on grey when using dark theme...). It would be nice to have an icon somewhere with a lock or so.

Error logs

Error log when trying to double click on a rectangle in trilium 0.60.1-beta

204 PUT /api/notes/kNNIN53WQ0Mp/data with 0 bytes took 9ms
JS Error: Uncaught error: Message: Uncaught RangeError: Maximum call stack size exceeded, URL: http://127.0.0.1:37840/#root/8GUkr3ZGdXGn/PbDHNy56YAXX/mqmRB8hQkBbf/tkfrj6DGMLXA/kNNIN53WQ0Mp-3ZTA, Line: 56, Column: 339, Error object: {}, Stack: RangeError: Maximum call stack size exceeded
    at ba (<anonymous>:158:12)
    at Pa (<anonymous>:157:191)
    at Object.enqueueSetState (<anonymous>:218:344)
    at d.v.setState (<anonymous>:19:126)
    at Fr.onSceneUpdated (<anonymous>:2:433230)
    at e.value (<anonymous>:2:794166)
    at f (<anonymous>:2:700413)
    at O (<anonymous>:2:727788)
    at <anonymous>:2:732389
    at e.value (<anonymous>:2:794166)
Stack: Error
    at Object.N [as logError] (http://127.0.0.1:37840/assets/v0.60.1-beta/app-dist/desktop.js:2:103589)
    at window.onerror (http://127.0.0.1:37840/assets/v0.60.1-beta/app-dist/desktop.js:2:611916)
JS Error: Uncaught error: Message: Uncaught RangeError: Maximum call stack size exceeded, URL: http://127.0.0.1:37840/#root/8GUkr3ZGdXGn/PbDHNy56YAXX/mqmRB8hQkBbf/tkfrj6DGMLXA/kNNIN53WQ0Mp-3ZTA, Line: 218, Column: 265, Error object: {}, Stack: RangeError: Maximum call stack size exceeded
    at Object.enqueueSetState (<anonymous>:218:265)
    at d.v.setState (<anonymous>:19:126)
    at Fr.onSceneUpdated (<anonymous>:2:433230)
    at e.value (<anonymous>:2:794166)
    at f (<anonymous>:2:700413)
    at O (<anonymous>:2:727788)
    at <anonymous>:2:732389
    at e.value (<anonymous>:2:794166)
    at f (<anonymous>:2:700413)
    at O (<anonymous>:2:727788)
Stack: Error
    at Object.N [as logError] (http://127.0.0.1:37840/assets/v0.60.1-beta/app-dist/desktop.js:2:103589)
    at window.onerror (http://127.0.0.1:37840/assets/v0.60.1-beta/app-dist/desktop.js:2:611916)
JS Error: Uncaught error: Message: Uncaught RangeError: Maximum call stack size exceeded, URL: http://127.0.0.1:37840/#root/8GUkr3ZGdXGn/PbDHNy56YAXX/mqmRB8hQkBbf/tkfrj6DGMLXA/kNNIN53WQ0Mp-3ZTA, Line: 56, Column: 339, Error object: {}, Stack: RangeError: Maximum call stack size exceeded
    at <anonymous>:2:726393
    at O (<anonymous>:2:726585)
    at <anonymous>:2:732389
    at e.value (<anonymous>:2:794166)
    at f (<anonymous>:2:700413)
    at O (<anonymous>:2:727788)
    at <anonymous>:2:732389
    at e.value (<anonymous>:2:794166)
    at f (<anonymous>:2:700413)
    at O (<anonymous>:2:727788)
Stack: Error
    at Object.N [as logError] (http://127.0.0.1:37840/assets/v0.60.1-beta/app-dist/desktop.js:2:103589)
    at window.onerror (http://127.0.0.1:37840/assets/v0.60.1-beta/app-dist/desktop.js:2:611916)
JS Error: Uncaught error: Message: Uncaught RangeError: Maximum call stack size exceeded, URL: http://127.0.0.1:37840/#root/8GUkr3ZGdXGn/PbDHNy56YAXX/mqmRB8hQkBbf/tkfrj6DGMLXA/kNNIN53WQ0Mp-3ZTA, Line: 56, Column: 339, Error object: {}, Stack: RangeError: Maximum call stack size exceeded
    at <anonymous>:2:726393
    at O (<anonymous>:2:726585)
    at <anonymous>:2:732389
    at e.value (<anonymous>:2:794166)
    at f (<anonymous>:2:700413)
    at O (<anonymous>:2:727788)
    at <anonymous>:2:732389
    at e.value (<anonymous>:2:794166)
    at f (<anonymous>:2:700413)
    at O (<anonymous>:2:727788)
Stack: Error
    at Object.N [as logError] (http://127.0.0.1:37840/assets/v0.60.1-beta/app-dist/desktop.js:2:103589)
    at window.onerror (http://127.0.0.1:37840/assets/v0.60.1-beta/app-dist/desktop.js:2:611916)
204 PUT /api/notes/kNNIN53WQ0Mp/data with 0 bytes took 9ms
Slow 204 PUT /api/notes/kNNIN53WQ0Mp/data with 0 bytes took 14ms

[zadam]

Weird. Would you be willing to send me the note to zadam.apps@gmail.com so I can try to reproduce it? So far the text seems to be working for me.

As a side note, it's never obvious if we are in edit mode or not in the canvas (it's small written text, grey on grey when using dark theme...). It would be nice to have an icon somewhere with a lock or so.

What do you mean by edit mode?

[deajan]

Sure, here's the note (it's not a private note, so no need to send via email).
Exemple AFR d'un serveur Schéma tr.zip

What do you mean by edit mode?

This is edit mode

This is "move" mode

Let's just say that I've become like crazy asking myself why I couldn't move my canvas while I clicked on the hand in edit mode.
Maybe that's a question for excelidraw ?

[zadam]

Thanks, I can reproduce, but the file works fine on https://excalidraw.com/

I will investigate.

[zadam]

I downgraded excalidraw release to the one used in 0.59 which seems to fix it.

I don't know what's causing this. The text is visible in the SVG which excalidraw produces (which is saved together with excalidraw's own format and is used in e.g. list preview).

[deajan]

I'm pretty sure there's a mix between excalidraw variables and trilium variables...
Whatever, maybe all trilium variables shoud have some sort of prefix, so you can simply include anything without worries ?
(Just my two cents of no frontend dev)

[zadam]

I was wondering about that possibility, but excalidraw draws on HTML Canvas which is not affected by CSS variables or declarations.

[deajan]

Even on earlier versions of trilium, the same canvas doesn't show all the text, but not everytime, no idea why.
I'd like to help you diag here, but I cannot do more than run trilium in cmd to get error messages.

[deajan]

Hello @zadam

Just tried 0.60.2-beta. So far so good, texts did reappear, except some:

Here the third line first column rectangle misses text. As soon as I hit escape key (exiting edit mode), it appears:

I have other schemas where this happens:
Most texts are missing in the squares (also seen in rounds etc):

If I happen to double click into a square, the text will indeed appear:

I've noted some error in the console, but this did only pop up once, and doesn't seem linked to the text not shown:

Error: Router not found for request /node_modules/@excalidraw/excalidraw/dist//dist/excalidraw-assets/Virgil.woff2
    at C:\Users\User\Desktop\TRILIUM\trilium-windows-x64-0.60.2-beta\trilium-windows-x64\resources\app.asar\src\app.js:105:17
    at Layer.handle [as handle_request] (C:\Users\User\Desktop\TRILIUM\trilium-windows-x64-0.60.2-beta\trilium-windows-x64\resources\app.asar\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\User\Desktop\TRILIUM\trilium-windows-x64-0.60.2-beta\trilium-windows-x64\resources\app.asar\node_modules\express\lib\router\index.js:328:13)
    at C:\Users\User\Desktop\TRILIUM\trilium-windows-x64-0.60.2-beta\trilium-windows-x64\resources\app.asar\node_modules\express\lib\router\index.js:286:9
    at Function.process_params (C:\Users\User\Desktop\TRILIUM\trilium-windows-x64-0.60.2-beta\trilium-windows-x64\resources\app.asar\node_modules\express\lib\router\index.js:346:12)
    at next (C:\Users\User\Desktop\TRILIUM\trilium-windows-x64-0.60.2-beta\trilium-windows-x64\resources\app.asar\node_modules\express\lib\router\index.js:280:10)
    at Layer.handle [as handle_request] (C:\Users\User\Desktop\TRILIUM\trilium-windows-x64-0.60.2-beta\trilium-windows-x64\resources\app.asar\node_modules\express\lib\router\layer.js:91:12)
    at trim_prefix (C:\Users\User\Desktop\TRILIUM\trilium-windows-x64-0.60.2-beta\trilium-windows-x64\resources\app.asar\node_modules\express\lib\router\index.js:328:13)
    at C:\Users\User\Desktop\TRILIUM\trilium-windows-x64-0.60.2-beta\trilium-windows-x64\resources\app.asar\node_modules\express\lib\router\index.js:286:9
    at Function.process_params (C:\Users\User\Desktop\TRILIUM\trilium-windows-x64-0.60.2-beta\trilium-windows-x64\resources\app.asar\node_modules\express\lib\router\index.js:346:12) {
  status: 404
}

If I can help provide any better debug info, please let me know.

[zadam]

Indeed, I can reproduce the issue, but it looks like it's happening already in 0.59.

I fear it's an excalidraw bug, which is unfortunate since because of these other issues we can't upgrade.

The error you posted is quite strange - in my testing the file is fetched correctly from correct path (no duplicated "dist").

[deajan]

Indeed, I encounter this problem since I begun using Trilium with v0.56 or so, but I didn't do as much canvas as lately.
Shall I open an issue at excalidraw perhaps ?

[zadam]

That would be the best - I think it would be great if you could reproduce the issue on their demo site.

[deajan]

Well, I actually tried to export my canvas with the hamburger menu to have a .excalidraw file to import at their site.
But this creates 0 bytes sized files.
Tried on both beta 0.60.1 and 0.60.2. Of course, on 0.59.4 I can't use the hamburger menu since this was a prior bug.

How can I extract my canvas as excalidraw format, in order to reproduce the issue at their demo site ?
I've added the json export, perhaps you can get the excalidraw version from it ?
Cluster applicatif BDD (MySQL).zip

[zadam]

Well, I actually tried to export my canvas with the hamburger menu to have a .excalidraw file to import at their site.
But this creates 0 bytes sized files.

Yes, this doesn't work unfortunately. All other in-excalidraw exports either. I believe they're using some new APIs for file handling which are not well supported in electron.

How can I extract my canvas as excalidraw format, in order to reproduce the issue at their demo site ?

The idea is that you should be able to use the exported *.json from trilium. But it looks like excalidraw started to require some "headers" to recognize the file. I've added them and this will work in the next 0.60 release.

In the meantime, I modified the file manually:
Cluster applicatif BDD (MySQL).zip

Just upload this JSON file to https://excalidraw.com/

The good thing is that it appears to be reproducible there.

[deajan]

Opened issue 6686 at excalidraw. Let's see ;)

[deajan]

So , got a reply from them... Shall we talk about trilium there ?
I have no idea why text size is set to 0. Nor have I an idea if that's excalidraw or trilium related.
I guess you parse the JSON, may there be some kind of error perhaps ?

[zadam]

It's excalidraw related very likely. Trilium doesn't do anything with such attributes. All Trilium does is saving the JSON and reading it before serving to excalidraw. It's likely because of the bug in an earlier excalidraw version as mentioend in the issue.

[deajan]

Well, then I am stuck between excalidraw and trilium.
I cannot report an old version bug on excalidraw, and trilium has downgraded excalidraw for now.

I've asked them which version of excalidraw did have the bug meanwhile.

[harveyTon]

This bug was fixed in v0.60.3, but it reappeared in v0.60.4

[deajan]

@harveyTon I don't see any excalidraw related commits between 0.60.3 and 0.60.4. Are you sure 0.60.3 was good ?
@zadam Can you confirm ?

[zadam]

I don't think there's any difference between 0.60.3 and 0.60.4 regarding excalidraw.

[zadam]

Trilium 0.61 will again contain excalidraw 0.15.2. It looks like the problem was caused by somehow corrupted attributes in the canvas JSON which is not something which trilium can fix/influence.

[deajan]

Thanks for you answer. Looking out to test 0.61.

[Areiser]

I hit this same bug on 0.61.13 with canvas notes where my text is not showing up properly. What can I do to mitigate/fix this issue? Or is there any follow-up bug?

[deajan]

@Areiser Export your canvas, load it into online excalidraw, save it, rename it from .excalidraw to .JSON, reimport into trilium and you're good.

[EDIT] This was actually an excalidraw bug saving text size as 0px as far as I remember[/EDIT]

[Nriver]

@Areiser Export your canvas, load it into online excalidraw, save it, rename it from .excalidraw to .JSON, reimport into trilium and you're good.

Can confirm this makes the text reappear again.

But the preview image in Trilium seems to be broken.

[zadam]

@Nriver the preview uses image generated during editing of the canvas note. After import there won't be an image generated until you edit again.

I guess that is something which could be handled better ...

[Nriver]

Ah, that broken preview image seem to be a different issue caused by Chinese name in the note. I will continue to discuss it here #4478

[supermanmsc]

@Areiser Export your canvas, load it into online excalidraw, save it, rename it from .excalidraw to .JSON, reimport into trilium and you're good.

Whether developer can supply a script tool or another things to do this, automaticly??

[deajan]

@Areiser Export your canvas, load it into online excalidraw, save it, rename it from .excalidraw to .JSON, reimport into trilium and you're good.

Whether developer can supply a script tool or another things to do this, automaticly??

I guess you could make use of the API here.