From 9a3f675950f9dd319a0c16acd982c9ffbd80a4ee Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 21 Sep 2025 09:45:13 +0300
Subject: [PATCH] chore(react/type_widget): finalize mind map with export
 PNG/SVG

---
 .../src/widgets/type_widgets/MindMap.tsx      | 16 +++++++++--
 .../src/widgets/type_widgets_old/mind_map.ts  | 27 -------------------
 2 files changed, 14 insertions(+), 29 deletions(-)
 delete mode 100644 apps/client/src/widgets/type_widgets_old/mind_map.ts

diff --git a/apps/client/src/widgets/type_widgets/MindMap.tsx b/apps/client/src/widgets/type_widgets/MindMap.tsx
index f886e6561a..ffe4d8aa86 100644
--- a/apps/client/src/widgets/type_widgets/MindMap.tsx
+++ b/apps/client/src/widgets/type_widgets/MindMap.tsx
@@ -7,14 +7,14 @@ import nodeMenu from "@mind-elixir/node-menu";
 import "mind-elixir/style";
 import "@mind-elixir/node-menu/dist/style.css";
 import "./MindMap.css";
-import { useEditorSpacedUpdate, useTriliumEvent } from "../react/hooks";
+import { useEditorSpacedUpdate, useTriliumEvent, useTriliumEvents } from "../react/hooks";
 import { refToJQuerySelector } from "../react/react_utils";
+import utils from "../../services/utils";
 
 const NEW_TOPIC_NAME = "";
 
 interface MindElixirProps {
     apiRef?: RefObject<MindElixirInstance>;
-    direction: number;
     containerProps?: Omit<HTMLAttributes<HTMLDivElement>, "ref">;
     content: MindElixirData;
     onChange?: () => void;
@@ -63,6 +63,18 @@ export default function MindMap({ note, ntxId }: TypeWidgetProps) {
         resolve(refToJQuerySelector(containerRef).find(".map-canvas"));
     });
 
+    // Export as PNG or SVG.
+    useTriliumEvents([ "exportSvg", "exportPng" ], async ({ ntxId: eventNtxId }, eventName) => {
+        if (eventNtxId !== ntxId || !apiRef.current) return;
+        const title = note.title;
+        const svg = await apiRef.current.exportSvg().text();
+        if (eventName === "exportSvg") {
+            utils.downloadSvg(title, svg);
+        } else {
+            utils.downloadSvgAsPng(title, svg);
+        }
+    });
+
     const onKeyDown = useCallback((e: KeyboardEvent) => {
         /*
         * Some global shortcuts interfere with the default shortcuts of the mind map,
diff --git a/apps/client/src/widgets/type_widgets_old/mind_map.ts b/apps/client/src/widgets/type_widgets_old/mind_map.ts
deleted file mode 100644
index 2dfead820e..0000000000
--- a/apps/client/src/widgets/type_widgets_old/mind_map.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import TypeWidget from "./type_widget.js";
-import utils from "../../services/utils.js";
-import type { MindElixirInstance } from "mind-elixir";
-import type FNote from "../../entities/fnote.js";
-import type { EventData } from "../../components/app_context.js";
-
-export default class MindMapWidget extends TypeWidget {
-
-    async exportSvgEvent({ ntxId }: EventData<"exportSvg">) {
-        if (!this.isNoteContext(ntxId) || this.note?.type !== "mindMap") {
-            return;
-        }
-
-        const svg = await this.renderSvg();
-        utils.downloadSvg(this.note.title, svg);
-    }
-
-    async exportPngEvent({ ntxId }: EventData<"exportPng">) {
-        if (!this.isNoteContext(ntxId) || this.note?.type !== "mindMap") {
-            return;
-        }
-
-        const svg = await this.renderSvg();
-        utils.downloadSvgAsPng(this.note.title, svg);
-    }
-
-}