client: Add basic mindmap integration

package-lock.json

@@ -66,6 +66,7 @@
         "marked": "^13.0.2",
         "mermaid": "^10.9.1",
         "mime-types": "2.1.35",
+        "mind-elixir": "^4.0.5",
         "multer": "1.4.5-lts.1",
         "node-abi": "^3.65.0",
         "normalize-strings": "1.1.1",
@@ -13002,6 +13003,11 @@
         "dom-walk": "^0.1.0"
       }
     },
+    "node_modules/mind-elixir": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/mind-elixir/-/mind-elixir-4.0.5.tgz",
+      "integrity": "sha512-zFYNabpchCY468d/vqo68hnhP+VDN47uPyJJ4dYlkqvL7fomRlo/WJinYgH+Rjt5vFJVLEMBtFsv5fizAC4ZYg=="
+    },
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",

package.json

@@ -106,6 +106,7 @@
     "marked": "^13.0.2",
     "mermaid": "^10.9.1",
     "mime-types": "2.1.35",
+    "mind-elixir": "^4.0.5",
     "multer": "1.4.5-lts.1",
     "node-abi": "^3.65.0",
     "normalize-strings": "1.1.1",

src/public/app/services/library_loader.js

@@ -79,6 +79,12 @@ const I18NEXT = {
     ]
 };
 
+const MIND_ELIXIR = {
+    js: [
+        "node_modules/mind-elixir/dist/MindElixir.iife.js"
+    ]
+};
+
 async function requireLibrary(library) {
     if (library.css) {
         library.css.map(cssUrl => requireCss(cssUrl));
@@ -137,5 +143,6 @@ export default {
     MERMAID,
     EXCALIDRAW,
     MARKJS,
-    I18NEXT
+    I18NEXT,
+    MIND_ELIXIR
 }

src/public/app/widgets/note_detail.js

@@ -146,7 +146,7 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
         this.$widget.toggleClass("full-height",
             (
                 !this.noteContext.hasNoteList()
-                && ['canvas', 'webView', 'noteMap'].includes(this.type)
+                && ['canvas', 'webView', 'noteMap', 'mindMap'].includes(this.type)
                 && this.mime !== 'text/x-sqlite;schema=trilium'
             )
             || this.noteContext.viewScope.viewMode === 'attachments'

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

@@ -1,7 +1,21 @@
+import libraryLoader from "../../services/library_loader.js";
 import TypeWidget from "./type_widget.js";
 
 const TPL = `
 <div class="note-detail-mind-map note-detail-printable">
+    <div class="mind-map-container">
+    </div>
+
+    <style>
+        .note-detail-mind-map {
+            height: 100%;
+            overflow: hidden !important;
+        }
+
+        .note-detail-mind-map .mind-map-container {
+            height: 100%;
+        }
+    </style>
 </div>
 `;
 
@@ -10,15 +24,21 @@ export default class MindMapWidget extends TypeWidget {
 
     doRender() {
         this.$widget = $(TPL);
+        this.$content = this.$widget.find(".mind-map-container");
+
+        libraryLoader
+            .requireLibrary(libraryLoader.MIND_ELIXIR)
+            .then(() => {
+                const mind = new MindElixir({
+                    el: this.$content[0],
+                    direction: MindElixir.LEFT
+                });
+                mind.init(MindElixir.new("hello"));
+            });
 
         super.doRender();
     }
 
-    async doRefresh(note) {
-        this.$widget.html("<p>Hello</p>");
-        this.$widget.show();
-    }
-
     cleanup() {
         this.$widget.empty();
     }

src/routes/assets.ts

@@ -100,6 +100,8 @@ function register(app: express.Application) {
     app.use(`/${assetPath}/node_modules/codemirror/addon/`, persistentCacheStatic(path.join(srcRoot, '..', 'node_modules/codemirror/addon/')));
     app.use(`/${assetPath}/node_modules/codemirror/mode/`, persistentCacheStatic(path.join(srcRoot, '..', 'node_modules/codemirror/mode/')));
     app.use(`/${assetPath}/node_modules/codemirror/keymap/`, persistentCacheStatic(path.join(srcRoot, '..', 'node_modules/codemirror/keymap/')));
+
+    app.use(`/${assetPath}/node_modules/mind-elixir/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/mind-elixir/dist/")));
 }
 
 export default {