zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2024-09-20 23:55:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactoring of mermaid support WIP

Browse source
This commit is contained in:
zadam 2021-09-29 22:14:45 +02:00
parent 896c9cec04
commit bc920dc5dc
4 changed files with 3 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/public/app/entities/note_short.js
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-network-chart"
"mermaid": "bx bx-water"
};
/**

3
src/public/app/services/tree_context_menu.js
View file

@ -32,7 +32,8 @@ class TreeContextMenu {
{ title: "Relation Map", command: command, type: "relation-map", uiIcon: "map-alt" },
{ 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: "Book", command: command, type: "book", uiIcon: "book" },
{ title: "Mermaid diagram", command: command, type: "mermaid", uiIcon: "water" }
];
}

1
src/public/app/widgets/note_detail.js
View file

@ -21,7 +21,6 @@ import ReadOnlyCodeTypeWidget from "./type_widgets/read_only_code.js";
import NoneTypeWidget from "./type_widgets/none.js";
import attributeService from "../services/attributes.js";
import NoteMapTypeWidget from "./type_widgets/note_map.js";
import MermaidTypeWidget from "./type_widgets/mermaid.js"
const TPL = `
<div class="note-detail">

136
src/public/app/widgets/type_widgets/mermaid.js
View file

@ -1,136 +0,0 @@
import libraryLoader from "../../services/library_loader.js";
import TypeWidget from "./type_widget.js";
import froca from "../../services/froca.js";
const TPL = `<div>
<style>
.note-detail-code-editor {
min-height: 50px;
}
.spacer {
height: 20px;
}
</style>
<div class="mermaid-error alert alert-warning">
<p><strong>The diagram could not displayed.</strong></p>
<p class="error-content">Rendering diagram...</p>
</div>
<div class="mermaid-render"></div>
<div class="spacer"></div>
<div class="note-detail-code note-detail-printable">
<div class="note-detail-code-editor"></div>
</div>
</div>`;
export default class MermaidTypeWidget extends TypeWidget {
static getType() { return "mermaid"; }
doRender() {
this.$widget = $(TPL);
this.$display = this.$widget.find('.mermaid-render');
this.$errorContainer = this.$widget.find(".mermaid-error");
this.$errorMessage = this.$errorContainer.find(".error-content");
this.$editor = this.$widget.find('.note-detail-code-editor');
this.initialized = Promise.all( [this.initRenderer(), this.initEditor()]);
super.doRender();
}
async initRenderer() {
await libraryLoader.requireLibrary(libraryLoader.MERMAID);
const documentStyle = window.getComputedStyle(document.documentElement);
const mermaidTheme = documentStyle.getPropertyValue('--mermaid-theme');
mermaid.mermaidAPI.initialize({ startOnLoad: false, theme: mermaidTheme.trim() });
}
async initEditor() {
await libraryLoader.requireLibrary(libraryLoader.CODE_MIRROR);
CodeMirror.keyMap.default["Shift-Tab"] = "indentLess";
CodeMirror.keyMap.default["Tab"] = "indentMore";
// these conflict with backward/forward navigation shortcuts
delete CodeMirror.keyMap.default["Alt-Left"];
delete CodeMirror.keyMap.default["Alt-Right"];
CodeMirror.modeURL = 'libraries/codemirror/mode/%N/%N.js';
this.codeEditor = CodeMirror(this.$editor[0], {
value: "",
viewportMargin: Infinity,
indentUnit: 4,
matchBrackets: true,
matchTags: {bothTags: true},
highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: false},
lint: true,
gutters: ["CodeMirror-lint-markers"],
lineNumbers: true,
tabindex: 300,
// we linewrap partly also because without it horizontal scrollbar displays only when you scroll
// all the way to the bottom of the note. With line wrap there's no horizontal scrollbar so no problem
lineWrapping: true,
dragDrop: false // with true the editor inlines dropped files which is not what we expect
});
this.codeEditor.on('change', () => {
this.spacedUpdate.scheduleUpdate();
this.updateRender(this.codeEditor.getValue() || "");
});
}
async doRefresh(note) {
const noteComplement = await froca.getNoteComplement(note.noteId);
await this.spacedUpdate.allowUpdateWithoutChange(() => {
this.updateRender(noteComplement.content || "");
this.codeEditor.setValue(noteComplement.content || "");
this.codeEditor.clearHistory();
});
this.show();
}
show() {
this.$widget.show();
if (this.codeEditor) { // show can be called before render
this.codeEditor.refresh();
}
}
getContent() {
return this.codeEditor.getValue();
}
async updateRender(graph) {
const updateWithContent = (content) => {
this.$display.html(content);
}
this.$display.empty();
this.$errorMessage.text('Rendering diagram...');
try {
mermaid.mermaidAPI.render('graphDiv', graph, updateWithContent);
this.$errorContainer.hide();
} catch (e) {
this.$errorMessage.text(e.message);
this.$errorContainer.show();
}
}
}