Feat/click layer

package.json

@@ -3,7 +3,7 @@
   "displayName": "MapLibre",
   "description": "",
   "publisher": "kiguchi",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "engines": {
     "vscode": "^1.92.0"
   },

src/extension.ts

@@ -1,27 +1,91 @@
 import * as vscode from 'vscode';
 import { createWebview, updateStyle } from './viewer.js';
 
+function jumpCursor(editor: vscode.TextEditor, line: number) {
+    const _editor = getStyleEditor(editor.document.uri.toString())!;
+
+    if (line < 0 || _editor.document.lineCount < line) {
+        return;
+    }
+
+    const lineLength = _editor.document.lineAt(line).text.length;
+
+    const anchor = new vscode.Position(line, 0);
+    const active = new vscode.Position(line, lineLength);
+
+    // jump
+    _editor.selection = new vscode.Selection(anchor, active);
+    _editor.revealRange(
+        new vscode.Range(line, 0, line, 0),
+        vscode.TextEditorRevealType.AtTop,
+    );
+}
+
+/**
+ * get instance of vscode.TextEditor
+ * vscode.window.activeTextEditor does not provide newest instance
+ */
+function getStyleEditor(uri: string): vscode.TextEditor | undefined {
+    for (const editor of vscode.window.visibleTextEditors) {
+        if (editor.document.uri.toString() === uri) {
+            return editor;
+        }
+    }
+    return undefined;
+}
+
+function findLine(text: string, word: string) {
+    const lines = text.split('\n');
+    for (let i = 0; i < lines.length; i++) {
+        if (lines[i].includes(word)) {
+            return i;
+        }
+    }
+    return -1;
+}
+
 export function activate(context: vscode.ExtensionContext) {
     const disposable = vscode.commands.registerCommand(
         'maplibre.launch_editor',
         () => {
-            const target = vscode.window.activeTextEditor?.document;
+            const styleEditor = vscode.window.activeTextEditor!;
             const panel = createWebview();
 
             panel.webview.onDidReceiveMessage((message) => {
-                if (message.type === 'ready') {
-                    updateStyle(panel.webview, target?.getText() ?? '');
+                switch (message.type) {
+                    case 'ready':
+                        updateStyle(
+                            panel.webview,
+                            styleEditor.document?.getText() ?? '',
+                        );
+                        break;
+                    case 'layer-select':
+                        const line = findLine(
+                            styleEditor.document?.getText() ?? '',
+                            message.layerId,
+                        );
+                        jumpCursor(styleEditor, line);
+                        break;
                 }
             });
 
             panel.onDidChangeViewState(() => {
-                updateStyle(panel.webview, target?.getText() ?? '');
+                updateStyle(
+                    panel.webview,
+                    styleEditor.document?.getText() ?? '',
+                );
             });
 
             const changeDocumentSubscription =
                 vscode.workspace.onDidChangeTextDocument((e) => {
-                    if (e.document.uri.toString() === target?.uri.toString()) {
-                        updateStyle(panel.webview, target?.getText() ?? '');
+                    if (
+                        e.document.uri.toString() ===
+                        styleEditor.document?.uri.toString()
+                    ) {
+                        updateStyle(
+                            panel.webview,
+                            styleEditor.document?.getText() ?? '',
+                        );
                     }
                 });
 

src/viewer.html

@@ -16,6 +16,7 @@
             <div id="error"></div>
         </div>
         <script>
+            const vscode = acquireVsCodeApi();
             const protocol = new pmtiles.Protocol();
             maplibregl.addProtocol('pmtiles', protocol.tile);
 
@@ -100,6 +101,38 @@
             map.addControl(new ViewstateControl());
             map.addControl(new maplibregl.NavigationControl());
 
+            map.on('click', (e) => {
+                // detect layers
+                const features = map.queryRenderedFeatures(e.point);
+                const layerIds = features.map((f) => f.layer.id);
+                const uniqueLayerIds = [...new Set(layerIds)];
+
+                if (uniqueLayerIds.length === 0) {
+                    return;
+                }
+
+                // show layers in popup
+                // when click layername, postMessage to vscode
+                const container = document.createElement('div');
+                uniqueLayerIds.forEach((layerId) => {
+                    const layerName = document.createElement('div');
+                    layerName.textContent = layerId;
+                    layerName.style.cssText = `
+                        cursor: pointer;
+                        color: #333;
+                    `;
+                    layerName.addEventListener('click', () => {
+                        vscode.postMessage({ type: 'layer-select', layerId });
+                    });
+                    container.appendChild(layerName);
+                });
+
+                new maplibregl.Popup()
+                    .setLngLat(e.lngLat)
+                    .setDOMContent(container)
+                    .addTo(map);
+            });
+
             window.addEventListener('message', (event) => {
                 const message = event.data;
                 const errDiv = document.getElementById('error');
@@ -118,7 +151,7 @@
                         break;
                 }
             });
-            const vscode = acquireVsCodeApi();
+
             vscode.postMessage({ type: 'ready' });
         </script>
     </body>