Merge pull request #928 from TriliumNext/renovate/mind-elixir-4.x

fix(deps): update dependency mind-elixir to v4.3.6

.github/workflows/dev.yml

@@ -16,9 +16,28 @@ env:
   TEST_TAG: ${{ github.repository_owner }}/notes:test
 
 jobs:
+  test_dev:
+    name: Test development
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v4
+
+      - name: Set up node & dependencies
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "npm"
+
+      - run: npm ci
+
+      - name: Run the TypeScript build
+        run: npx tsc
   build_docker:
     name: Build Docker image
     runs-on: ubuntu-latest
+    needs:
+      - test_dev
     steps:
       - uses: actions/checkout@v4
       - name: Set up node & dependencies
@@ -36,27 +55,12 @@ jobs:
         with:
           context: .
           cache-from: type=gha
-          cache-to: type=gha,mode=max
-  test_dev:
-    name: Test development
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout the repository
-        uses: actions/checkout@v4
-
-      - name: Set up node & dependencies
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: "npm"
-
-      - run: npm ci
-
-      - name: Run the TypeScript build
-        run: npx tsc
+          cache-to: type=gha,mode=max  
   test_docker:
     name: Check Docker build
     runs-on: ubuntu-latest
+    needs:
+      - build_docker
     strategy:
       matrix:
         include:

package.json

@@ -116,7 +116,7 @@
     "marked": "15.0.6",
     "mermaid": "11.4.1",
     "mime-types": "2.1.35",
-    "mind-elixir": "4.3.5",
+    "mind-elixir": "4.3.6",
     "multer": "1.4.5-lts.1",
     "normalize-strings": "1.1.1",
     "normalize.css": "8.0.1",

src/public/app/components/app_context.ts

@@ -92,7 +92,7 @@ export type CommandMappings = {
         filePath: string;
     };
     focusAndSelectTitle: CommandData & {
-        isNewNote: boolean;
+        isNewNote?: boolean;
     };
     showPromptDialog: PromptDialogOptions;
     showInfoDialog: ConfirmWithMessageOptions;
@@ -262,6 +262,9 @@ type EventMappings = {
     };
     noteContextRemovedEvent: {
         ntxIds: string[];
+    };
+    exportSvg: {
+        ntxId: string;
     }
 };
 
@@ -274,15 +277,16 @@ export type CommandListener<T extends CommandNames> = {
 };
 
 export type CommandListenerData<T extends CommandNames> = CommandMappings[T];
-export type EventData<T extends EventNames> = EventMappings[T];
 
 type CommandAndEventMappings = CommandMappings & EventMappings;
+type EventOnlyNames = keyof EventMappings;
+export type EventNames = CommandNames | EventOnlyNames;
+export type EventData<T extends EventNames> = CommandAndEventMappings[T];
 
 /**
  * This type is a discriminated union which contains all the possible commands that can be triggered via {@link AppContext.triggerCommand}.
  */
 export type CommandNames = keyof CommandMappings;
-type EventNames = keyof EventMappings;
 
 type FilterByValueType<T, ValueType> = { [K in keyof T]: T[K] extends ValueType ? K : never }[keyof T];
 
@@ -375,12 +379,10 @@ class AppContext extends Component {
 
         this.child(rootWidget);
 
-        this.triggerEvent("initialRenderComplete");
+        this.triggerEvent("initialRenderComplete", {});
     }
 
-    // TODO: Remove ignore once all commands are mapped out.
-    //@ts-ignore
-    triggerEvent<K extends EventNames | CommandNames>(name: K, data: CommandAndEventMappings[K] = {}) {
+    triggerEvent<K extends EventNames>(name: K, data: EventData<K>) {
         return this.handleEvent(name, data);
     }
 

src/public/app/components/component.ts

@@ -1,5 +1,5 @@
 import utils from "../services/utils.js";
-import type { CommandMappings, CommandNames } from "./app_context.js";
+import type { CommandMappings, CommandNames, EventData, EventNames } from "./app_context.js";
 
 /**
  * Abstract class for all components in the Trilium's frontend.
@@ -46,7 +46,7 @@ export class TypedComponent<ChildT extends TypedComponent<ChildT>> {
         return this;
     }
 
-    handleEvent(name: string, data: unknown): Promise<unknown> | null {
+    handleEvent<T extends EventNames>(name: T, data: EventData<T>): Promise<unknown[] | unknown> | null {
         try {
             const callMethodPromise = this.initialized ? this.initialized.then(() => this.callMethod((this as any)[`${name}Event`], data)) : this.callMethod((this as any)[`${name}Event`], data);
 
@@ -65,11 +65,11 @@ export class TypedComponent<ChildT extends TypedComponent<ChildT>> {
         return this.parent?.triggerEvent(name, data);
     }
 
-    handleEventInChildren(name: string, data: unknown = {}) {
-        const promises = [];
+    handleEventInChildren<T extends EventNames>(name: T, data: EventData<T>): Promise<unknown[] | unknown> | null {
+        const promises: Promise<unknown>[] = [];
 
         for (const child of this.children) {
-            const ret = child.handleEvent(name, data);
+            const ret = child.handleEvent(name, data) as Promise<void>;
 
             if (ret) {
                 promises.push(ret);

src/public/app/entities/fnote.ts

@@ -35,7 +35,7 @@ const NOTE_TYPE_ICONS = {
  * end user. Those types should be used only for checking against, they are
  * not for direct use.
  */
-type NoteType = "file" | "image" | "search" | "noteMap" | "launcher" | "doc" | "contentWidget" | "text" | "relationMap" | "render" | "canvas" | "mermaid" | "book" | "webView" | "code";
+type NoteType = "file" | "image" | "search" | "noteMap" | "launcher" | "doc" | "contentWidget" | "text" | "relationMap" | "render" | "canvas" | "mermaid" | "book" | "webView" | "code" | "mindMap";
 
 interface NotePathRecord {
     isArchived: boolean;

src/public/app/services/frontend_script_api.ts

@@ -463,7 +463,7 @@ function FrontendScriptApi(this: Api, startNote: FNote, currentNote: FNote, orig
         await ws.waitForMaxKnownEntityChangeId();
 
         await appContext.tabManager.getActiveContext().setNote(notePath);
-        await appContext.triggerEvent("focusAndSelectTitle");
+        await appContext.triggerEvent("focusAndSelectTitle", {});
     };
 
     this.openTabWithNote = async (notePath, activate) => {
@@ -472,7 +472,7 @@ function FrontendScriptApi(this: Api, startNote: FNote, currentNote: FNote, orig
         await appContext.tabManager.openTabWithNoteWithHoisting(notePath, { activate });
 
         if (activate) {
-            await appContext.triggerEvent("focusAndSelectTitle");
+            await appContext.triggerEvent("focusAndSelectTitle", {});
         }
     };
 
@@ -485,7 +485,7 @@ function FrontendScriptApi(this: Api, startNote: FNote, currentNote: FNote, orig
         await appContext.triggerCommand("openNewNoteSplit", { ntxId, notePath });
 
         if (activate) {
-            await appContext.triggerEvent("focusAndSelectTitle");
+            await appContext.triggerEvent("focusAndSelectTitle", {});
         }
     };
 

src/public/app/services/library_loader.ts

@@ -96,10 +96,6 @@ const I18NEXT: Library = {
     js: ["node_modules/i18next/i18next.min.js", "node_modules/i18next-http-backend/i18nextHttpBackend.min.js"]
 };
 
-const MIND_ELIXIR: Library = {
-    js: ["node_modules/mind-elixir/dist/MindElixir.iife.js", "node_modules/@mind-elixir/node-menu/dist/node-menu.umd.cjs"]
-};
-
 const HIGHLIGHT_JS: Library = {
     js: () => {
         const mimeTypes = mimeTypesService.getMimeTypes();
@@ -219,6 +215,5 @@ export default {
     EXCALIDRAW,
     MARKJS,
     I18NEXT,
-    MIND_ELIXIR,
     HIGHLIGHT_JS
 };

src/public/app/services/protected_session.ts

@@ -74,9 +74,9 @@ ws.subscribeToMessages(async (message) => {
     if (message.type === "protectedSessionLogin") {
         await reloadData();
 
-        await appContext.triggerEvent("frocaReloaded");
+        await appContext.triggerEvent("frocaReloaded", {});
 
-        appContext.triggerEvent("protectedSessionStarted");
+        appContext.triggerEvent("protectedSessionStarted", {});
 
         appContext.triggerCommand("closeProtectedSessionPasswordDialog");
 

src/public/app/types-lib.d.ts

@@ -20,3 +20,7 @@ declare module "draggabilly" {
         destroy();
     }
 }
+
+declare module '@mind-elixir/node-menu' {
+    export default mindmap;
+}

src/public/app/widgets/containers/launcher_container.ts

@@ -51,7 +51,7 @@ export default class LauncherContainer extends FlexContainer<LauncherWidget> {
         this.$widget.empty();
         this.renderChildren();
 
-        await this.handleEventInChildren("initialRenderComplete");
+        await this.handleEventInChildren("initialRenderComplete", {});
 
         const activeContext = appContext.tabManager.getActiveContext();
 

src/public/app/widgets/containers/right_pane_container.ts

@@ -1,6 +1,7 @@
 import FlexContainer from "./flex_container.js";
 import splitService from "../../services/resizer.js";
 import type RightPanelWidget from "../right_panel_widget.js";
+import type { EventData, EventNames } from "../../components/app_context.js";
 
 export default class RightPaneContainer extends FlexContainer<RightPanelWidget> {
     private rightPaneHidden: boolean;
@@ -19,7 +20,7 @@ export default class RightPaneContainer extends FlexContainer<RightPanelWidget>
         return super.isEnabled() && !this.rightPaneHidden && this.children.length > 0 && !!this.children.find((ch) => ch.isEnabled() && ch.canBeShown());
     }
 
-    handleEventInChildren(name: string, data: unknown) {
+    handleEventInChildren<T extends EventNames>(name: T, data: EventData<T>): Promise<unknown[] | unknown> | null {
         const promise = super.handleEventInChildren(name, data);
 
         if (["activeContextChanged", "noteSwitchedAndActivated", "noteSwitched"].includes(name)) {

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

@@ -1,6 +1,11 @@
-import libraryLoader from "../../services/library_loader.js";
 import TypeWidget from "./type_widget.js";
 import utils from "../../services/utils.js";
+import MindElixir, { type MindElixirCtor } from "mind-elixir";
+import nodeMenu from "@mind-elixir/node-menu";
+import type FNote from "../../entities/fnote.js";
+import type { EventData } from "../../components/app_context.js";
+
+const NEW_TOPIC_NAME = "";
 
 const TPL = `
 <div class="note-detail-mind-map note-detail-printable">
@@ -137,6 +142,11 @@ const TPL = `
 `;
 
 export default class MindMapWidget extends TypeWidget {
+
+    private $content!: JQuery<HTMLElement>;
+    private triggeredByUserOperation?: boolean;
+    private mind?: ReturnType<MindElixirCtor["new"]>;
+
     static getType() {
         return "mindMap";
     }
@@ -163,16 +173,12 @@ export default class MindMapWidget extends TypeWidget {
         super.doRender();
     }
 
-    async doRefresh(note) {
+    async doRefresh(note: FNote) {
         if (this.triggeredByUserOperation) {
             this.triggeredByUserOperation = false;
             return;
         }
 
-        if (!window.MindElixir) {
-            await libraryLoader.requireLibrary(libraryLoader.MIND_ELIXIR);
-        }
-
         this.#initLibrary();
         await this.#loadData(note);
     }
@@ -181,24 +187,27 @@ export default class MindMapWidget extends TypeWidget {
         this.triggeredByUserOperation = false;
     }
 
-    async #loadData(note) {
+    async #loadData(note: FNote) {
         const blob = await note.getBlob();
-        const content = blob.getJsonContent() || MindElixir.new();
+        const content = blob?.getJsonContent() || MindElixir.new(NEW_TOPIC_NAME);
 
-        this.mind.refresh(content);
-        this.mind.toCenter();
+        if (this.mind) {
+            this.mind.refresh(content);
+            this.mind.toCenter();
+        }
     }
 
     #initLibrary() {
         const mind = new MindElixir({
             el: this.$content[0],
             direction: MindElixir.LEFT
         });
-        mind.install(window["@mind-elixir/node-menu"]);
+        mind.install(nodeMenu);
 
         this.mind = mind;
-        mind.init(MindElixir.new());
-        mind.bus.addListener("operation", (operation) => {
+        mind.init(MindElixir.new(NEW_TOPIC_NAME));
+        // TODO: See why the typeof mindmap is not correct.
+        mind.bus.addListener("operation", (operation: { name: string }) => {
             this.triggeredByUserOperation = true;
             if (operation.name !== "beginEdit") {
                 this.spacedUpdate.scheduleUpdate();
@@ -237,14 +246,14 @@ export default class MindMapWidget extends TypeWidget {
         return await this.mind.exportSvg().text();
     }
 
-    async entitiesReloadedEvent({ loadResults }) {
-        if (loadResults.isNoteReloaded(this.noteId)) {
+    async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded"> ) {
+        if (this.noteId && loadResults.isNoteReloaded(this.noteId)) {
             this.refresh();
         }
     }
 
-    async exportSvgEvent({ ntxId }) {
-        if (!this.isNoteContext(ntxId) || this.note.type !== "mindMap") {
+    async exportSvgEvent({ ntxId }: EventData<"exportSvg">) {
+        if (!this.isNoteContext(ntxId) || this.note?.type !== "mindMap") {
             return;
         }