refactoring of mermaid support WIP

src/public/app/layouts/desktop_layout.js

@@ -43,6 +43,7 @@ import EditButton from "../widgets/buttons/edit_button.js";
 import CalendarMenuWidget from "../widgets/buttons/calendar_menu.js";
 import EditedNotesWidget from "../widgets/ribbon_widgets/edited_notes.js";
 import OpenNoteButtonWidget from "../widgets/buttons/open_note_button_widget.js";
+import MermaidWidget from "../widgets/mermaid.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -151,6 +152,7 @@ export default class DesktopLayout {
                                     new ScrollingContainer()
                                         .filling()
                                         .child(new SqlTableSchemasWidget())
+                                        .child(new MermaidWidget())
                                         .child(new NoteDetailWidget())
                                         .child(new NoteListWidget())
                                         .child(new SearchResultWidget())

src/public/app/widgets/mermaid.js

@@ -0,0 +1,57 @@
+import libraryLoader from "../services/library_loader.js";
+import NoteContextAwareWidget from "./note_context_aware_widget.js";
+import froca from "../services/froca.js";
+
+const TPL = `<div class="mermaid-widget">
+    <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>`;
+
+export default class MermaidWidget extends NoteContextAwareWidget {
+    isEnabled() {
+        return super.isEnabled() && this.note && this.note.type === 'mermaid';
+    }
+
+    doRender() {
+        this.$widget = $(TPL);
+        this.contentSized();
+        this.$display = this.$widget.find('.mermaid-render');
+        this.$errorContainer = this.$widget.find(".mermaid-error");
+        this.$errorMessage = this.$errorContainer.find(".error-content");
+    }
+
+    async refreshWithNote(note) {
+        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() });
+
+        const noteComplement = await froca.getNoteComplement(note.noteId);
+        const content = noteComplement.content || "";
+
+        this.$display.empty();
+
+        this.$errorMessage.text('Rendering diagram...');
+
+        try {
+            mermaid.mermaidAPI.render('graphDiv', content, content => this.$display.html(content));
+
+            this.$errorContainer.hide();
+        } catch (e) {
+            this.$errorMessage.text(e.message);
+            this.$errorContainer.show();
+        }
+    }
+
+    async entitiesReloadedEvent({loadResults}) {
+        if (loadResults.isNoteContentReloaded(this.noteId)) {
+            await this.refresh();
+        }
+    }
+}

src/public/app/widgets/note_detail.js

@@ -48,8 +48,7 @@ const typeWidgetClasses = {
     'relation-map': RelationMapTypeWidget,
     'protected-session': ProtectedSessionTypeWidget,
     'book': BookTypeWidget,
-    'note-map': NoteMapTypeWidget,
-    'mermaid': MermaidTypeWidget
+    'note-map': NoteMapTypeWidget
 };
 
 export default class NoteDetailWidget extends NoteContextAwareWidget {
@@ -163,7 +162,7 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
             type = 'read-only-text';
         }
 
-        if (type === 'code' && await this.noteContext.isReadOnly()) {
+        if ((type === 'code' || type === 'mermaid') && await this.noteContext.isReadOnly()) {
             type = 'read-only-code';
         }
 
@@ -171,7 +170,7 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
             type = 'editable-text';
         }
 
-        if (type === 'code') {
+        if (type === 'code' || type === 'mermaid') {
             type = 'editable-code';
         }
 

src/public/app/widgets/type_widgets/mermaid.js

@@ -33,11 +33,12 @@ export default class MermaidTypeWidget extends TypeWidget {
     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.$errorContainer = this.$widget.find(".mermaid-error");
-        this.$errorMessage = this.$errorContainer.find(".error-content");
+
 
         this.initialized = Promise.all( [this.initRenderer(), this.initEditor()]);
 
@@ -132,4 +133,4 @@ export default class MermaidTypeWidget extends TypeWidget {
             this.$errorContainer.show();
         }
     }
-}
+}