Add emulator setting to allow more control over screen scaling

Allows explicit control over scaling vs. nearest-neighbor scaling
(the current automatic behavior remains the default).

Fixes #174

Author: mihaip

src/Mac.tsx

@@ -404,8 +404,7 @@ export default function Mac({
             <div
                 className={classNames("Mac-Loading", {
                     "Mac-Loading-Non-Modal": emulatorLoaded,
-                })}
-            >
+                })}>
                 Loading CD-ROM…
                 <span className="Mac-Loading-Fraction">
                     {(emulatorCDROMLoadingProgress * 100).toFixed(0)}%
@@ -557,10 +556,24 @@ export default function Mac({
     }
 
     const devicePixelRatio = useDevicePixelRatio();
+    let smoothScaling;
+    const {screenScaling = "auto"} = emulatorSettings;
+    switch (screenScaling) {
+        case "auto":
+            smoothScaling =
+                screenSizeProp === "auto" &&
+                (fullscreen ||
+                    devicePixelRatio !== Math.floor(devicePixelRatio));
+            break;
+        case "pixelated":
+            smoothScaling = false;
+            break;
+        case "smooth":
+            smoothScaling = true;
+            break;
+    }
     const screenClassName = classNames("Mac-Screen", {
-        "Mac-Screen-Smooth-Scaling":
-            screenSizeProp === "auto" &&
-            (fullscreen || devicePixelRatio !== Math.floor(devicePixelRatio)),
+        "Mac-Screen-Smooth-Scaling": smoothScaling,
     });
 
     return (
@@ -612,8 +625,7 @@ export default function Mac({
                             />
                         )}
                     </>
-                }
-            >
+                }>
                 {progress}
                 {dragCount > 0 && (
                     <div
@@ -873,8 +885,7 @@ function MacEthernetStatus({
     return (
         <div
             className="Mac-Ethernet-Status"
-            onClick={() => setExpanded(!expanded)}
-        >
+            onClick={() => setExpanded(!expanded)}>
             <div className="ScreenFrame-Bezel-Text">{text}</div>
             {details}
         </div>
@@ -895,8 +906,7 @@ function MacError({
             appearance={appearance}
             title="Emulator Error"
             onDone={onDone}
-            doneLabel="Bummer"
-        >
+            doneLabel="Bummer">
             <p style={{whiteSpace: "pre-line"}}>{text}</p>
         </Dialog>
     );

src/MacSettings.tsx

@@ -1,5 +1,8 @@
 import {useCallback, useEffect, useState} from "react";
-import {type EmulatorSettings} from "./emulator/emulator-ui";
+import {
+    type EmulatorScreenScaling,
+    type EmulatorSettings,
+} from "./emulator/emulator-ui";
 import {
     type EmulatorSpeed,
     type EmulatorType,
@@ -65,6 +68,7 @@ export function MacSettings({
     const [storageExportVisible, setStorageExportVisible] = useState(false);
     const [storageImportVisible, setStorageImportVisible] = useState(false);
     const [saveImageVisible, setSaveImageVisible] = useState(false);
+    const {screenScaling = "auto"} = emulatorSettings;
 
     return (
         <Dialog title="Settings" onDone={onDone} appearance={appearance}>
@@ -122,8 +126,7 @@ export function MacSettings({
                                     event.target.value
                                 ) as EmulatorSpeed,
                             })
-                        }
-                    >
+                        }>
                         {Array.from(
                             EMULATOR_SPEEDS.entries(),
                             ([speed, label]) => (
@@ -139,15 +142,36 @@ export function MacSettings({
                     </div>
                 </label>
             )}
+            <div className="MacSettings-Row">
+                <div className="MacSettings-Row-Label">Scaling:</div>
+                <Select
+                    appearance={appearance}
+                    value={screenScaling}
+                    onChange={e => {
+                        const screenScaling = e.target
+                            .value as EmulatorScreenScaling;
+                        setEmulatorSettings({
+                            ...emulatorSettings,
+                            screenScaling,
+                        });
+                    }}>
+                    <option value="auto">Auto</option>
+                    <option value="smooth">Smooth</option>
+                    <option value="pixelated">Crisp</option>
+                </Select>
+                <div className="Dialog-Description">
+                    Preferred scaling method when displaying the Mac screen at
+                    non-native sizes.
+                </div>
+            </div>
             {hasSavedHD && (
                 <>
                     <h2>Saved HD</h2>
                     <div className="MacSettings-Row">
                         <div className="MacSettings-Row-Label">Contents:</div>
                         <Button
                             appearance={appearance}
-                            onClick={() => setStorageExportVisible(true)}
-                        >
+                            onClick={() => setStorageExportVisible(true)}>
                             Export…
                         </Button>
                         <StorageConfirmDialog
@@ -163,8 +187,7 @@ export function MacSettings({
                         />{" "}
                         <Button
                             appearance={appearance}
-                            onClick={() => setStorageImportVisible(true)}
-                        >
+                            onClick={() => setStorageImportVisible(true)}>
                             Import…
                         </Button>
                         <StorageConfirmDialog
@@ -180,8 +203,7 @@ export function MacSettings({
                         />{" "}
                         <Button
                             appearance={appearance}
-                            onClick={() => setStorageResetVisible(true)}
-                        >
+                            onClick={() => setStorageResetVisible(true)}>
                             Reset
                         </Button>
                         <StorageConfirmDialog
@@ -206,8 +228,7 @@ export function MacSettings({
                         <div className="MacSettings-Row-Label" />
                         <Button
                             appearance={appearance}
-                            onClick={() => setSaveImageVisible(true)}
-                        >
+                            onClick={() => setSaveImageVisible(true)}>
                             Save Disk Image…
                         </Button>
                         <StorageConfirmDialog
@@ -242,8 +263,7 @@ export function MacSettings({
                                 {" "}
                                 <Button
                                     appearance={appearance}
-                                    onClick={handleRequestPersistence}
-                                >
+                                    onClick={handleRequestPersistence}>
                                     Request Persistence
                                 </Button>
                             </>
@@ -253,8 +273,7 @@ export function MacSettings({
                             HD data even when running low on disk space (
                             <a
                                 href="https://web.dev/persistent-storage/"
-                                target="_blank"
-                            >
+                                target="_blank">
                                 more info
                             </a>
                             ).
@@ -299,8 +318,7 @@ function StorageConfirmDialog({
             onOther={onOther}
             otherLabel={otherLabel}
             onCancel={() => setVisible(false)}
-            appearance={appearance}
-        >
+            appearance={appearance}>
             <div style={{maxWidth: 400}}>{body}</div>
         </Dialog>
     );

src/emulator/emulator-ui.ts

@@ -90,11 +90,14 @@ export type EmulatorConfig = {
     debugTrackpad?: boolean;
 };
 
+export type EmulatorScreenScaling = "auto" | "smooth" | "pixelated";
+
 export type EmulatorSettings = {
     swapControlAndCommand: boolean;
     speed: EmulatorSpeed;
     useMouseDeltas: boolean;
     trackpadMode: boolean;
+    screenScaling?: EmulatorScreenScaling;
 };
 
 export interface EmulatorEthernetProvider {