From 7e2531fe355f5ade2ebe7f9555f186811ea7ad83 Mon Sep 17 00:00:00 2001 From: raysan5 Date: Fri, 2 Apr 2021 13:46:56 +0200 Subject: [PATCH] REVIEWED: ToggleFullscreen() on web #1241 After some investigation, I came to the conclusion it's impossible to get a solution that works for all situations. Fullscreen mode on web depends on the browser, the canvas and also the desired scaling strategy of the user. Just choose a solution that fits me needs for now and let the user manage the canvas on their webs (hopefully not requiring ToggleFullscreen() call). Also removed several useless related callbacks. --- src/core.c | 132 +++++++++++++++++------------------------------------ 1 file changed, 42 insertions(+), 90 deletions(-) diff --git a/src/core.c b/src/core.c index 83a66c71..12e7cdd1 100644 --- a/src/core.c +++ b/src/core.c @@ -556,10 +556,6 @@ static int32_t AndroidInputCallback(struct android_app *app, AInputEvent *event) #endif #if defined(PLATFORM_WEB) -static EM_BOOL EmscriptenFullscreenChangeCallback(int eventType, const EmscriptenFullscreenChangeEvent *event, void *userData); -static EM_BOOL EmscriptenWindowResizedCallback(int eventType, const void *reserved, void *userData); -static EM_BOOL EmscriptenKeyboardCallback(int eventType, const EmscriptenKeyboardEvent *keyEvent, void *userData); -static EM_BOOL EmscriptenMouseCallback(int eventType, const EmscriptenMouseEvent *mouseEvent, void *userData); static EM_BOOL EmscriptenTouchCallback(int eventType, const EmscriptenTouchEvent *touchEvent, void *userData); static EM_BOOL EmscriptenGamepadCallback(int eventType, const EmscriptenGamepadEvent *gamepadEvent, void *userData); #endif @@ -787,14 +783,12 @@ void InitWindow(int width, int height, const char *title) #if defined(PLATFORM_WEB) // Detect fullscreen change events - emscripten_set_fullscreenchange_callback("#canvas", NULL, 1, EmscriptenFullscreenChangeCallback); + //emscripten_set_fullscreenchange_callback("#canvas", NULL, 1, EmscriptenFullscreenChangeCallback); + //emscripten_set_resize_callback("#canvas", NULL, 1, EmscriptenResizeCallback); // Support keyboard events //emscripten_set_keypress_callback("#canvas", NULL, 1, EmscriptenKeyboardCallback); - emscripten_set_keydown_callback("#canvas", NULL, 1, EmscriptenKeyboardCallback); - - // Support mouse events - emscripten_set_click_callback("#canvas", NULL, 1, EmscriptenMouseCallback); + //emscripten_set_keydown_callback("#canvas", NULL, 1, EmscriptenKeyboardCallback); // Support touch events emscripten_set_touchstart_callback("#canvas", NULL, 1, EmscriptenTouchCallback); @@ -1084,41 +1078,62 @@ void ToggleFullscreen(void) // Try to enable GPU V-Sync, so frames are limited to screen refresh rate (60Hz -> 60 FPS) // NOTE: V-Sync can be enabled by graphic driver configuration if (CORE.Window.flags & FLAG_VSYNC_HINT) glfwSwapInterval(1); - #endif #if defined(PLATFORM_WEB) - /* - EM_ASM( + EM_ASM + ( + // This strategy works well while using raylib minimal web shell for emscripten, + // it re-scales the canvas to fullscreen using monitor resolution, for tools this + // is a good strategy but maybe games prefer to keep current canvas resolution and + // display it in fullscreen, adjusting monitor resolution if possible if (document.fullscreenElement) document.exitFullscreen(); - else Module.requestFullscreen(true, true); + else Module.requestFullscreen(false, true); ); - */ - - //EM_ASM(Module.requestFullscreen(false, false);); - /* +/* if (!CORE.Window.fullscreen) { - //https://github.com/emscripten-core/emscripten/issues/5124 + // Option 1: Request fullscreen for the canvas element + // This option does not seem to work at all + //emscripten_request_fullscreen("#canvas", false); + + // Option 2: Request fullscreen for the canvas element with strategy + // This option does not seem to work at all + // Ref: https://github.com/emscripten-core/emscripten/issues/5124 + // EmscriptenFullscreenStrategy strategy = { + // .scaleMode = EMSCRIPTEN_FULLSCREEN_SCALE_STRETCH, //EMSCRIPTEN_FULLSCREEN_SCALE_ASPECT, + // .canvasResolutionScaleMode = EMSCRIPTEN_FULLSCREEN_CANVAS_SCALE_STDDEF, + // .filteringMode = EMSCRIPTEN_FULLSCREEN_FILTERING_DEFAULT, + // .canvasResizedCallback = EmscriptenWindowResizedCallback, + // .canvasResizedCallbackUserData = NULL + // }; + //emscripten_request_fullscreen_strategy("#canvas", EM_FALSE, &strategy); + + // Option 3: Request fullscreen for the canvas element with strategy + // It works as expected but only inside the browser (client area) EmscriptenFullscreenStrategy strategy = { - .scaleMode = EMSCRIPTEN_FULLSCREEN_SCALE_STRETCH, //EMSCRIPTEN_FULLSCREEN_SCALE_ASPECT, + .scaleMode = EMSCRIPTEN_FULLSCREEN_SCALE_ASPECT, .canvasResolutionScaleMode = EMSCRIPTEN_FULLSCREEN_CANVAS_SCALE_STDDEF, .filteringMode = EMSCRIPTEN_FULLSCREEN_FILTERING_DEFAULT, - .canvasResizedCallback = EmscriptenWindowResizedCallback, //on_canvassize_changed, + .canvasResizedCallback = EmscriptenWindowResizedCallback, .canvasResizedCallbackUserData = NULL }; + emscripten_enter_soft_fullscreen("#canvas", &strategy); - emscripten_request_fullscreen("#canvas", false); - //emscripten_request_fullscreen_strategy("#canvas", EM_FALSE, &strategy); - //emscripten_enter_soft_fullscreen("canvas", &strategy); - TRACELOG(LOG_INFO, "emscripten_request_fullscreen_strategy"); + int width, height; + emscripten_get_canvas_element_size("#canvas", &width, &height); + TRACELOG(LOG_WARNING, "Emscripten: Enter fullscreen: Canvas size: %i x %i", width, height); } else { - TRACELOG(LOG_INFO, "emscripten_exit_fullscreen"); - emscripten_exit_fullscreen(); + //emscripten_exit_fullscreen(); + emscripten_exit_soft_fullscreen(); + + int width, height; + emscripten_get_canvas_element_size("#canvas", &width, &height); + TRACELOG(LOG_WARNING, "Emscripten: Exit fullscreen: Canvas size: %i x %i", width, height); } - */ +*/ CORE.Window.fullscreen = !CORE.Window.fullscreen; // Toggle fullscreen flag CORE.Window.flags ^= FLAG_FULLSCREEN_MODE; @@ -5431,59 +5446,6 @@ static int32_t AndroidInputCallback(struct android_app *app, AInputEvent *event) #endif #if defined(PLATFORM_WEB) -// Register fullscreen change events -static EM_BOOL EmscriptenFullscreenChangeCallback(int eventType, const EmscriptenFullscreenChangeEvent *event, void *userData) -{ - //isFullscreen: int event->isFullscreen - //fullscreenEnabled: int event->fullscreenEnabled - //fs element nodeName: (char *) event->nodeName - //fs element id: (char *) event->id - //Current element size: (int) event->elementWidth, (int) event->elementHeight - //Screen size:(int) event->screenWidth, (int) event->screenHeight -/* - if (event->isFullscreen) - { - CORE.Window.fullscreen = true; - TRACELOG(LOG_INFO, "WEB: Canvas scaled to fullscreen. ElementSize: (%ix%i), ScreenSize(%ix%i)", event->elementWidth, event->elementHeight, event->screenWidth, event->screenHeight); - } - else - { - CORE.Window.fullscreen = false; - TRACELOG(LOG_INFO, "WEB: Canvas scaled to windowed. ElementSize: (%ix%i), ScreenSize(%ix%i)", event->elementWidth, event->elementHeight, event->screenWidth, event->screenHeight); - } - - // TODO: Depending on scaling factor (screen vs element), calculate factor to scale mouse/touch input -*/ - return 0; -} - -// Register keyboard input events -static EM_BOOL EmscriptenKeyboardCallback(int eventType, const EmscriptenKeyboardEvent *keyEvent, void *userData) -{ - if ((eventType == EMSCRIPTEN_EVENT_KEYDOWN) && (keyEvent->keyCode == 27)) // ESCAPE key (strcmp(keyEvent->code, "Escape") == 0) - { - // WARNING: Not executed when pressing Esc to exit fullscreen, it seems document has priority over #canvas - - emscripten_exit_pointerlock(); - CORE.Window.fullscreen = false; - //TRACELOG(LOG_INFO, "CORE.Window.fullscreen = %s", CORE.Window.fullscreen? "true" : "false"); - } - - return 0; -} - -// Register mouse input events -static EM_BOOL EmscriptenMouseCallback(int eventType, const EmscriptenMouseEvent *mouseEvent, void *userData) -{ - // Lock mouse pointer when click on screen - if (eventType == EMSCRIPTEN_EVENT_CLICK) - { - // TODO: Manage mouse events if required (note that GLFW JS wrapper manages it now) - } - - return 0; -} - // Register touch input events static EM_BOOL EmscriptenTouchCallback(int eventType, const EmscriptenTouchEvent *touchEvent, void *userData) { @@ -5569,16 +5531,6 @@ static EM_BOOL EmscriptenGamepadCallback(int eventType, const EmscriptenGamepadE return 0; } - -static EM_BOOL EmscriptenWindowResizedCallback(int eventType, const void *reserved, void *userData) -{ - double width, height; - emscripten_get_element_css_size("canvas", &width, &height); - - // TODO. - - return true; -} #endif #if defined(PLATFORM_RPI) || defined(PLATFORM_DRM)