v8.1.15: fix for #320, #321

index.html

@@ -60,6 +60,9 @@
               // props.setFullScreen(true);
             }
           },
+          // renderAspect: "1/1",
+          // renderBackend: "webgl",
+          // imageRendering: "smooth",
         });
     });
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-dos",
-  "version": "8.1.14",
+  "version": "8.1.15",
   "description": "Full-featured DOS player with multiple emulator backends",
   "type": "module",
   "keywords": [

src/main.tsx

@@ -3,15 +3,15 @@ import "./index.css";
 
 import { Provider } from "react-redux";
 import { Ui } from "./ui";
-import { dosSlice } from "./store/dos";
+import { dosSlice, RenderAspect } from "./store/dos";
 import { initEmulators } from "./store/dos";
 // eslint-disable-next-line
 import { uiSlice } from "./store/ui";
 import { i18nSlice } from "./i18n";
 import { getCache } from "./host/lcache";
 import { loadBundleFromConfg, loadBundleFromUrl } from "./load";
 
-import { DosOptions, DosProps, DosFn } from "./public/types";
+import { DosOptions, DosProps, DosFn, ImageRendering, RenderBackend } from "./public/types";
 import { browserSetFullScreen } from "./host/fullscreen";
 import { NonSerializableStore, Store, makeNonSerializableStore, makeStore, postJsDosEvent } from "./store";
 import { authSlice } from "./store/auth";
@@ -122,6 +122,18 @@ export const Dos: DosFn = (element: HTMLDivElement,
         store.dispatch(uiSlice.actions.kiosk(kiosk));
     }
 
+    function setImageRendering(imageRendering: ImageRendering) {
+        store.dispatch(dosSlice.actions.imageRendering(imageRendering));
+    }
+
+    function setRenderBackend(backend: RenderBackend) {
+        store.dispatch(dosSlice.actions.renderBackend(backend));
+    }
+
+    function setRenderAspect(aspect: RenderAspect) {
+        store.dispatch(dosSlice.actions.renderAspect(aspect));
+    }
+
     if (options.theme) {
         setTheme(options.theme);
     }
@@ -174,6 +186,18 @@ export const Dos: DosFn = (element: HTMLDivElement,
         setKiosk(options.kiosk);
     }
 
+    if (options.imageRendering !== undefined) {
+        setImageRendering(options.imageRendering);
+    }
+
+    if (options.renderBackend !== undefined) {
+        setRenderBackend(options.renderBackend);
+    }
+
+    if (options.renderAspect !== undefined) {
+        setRenderAspect(options.renderAspect);
+    }
+
     render(
         <Provider store={store}>
             {<Ui /> as any}
@@ -195,6 +219,9 @@ export const Dos: DosFn = (element: HTMLDivElement,
         setFullScreen,
         setAutoStart,
         setKiosk,
+        setImageRendering,
+        setRenderBackend,
+        setRenderAspect,
     };
 };
 

src/public/types.ts

@@ -1,4 +1,7 @@
 export type DosEvent = "emu-ready" | "ci-ready" | "bnd-play";
+export type ImageRendering = "pixelated" | "smooth";
+export type RenderBackend = "webgl" | "canvas";
+export type RenderAspect = "AsIs" | "1/1" | "5/4" | "4/3" | "16/10" | "16/9" | "Fit";
 
 export interface DosOptions {
     url: string,
@@ -27,6 +30,9 @@ export interface DosOptions {
     loginUrl: string,
     autoStart: boolean,
     kiosk: boolean,
+    imageRendering: ImageRendering,
+    renderBackend: RenderBackend,
+    renderAspect: RenderAspect,
 }
 
 export interface DosProps {
@@ -43,6 +49,9 @@ export interface DosProps {
     setFullScreen(fullScreen: boolean): void;
     setAutoStart(autoStart: boolean): void;
     setKiosk(kiosk: boolean): void;
+    setImageRendering(rendering: ImageRendering): void;
+    setRenderBackend(backend: RenderBackend): void;
+    setRenderAspect(aspect: RenderAspect): void;
 }
 
 export type DosFn = (element: HTMLDivElement, options: Partial<DosOptions>) => DosProps;