diff --git a/index.html b/index.html index b8eea291..08285632 100644 --- a/index.html +++ b/index.html @@ -60,6 +60,9 @@ // props.setFullScreen(true); } }, + // renderAspect: "1/1", + // renderBackend: "webgl", + // imageRendering: "smooth", }); }); diff --git a/package.json b/package.json index d6ef543e..a5ffe40b 100644 --- a/package.json +++ b/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": [ diff --git a/src/main.tsx b/src/main.tsx index 53b7c98d..025a5329 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,7 +3,7 @@ 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"; @@ -11,7 +11,7 @@ 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( { as any} @@ -195,6 +219,9 @@ export const Dos: DosFn = (element: HTMLDivElement, setFullScreen, setAutoStart, setKiosk, + setImageRendering, + setRenderBackend, + setRenderAspect, }; }; diff --git a/src/public/types.ts b/src/public/types.ts index c044e496..6548d770 100644 --- a/src/public/types.ts +++ b/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) => DosProps;