@codingame/monaco-vscode-media-preview-default-extension 29.1.1 → 30.0.0

package/index.js

@@ -11,9 +11,9 @@ registerFileUrl('icon.png', new URL('./resources/icon.png', import.meta.url).toS
 registerFileUrl('media/audioPreview', new URL('./resources/audioPreview.js', import.meta.url).toString(), {"mimeType":"text/javascript","size":1722});
 registerFileUrl('media/audioPreview.css', new URL('./resources/audioPreview.css.txt', import.meta.url).toString(), {"mimeType":"text/css","size":1183});
 registerFileUrl('media/audioPreview.js', new URL('./resources/audioPreview.js', import.meta.url).toString(), {"mimeType":"text/javascript","size":1722});
-registerFileUrl('media/imagePreview', new URL('./resources/imagePreview.js', import.meta.url).toString(), {"mimeType":"text/javascript","size":8577});
-registerFileUrl('media/imagePreview.css', new URL('./resources/imagePreview.css.txt', import.meta.url).toString(), {"mimeType":"text/css","size":2471});
-registerFileUrl('media/imagePreview.js', new URL('./resources/imagePreview.js', import.meta.url).toString(), {"mimeType":"text/javascript","size":8577});
+registerFileUrl('media/imagePreview', new URL('./resources/imagePreview.js', import.meta.url).toString(), {"mimeType":"text/javascript","size":9397});
+registerFileUrl('media/imagePreview.css', new URL('./resources/imagePreview.css.txt', import.meta.url).toString(), {"mimeType":"text/css","size":2147});
+registerFileUrl('media/imagePreview.js', new URL('./resources/imagePreview.js', import.meta.url).toString(), {"mimeType":"text/javascript","size":9397});
 registerFileUrl('media/loading-dark.svg', new URL('./resources/loading-dark.svg', import.meta.url).toString(), {"mimeType":"image/svg+xml","size":1163});
 registerFileUrl('media/loading-hc.svg', new URL('./resources/loading-hc.svg', import.meta.url).toString(), {"mimeType":"image/svg+xml","size":1164});
 registerFileUrl('media/loading.svg', new URL('./resources/loading.svg', import.meta.url).toString(), {"mimeType":"image/svg+xml","size":1144});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codingame/monaco-vscode-media-preview-default-extension",
-  "version": "29.1.1",
+  "version": "30.0.0",
   "keywords": [],
   "author": {
     "name": "CodinGame",
@@ -18,6 +18,6 @@
   "module": "index.js",
   "types": "index.d.ts",
   "dependencies": {
-    "@codingame/monaco-vscode-api": "29.1.1"
+    "@codingame/monaco-vscode-api": "30.0.0"
   }
 }

package/resources/imagePreview.css.txt

@@ -33,21 +33,16 @@ body img {
 
 .container.image img {
 	padding: 0;
-	background-position: 0 0, 8px 8px;
 	background-size: 16px 16px;
 	border: 1px solid var(--vscode-imagePreview-border);
 }
 
 .container.image img {
-	background-image:
-		linear-gradient(45deg, rgb(230, 230, 230) 25%, transparent 25%, transparent 75%, rgb(230, 230, 230) 75%, rgb(230, 230, 230)),
-		linear-gradient(45deg, rgb(230, 230, 230) 25%, transparent 25%, transparent 75%, rgb(230, 230, 230) 75%, rgb(230, 230, 230));
+	background-image: conic-gradient(rgb(230, 230, 230) 25%, transparent 25% 50%, rgb(230, 230, 230) 50% 75%, transparent 75%);
 }
 
 .vscode-dark.container.image img {
-	background-image:
-		linear-gradient(45deg, rgb(20, 20, 20) 25%, transparent 25%, transparent 75%, rgb(20, 20, 20) 75%, rgb(20, 20, 20)),
-		linear-gradient(45deg, rgb(20, 20, 20) 25%, transparent 25%, transparent 75%, rgb(20, 20, 20) 75%, rgb(20, 20, 20));
+	background-image: conic-gradient(rgb(20, 20, 20) 25%, transparent 25% 50%, rgb(20, 20, 20) 50% 75%, transparent 75%);
 }
 
 .container img.pixelated {

package/resources/imagePreview.js

@@ -89,6 +89,9 @@
 			image.classList.remove('pixelated');
 			// @ts-ignore Non-standard CSS property
 			image.style.zoom = 'normal';
+			// Clear explicit dimensions so the image can scale-to-fit naturally
+			image.style.minWidth = '';
+			image.style.minHeight = '';
 			vscode.setState(undefined);
 		} else {
 			scale = clamp(newScale, MIN_SCALE, MAX_SCALE);
@@ -102,6 +105,17 @@
 			const dy = (window.scrollY + container.clientHeight / 2) / container.scrollHeight;
 
 			image.classList.remove('scale-to-fit');
+
+			// For images without intrinsic dimensions (e.g. SVGs with only
+			// a viewBox), set explicit pixel dimensions so that CSS zoom has
+			// something concrete to scale.
+			if (!image.naturalWidth || !image.naturalHeight) {
+				const baseWidth = image.clientWidth || container.clientWidth;
+				const baseHeight = image.clientHeight || container.clientHeight;
+				image.style.minWidth = baseWidth + 'px';
+				image.style.minHeight = baseHeight + 'px';
+			}
+
 			// @ts-ignore Non-standard CSS property
 			image.style.zoom = scale;
 
@@ -142,7 +156,14 @@
 			return;
 		}
 
-		scale = image.clientWidth / image.naturalWidth;
+		if (image.naturalWidth) {
+			scale = image.clientWidth / image.naturalWidth;
+		} else {
+			// For images without intrinsic dimensions (e.g. SVGs with
+			// only a viewBox), start at 1x since there is no meaningful
+			// natural size to compute a ratio from.
+			scale = 1;
+		}
 		updateScale(scale);
 	}