mirror of
https://github.com/zadam/trilium.git
synced 2025-11-03 20:06:08 +01:00
missing path2d support for freedawings, remove node-side rendering, allow async getContent()
* ## Excalidraw and SVG * 2022-04-16 - @thfrei * * Known issues: * - excalidraw-to-svg (node.js) does not render any hand drawn (freedraw) paths. There is an issue with * Path2D object not present in node-canvas library used by jsdom. (See Trilium PR for samples and other issues * in respective library. Link will be added later). Related links: * - https://github.com/Automattic/node-canvas/pull/2013 * - https://github.com/google/canvas-5-polyfill * - https://github.com/Automattic/node-canvas/issues/1116 * - https://www.npmjs.com/package/path2d-polyfill * - excalidraw-to-svg (node.js) takes quite some time to load an image (1-2s) * - excalidraw-utils (browser) does render freedraw, however NOT freedraw with background * * Due to this issues, we opt to use **only excalidraw in the frontend**. Upon saving, we will also get the SVG * output from the live excalidraw instance. We will save this **SVG side by side the native excalidraw format * in the trilium note**. * * Pro: we will combat bit-rot. Showing the SVG will be very fast, since it is already rendered. * Con: The note will get bigger (maybe +30%?), we will generate more bandwith. * (However, using trilium desktop instance, does not care too much about bandwidth. Size increase is probably * acceptable, as a trade off.)
This commit is contained in:
@@ -176,33 +176,19 @@ async function setContentPane() {
|
||||
* can the revisions called without being on the note type before?
|
||||
* if so: load excalidraw
|
||||
*/
|
||||
// FIXME: Does it make sense to use EXCALIDRAW_UTILS that are 1.5 MB
|
||||
// whereas excalidraw (650kB) +react(12kB)+reactdom(118kB)
|
||||
/**
|
||||
* FIXME: We load a font called Virgil.wof2, which originates from excalidraw.com
|
||||
* REMOVE external dependency!!!! This is defined in the svg in defs.style
|
||||
*/
|
||||
await libraryLoader.requireLibrary(libraryLoader.EXCALIDRAW_UTILS);
|
||||
const {exportToSvg} = window.ExcalidrawUtils
|
||||
|
||||
*/
|
||||
/**
|
||||
* FIXME: If svg is not present, probably use live excalidraw?
|
||||
*/
|
||||
const content = fullNoteRevision.content;
|
||||
|
||||
try {
|
||||
const data = JSON.parse(content)
|
||||
const excData = {
|
||||
type: "excalidraw",
|
||||
version: 2,
|
||||
source: "trilium",
|
||||
elements: data.elements,
|
||||
appState: data.appState,
|
||||
files: data.files,
|
||||
}
|
||||
const svg = await exportToSvg(excData);
|
||||
$content
|
||||
.html(
|
||||
$('<div>')
|
||||
.html(svg)
|
||||
);
|
||||
const svg = data.svg || "no svg present."
|
||||
$content.html($('<div>').html(svg));
|
||||
} catch(err) {
|
||||
console.error("error parsing fullNoteRevision.content as JSON", fullNoteRevision.content, err);
|
||||
$content.html($("<div>").text("Error parsing content. Please check console.error() for more details."));
|
||||
|
||||
Reference in New Issue
Block a user