Fixed: Image preview should not zoom on first click if unfocused (#82074)

* Fixed a bug where first click on an unfocused image preview would zoom

* added two spaces

* removed unnecessary state variable

* User now has ability to enter zoom-out mode on first click

* removed some code that was not needed

* removed useless if statement

extensions/image-preview/media/main.js

@@ -70,6 +70,7 @@
 	let ctrlPressed = false;
 	let altPressed = false;
 	let hasLoadedImage = false;
+	let consumeClick = false;
 
 	// Elements
 	const container = document.body;
@@ -116,6 +117,18 @@
 		});
 	}
 
+	function changeActive(value) {
+		if (value) {
+			container.classList.add('zoom-in');
+			consumeClick = true;
+		} else {
+			ctrlPressed = false;
+			altPressed = false;
+			container.classList.remove('zoom-out');
+			container.classList.remove('zoom-in');
+		}
+	}
+
 	function firstZoom() {
 		if (!image || !hasLoadedImage) {
 			return;
@@ -152,6 +165,18 @@
 		}
 	});
 
+	container.addEventListener('mousedown', (/** @type {MouseEvent} */ e) => {
+		if (!image || !hasLoadedImage) {
+			return;
+		}
+
+		if (e.button !== 0) {
+			return;
+		}
+
+		consumeClick = false;
+	});
+
 	container.addEventListener('click', (/** @type {MouseEvent} */ e) => {
 		if (!image || !hasLoadedImage) {
 			return;
@@ -161,6 +186,18 @@
 			return;
 		}
 
+		ctrlPressed = e.ctrlKey;
+		altPressed = e.altKey;
+
+		if (isMac ? altPressed : ctrlPressed) {
+			container.classList.remove('zoom-in');
+			container.classList.add('zoom-out');
+		}
+
+		if (consumeClick) {
+			consumeClick = false;
+			return;
+		}
 		// left click
 		if (scale === 'fit') {
 			firstZoom();
@@ -218,7 +255,6 @@
 	});
 
 	container.classList.add('image');
-	container.classList.add('zoom-in');
 
 	image.classList.add('scale-to-fit');
 
@@ -254,6 +290,9 @@
 			case 'setScale':
 				updateScale(e.data.scale);
 				break;
+			case 'setActive':
+				changeActive(e.data.value);
+				break;
 		}
 	});
 }());

extensions/image-preview/src/preview.ts

@@ -120,6 +120,7 @@ export class Preview extends Disposable {
 			}
 			this._previewState = PreviewState.Visible;
 		}
+		this.webviewEditor.webview.postMessage({ type: 'setActive', value: this.webviewEditor.active });
 	}
 
 	private getWebiewContents(): string {