feat: add commands to toggle the active node

close #47

Author: gera2ld

package.json

@@ -23,11 +23,22 @@
     "commands": [
       {
         "command": "markmap-vscode.open",
+        "category": "Markmap",
         "title": "Open as markmap",
         "icon": {
           "light": "./assets/light.svg",
           "dark": "./assets/dark.svg"
         }
+      },
+      {
+        "command": "markmap-vscode.toggle",
+        "category": "Markmap",
+        "title": "Toggle the active node"
+      },
+      {
+        "command": "markmap-vscode.toggle-recursively",
+        "category": "Markmap",
+        "title": "Toggle the active node recursively"
       }
     ],
     "customEditors": [
@@ -47,6 +58,14 @@
         {
           "when": "editorLangId == markdown",
           "command": "markmap-vscode.open"
+        },
+        {
+          "when": "editorLangId == markdown",
+          "command": "markmap-vscode.toggle"
+        },
+        {
+          "when": "editorLangId == markdown",
+          "command": "markmap-vscode.toggle-recursively"
         }
       ],
       "explorer/context": [

src/app.ts

@@ -12,10 +12,12 @@ const vscode = acquireVsCodeApi();
 let firstTime = true;
 let root: INode | undefined;
 let style: HTMLStyleElement;
-let active: {
-  node: INode;
-  el: Element;
-} | undefined;
+let active:
+  | {
+      node: INode;
+      el: Element;
+    }
+  | undefined;
 
 const handlers = {
   async setData(data: { root?: INode; jsonOptions?: IMarkmapJSONOptions }) {
@@ -25,8 +27,11 @@ const handlers = {
       firstTime = false;
     }
   },
-  setCursor(line: number) {
-    const node = root && findActiveNode(line);
+  async setCursor(options: { line: number; autoExpand?: boolean }) {
+    const result = root && findActiveNode(options);
+    if (!result) return;
+    const { node, needRerender } = result;
+    if (needRerender) await mm.renderData();
     if (node) highlightNode(node);
   },
   setCSS(data: string) {
@@ -127,18 +132,38 @@ function findHeading(id: string) {
   return target;
 }
 
-function findActiveNode(line: number) {
-  function dfs(node: INode) {
+function findActiveNode({
+  line,
+  autoExpand = true,
+}: {
+  line: number;
+  autoExpand?: boolean;
+}) {
+  function dfs(node: INode, ancestors: INode[] = []) {
     const [start, end] =
       (node.payload?.lines as string)?.split(',').map((s) => +s) || [];
     if (start >= 0 && start <= line && line < end) {
       best = node;
+      bestAncestors = ancestors;
     }
-    node.children?.forEach(dfs);
+    ancestors = [...ancestors, node];
+    node.children?.forEach((child) => {
+      dfs(child, ancestors);
+    });
   }
   let best: INode | undefined;
+  let bestAncestors: INode[] = [];
   dfs(root);
-  return best;
+  let needRerender = false;
+  if (autoExpand) {
+    bestAncestors.forEach((node) => {
+      if (node.payload?.fold) {
+        node.payload.fold = 0;
+        needRerender = true;
+      }
+    });
+  }
+  return best && { node: best, needRerender };
 }
 
 function highlightNode(node: INode) {

src/extension.ts

@@ -47,7 +47,9 @@ async function writeFile(targetUri: Uri, text: string) {
 }
 
 class MarkmapEditor implements CustomTextEditorProvider {
-  constructor(private context: ExtensionContext) {}
+  private webviewPanelMap = new Map<TextDocument, WebviewPanel>();
+
+  constructor(private context: ExtensionContext) { }
 
   private resolveAssetPath(relPath: string) {
     return Utils.joinPath(this.context.extensionUri, relPath);
@@ -61,6 +63,7 @@ class MarkmapEditor implements CustomTextEditorProvider {
   }
 
   resolveCustomTextEditor(document: TextDocument, webviewPanel: WebviewPanel) {
+    this.webviewPanelMap.set(document, webviewPanel);
     webviewPanel.webview.options = {
       enableScripts: true,
     };
@@ -111,11 +114,16 @@ class MarkmapEditor implements CustomTextEditorProvider {
       if (editor?.document === document) {
         webviewPanel.webview.postMessage({
           type: 'setCursor',
-          data: editor.selection.active.line,
+          data: {
+            line: editor.selection.active.line,
+            autoExpand: globalOptions?.autoExpand,
+          },
         });
       }
     };
-    let globalOptions: IMarkmapJSONOptions;
+    let globalOptions: IMarkmapJSONOptions & {
+      autoExpand?: boolean;
+    };
     let customCSS: string;
     const updateOptions = () => {
       const raw = workspace
@@ -185,11 +193,11 @@ class MarkmapEditor implements CustomTextEditorProvider {
         styles: [
           ...(customCSS
             ? [
-                {
-                  type: 'style',
-                  data: customCSS,
-                } as CSSItem,
-              ]
+              {
+                type: 'style',
+                data: customCSS,
+              } as CSSItem,
+            ]
             : []),
         ],
         scripts: [
@@ -311,6 +319,16 @@ class MarkmapEditor implements CustomTextEditorProvider {
     ];
     webviewPanel.onDidDispose(() => {
       disposables.forEach((disposable) => disposable.dispose());
+      this.webviewPanelMap.delete(document);
+    });
+  }
+
+  toggleActiveNode(document: TextDocument, recursive = false) {
+    const webviewPanel = this.webviewPanelMap.get(document);
+    if (!webviewPanel) return;
+    webviewPanel.webview.postMessage({
+      type: 'toggleNode',
+      data: recursive,
     });
   }
 }
@@ -327,6 +345,14 @@ export function activate(context: ExtensionContext) {
         ViewColumn.Beside,
       );
     }),
+    commands.registerCommand(`${PREFIX}.toggle`, () => {
+      const document = vscodeWindow.activeTextEditor?.document;
+      if (document) markmapEditor.toggleActiveNode(document);
+    }),
+    commands.registerCommand(`${PREFIX}.toggle-recursively`, () => {
+      const document = vscodeWindow.activeTextEditor?.document;
+      if (document) markmapEditor.toggleActiveNode(document, true);
+    }),
   );
   context.subscriptions.push(
     vscodeWindow.registerCustomEditorProvider(VIEW_TYPE, markmapEditor, {