first draft of outline provider

Author: jogibear9988

src/vscode/DesignerOutlineProvider.ts

@@ -0,0 +1,33 @@
+import * as vscode from 'vscode';
+
+export class DesignerOutlineProvider implements vscode.CustomEditorOutlineProvider {
+  private readonly _onDidChangeOutline = new vscode.EventEmitter<void>();
+  readonly onDidChangeOutline = this._onDidChangeOutline.event;
+
+  private readonly _onDidChangeActiveItem = new vscode.EventEmitter<string | undefined>();
+  readonly onDidChangeActiveItem = this._onDidChangeActiveItem.event;
+
+  private _items: vscode.CustomEditorOutlineItem[] = [];
+  private _webview: vscode.Webview | undefined;
+
+  setWebview(webview: vscode.Webview): void {
+    this._webview = webview;
+  }
+
+  updateItems(items: vscode.CustomEditorOutlineItem[]): void {
+    this._items = items;
+    this._onDidChangeOutline.fire();
+  }
+
+  setActive(itemId: string | undefined): void {
+    this._onDidChangeActiveItem.fire(itemId);
+  }
+
+  provideOutline(_token: vscode.CancellationToken): vscode.CustomEditorOutlineItem[] {
+    return this._items;
+  }
+
+  revealItem(itemId: string): void {
+    this._webview?.postMessage({ type: 'reveal', id: itemId });
+  }
+}

src/vscode/DesignerTextEditor.ts

@@ -1,4 +1,5 @@
 import * as vscode from 'vscode';
+import { DesignerOutlineProvider } from './DesignerOutlineProvider.js';
 
 export function getNonce() {
 	let text = '';
@@ -11,19 +12,21 @@ export function getNonce() {
 
 export class DesignerTextEditor implements vscode.CustomTextEditorProvider {
 
-	public static register(context: vscode.ExtensionContext): vscode.Disposable {
-		const provider = new DesignerTextEditor(context);
+	public static register(context: vscode.ExtensionContext): vscode.Disposable[] {
+		let outlineProvider = new DesignerOutlineProvider();
+		const provider = new DesignerTextEditor(context, outlineProvider);
 		const providerRegistration = vscode.window.registerCustomEditorProvider(DesignerTextEditor.viewType, provider, {
 			webviewOptions: {
 				retainContextWhenHidden: true
 			}
 		});
-		return providerRegistration;
+		const outlineRegistration = vscode.window.registerCustomEditorOutlineProvider('designer.visualEditor', outlineProvider)
+		return [providerRegistration, outlineRegistration];
 	}
 
 	private static readonly viewType = 'designer.designerTextEditor';
 
-	constructor(private readonly context: vscode.ExtensionContext) { }
+	constructor(private readonly context: vscode.ExtensionContext, private readonly outline: DesignerOutlineProvider) { }
 
 	public async addCustomElementsJsons(webviewPanel: vscode.WebviewPanel) {
 		//TODO:
@@ -141,6 +144,32 @@ export class DesignerTextEditor implements vscode.CustomTextEditorProvider {
 					return;
 			}
 		});
+
+		this.outline.setWebview(webviewPanel.webview);
+
+		// Provide some initial outline items
+		this.outline.updateItems([
+			{
+				id: 'root',
+				label: 'Canvas',
+				icon: new vscode.ThemeIcon('layout'),
+				contextValue: 'canvas',
+				children: [
+					{
+						id: 'btn-1',
+						label: 'Button',
+						icon: new vscode.ThemeIcon('symbol-event'),
+						contextValue: 'widget',
+					},
+					{
+						id: 'input-1',
+						label: 'Text Input',
+						icon: new vscode.ThemeIcon('symbol-field'),
+						contextValue: 'widget',
+					},
+				],
+			},
+		]);
 	}
 
 	/**

src/vscode/extension.ts

@@ -4,7 +4,7 @@ import { DesignerTextEditor } from './DesignerTextEditor.js';
 export function activate(context: vscode.ExtensionContext) {
 	//context.subscriptions.push(
 	//	vscode.window.registerWebviewViewProvider(ColorsViewProvider.viewType, provider));
-	context.subscriptions.push(DesignerTextEditor.register(context));
+	context.subscriptions.push(...DesignerTextEditor.register(context));
 
 	vscode.commands.registerCommand('designer.openInDesignerTextEditor', (uri: vscode.Uri) => {
 		vscode.commands.executeCommand('vscode.openWith', uri, 'designer.designerTextEditor');