gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-06-06 18:08:33 +02:00
Code Issues Actions 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()) .button(new NoteActionsWidget())
) )
.child(new NoteUpdateStatusWidget()) .child(new NoteUpdateStatusWidget())
.child(new MermaidWidget())
.child( .child(
new ScrollingContainer() new ScrollingContainer()
.filling() .filling()
.child(new SqlTableSchemasWidget()) .child(new SqlTableSchemasWidget())
.child(new MermaidWidget())
.child(new NoteDetailWidget()) .child(new NoteDetailWidget())
.child(new NoteListWidget()) .child(new NoteListWidget())
.child(new SearchResultWidget()) .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"; import froca from "../services/froca.js";
const TPL = `<div class="mermaid-widget"> 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"> <div class="mermaid-error alert alert-warning">
<p><strong>The diagram could not displayed.</strong></p> <p><strong>The diagram could not displayed.</strong></p>
<p class="error-content">Rendering diagram...</p> <p class="error-content">Rendering diagram...</p>
@ -12,6 +25,12 @@ const TPL = `<div class="mermaid-widget">
</div>`; </div>`;
export default class MermaidWidget extends NoteContextAwareWidget { export default class MermaidWidget extends NoteContextAwareWidget {
constructor() {
super();
this.idCounter = 1;
}
isEnabled() { isEnabled() {
return super.isEnabled() && this.note && this.note.type === 'mermaid'; return super.isEnabled() && this.note && this.note.type === 'mermaid';
} }
@ -40,7 +59,7 @@ export default class MermaidWidget extends NoteContextAwareWidget {
this.$errorMessage.text('Rendering diagram...'); this.$errorMessage.text('Rendering diagram...');
try { 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(); this.$errorContainer.hide();
} catch (e) { } catch (e) {