mermaid layout improvements

This commit is contained in:
zadam 2021-09-30 10:18:03 +02:00
parent f4dde84f06
commit af3fd61974
7 changed files with 23 additions and 10 deletions

View File

@ -16,7 +16,7 @@ const NOTE_TYPE_ICONS = {
"relation-map": "bx bx-map-alt",
"book": "bx bx-book",
"note-map": "bx bx-map-alt",
"mermaid": "bx bx-water"
"mermaid": "bx bx-selection"
};
/**

View File

@ -86,14 +86,15 @@ async function getRenderedContent(note, options = {}) {
await libraryLoader.requireLibrary(libraryLoader.MERMAID);
const noteComplement = await froca.getNoteComplement(note.noteId);
const graph = noteComplement.content || "";
const content = noteComplement.content || "";
const updateWithContent = (content) => {
$renderedContent.append($(content))
}
$renderedContent
.css("display", "flex")
.css("justify-content", "space-around");
try {
mermaid.mermaidAPI.render('graphDiv', graph, updateWithContent);
mermaid.mermaidAPI.render("mermaid-graph", content,
content => $renderedContent.append($(content)));
} catch (e) {
const $error = $("<p>The diagram could not displayed.</p>");

View File

@ -32,6 +32,16 @@ async function createNote(parentNotePath, options = {}) {
const parentNoteId = treeService.getNoteIdFromNotePath(parentNotePath);
console.log(options);
if (options.type === 'mermaid' && !options.content) {
options.content = `graph TD;
A-->B;
A-->C;
B-->D;
C-->D;`
}
const {note, branch} = await server.post(`notes/${parentNoteId}/children?target=${options.target}&targetBranchId=${options.targetBranchId}`, {
title: newNoteName,
content: options.content || "",

View File

@ -33,7 +33,7 @@ class TreeContextMenu {
{ title: "Note Map", command: command, type: "note-map", uiIcon: "map-alt" },
{ title: "Render HTML note", command: command, type: "render", uiIcon: "extension" },
{ title: "Book", command: command, type: "book", uiIcon: "book" },
{ title: "Mermaid diagram", command: command, type: "mermaid", uiIcon: "water" }
{ title: "Mermaid diagram", command: command, type: "mermaid", uiIcon: "selection" }
];
}

View File

@ -63,7 +63,7 @@ export default class MermaidWidget extends NoteContextAwareWidget {
this.$errorContainer.hide();
} catch (e) {
this.$errorMessage.text(e.message);
this.$errorMessage.text(e.message).append(`<br/><br/><p>See <a href="https://mermaid-js.github.io/mermaid/#/flowchart?id=graph">help and examples</a>.</p>`);
this.$errorContainer.show();
}
}

View File

@ -50,7 +50,7 @@ function deriveMime(type, mime) {
if (type === 'text') {
mime = 'text/html';
} else if (type === 'code') {
} else if (type === 'code' || type === 'mermaid') {
mime = 'text/plain';
} else if (['relation-map', 'search'].includes(type)) {
mime = 'application/json';
@ -115,6 +115,8 @@ function createNewNote(params) {
mime: deriveMime(params.type, params.mime)
}).save();
console.log(params);
note.setContent(params.content);
const branch = new Branch({

View File

@ -168,7 +168,7 @@ const STRING_MIME_TYPES = [
function isStringNote(type, mime) {
// render and book are string note in the sense that they are expected to contain empty string
return ["text", "code", "relation-map", "search", "render", "book"].includes(type)
return ["text", "code", "relation-map", "search", "render", "book", "mermaid"].includes(type)
|| mime.startsWith('text/')
|| STRING_MIME_TYPES.includes(mime);
}