Merge pull request #8 from Kanahiro/chores

rename command name, better initial loading
Kanahiro · Aug 7, 2024 · 58579a2 · 58579a2
2 parents 29bb7c4 + b98711c
commit 58579a2
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -15,8 +15,8 @@
   "contributes": {
     "commands": [
       {
-        "command": "maplibre.viewer",
-        "title": "MapLibre: Viewer"
+        "command": "maplibre.launch_editor",
+        "title": "MapLibre: Launch Editor"
       }
     ]
   },

diff --git a/src/extension.cts b/src/extension.cts
@@ -3,15 +3,16 @@ import { createWebview, updateStyle } from './viewer.cjs';
 
 export function activate(context: vscode.ExtensionContext) {
     const disposable = vscode.commands.registerCommand(
-        'maplibre.viewer',
+        'maplibre.launch_editor',
         () => {
             const target = vscode.window.activeTextEditor?.document;
             const panel = createWebview();
 
-            setTimeout(() => {
-                // take interval to wait webview rendered
-                updateStyle(panel.webview, target?.getText() ?? '');
-            }, 500);
+            panel.webview.onDidReceiveMessage((message) => {
+                if (message.type === 'ready') {
+                    updateStyle(panel.webview, target?.getText() ?? '');
+                }
+            });
 
             panel.onDidChangeViewState(() => {
                 updateStyle(panel.webview, target?.getText() ?? '');

diff --git a/src/viewer.cts b/src/viewer.cts
@@ -40,23 +40,26 @@ const createWebview = () => {
             map.addControl(new maplibregl.NavigationControl());
 
             window.addEventListener('message', event => {
-            const message = event.data;
-            const errDiv = document.getElementById('error');
-            switch (message.command) {
-                case 'style':
-                    errDiv.innerHTML = '';
-                    map.setStyle(message.style);
-                    break;
-                case 'error':
-                    errDiv.innerHTML = message.error;
-                    map.setStyle({
-                        "version": 8,
-                        "sources": {},
-                        "layers": []
-                    });
-                    break;
-              }
-          });
+                const message = event.data;
+                const errDiv = document.getElementById('error');
+                switch (message.command) {
+                    case 'style':
+                        errDiv.innerHTML = '';
+                        map.setStyle(message.style);
+                        break;
+                    case 'error':
+                        errDiv.innerHTML = message.error;
+                        map.setStyle({
+                            "version": 8,
+                            "sources": {},
+                            "layers": []
+                        });
+                        break;
+                }
+            });
+            const vscode = acquireVsCodeApi();
+            vscode.postMessage({ type: 'ready' });
+            console.log('ready');
         </script>
       </body>
     </html>`;