fix: preserve scroll position on preview reload (#206)

nikhilkalburgi · web-flow · commit 11d6d21277a6 · 2024-02-12T09:07:12.000+01:00
diff --git a/src/PreviewWebPanel.ts b/src/PreviewWebPanel.ts
@@ -1,6 +1,11 @@
 import * as vscode from 'vscode';
 import * as path from 'path';
 
+let position : {x:0,y:0} = {
+  x: 0,
+  y: 0
+};
+
 export function previewAsyncAPI(context: vscode.ExtensionContext) {
  return async (uri: vscode.Uri) => {
     uri = uri || (await promptForAsyncapiFile()) as vscode.Uri;
@@ -49,8 +54,25 @@ export function openAsyncAPI(context: vscode.ExtensionContext, uri: vscode.Uri)
       retainContextWhenHidden: true,
       localResourceRoots,
     });
+
   panel.title = path.basename(uri.fsPath);
-  panel.webview.html = getWebviewContent(context, panel.webview, uri);
+  panel.webview.html = getWebviewContent(context, panel.webview, uri, position);
+          
+  panel.webview.onDidReceiveMessage(
+    message => {
+      switch (message.type) {
+        case 'position':{
+          position = {
+            x: message.scrollX,
+            y: message.scrollY
+          };
+          
+        }
+      }
+    },
+    undefined,
+    context.subscriptions
+  );
 
   panel.onDidDispose(() => {
     delete openAsyncapiFiles[uri.fsPath];
@@ -68,13 +90,13 @@ async function promptForAsyncapiFile() {
     canSelectMany: false,
     openLabel: 'Open AsyncAPI file',
     filters: {
-      AsyncAPI: ['yml', 'yaml', 'json'],
+      asyncAPI: ['yml', 'yaml', 'json'],
     },
   });
   return uris?.[0];
 }
 
-function getWebviewContent(context: vscode.ExtensionContext, webview: vscode.Webview, asyncapiFile: vscode.Uri) {
+function getWebviewContent(context: vscode.ExtensionContext, webview: vscode.Webview, asyncapiFile: vscode.Uri, position: {x:0,y:0}) {
   const asyncapiComponentJs = webview.asWebviewUri(
     vscode.Uri.joinPath(context.extensionUri, 'dist/node_modules/@asyncapi/react-component/browser/standalone/index.js')
   );
@@ -89,6 +111,9 @@ function getWebviewContent(context: vscode.ExtensionContext, webview: vscode.Web
     <head>
       <link rel="stylesheet" href="${asyncapiComponentCss}">
       <style> 
+      html{
+        scroll-behavior: smooth;
+      }
       body {
         color: #121212;
         background-color: #fff;
@@ -105,6 +130,7 @@ function getWebviewContent(context: vscode.ExtensionContext, webview: vscode.Web
   
       <script src="${asyncapiComponentJs}"></script>
       <script>
+        const vscode = acquireVsCodeApi();
         AsyncApiStandalone.render({
           schema: {
             url: '${asyncapiWebviewUri}',
@@ -118,6 +144,19 @@ function getWebviewContent(context: vscode.ExtensionContext, webview: vscode.Web
             parserOptions: { path: '${asyncapiBasePath}' }
           },
         }, document.getElementById('asyncapi'));
+        
+        window.addEventListener('scrollend', event => {
+                vscode.postMessage({
+                  type: 'position',
+                  scrollX: window.scrollX || 0,
+                  scrollY: window.scrollY || 0
+                });
+        });
+        
+        window.addEventListener("load", (event) => {
+          setTimeout(()=>{window.scrollBy('${position.x}','${position.y}')},1000)
+        });
+        
       </script>
   
     </body>
