Merge from vscode f5d3ffa6a0d655c87e1eb0e1e90773df58f7ff25 (#7929)

* Merge from vscode f5d3ffa6a0d655c87e1eb0e1e90773df58f7ff25

* fix launch script

* add missing files

extensions/image-preview/src/extension.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as vscode from 'vscode';
-import { Preview } from './preview';
+import { PreviewManager } from './preview';
 import { SizeStatusBarEntry } from './sizeStatusBarEntry';
 import { ZoomStatusBarEntry } from './zoomStatusBarEntry';
 
@@ -17,12 +17,22 @@ export function activate(context: vscode.ExtensionContext) {
 	const zoomStatusBarEntry = new ZoomStatusBarEntry();
 	context.subscriptions.push(zoomStatusBarEntry);
 
+	const previewManager = new PreviewManager(extensionRoot, sizeStatusBarEntry, zoomStatusBarEntry);
+
 	context.subscriptions.push(vscode.window.registerWebviewEditorProvider(
-		Preview.viewType,
+		PreviewManager.viewType,
 		{
 			async resolveWebviewEditor(resource: vscode.Uri, editor: vscode.WebviewEditor): Promise<void> {
-				// tslint:disable-next-line: no-unused-expression
-				new Preview(extensionRoot, resource, editor, sizeStatusBarEntry, zoomStatusBarEntry);
+				previewManager.resolve(resource, editor);
 			}
 		}));
+
+	context.subscriptions.push(vscode.commands.registerCommand('imagePreview.zoomIn', () => {
+		previewManager.activePreview?.zoomIn();
+	}));
+
+	context.subscriptions.push(vscode.commands.registerCommand('imagePreview.zoomOut', () => {
+		previewManager.activePreview?.zoomOut();
+	}));
 }
+

extensions/image-preview/src/preview.ts

@@ -11,15 +11,58 @@ import { Scale, ZoomStatusBarEntry } from './zoomStatusBarEntry';
 
 const localize = nls.loadMessageBundle();
 
+
+export class PreviewManager {
+
+	public static readonly viewType = 'imagePreview.previewEditor';
+
+	private readonly _previews = new Set<Preview>();
+	private _activePreview: Preview | undefined;
+
+	constructor(
+		private readonly extensionRoot: vscode.Uri,
+		private readonly sizeStatusBarEntry: SizeStatusBarEntry,
+		private readonly zoomStatusBarEntry: ZoomStatusBarEntry,
+	) { }
+
+	public resolve(
+		resource: vscode.Uri,
+		webviewEditor: vscode.WebviewEditor,
+	) {
+		const preview = new Preview(this.extensionRoot, resource, webviewEditor, this.sizeStatusBarEntry, this.zoomStatusBarEntry);
+		this._previews.add(preview);
+		this.setActivePreview(preview);
+
+		webviewEditor.onDidDispose(() => { this._previews.delete(preview); });
+
+		webviewEditor.onDidChangeViewState(() => {
+			if (webviewEditor.active) {
+				this.setActivePreview(preview);
+			} else if (this._activePreview === preview && !webviewEditor.active) {
+				this.setActivePreview(undefined);
+			}
+		});
+	}
+
+	public get activePreview() { return this._activePreview; }
+
+	private setActivePreview(value: Preview | undefined): void {
+		this._activePreview = value;
+		this.setPreviewActiveContext(!!value);
+	}
+
+	private setPreviewActiveContext(value: boolean) {
+		vscode.commands.executeCommand('setContext', 'imagePreviewFocus', value);
+	}
+}
+
 const enum PreviewState {
 	Disposed,
 	Visible,
 	Active,
 }
 
-export class Preview extends Disposable {
-
-	public static readonly viewType = 'imagePreview.previewEditor';
+class Preview extends Disposable {
 
 	private readonly id: string = `${Date.now()}-${Math.random().toString()}`;
 
@@ -98,6 +141,18 @@ export class Preview extends Disposable {
 		this.update();
 	}
 
+	public zoomIn() {
+		if (this._previewState === PreviewState.Active) {
+			this.webviewEditor.webview.postMessage({ type: 'zoomIn' });
+		}
+	}
+
+	public zoomOut() {
+		if (this._previewState === PreviewState.Active) {
+			this.webviewEditor.webview.postMessage({ type: 'zoomOut' });
+		}
+	}
+
 	private render() {
 		if (this._previewState !== PreviewState.Disposed) {
 			this.webviewEditor.webview.html = this.getWebiewContents();