fix: move active node into viewport

fix #56

Author: gera2ld

assets/app.js

@@ -4,7 +4,10 @@ let root;
 let style;
 const handlers = {
   setData(data) {
-    mm.setData(root = data.root, markmap.deriveOptions(data.jsonOptions) || {});
+    mm.setData(
+      (root = data.root),
+      markmap.deriveOptions(data.jsonOptions) || {},
+    );
     if (firstTime) {
       mm.fit();
       firstTime = false;
@@ -29,12 +32,12 @@ const handlers = {
     document.documentElement.classList[dark ? 'add' : 'remove']('markmap-dark');
   },
 };
-window.addEventListener('message', e => {
+window.addEventListener('message', (e) => {
   const { type, data } = e.data;
   const handler = handlers[type];
   handler?.(data);
 });
-document.addEventListener('click', e => {
+document.addEventListener('click', (e) => {
   const el = e.target?.closest('a');
   if (el) {
     const href = el.getAttribute('href');
@@ -61,7 +64,14 @@ toolbar.register({
   content: createButton('Export'),
   onClick: clickHandler('exportAsHtml'),
 });
-toolbar.setItems(['zoomIn', 'zoomOut', 'fit', 'recurse', 'editAsText', 'exportAsHtml']);
+toolbar.setItems([
+  'zoomIn',
+  'zoomOut',
+  'fit',
+  'recurse',
+  'editAsText',
+  'exportAsHtml',
+]);
 setTimeout(() => {
   toolbar.attach(mm);
   document.body.append(toolbar.el);
@@ -82,11 +92,11 @@ function clickHandler(type) {
 
 function findActiveNode(line) {
   function dfs(node) {
-    const lines = node.p?.lines;
-    if (lines && lines[0] <= line && line < lines[1]) {
+    const [start, end] = node.payload?.lines?.split(',').map((s) => +s) || [];
+    if (start >= 0 && start <= line && line < end) {
       best = node;
     }
-    node.c?.forEach(dfs);
+    node.children?.forEach(dfs);
   }
   let best;
   dfs(root);

src/extension.ts

@@ -35,7 +35,7 @@ const renderToolbar = () => {
 };
 
 class MarkmapEditor implements CustomTextEditorProvider {
-  constructor(private context: ExtensionContext) {}
+  constructor(private context: ExtensionContext) { }
 
   private resolveAssetPath(relPath: string) {
     return Utils.joinPath(this.context.extensionUri, relPath);
@@ -153,6 +153,7 @@ class MarkmapEditor implements CustomTextEditorProvider {
     const debouncedUpdateCursor = debounce(updateCursor, 300);
     const debouncedUpdate = debounce(update, 300);
 
+    const logger = vscodeWindow.createOutputChannel('Markmap');
     const messageHandlers: { [key: string]: (data?: any) => void } = {
       refresh: () => {
         update();
@@ -186,11 +187,11 @@ class MarkmapEditor implements CustomTextEditorProvider {
           styles: [
             ...(customCSS
               ? [
-                  {
-                    type: 'style',
-                    data: customCSS,
-                  } as CSSItem,
-                ]
+                {
+                  type: 'style',
+                  data: customCSS,
+                } as CSSItem,
+              ]
               : []),
           ],
           scripts: [
@@ -256,21 +257,20 @@ class MarkmapEditor implements CustomTextEditorProvider {
         const filePath = Utils.joinPath(Utils.dirname(document.uri), relPath);
         commands.executeCommand('vscode.open', filePath);
       },
-    };
-    const logger = vscodeWindow.createOutputChannel('Markmap');
-    messageHandlers.log = (data: string) => {
-      logger.appendLine(data);
+      log(data: string) {
+        logger.appendLine(data);
+      },
     };
     webviewPanel.webview.onDidReceiveMessage((e) => {
       const handler = messageHandlers[e.type];
       handler?.(e.data);
     });
     workspace.onDidChangeTextDocument((e) => {
-      if (e.document === document) {
-        debouncedUpdate();
-      }
+      if (e.document !== document) return;
+      debouncedUpdate();
     });
-    vscodeWindow.onDidChangeTextEditorSelection(() => {
+    vscodeWindow.onDidChangeTextEditorSelection((e) => {
+      if (e.textEditor.document !== document) return;
       debouncedUpdateCursor();
     });
     vscodeWindow.onDidChangeActiveColorTheme(updateTheme);