Merge pull request #58 from lit/ignition-select-element-focus

Smartly focus element's source when selected

packages/labs/ignition/src/lib/component-commands.ts

@@ -13,7 +13,7 @@ import {
   getWorkspaceFolderForElement,
 } from './analyzer.js';
 import {logChannel} from './logging.js';
-import {getStoriesModuleForElement} from './stories.js';
+import {getModuleInfoForElement} from './stories.js';
 
 const require = createRequire(import.meta.url);
 import vscode = require('vscode');
@@ -80,7 +80,7 @@ export const deleteComponent = async (
   const workspaceFolder = getWorkspaceFolderForElement(data);
   const analyzer = getAnalyzer(workspaceFolder, filesystem);
   const fileUri = getDocumentUriForElement(data);
-  const storiesModule = getStoriesModuleForElement(data, analyzer);
+  const {storiesModule} = getModuleInfoForElement(data, analyzer);
   const storiesPath = storiesModule?.sourcePath;
   const storiesFileUri =
     storiesPath === undefined

packages/labs/ignition/src/lib/editor-panel.ts

@@ -59,6 +59,9 @@ export const createEditorView = async (ignition: Ignition) => {
 export class EditorPanel implements vscode.Disposable {
   static readonly viewType = 'ignition';
 
+  #onDidDispose: vscode.EventEmitter<void> = new vscode.EventEmitter<void>();
+  onDidDispose = this.#onDidDispose.event;
+
   static async create(ignition: Ignition) {
     const webviewPanel = vscode.window.createWebviewPanel(
       this.viewType,
@@ -113,6 +116,10 @@ export class EditorPanel implements vscode.Disposable {
       }
     });
     this.#connectAndInitialize();
+    webviewPanel.onDidDispose(() => {
+      this.#onDidDispose.fire();
+    });
+    ignition.registerIgnitionEditor(this);
   }
 
   dispose() {

packages/labs/ignition/src/lib/ignition.ts

@@ -9,7 +9,7 @@ import {createRequire} from 'module';
 import {getAnalyzer, getWorkspaceFolderForElement} from './analyzer.js';
 import {ElementsDataProvider} from './elements-data-provider.js';
 import {logChannel} from './logging.js';
-import {getStoriesModule, getStoriesModuleForElement} from './stories.js';
+import {getStoriesModule, getModuleInfoForElement} from './stories.js';
 import {EditorWebviewSerializer} from './editor-webview-serializer.js';
 import ts from 'typescript';
 
@@ -49,6 +49,8 @@ export class Ignition {
   readonly #buffers: InMemoryBuffers;
   readonly filesystem: OverlayFilesystem;
 
+  readonly #openIgnitionEditors = new Set<EditorPanel>();
+
   get currentElement() {
     return this.#currentElement!;
   }
@@ -123,10 +125,8 @@ export class Ignition {
     let disposable = vscode.commands.registerCommand(
       'ignition.createEditor',
       async () => {
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        const {EditorPanel} = await import('./editor-panel.js');
-        const disposable = await EditorPanel.create(this);
-        context.subscriptions.push(disposable);
+        const editorPanel = await EditorPanel.create(this);
+        context.subscriptions.push(editorPanel);
       }
     );
     context.subscriptions.push(disposable);
@@ -224,12 +224,29 @@ export class Ignition {
         );
         const workspaceFolder = getWorkspaceFolderForElement(declaration);
         const analyzer = await getAnalyzer(workspaceFolder, this.filesystem);
-        const storiesModule = getStoriesModuleForElement(declaration, analyzer);
+        const {storiesModule, elementDocumentUri} = getModuleInfoForElement(
+          declaration,
+          analyzer
+        );
         this.currentElement = declaration;
         this.currentStory =
           storiesModule === undefined
             ? undefined
             : {storyPath: storiesModule.jsPath, workspaceFolder};
+        // Should we also show the element's souce? Well, if the user is
+        // focused in design mode, with the Ignition Editor open only, then
+        // no. If they have nothing open, or if they already have code open,
+        // then yes.
+        const hasCodeOpen = vscode.window.visibleTextEditors.length > 0;
+        if (hasCodeOpen || this.#openIgnitionEditors.size === 0) {
+          vscode.window.showTextDocument(elementDocumentUri, {
+            // Show the source in the same column as the first visible source
+            // viewer, otherwise just use the first column.
+            viewColumn:
+              vscode.window.visibleTextEditors[0]?.viewColumn ??
+              vscode.ViewColumn.One,
+          });
+        }
       }
     );
     context.subscriptions.push(disposable);
@@ -280,6 +297,13 @@ export class Ignition {
     context.subscriptions.push(fsWatcher);
   }
 
+  registerIgnitionEditor(editorPanel: EditorPanel) {
+    this.#openIgnitionEditors.add(editorPanel);
+    editorPanel.onDidDispose(() => {
+      this.#openIgnitionEditors.delete(editorPanel);
+    });
+  }
+
   async deactivate() {
     // Clean up any resources
     logChannel.appendLine('Deactivating Ignition');

packages/labs/ignition/src/lib/stories.ts

@@ -37,12 +37,12 @@ export const getStoriesModule = (
   }
 };
 
-export const getStoriesModuleForElement = (
+export const getModuleInfoForElement = (
   element: LitElementDeclaration,
   analyzer: Analyzer
 ) => {
   const elementDocumentUri = getDocumentUriForElement(element);
   const modulePath = elementDocumentUri.fsPath as AbsolutePath;
   const storiesModule = getStoriesModule(modulePath, analyzer);
-  return storiesModule;
+  return {storiesModule, elementDocumentUri};
 };