Replace JPEG with PNG with background for export-as-image (#19305)

## Description
Replace JPEG with PNG (with optional background) for the visual
designer's export-as-image feature.

## Changes
- Replace `ExportFormat` (`png` | `jpeg`) with `ExportBackgroundMode`
(`transparent` | `solid`) to let users choose the background style
instead of the file format.
- Always export as PNG (with 2x pixel ratio for retina quality),
removing JPEG support and the `toJpeg` import from `html-to-image`.
- Simplify `captureGraphElement` and `saveDataUrl` by removing the
format parameter; background color is now passed as `undefined` for
transparent mode.
- Update the export toolbar UI:
- Replace the Format dropdown with a Background dropdown (Transparent /
Solid).
  - Shorten high-contrast theme labels to `Dark HC` and `Light HC`.
  - Rename the export button from `Save As` to `Export`.
- Clean up removed constants (`FORMAT_MIME`, `FORMAT_DESC`,
`DEFAULT_EXPORT_FORMAT`) and update atom/type exports.
###### Microsoft Reviewers: [Open in
CodeFlow](https://microsoft.github.io/open-pr/?codeflow=https://github.com/Azure/bicep/pull/19305)

Author: shenglol

src/vscode-bicep-ui/apps/visual-designer/src/features/export/ExportToolbar.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 import type { DefaultTheme } from "styled-components";
-import type { ExportFormat } from "./types";
+import type { ExportBackgroundMode } from "./types";
 
 import { Codicon } from "@vscode-bicep-ui/components";
 import { VscodeOption, VscodeSingleSelect } from "@vscode-elements/react-elements";
@@ -12,9 +12,9 @@ import { styled } from "styled-components";
 import {
   closeExportOverlayAtom,
   exportBackgroundColorAtom,
+  exportBackgroundModeAtom,
   exportCanvasElementAtom,
   exportFileStemAtom,
-  exportFormatAtom,
   exportPaddingAtom,
   exportThemeOverrideAtom,
   isExportInProgressAtom,
@@ -50,12 +50,12 @@ const $ActionsGroup = styled($Group)`
   margin-left: auto;
 `;
 
-const $FormatSelect = styled(VscodeSingleSelect)`
-  width: 62px;
+const $BackgroundSelect = styled(VscodeSingleSelect)`
+  width: 100px;
 `;
 
 const $ThemeSelect = styled(VscodeSingleSelect)`
-  width: 140px;
+  width: 100px;
 `;
 
 const $Separator = styled.div`
@@ -144,6 +144,10 @@ const $Label = styled.label`
   white-space: nowrap;
 `;
 
+const $BackgroundLabel = styled($Label)`
+  margin-left: 4px;
+`;
+
 /* ---- Padding stepper -------------------------------------------- */
 
 const $StepperGroup = styled.div`
@@ -213,14 +217,17 @@ const $PaddingInput = styled.input`
 /*  Constants                                                          */
 /* ------------------------------------------------------------------ */
 
-const FORMATS: ExportFormat[] = ["png", "jpeg"];
+const BACKGROUND_OPTIONS: { label: string; value: ExportBackgroundMode }[] = [
+  { label: "Transparent", value: "transparent" },
+  { label: "Solid", value: "solid" },
+];
 
 const THEME_OPTIONS: { label: string; value: DefaultTheme["name"] | null }[] = [
   { label: "Current", value: null },
   { label: "Light", value: "light" },
   { label: "Dark", value: "dark" },
-  { label: "High Contrast", value: "high-contrast" },
-  { label: "High Contrast Light", value: "high-contrast-light" },
+  { label: "Dark HC", value: "high-contrast" },
+  { label: "Light HC", value: "high-contrast-light" },
 ];
 
 const STEP = 10;
@@ -232,13 +239,13 @@ const STEP = 10;
 export function ExportToolbar() {
   const store = useStore();
   const canvasElement = useAtomValue(exportCanvasElementAtom);
-  const format = useAtomValue(exportFormatAtom);
+  const backgroundMode = useAtomValue(exportBackgroundModeAtom);
   const padding = useAtomValue(exportPaddingAtom);
   const exportThemeName = useAtomValue(exportThemeOverrideAtom);
   const exportFileStem = useAtomValue(exportFileStemAtom);
   const exportBackgroundColor = useAtomValue(exportBackgroundColorAtom);
   const exporting = useAtomValue(isExportInProgressAtom);
-  const setFormat = useSetAtom(exportFormatAtom);
+  const setBackgroundMode = useSetAtom(exportBackgroundModeAtom);
   const setTheme = useSetAtom(exportThemeOverrideAtom);
   const setPadding = useSetAtom(exportPaddingAtom);
   const setExportInProgress = useSetAtom(isExportInProgressAtom);
@@ -252,15 +259,16 @@ export function ExportToolbar() {
     setExportInProgress(true);
 
     try {
-      const dataUrl = await captureGraphElement(canvasElement, store, format, padding, exportBackgroundColor);
+      const backgroundColor = backgroundMode === "solid" ? exportBackgroundColor : undefined;
+      const dataUrl = await captureGraphElement(canvasElement, store, padding, backgroundColor);
       const fileStem = exportFileStem.trim() || "bicep-graph";
-      await saveDataUrl(dataUrl, `${fileStem}.${format}`, format);
+      await saveDataUrl(dataUrl, `${fileStem}.png`);
     } catch (error) {
       console.error("Export failed:", error);
     } finally {
       setExportInProgress(false);
     }
-  }, [canvasElement, exporting, setExportInProgress, store, format, padding, exportBackgroundColor, exportFileStem]);
+  }, [canvasElement, exporting, setExportInProgress, store, backgroundMode, padding, exportBackgroundColor, exportFileStem]);
 
   const [paddingText, setPaddingText] = useState(String(padding));
 
@@ -297,11 +305,11 @@ export function ExportToolbar() {
     [padding, setPadding],
   );
 
-  const handleFormatSelect = useCallback(
+  const handleBackgroundSelect = useCallback(
     (e: Event) => {
-      setFormat((e.currentTarget as HTMLSelectElement).value as ExportFormat);
+      setBackgroundMode((e.currentTarget as HTMLSelectElement).value as ExportBackgroundMode);
     },
-    [setFormat],
+    [setBackgroundMode],
   );
 
   const handleThemeSelect = useCallback(
@@ -314,16 +322,16 @@ export function ExportToolbar() {
 
   return (
     <$Toolbar role="toolbar" aria-label="Export settings">
-      {/* Format */}
+      {/* Background */}
       <$Group>
-        <$Label>Format</$Label>
-        <$FormatSelect onChange={handleFormatSelect}>
-          {FORMATS.map((f) => (
-            <VscodeOption key={f} value={f} selected={f === format}>
-              {f.toUpperCase()}
+        <$BackgroundLabel>Background</$BackgroundLabel>
+        <$BackgroundSelect onChange={handleBackgroundSelect}>
+          {BACKGROUND_OPTIONS.map((bg) => (
+            <VscodeOption key={bg.value} value={bg.value} selected={bg.value === backgroundMode}>
+              {bg.label}
             </VscodeOption>
           ))}
-        </$FormatSelect>
+        </$BackgroundSelect>
       </$Group>
 
       <$Separator />
@@ -368,8 +376,7 @@ export function ExportToolbar() {
 
       <$ActionsGroup>
         <$ExportButton onClick={handleExport} disabled={exporting}>
-          <Codicon name="desktop-download" size={13} />
-          {exporting ? "Saving\u2026" : "Save As"}
+          {exporting ? "Exporting\u2026" : "Export"}
         </$ExportButton>
         <$IconButton onClick={() => closeExportOverlay()} title="Close" aria-label="Close export toolbar">
           <Codicon name="close" size={14} />

src/vscode-bicep-ui/apps/visual-designer/src/features/export/atoms.ts

@@ -2,18 +2,17 @@
 // Licensed under the MIT License.
 
 import type { DefaultTheme } from "styled-components";
-import type { ExportFormat } from "./types";
+import type { ExportBackgroundMode } from "./types";
 
 import { atom } from "jotai";
 import { activeThemeAtom, getThemeByName } from "@/lib/theming";
 
 export const DEFAULT_EXPORT_FILE_STEM = "bicep-graph";
 export const DEFAULT_EXPORT_PADDING = 40;
-export const DEFAULT_EXPORT_FORMAT: ExportFormat = "png";
 
 export const isExportOverlayOpenAtom = atom(false);
 export const exportPaddingAtom = atom(DEFAULT_EXPORT_PADDING);
-export const exportFormatAtom = atom<ExportFormat>(DEFAULT_EXPORT_FORMAT);
+export const exportBackgroundModeAtom = atom<ExportBackgroundMode>("transparent");
 export const exportThemeOverrideAtom = atom<DefaultTheme["name"] | null>(null);
 export const exportFileStemAtom = atom(DEFAULT_EXPORT_FILE_STEM);
 export const isExportInProgressAtom = atom(false);
@@ -30,7 +29,7 @@ export const exportBackgroundColorAtom = atom((get) => get(effectiveExportThemeA
 export const isExportPreviewVisibleAtom = atom((get) => get(isExportOverlayOpenAtom));
 
 export const isExportCanvasCoverVisibleAtom = atom(
-  (get) => get(isExportOverlayOpenAtom) && get(exportFormatAtom) === "jpeg",
+  (get) => get(isExportOverlayOpenAtom) && get(exportBackgroundModeAtom) === "solid",
 );
 
 export const openExportOverlayAtom = atom(null, (_, set) => {

src/vscode-bicep-ui/apps/visual-designer/src/features/export/capture-element.ts

@@ -1,9 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import type { ExportFormat } from "./types";
-
-import { toJpeg, toPng } from "html-to-image";
+import { toPng } from "html-to-image";
 import { getDefaultStore } from "jotai";
 import { nodesByIdAtom } from "@/lib/graph";
 
@@ -76,9 +74,8 @@ function findTransformedElement(root: HTMLElement): HTMLElement | null {
 export async function captureGraphElement(
   canvasElement: HTMLElement,
   store: Store,
-  format: ExportFormat,
   padding: number,
-  backgroundColor: string,
+  backgroundColor: string | undefined,
 ): Promise<string> {
   const bounds = computeGraphBounds(store);
   if (!bounds) throw new Error("No graph nodes to export");
@@ -131,7 +128,8 @@ export async function captureGraphElement(
     const options = {
       width: captureWidth,
       height: captureHeight,
-      backgroundColor: format === "jpeg" ? backgroundColor : undefined,
+      backgroundColor,
+      pixelRatio: 2,
       filter: (node: HTMLElement) => {
         // Exclude the dot-pattern background SVGs from the export.
         if (node.tagName === "svg" && node.querySelector?.("pattern")) {
@@ -141,33 +139,12 @@ export async function captureGraphElement(
       },
     };
 
-    switch (format) {
-      case "png":
-        return await toPng(clone, { ...options, pixelRatio: 2 });
-      case "jpeg":
-        return await toJpeg(clone, {
-          ...options,
-          quality: 0.95,
-          backgroundColor,
-        });
-    }
+    return await toPng(clone, options);
   } finally {
     document.body.removeChild(wrapper);
   }
 }
 
-/** MIME types for each export format. */
-const FORMAT_MIME: Record<ExportFormat, string> = {
-  png: "image/png",
-  jpeg: "image/jpeg",
-};
-
-/** File extension descriptions for the Save dialog. */
-const FORMAT_DESC: Record<ExportFormat, string> = {
-  png: "PNG Image",
-  jpeg: "JPEG Image",
-};
-
 /**
  * Convert a data-URL to a Blob.
  */
@@ -194,7 +171,7 @@ function dataUrlToBlob(dataUrl: string): Blob {
  * Falls back to a direct download if the File System Access API
  * is not available (e.g. non-Chromium browsers).
  */
-export async function saveDataUrl(dataUrl: string, defaultName: string, format: ExportFormat): Promise<void> {
+export async function saveDataUrl(dataUrl: string, defaultName: string): Promise<void> {
   const blob = dataUrlToBlob(dataUrl);
 
   // Try the File System Access API (Chromium-based browsers).
@@ -204,8 +181,8 @@ export async function saveDataUrl(dataUrl: string, defaultName: string, format:
         suggestedName: defaultName,
         types: [
           {
-            description: FORMAT_DESC[format],
-            accept: { [FORMAT_MIME[format]]: [`.${format}`] },
+            description: "PNG Image",
+            accept: { "image/png": [".png"] },
           },
         ],
       });

src/vscode-bicep-ui/apps/visual-designer/src/features/export/index.ts

@@ -5,4 +5,4 @@ export { ExportAreaCover } from "./ExportAreaCover";
 export { ExportAreaPreview } from "./ExportAreaPreview";
 export { ExportOverlay } from "./ExportOverlay";
 export * from "./atoms";
-export type { ExportFormat } from "./types";
+export type { ExportBackgroundMode } from "./types";

src/vscode-bicep-ui/apps/visual-designer/src/features/export/types.ts

@@ -1,4 +1,4 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-export type ExportFormat = "png" | "jpeg";
+export type ExportBackgroundMode = "transparent" | "solid";