Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-11-04 15:11:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

mermaid layout improvements

Browse Source
This commit is contained in:
zadam 2021-09-30 09:48:03 +02:00
parent bc920dc5dc
commit f4dde84f06
2 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/public/app/layouts/desktop_layout.js
View File

@ -148,11 +148,11 @@ export default class DesktopLayout {
.button(new NoteActionsWidget())
)
.child(new NoteUpdateStatusWidget())
.child(new MermaidWidget())
.child(
new ScrollingContainer()
.filling()
.child(new SqlTableSchemasWidget())
.child(new MermaidWidget())
.child(new NoteDetailWidget())
.child(new NoteListWidget())
.child(new SearchResultWidget())

21
src/public/app/widgets/mermaid.js
View File

@ -3,6 +3,19 @@ import NoteContextAwareWidget from "./note_context_aware_widget.js";
import froca from "../services/froca.js";
const TPL = `<div class="mermaid-widget">
<style>
.mermaid-widget {
flex-grow: 2;
overflow: auto;
min-height: 200px;
border-bottom: 1px solid var(--main-border-color);
padding: 20px;
display: flex;
justify-content: space-around; /* centering rendered SVG */
flex-basis: 0;
}
</style>
<div class="mermaid-error alert alert-warning">
<p><strong>The diagram could not displayed.</strong></p>
<p class="error-content">Rendering diagram...</p>
@ -12,6 +25,12 @@ const TPL = `<div class="mermaid-widget">
</div>`;
export default class MermaidWidget extends NoteContextAwareWidget {
constructor() {
super();
this.idCounter = 1;
}
isEnabled() {
return super.isEnabled() && this.note && this.note.type === 'mermaid';
}
@ -40,7 +59,7 @@ export default class MermaidWidget extends NoteContextAwareWidget {
this.$errorMessage.text('Rendering diagram...');
try {
mermaid.mermaidAPI.render('graphDiv', content, content => this.$display.html(content));
mermaid.mermaidAPI.render('graphDiv-' + this.idCounter++, content, content => this.$display.html(content));
this.$errorContainer.hide();
} catch (e) {