make revision and renderer svg to shrink to box but not enlarge

This commit is contained in:
Tom 2022-04-17 22:28:08 +02:00
parent d3e86acfaa
commit e19ddc10d3
2 changed files with 15 additions and 13 deletions

View File

@ -172,23 +172,23 @@ async function setContentPane() {
$content.html($table); $content.html($table);
} }
else if (revisionItem.type === 'canvas-note') { else if (revisionItem.type === 'canvas-note') {
/**
* can the revisions called without being on the note type before?
* if so: load excalidraw
*/
/** /**
* FIXME: We load a font called Virgil.wof2, which originates from excalidraw.com * 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 * REMOVE external dependency!!!! This is defined in the svg in defs.style
*/ */
/**
* FIXME: If svg is not present, probably use live excalidraw?
*/
const content = fullNoteRevision.content; const content = fullNoteRevision.content;
try { try {
const data = JSON.parse(content) const data = JSON.parse(content)
const svg = data.svg || "no svg present." const svg = data.svg || "no svg present."
$content.html($('<div>').html(svg));
/**
* Debatable
* maxWidth: 100% use full width of container but do not enlarge!
* height:auto to ensure that height scales with width
*/
const svgHtml = $(svg).css({maxWidth: "100%", height: "auto"});
$content.html($('<div>').append(svgHtml));
} catch(err) { } catch(err) {
console.error("error parsing fullNoteRevision.content as JSON", fullNoteRevision.content, 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.")); $content.html($("<div>").text("Error parsing content. Please check console.error() for more details."));

View File

@ -142,16 +142,18 @@ async function getRenderedContent(note, options = {}) {
$renderedContent.append($content); $renderedContent.append($content);
} }
else if (type === 'canvas-note') { else if (type === 'canvas-note') {
await libraryLoader.requireLibrary(libraryLoader.EXCALIDRAW_UTILS);
const {exportToSvg} = window.ExcalidrawUtils
const noteComplement = await froca.getNoteComplement(note.noteId); const noteComplement = await froca.getNoteComplement(note.noteId);
const content = noteComplement.content || ""; const content = noteComplement.content || "";
try { try {
const errorSvg = `<svg viewBox="0 0 240 80" style="background-color: white" xmlns="http://www.w3.org/2000/svg"><style>.red { font: 12px serif; fill: red; }</style><text x="20" y="35" class="red">Error: note svg is undefined or empty</text></svg>`;
const data = JSON.parse(content) const data = JSON.parse(content)
const svg = data.svg || "no svg present." const svg = data.svg || errorSvg;
$renderedContent.append($('<div>').html(svg)); /**
* maxWidth: size down to 100% (full) width of container but do not enlarge!
* height:auto to ensure that height scales with width
*/
$renderedContent.append($(svg).css({maxWidth: "100%", height: "auto"}));
} catch(err) { } catch(err) {
console.error("error parsing content as JSON", content, err); console.error("error parsing content as JSON", content, err);
$renderedContent.append($("<div>").text("Error parsing content. Please check console.error() for more details.")); $renderedContent.append($("<div>").text("Error parsing content. Please check console.error() for more details."));