mirrors/SDL
1
0
Fork 0
mirror of https://github.com/libsdl-org/SDL.git synced 2026-02-13 07:13:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

emscripten: Allow SDL_HINT_EMSCRIPTEN_FILL_DOCUMENT to be toggled on a window.

Browse Source 
Fixes #14567.
This commit is contained in:
Ryan C. Gordon
2025-12-04 13:17:33 -05:00
parent ccdc9231f5
commit bc17a8922b
4 changed files with 148 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
include/SDL3/SDL_hints.h
View File

@@ -788,22 +788,26 @@ extern "C" {
#define SDL_HINT_EMSCRIPTEN_KEYBOARD_ELEMENT "SDL_EMSCRIPTEN_KEYBOARD_ELEMENT"
/**
* Dictate that newly-created windows will fill the whole browser window.
* Dictate that windows on Emscripten will fill the whole browser window.
*
* The canvas element fills the entire document. Resize events will be
* generated as the browser window is resized, as that will adjust the canvas
* size as well. The canvas will cover anything else on the page, including
* any controls provided by Emscripten in its generated HTML file. Often times
* this is desirable for a browser-based game, but it means several things
* that we expect of an SDL window on other platforms might not work as
* expected, such as minimum window sizes and aspect ratios.
* When enabled, the canvas element fills the entire document. Resize events
* will be generated as the browser window is resized, as that will adjust the
* canvas size as well. The canvas will cover anything else on the page,
* including any controls provided by Emscripten in its generated HTML file
* (in fact, any elements on the page that aren't the canvas will be moved
* into a hidden `div` element).
*
* Often times this is desirable for a browser-based game, but it means
* several things that we expect of an SDL window on other platforms might not
* work as expected, such as minimum window sizes and aspect ratios.
*
* This hint overrides SDL_PROP_WINDOW_CREATE_EMSCRIPTEN_FILL_DOCUMENT_BOOLEAN
* properties when creating an SDL window.
*
* This hint only applies to the emscripten platform.
* This hint only applies to the Emscripten platform.
*
* This hint should be set before creating a window.
* This hint can be set at any time (before creating the window, or to toggle
* its state later). Only one window can fill the document at a time.
*
* \since This hint is available since SDL 3.4.0.
*/

6
src/video/emscripten/SDL_emscriptenevents.c
View File

@@ -518,10 +518,10 @@ static EM_BOOL Emscripten_HandleResize(int eventType, const EmscriptenUiEvent *u
force = true;
}
}
if (window_data->fill_document || (window_data->window->flags & SDL_WINDOW_RESIZABLE)) {
const bool fill_document = (Emscripten_fill_document_window == window_data->window);
if (fill_document || (window_data->window->flags & SDL_WINDOW_RESIZABLE)) {
double w, h;
if (window_data->fill_document) {
if (fill_document) {
w = (double) uiEvent->windowInnerWidth;
h = (double) uiEvent->windowInnerHeight;
} else {

195
src/video/emscripten/SDL_emscriptenvideo.c
View File

@@ -25,6 +25,7 @@
#include "../SDL_sysvideo.h"
#include "../SDL_pixels_c.h"
#include "../../events/SDL_events_c.h"
#include "../../SDL_hints_c.h"
#include "SDL_emscriptenvideo.h"
#include "SDL_emscriptenopengles.h"
@@ -50,14 +51,18 @@ static void Emscripten_PumpEvents(SDL_VideoDevice *_this);
static void Emscripten_SetWindowTitle(SDL_VideoDevice *_this, SDL_Window *window);
static bool Emscripten_SetWindowIcon(SDL_VideoDevice *_this, SDL_Window *window, SDL_Surface *icon);
SDL_Window *Emscripten_fill_document_window = NULL;
static bool pumpevents_has_run = false;
static int pending_swap_interval = -1;
// Emscripten driver bootstrap functions
static void SDLCALL Emscripten_FillDocHintChanged(void *userdata, const char *name, const char *oldValue, const char *hint);
static void Emscripten_DeleteDevice(SDL_VideoDevice *device)
{
SDL_RemoveHintCallback(SDL_HINT_EMSCRIPTEN_FILL_DOCUMENT, Emscripten_FillDocHintChanged, device);
SDL_free(device);
}
@@ -192,6 +197,8 @@ static SDL_VideoDevice *Emscripten_CreateDevice(void)
Emscripten_ListenSystemTheme();
device->system_theme = Emscripten_GetSystemTheme();
SDL_AddHintCallback(SDL_HINT_EMSCRIPTEN_FILL_DOCUMENT, Emscripten_FillDocHintChanged, device);
return device;
}
@@ -456,65 +463,29 @@ EMSCRIPTEN_KEEPALIVE void requestFullscreenThroughSDL(SDL_Window *window)
SDL_SetWindowFullscreen(window, true);
}
static bool Emscripten_CreateWindow(SDL_VideoDevice *_this, SDL_Window *window, SDL_PropertiesID props)
static void Emscripten_SetWindowFillDocState(SDL_Window *window, bool enable)
{
SDL_WindowData *wdata;
double scaled_w, scaled_h;
double css_w, css_h;
const char *selector;
SDL_WindowData *wdata = window->internal;
// 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) {
selector = SDL_GetStringProperty(props, SDL_PROP_WINDOW_CREATE_EMSCRIPTEN_CANVAS_ID_STRING, "#canvas");
}
wdata->canvas_id = SDL_strdup(selector);
selector = SDL_GetHint(SDL_HINT_EMSCRIPTEN_KEYBOARD_ELEMENT);
if (!selector || !*selector) {
selector = SDL_GetStringProperty(props, SDL_PROP_WINDOW_CREATE_EMSCRIPTEN_KEYBOARD_ELEMENT_STRING, "#window");
}
wdata->keyboard_element = SDL_strdup(selector);
if (SDL_GetHint(SDL_HINT_EMSCRIPTEN_FILL_DOCUMENT)) {
wdata->fill_document = SDL_GetHintBoolean(SDL_HINT_EMSCRIPTEN_FILL_DOCUMENT, false);
} else {
wdata->fill_document = SDL_GetBooleanProperty(props, SDL_PROP_WINDOW_CREATE_EMSCRIPTEN_FILL_DOCUMENT_BOOLEAN, false);
}
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 (wdata->external_size) {
wdata->fill_document = false; // can't be resizable if something else is controlling it.
}
SDL_assert(!Emscripten_fill_document_window || !enable); // one at a time, sorry.
// fill_document takes up the entire page and resizes as the browser window resizes.
if (wdata->fill_document) {
if (enable) {
Emscripten_fill_document_window = window;
const int w = MAIN_THREAD_EM_ASM_INT({ return window.innerWidth; });
const int h = MAIN_THREAD_EM_ASM_INT({ return window.innerHeight; });
const double scaled_w = w * wdata->pixel_ratio;
const double scaled_h = h * wdata->pixel_ratio;
scaled_w = w * wdata->pixel_ratio;
scaled_h = h * wdata->pixel_ratio;
wdata->non_fill_document_width = window->w;
wdata->non_fill_document_height = window->h;
MAIN_THREAD_EM_ASM({
var canvas = document.querySelector(UTF8ToString($0));
canvas.SDL3_original_position = canvas.style.position;
canvas.SDL3_original_top = canvas.style.top;
canvas.SDL3_original_left = canvas.style.left;
// hide everything on the page that isn't the canvas.
var div = document.createElement('div');
@@ -547,6 +518,33 @@ static bool Emscripten_CreateWindow(SDL_VideoDevice *_this, SDL_Window *window,
window->w = window->h = 0;
SDL_SendWindowEvent(window, SDL_EVENT_WINDOW_RESIZED, SDL_lroundf(w), SDL_lroundf(h));
} else {
const bool transitioning = (Emscripten_fill_document_window == window);
if (transitioning) {
MAIN_THREAD_EM_ASM({
// if we had previously hidden everything behind a fill_document window, put it back.
var div = document.getElementById('SDL3_fill_document_background_elements');
if (div) {
if (div.SDL3_canvas_nextsib) {
div.SDL3_canvas_parent.insertBefore(div.SDL3_canvas, div.SDL3_canvas_nextsib);
} else {
div.SDL3_canvas_parent.appendChild(div.SDL3_canvas);
}
while (div.firstChild) {
document.body.insertBefore(div.firstChild, div);
}
div.SDL3_canvas.style.position = div.SDL3_canvas.SDL3_original_position;
div.SDL3_canvas.style.top = div.SDL3_canvas.SDL3_original_top;
div.SDL3_canvas.style.left = div.SDL3_canvas.SDL3_original_left;
div.remove();
}
});
Emscripten_fill_document_window = NULL;
}
window->w = wdata->non_fill_document_width;
window->h = wdata->non_fill_document_height;
const double scaled_w = SDL_floor(window->w * wdata->pixel_ratio);
const double scaled_h = SDL_floor(window->h * wdata->pixel_ratio);
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
@@ -554,6 +552,74 @@ static bool Emscripten_CreateWindow(SDL_VideoDevice *_this, SDL_Window *window,
// scale canvas down
emscripten_set_element_css_size(wdata->canvas_id, window->w, window->h);
}
if (transitioning) {
window->w = window->h = 0;
SDL_SendWindowEvent(window, SDL_EVENT_WINDOW_RESIZED, wdata->non_fill_document_width, wdata->non_fill_document_height);
}
}
}
static void SDLCALL Emscripten_FillDocHintChanged(void *userdata, const char *name, const char *oldValue, const char *hint)
{
const bool enabled = SDL_GetStringBoolean(hint, false);
if (Emscripten_fill_document_window && !enabled) {
Emscripten_SetWindowFillDocState(Emscripten_fill_document_window, false);
} else if (!Emscripten_fill_document_window && enabled) {
/// there's currently only ever one canvas, but if this changes later, we can choose the one with keyboard focus or something.
SDL_VideoDevice *device = (SDL_VideoDevice *) userdata;
if (device && device->windows) { // take first window in the list for now.
Emscripten_SetWindowFillDocState(device->windows, true);
}
}
}
static bool Emscripten_CreateWindow(SDL_VideoDevice *_this, SDL_Window *window, SDL_PropertiesID props)
{
SDL_WindowData *wdata;
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) {
selector = SDL_GetStringProperty(props, SDL_PROP_WINDOW_CREATE_EMSCRIPTEN_CANVAS_ID_STRING, "#canvas");
}
wdata->canvas_id = SDL_strdup(selector);
selector = SDL_GetHint(SDL_HINT_EMSCRIPTEN_KEYBOARD_ELEMENT);
if (!selector || !*selector) {
selector = SDL_GetStringProperty(props, SDL_PROP_WINDOW_CREATE_EMSCRIPTEN_KEYBOARD_ELEMENT_STRING, "#window");
}
wdata->keyboard_element = SDL_strdup(selector);
bool fill_document;
if (Emscripten_fill_document_window) {
fill_document = false; // only one allowed at a time.
} else if (SDL_GetHint(SDL_HINT_EMSCRIPTEN_FILL_DOCUMENT)) {
fill_document = SDL_GetHintBoolean(SDL_HINT_EMSCRIPTEN_FILL_DOCUMENT, false);
} else {
fill_document = SDL_GetBooleanProperty(props, SDL_PROP_WINDOW_CREATE_EMSCRIPTEN_FILL_DOCUMENT_BOOLEAN, false);
}
if (window->flags & SDL_WINDOW_HIGH_PIXEL_DENSITY) {
wdata->pixel_ratio = emscripten_get_device_pixel_ratio();
} else {
wdata->pixel_ratio = 1.0f;
}
// 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 (wdata->external_size) {
fill_document = false; // can't be resizable if something else is controlling it.
}
wdata->window = window;
@@ -561,6 +627,10 @@ static bool Emscripten_CreateWindow(SDL_VideoDevice *_this, SDL_Window *window,
// Setup driver data for this window
window->internal = wdata;
wdata->non_fill_document_width = window->w;
wdata->non_fill_document_height = window->h;
Emscripten_SetWindowFillDocState(window, fill_document);
// One window, it always has focus
SDL_SetMouseFocus(window);
SDL_SetKeyboardFocus(window);
@@ -577,7 +647,7 @@ static bool Emscripten_CreateWindow(SDL_VideoDevice *_this, SDL_Window *window,
// Ensure various things are added to the window's properties
SDL_SetStringProperty(window->props, SDL_PROP_WINDOW_EMSCRIPTEN_CANVAS_ID_STRING, wdata->canvas_id);
SDL_SetStringProperty(window->props, SDL_PROP_WINDOW_EMSCRIPTEN_KEYBOARD_ELEMENT_STRING, wdata->keyboard_element);
SDL_SetBooleanProperty(window->props, SDL_PROP_WINDOW_EMSCRIPTEN_FILL_DOCUMENT_BOOLEAN, wdata->fill_document);
SDL_SetBooleanProperty(window->props, SDL_PROP_WINDOW_EMSCRIPTEN_FILL_DOCUMENT_BOOLEAN, fill_document);
// Window has been successfully created
return true;
@@ -592,7 +662,7 @@ static void Emscripten_SetWindowSize(SDL_VideoDevice *_this, SDL_Window *window)
{
if (window->internal) {
SDL_WindowData *data = window->internal;
if (data->fill_document) {
if (window == Emscripten_fill_document_window) {
return; // canvas size is being dictated by the browser window size, refuse request.
}
@@ -625,6 +695,10 @@ static void Emscripten_DestroyWindow(SDL_VideoDevice *_this, SDL_Window *window)
{
SDL_WindowData *data;
if (Emscripten_fill_document_window == window) {
Emscripten_SetWindowFillDocState(window, false);
}
if (window->internal) {
data = window->internal;
@@ -646,23 +720,6 @@ static void Emscripten_DestroyWindow(SDL_VideoDevice *_this, SDL_Window *window)
MAIN_THREAD_EM_ASM({
// just ignore clicks on the fullscreen button while there's no SDL window.
Module['requestFullscreen'] = function(lockPointer, resizeCanvas) {};
// if we had previously hidden everything behind a fill_document window, put it back.
var div = document.getElementById('SDL3_fill_document_background_elements');
if (div) {
if (div.SDL3_canvas_nextsib) {
div.SDL3_canvas_parent.insertBefore(div.SDL3_canvas, div.SDL3_canvas_nextsib);
} else {
div.SDL3_canvas_parent.appendChild(div.SDL3_canvas);
}
while (div.firstChild) {
document.body.insertBefore(div.firstChild, div);
}
div.SDL3_canvas.style.position = undefined;
div.SDL3_canvas.style.top = undefined;
div.SDL3_canvas.style.left = undefined;
div.remove();
}
});
}

7
src/video/emscripten/SDL_emscriptenvideo.h
View File

@@ -35,11 +35,12 @@ struct SDL_WindowData
SDL_GLContext gl_context;
int non_fill_document_width;
int non_fill_document_height;
char *canvas_id;
char *keyboard_element;
bool fill_document;
float pixel_ratio;
bool external_size;
@@ -53,6 +54,8 @@ struct SDL_WindowData
bool mouse_focus_loss_pending;
};
extern SDL_Window *Emscripten_fill_document_window;
bool Emscripten_ShouldSetSwapInterval(int interval);
#endif // SDL_emscriptenvideo_h_