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:
		@@ -1,5 +1,3 @@
 | 
			
		||||
const excalidrawToSvg = require("excalidraw-to-svg");
 | 
			
		||||
 | 
			
		||||
const shaca = require("./shaca/shaca");
 | 
			
		||||
const shacaLoader = require("./shaca/shaca_loader");
 | 
			
		||||
const shareRoot = require("./share_root");
 | 
			
		||||
@@ -124,21 +122,10 @@ function register(router) {
 | 
			
		||||
            const content = image.getContent();
 | 
			
		||||
            try {
 | 
			
		||||
                const data = JSON.parse(content)
 | 
			
		||||
                const excalidrawData = {
 | 
			
		||||
                    type: "excalidraw",
 | 
			
		||||
                    version: 2,
 | 
			
		||||
                    source: "trilium",
 | 
			
		||||
                    elements: data.elements,
 | 
			
		||||
                    appState: data.appState,
 | 
			
		||||
                    files: data.files,
 | 
			
		||||
                }
 | 
			
		||||
                excalidrawToSvg(excalidrawData)
 | 
			
		||||
                    .then(svg => {
 | 
			
		||||
                        const svgHtml = svg.outerHTML;
 | 
			
		||||
                        res.set('Content-Type', "image/svg+xml");
 | 
			
		||||
                        res.set("Cache-Control", "no-cache, no-store, must-revalidate");
 | 
			
		||||
                        res.send(svgHtml);
 | 
			
		||||
                    });
 | 
			
		||||
                const svg = data.svg || '<svg />'
 | 
			
		||||
                res.set('Content-Type', "image/svg+xml");
 | 
			
		||||
                res.set("Cache-Control", "no-cache, no-store, must-revalidate");
 | 
			
		||||
                res.send(svg);
 | 
			
		||||
            } catch(err) {
 | 
			
		||||
                res.status(500).send("there was an error parsing excalidraw to svg");
 | 
			
		||||
            }
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user