/* Simple DirectMedia Layer Copyright (C) 1997-2025 Sam Lantinga This software is provided 'as-is', without any express or implied warranty. In no event will the authors be held liable for any damages arising from the use of this software. Permission is granted to anyone to use this software for any purpose, including commercial applications, and to alter it and redistribute it freely, subject to the following restrictions: 1. The origin of this software must not be misrepresented; you must not claim that you wrote the original software. If you use this software in a product, an acknowledgment in the product documentation would be appreciated but is not required. 2. Altered source versions must be plainly marked as such, and must not be misrepresented as being the original software. 3. This notice may not be removed or altered from any source distribution. */ #include "SDL_internal.h" #ifdef SDL_VIDEO_DRIVER_EMSCRIPTEN #include "../SDL_sysvideo.h" #include "../SDL_pixels_c.h" #include "../../events/SDL_events_c.h" #include "SDL_emscriptenvideo.h" #include "SDL_emscriptenopengles.h" #include "SDL_emscriptenframebuffer.h" #include "SDL_emscriptenevents.h" #include "SDL_emscriptenmouse.h" #define EMSCRIPTENVID_DRIVER_NAME "emscripten" // Initialization/Query functions static bool Emscripten_VideoInit(SDL_VideoDevice *_this); static bool Emscripten_SetDisplayMode(SDL_VideoDevice *_this, SDL_VideoDisplay *display, SDL_DisplayMode *mode); static void Emscripten_VideoQuit(SDL_VideoDevice *_this); static bool Emscripten_GetDisplayUsableBounds(SDL_VideoDevice *_this, SDL_VideoDisplay *display, SDL_Rect *rect); static bool Emscripten_CreateWindow(SDL_VideoDevice *_this, SDL_Window *window, SDL_PropertiesID create_props); static void Emscripten_SetWindowSize(SDL_VideoDevice *_this, SDL_Window *window); static void Emscripten_GetWindowSizeInPixels(SDL_VideoDevice *_this, SDL_Window *window, int *w, int *h); static void Emscripten_DestroyWindow(SDL_VideoDevice *_this, SDL_Window *window); static SDL_FullscreenResult Emscripten_SetWindowFullscreen(SDL_VideoDevice *_this, SDL_Window *window, SDL_VideoDisplay *display, SDL_FullscreenOp fullscreen); static void Emscripten_PumpEvents(SDL_VideoDevice *_this); static void Emscripten_SetWindowTitle(SDL_VideoDevice *_this, SDL_Window *window); static bool pumpevents_has_run = false; static int pending_swap_interval = -1; // Emscripten driver bootstrap functions static void Emscripten_DeleteDevice(SDL_VideoDevice *device) { SDL_free(device); } static SDL_SystemTheme Emscripten_GetSystemTheme(void) { /* Technically, light theme can mean explicit light theme or no preference. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#syntax */ int theme_code = EM_ASM_INT({ if (!window.matchMedia) { return -1; } if (window.matchMedia('(prefers-color-scheme: light)').matches) { return 0; } if (window.matchMedia('(prefers-color-scheme: dark)').matches) { return 1; } return -1; }); switch (theme_code) { case 0: return SDL_SYSTEM_THEME_LIGHT; case 1: return SDL_SYSTEM_THEME_DARK; default: return SDL_SYSTEM_THEME_UNKNOWN; } } static void Emscripten_ListenSystemTheme(void) { MAIN_THREAD_EM_ASM({ if (window.matchMedia) { if (typeof(Module['SDL3']) === 'undefined') { Module['SDL3'] = {}; } var SDL3 = Module['SDL3']; SDL3.eventHandlerThemeChanged = function(event) { _Emscripten_SendSystemThemeChangedEvent(); }; SDL3.themeChangedMatchMedia = window.matchMedia('(prefers-color-scheme: dark)'); SDL3.themeChangedMatchMedia.addEventListener('change', SDL3.eventHandlerThemeChanged); } }); } static void Emscripten_UnlistenSystemTheme(void) { MAIN_THREAD_EM_ASM({ if (typeof(Module['SDL3']) !== 'undefined') { var SDL3 = Module['SDL3']; SDL3.themeChangedMatchMedia.removeEventListener('change', SDL3.eventHandlerThemeChanged); SDL3.themeChangedMatchMedia = undefined; SDL3.eventHandlerThemeChanged = undefined; } }); } EMSCRIPTEN_KEEPALIVE void Emscripten_SendSystemThemeChangedEvent(void) { SDL_SetSystemTheme(Emscripten_GetSystemTheme()); } static SDL_VideoDevice *Emscripten_CreateDevice(void) { SDL_VideoDevice *device; // Initialize all variables that we clean on shutdown device = (SDL_VideoDevice *)SDL_calloc(1, sizeof(SDL_VideoDevice)); if (!device) { return NULL; } /* Firefox sends blur event which would otherwise prevent full screen * when the user clicks to allow full screen. * See https://bugzilla.mozilla.org/show_bug.cgi?id=1144964 */ SDL_SetHint(SDL_HINT_VIDEO_MINIMIZE_ON_FOCUS_LOSS, "0"); // Set the function pointers device->VideoInit = Emscripten_VideoInit; device->VideoQuit = Emscripten_VideoQuit; device->GetDisplayUsableBounds = Emscripten_GetDisplayUsableBounds; device->SetDisplayMode = Emscripten_SetDisplayMode; device->PumpEvents = Emscripten_PumpEvents; device->CreateSDLWindow = Emscripten_CreateWindow; device->SetWindowTitle = Emscripten_SetWindowTitle; /*device->SetWindowIcon = Emscripten_SetWindowIcon; device->SetWindowPosition = Emscripten_SetWindowPosition;*/ device->SetWindowSize = Emscripten_SetWindowSize; /*device->ShowWindow = Emscripten_ShowWindow; device->HideWindow = Emscripten_HideWindow; device->RaiseWindow = Emscripten_RaiseWindow; device->MaximizeWindow = Emscripten_MaximizeWindow; device->MinimizeWindow = Emscripten_MinimizeWindow; device->RestoreWindow = Emscripten_RestoreWindow; device->SetWindowMouseGrab = Emscripten_SetWindowMouseGrab;*/ device->GetWindowSizeInPixels = Emscripten_GetWindowSizeInPixels; device->DestroyWindow = Emscripten_DestroyWindow; device->SetWindowFullscreen = Emscripten_SetWindowFullscreen; device->CreateWindowFramebuffer = Emscripten_CreateWindowFramebuffer; device->UpdateWindowFramebuffer = Emscripten_UpdateWindowFramebuffer; device->DestroyWindowFramebuffer = Emscripten_DestroyWindowFramebuffer; device->GL_LoadLibrary = Emscripten_GLES_LoadLibrary; device->GL_GetProcAddress = Emscripten_GLES_GetProcAddress; device->GL_UnloadLibrary = Emscripten_GLES_UnloadLibrary; device->GL_CreateContext = Emscripten_GLES_CreateContext; device->GL_MakeCurrent = Emscripten_GLES_MakeCurrent; device->GL_SetSwapInterval = Emscripten_GLES_SetSwapInterval; device->GL_GetSwapInterval = Emscripten_GLES_GetSwapInterval; device->GL_SwapWindow = Emscripten_GLES_SwapWindow; device->GL_DestroyContext = Emscripten_GLES_DestroyContext; device->free = Emscripten_DeleteDevice; Emscripten_ListenSystemTheme(); device->system_theme = Emscripten_GetSystemTheme(); return device; } VideoBootStrap Emscripten_bootstrap = { EMSCRIPTENVID_DRIVER_NAME, "SDL emscripten video driver", Emscripten_CreateDevice, NULL, // no ShowMessageBox implementation false }; bool Emscripten_VideoInit(SDL_VideoDevice *_this) { SDL_DisplayMode mode; // Use a fake 32-bpp desktop mode SDL_zero(mode); mode.format = SDL_PIXELFORMAT_XRGB8888; emscripten_get_screen_size(&mode.w, &mode.h); mode.pixel_density = emscripten_get_device_pixel_ratio(); if (SDL_AddBasicVideoDisplay(&mode) == 0) { return false; } Emscripten_InitMouse(); // Assume we have a mouse and keyboard SDL_AddKeyboard(SDL_DEFAULT_KEYBOARD_ID, NULL, false); SDL_AddMouse(SDL_DEFAULT_MOUSE_ID, NULL, false); // We're done! return true; } static bool Emscripten_SetDisplayMode(SDL_VideoDevice *_this, SDL_VideoDisplay *display, SDL_DisplayMode *mode) { // can't do this return true; } static void Emscripten_VideoQuit(SDL_VideoDevice *_this) { Emscripten_QuitMouse(); Emscripten_UnlistenSystemTheme(); pumpevents_has_run = false; pending_swap_interval = -1; } static bool Emscripten_GetDisplayUsableBounds(SDL_VideoDevice *_this, SDL_VideoDisplay *display, SDL_Rect *rect) { if (rect) { rect->x = 0; rect->y = 0; rect->w = MAIN_THREAD_EM_ASM_INT({ return window.innerWidth; }); rect->h = MAIN_THREAD_EM_ASM_INT({ return window.innerHeight; }); } return true; } bool Emscripten_ShouldSetSwapInterval(int interval) { if (!pumpevents_has_run) { pending_swap_interval = interval; return false; } return true; } static void Emscripten_PumpEvents(SDL_VideoDevice *_this) { if (!pumpevents_has_run) { // we assume you've set a mainloop by the time you've called pumpevents, so we delay initial SetInterval changes until then. // otherwise you'll get a warning on the javascript console. pumpevents_has_run = true; if (pending_swap_interval >= 0) { Emscripten_GLES_SetSwapInterval(_this, pending_swap_interval); pending_swap_interval = -1; } } } EMSCRIPTEN_KEEPALIVE void requestFullscreenThroughSDL(SDL_Window *window) { SDL_SetWindowFullscreen(window, true); } static bool Emscripten_CreateWindow(SDL_VideoDevice *_this, SDL_Window *window, SDL_PropertiesID props) { SDL_WindowData *wdata; double scaled_w, scaled_h; double css_w, css_h; const char *selector; // Allocate window internal data wdata = (SDL_WindowData *)SDL_calloc(1, sizeof(SDL_WindowData)); if (!wdata) { return false; } selector = SDL_GetHint(SDL_HINT_EMSCRIPTEN_CANVAS_SELECTOR); if (!selector) { selector = "#canvas"; } wdata->canvas_id = SDL_strdup(selector); if (window->flags & SDL_WINDOW_HIGH_PIXEL_DENSITY) { wdata->pixel_ratio = emscripten_get_device_pixel_ratio(); } else { wdata->pixel_ratio = 1.0f; } scaled_w = SDL_floor(window->w * wdata->pixel_ratio); scaled_h = SDL_floor(window->h * wdata->pixel_ratio); // set a fake size to check if there is any CSS sizing the canvas emscripten_set_canvas_element_size(wdata->canvas_id, 1, 1); emscripten_get_element_css_size(wdata->canvas_id, &css_w, &css_h); wdata->external_size = SDL_floor(css_w) != 1 || SDL_floor(css_h) != 1; if ((window->flags & SDL_WINDOW_RESIZABLE) && wdata->external_size) { // external css has resized us scaled_w = css_w * wdata->pixel_ratio; scaled_h = css_h * wdata->pixel_ratio; SDL_SendWindowEvent(window, SDL_EVENT_WINDOW_RESIZED, SDL_lroundf(css_w), SDL_lroundf(css_h)); } emscripten_set_canvas_element_size(wdata->canvas_id, SDL_lroundf(scaled_w), SDL_lroundf(scaled_h)); // if the size is not being controlled by css, we need to scale down for hidpi if (!wdata->external_size) { if (wdata->pixel_ratio != 1.0f) { // scale canvas down emscripten_set_element_css_size(wdata->canvas_id, window->w, window->h); } } wdata->window = window; // Setup driver data for this window window->internal = wdata; // One window, it always has focus SDL_SetMouseFocus(window); SDL_SetKeyboardFocus(window); Emscripten_RegisterEventHandlers(wdata); // disable the emscripten "fullscreen" button. MAIN_THREAD_EM_ASM({ Module['requestFullscreen'] = function(lockPointer, resizeCanvas) { _requestFullscreenThroughSDL($0); }; }, window); // Window has been successfully created return true; } static void Emscripten_SetWindowSize(SDL_VideoDevice *_this, SDL_Window *window) { SDL_WindowData *data; if (window->internal) { data = window->internal; // update pixel ratio if (window->flags & SDL_WINDOW_HIGH_PIXEL_DENSITY) { data->pixel_ratio = emscripten_get_device_pixel_ratio(); } emscripten_set_canvas_element_size(data->canvas_id, SDL_lroundf(window->pending.w * data->pixel_ratio), SDL_lroundf(window->pending.h * data->pixel_ratio)); // scale canvas down if (!data->external_size && data->pixel_ratio != 1.0f) { emscripten_set_element_css_size(data->canvas_id, window->pending.w, window->pending.h); } SDL_SendWindowEvent(window, SDL_EVENT_WINDOW_RESIZED, window->pending.w, window->pending.h); } } static void Emscripten_GetWindowSizeInPixels(SDL_VideoDevice *_this, SDL_Window *window, int *w, int *h) { SDL_WindowData *data; if (window->internal) { data = window->internal; *w = SDL_lroundf(window->w * data->pixel_ratio); *h = SDL_lroundf(window->h * data->pixel_ratio); } } static void Emscripten_DestroyWindow(SDL_VideoDevice *_this, SDL_Window *window) { SDL_WindowData *data; if (window->internal) { data = window->internal; Emscripten_UnregisterEventHandlers(data); // We can't destroy the canvas, so resize it to zero instead emscripten_set_canvas_element_size(data->canvas_id, 0, 0); SDL_free(data->canvas_id); SDL_free(window->internal); window->internal = NULL; } // just ignore clicks on the fullscreen button while there's no SDL window. MAIN_THREAD_EM_ASM({ Module['requestFullscreen'] = function(lockPointer, resizeCanvas) {}; }); } static SDL_FullscreenResult Emscripten_SetWindowFullscreen(SDL_VideoDevice *_this, SDL_Window *window, SDL_VideoDisplay *display, SDL_FullscreenOp fullscreen) { SDL_WindowData *data; int res = -1; if (window->internal) { data = window->internal; if (fullscreen) { EmscriptenFullscreenStrategy strategy; bool is_fullscreen_desktop = !window->fullscreen_exclusive; SDL_zero(strategy); strategy.scaleMode = is_fullscreen_desktop ? EMSCRIPTEN_FULLSCREEN_SCALE_STRETCH : EMSCRIPTEN_FULLSCREEN_SCALE_ASPECT; if (!is_fullscreen_desktop) { strategy.canvasResolutionScaleMode = EMSCRIPTEN_FULLSCREEN_CANVAS_SCALE_NONE; } else if (window->flags & SDL_WINDOW_HIGH_PIXEL_DENSITY) { strategy.canvasResolutionScaleMode = EMSCRIPTEN_FULLSCREEN_CANVAS_SCALE_HIDEF; } else { strategy.canvasResolutionScaleMode = EMSCRIPTEN_FULLSCREEN_CANVAS_SCALE_STDDEF; } strategy.filteringMode = EMSCRIPTEN_FULLSCREEN_FILTERING_DEFAULT; strategy.canvasResizedCallback = Emscripten_HandleCanvasResize; strategy.canvasResizedCallbackUserData = data; data->fullscreen_mode_flags = (window->flags & SDL_WINDOW_FULLSCREEN); data->fullscreen_resize = is_fullscreen_desktop; res = emscripten_request_fullscreen_strategy(data->canvas_id, 1, &strategy); } else { res = emscripten_exit_fullscreen(); } } if (res == EMSCRIPTEN_RESULT_SUCCESS) { return SDL_FULLSCREEN_SUCCEEDED; } else if (res == EMSCRIPTEN_RESULT_DEFERRED) { return SDL_FULLSCREEN_PENDING; } else { return SDL_FULLSCREEN_FAILED; } } static void Emscripten_SetWindowTitle(SDL_VideoDevice *_this, SDL_Window *window) { emscripten_set_window_title(window->title); } #endif // SDL_VIDEO_DRIVER_EMSCRIPTEN