refactor: dispose after webview is closed

Author: gera2ld

src/app.ts

@@ -12,7 +12,10 @@ const vscode = acquireVsCodeApi();
 let firstTime = true;
 let root: INode | undefined;
 let style: HTMLStyleElement;
-let activeEl: Element | undefined;
+let active: {
+  node: INode;
+  el: Element;
+} | undefined;
 
 const handlers = {
   async setData(data: { root?: INode; jsonOptions?: IMarkmapJSONOptions }) {
@@ -23,8 +26,8 @@ const handlers = {
     }
   },
   setCursor(line: number) {
-    const active = root && findActiveNode(line);
-    if (active) highlightNode(active);
+    const node = root && findActiveNode(line);
+    if (node) highlightNode(node);
   },
   setCSS(data: string) {
     if (!style) {
@@ -40,6 +43,10 @@ const handlers = {
     const content = new XMLSerializer().serializeToString(mm.svg.node());
     vscode.postMessage({ type: 'downloadSvg', data: { content, path } });
   },
+  toggleNode(recursive: boolean) {
+    if (!active) return;
+    mm.toggleNode(active.node, recursive);
+  },
 };
 window.addEventListener('message', (e) => {
   const { type, data } = e.data;
@@ -139,14 +146,15 @@ function highlightNode(node: INode) {
     bottom: 80,
   });
   const g = mm.findElement(node)?.g;
-  activeEl = g?.querySelector('foreignObject');
+  const el = g?.querySelector('foreignObject');
+  active = el && { el, node };
 }
 
 function checkHighlight() {
-  if (!activeEl) {
+  if (!active) {
     highlightEl.remove();
   } else {
-    const rect = activeEl.getBoundingClientRect();
+    const rect = active.el.getBoundingClientRect();
     highlightEl.setAttribute(
       'style',
       `--mm-highlight-x:${rect.x}px;--mm-highlight-y:${rect.y}px;--mm-highlight-width:${rect.width}px;--mm-highlight-height:${rect.height}px`,

src/extension.ts

@@ -3,7 +3,6 @@ import { JSItem, type CSSItem } from 'markmap-common';
 import { fillTemplate } from 'markmap-render';
 import { defaultOptions, type IMarkmapJSONOptions } from 'markmap-view';
 import {
-  CancellationToken,
   ColorThemeKind,
   CustomTextEditorProvider,
   ExtensionContext,
@@ -61,11 +60,7 @@ class MarkmapEditor implements CustomTextEditorProvider {
     return data;
   }
 
-  public async resolveCustomTextEditor(
-    document: TextDocument,
-    webviewPanel: WebviewPanel,
-    token: CancellationToken,
-  ): Promise<void> {
+  resolveCustomTextEditor(document: TextDocument, webviewPanel: WebviewPanel) {
     webviewPanel.webview.options = {
       enableScripts: true,
     };
@@ -290,30 +285,38 @@ class MarkmapEditor implements CustomTextEditorProvider {
         logger.appendLine(data);
       },
     };
-    webviewPanel.webview.onDidReceiveMessage((e) => {
-      const handler = messageHandlers[e.type];
-      handler?.(e.data);
-    });
-    workspace.onDidChangeTextDocument((e) => {
-      if (e.document !== document) return;
-      debouncedUpdate();
-    });
-    vscodeWindow.onDidChangeTextEditorSelection((e) => {
-      if (e.textEditor.document !== document) return;
-      debouncedUpdateCursor();
-    });
-    vscodeWindow.onDidChangeActiveColorTheme(updateTheme);
+
     updateOptions();
     updateCSS();
     updateTheme();
-    workspace.onDidChangeConfiguration((e) => {
-      if (e.affectsConfiguration('markmap.defaultOptions')) updateOptions();
-      if (e.affectsConfiguration('markmap.customCSS')) updateCSS();
+
+    const disposables = [
+      webviewPanel.webview.onDidReceiveMessage((e) => {
+        const handler = messageHandlers[e.type];
+        handler?.(e.data);
+      }),
+      workspace.onDidChangeTextDocument((e) => {
+        if (e.document !== document) return;
+        debouncedUpdate();
+      }),
+      vscodeWindow.onDidChangeTextEditorSelection((e) => {
+        if (e.textEditor.document !== document) return;
+        debouncedUpdateCursor();
+      }),
+      vscodeWindow.onDidChangeActiveColorTheme(updateTheme),
+      workspace.onDidChangeConfiguration((e) => {
+        if (e.affectsConfiguration('markmap.defaultOptions')) updateOptions();
+        if (e.affectsConfiguration('markmap.customCSS')) updateCSS();
+      }),
+    ];
+    webviewPanel.onDidDispose(() => {
+      disposables.forEach((disposable) => disposable.dispose());
     });
   }
 }
 
 export function activate(context: ExtensionContext) {
+  const markmapEditor = new MarkmapEditor(context);
   context.subscriptions.push(
     commands.registerCommand(`${PREFIX}.open`, (uri?: Uri) => {
       uri ??= vscodeWindow.activeTextEditor?.document.uri;
@@ -325,7 +328,6 @@ export function activate(context: ExtensionContext) {
       );
     }),
   );
-  const markmapEditor = new MarkmapEditor(context);
   context.subscriptions.push(
     vscodeWindow.registerCustomEditorProvider(VIEW_TYPE, markmapEditor, {
       webviewOptions: { retainContextWhenHidden: true },