From bc920dc5dca9a03a5b64c2bd12a67b3ec0d83f6a Mon Sep 17 00:00:00 2001 From: zadam Date: Wed, 29 Sep 2021 22:14:45 +0200 Subject: [PATCH] refactoring of mermaid support WIP --- src/public/app/entities/note_short.js | 2 +- src/public/app/services/tree_context_menu.js | 3 +- src/public/app/widgets/note_detail.js | 1 - .../app/widgets/type_widgets/mermaid.js | 136 ------------------ 4 files changed, 3 insertions(+), 139 deletions(-) delete mode 100644 src/public/app/widgets/type_widgets/mermaid.js diff --git a/src/public/app/entities/note_short.js b/src/public/app/entities/note_short.js index f443cb369..864e3593e 100644 --- a/src/public/app/entities/note_short.js +++ b/src/public/app/entities/note_short.js @@ -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" }; /** diff --git a/src/public/app/services/tree_context_menu.js b/src/public/app/services/tree_context_menu.js index 05ef111b3..871d9c91e 100644 --- a/src/public/app/services/tree_context_menu.js +++ b/src/public/app/services/tree_context_menu.js @@ -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" } ]; } diff --git a/src/public/app/widgets/note_detail.js b/src/public/app/widgets/note_detail.js index 6ef60ee5b..e951fbbdc 100644 --- a/src/public/app/widgets/note_detail.js +++ b/src/public/app/widgets/note_detail.js @@ -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 = `
diff --git a/src/public/app/widgets/type_widgets/mermaid.js b/src/public/app/widgets/type_widgets/mermaid.js deleted file mode 100644 index 00e91f058..000000000 --- a/src/public/app/widgets/type_widgets/mermaid.js +++ /dev/null @@ -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 = `
- - -
-

The diagram could not displayed.

-

Rendering diagram...

-
- -
- -
- -
-
-
-
`; - -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(); - } - } -}