From 896c9cec047cedc6030741d09f8a2a954c631837 Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Wed, 29 Sep 2021 22:10:15 +0200
Subject: [PATCH] refactoring of mermaid support WIP

---
 src/public/app/layouts/desktop_layout.js      |  2 +
 src/public/app/widgets/mermaid.js             | 57 +++++++++++++++++++
 src/public/app/widgets/note_detail.js         |  7 +--
 .../app/widgets/type_widgets/mermaid.js       |  7 ++-
 4 files changed, 66 insertions(+), 7 deletions(-)
 create mode 100644 src/public/app/widgets/mermaid.js

diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js
index c09f91468..cfc204998 100644
--- a/src/public/app/layouts/desktop_layout.js
+++ b/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())
diff --git a/src/public/app/widgets/mermaid.js b/src/public/app/widgets/mermaid.js
new file mode 100644
index 000000000..05e320d12
--- /dev/null
+++ b/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();
+        }
+    }
+}
diff --git a/src/public/app/widgets/note_detail.js b/src/public/app/widgets/note_detail.js
index 0c7a25709..6ef60ee5b 100644
--- a/src/public/app/widgets/note_detail.js
+++ b/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';
         }
 
diff --git a/src/public/app/widgets/type_widgets/mermaid.js b/src/public/app/widgets/type_widgets/mermaid.js
index 5ce7db4ae..00e91f058 100644
--- a/src/public/app/widgets/type_widgets/mermaid.js
+++ b/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();
         }
     }
-}
\ No newline at end of file
+}