mirrors
/
raylib
mirror of https://github.com/raysan5/raylib
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add ToggleFullscreen() and required changes for PLATFORM_WEB (#3634)

This commit is contained in:
ubkp 2023-12-15 13:36:27 -03:00 committed by GitHub
parent 9bdc217987
commit e001f7e75e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 64 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/platforms/rcore_web.c
View File

@ -73,6 +73,7 @@
//----------------------------------------------------------------------------------
typedef struct {
GLFWwindow *handle; // GLFW window handle (graphic device)
bool ourFullscreen; // Internal var to filter our handling of fullscreen vs the user handling of fullscreen
} PlatformData;
//----------------------------------------------------------------------------------
@ -140,6 +141,37 @@ bool WindowShouldClose(void)
// Toggle fullscreen mode
void ToggleFullscreen(void)
{
platform.ourFullscreen = true;
bool enterFullscreen = false;
const bool wasFullscreen = EM_ASM_INT( { if (document.fullscreenElement) return 1; }, 0);
if (wasFullscreen)
{
EM_ASM(document.exitFullscreen(););
if (CORE.Window.flags & FLAG_FULLSCREEN_MODE) enterFullscreen = false;
else enterFullscreen = true;
CORE.Window.fullscreen = false;
CORE.Window.flags &= ~FLAG_FULLSCREEN_MODE;
CORE.Window.flags &= ~FLAG_BORDERLESS_WINDOWED_MODE;
}
else enterFullscreen = true;
if (enterFullscreen)
{
// NOTE: The setTimeouts handle the browser mode change delay
EM_ASM(
setTimeout(function()
{
Module.requestFullscreen(false, false);
}, 100);
);
CORE.Window.fullscreen = true;
CORE.Window.flags |= FLAG_FULLSCREEN_MODE;
}
// NOTE: Old notes below:
/*
EM_ASM
(
@ -204,40 +236,44 @@ void ToggleFullscreen(void)
CORE.Window.flags &= ~FLAG_FULLSCREEN_MODE;
}
*/
CORE.Window.fullscreen = !CORE.Window.fullscreen; // Toggle fullscreen flag
}
// Toggle borderless windowed mode
void ToggleBorderlessWindowed(void)
{
platform.ourFullscreen = true;
bool enterBorderless = false;
const bool wasFullscreen = EM_ASM_INT( { if (document.fullscreenElement) return 1; }, 0);
if (wasFullscreen)
{
EM_ASM(document.exitFullscreen(););
if (CORE.Window.flags & FLAG_BORDERLESS_WINDOWED_MODE) enterBorderless = false;
else enterBorderless = true;
CORE.Window.fullscreen = false;
CORE.Window.flags &= ~FLAG_FULLSCREEN_MODE;
CORE.Window.flags &= ~FLAG_BORDERLESS_WINDOWED_MODE;
}
else enterBorderless = true;
if (!IsWindowState(FLAG_BORDERLESS_WINDOWED_MODE))
if (enterBorderless)
{
// NOTE: 1. The setTimeouts handle the browser mode change delay
// 2. The style unset handles the possibility of a width="100%" like on the default shell.html file
// 2. The style unset handles the possibility of a width="value%" like on the default shell.html file
EM_ASM(
setTimeout(function()
{
Module.requestFullscreen(true, true);
Module.requestFullscreen(false, true);
setTimeout(function()
{
canvas.style.width="unset";
}, 100);
}, 100);
);
CORE.Window.flags |= FLAG_BORDERLESS_WINDOWED_MODE;
}
else CORE.Window.flags &= ~FLAG_BORDERLESS_WINDOWED_MODE;
}
// Set window state: maximized, if resizable
@ -277,9 +313,9 @@ void SetWindowState(unsigned int flags)
}
// State change: FLAG_FULLSCREEN_MODE
if ((flags & FLAG_FULLSCREEN_MODE) > 0)
if ((CORE.Window.flags & FLAG_FULLSCREEN_MODE) != (flags & FLAG_FULLSCREEN_MODE))
{
TRACELOG(LOG_WARNING, "SetWindowState(FLAG_FULLSCREEN_MODE) not available yet on target platform");
ToggleFullscreen(); // NOTE: Window state flag updated inside function
}
// State change: FLAG_WINDOW_RESIZABLE
@ -384,9 +420,9 @@ void ClearWindowState(unsigned int flags)
}
// State change: FLAG_FULLSCREEN_MODE
if ((flags & FLAG_FULLSCREEN_MODE) > 0)
if (((CORE.Window.flags & FLAG_FULLSCREEN_MODE) > 0) && ((flags & FLAG_FULLSCREEN_MODE) > 0))
{
TRACELOG(LOG_WARNING, "ClearWindowState(FLAG_FULLSCREEN_MODE) not available yet on target platform");
ToggleFullscreen(); // NOTE: Window state flag updated inside function
}
// State change: FLAG_WINDOW_RESIZABLE
@ -1015,6 +1051,9 @@ int InitPlatform(void)
CORE.Window.display.width = CORE.Window.screen.width;
CORE.Window.display.height = CORE.Window.screen.height;
// Init fullscreen toggle required var:
platform.ourFullscreen = false;
if (CORE.Window.fullscreen)
{
// remember center for switchinging from fullscreen to window
@ -1148,7 +1187,7 @@ int InitPlatform(void)
// Initialize input events callbacks
//----------------------------------------------------------------------------
// Setup callback functions for the DOM events
emscripten_set_fullscreenchange_callback("#canvas", NULL, 1, EmscriptenFullscreenChangeCallback);
emscripten_set_fullscreenchange_callback(EMSCRIPTEN_EVENT_TARGET_WINDOW, NULL, 1, EmscriptenFullscreenChangeCallback);
// WARNING: Below resize code was breaking fullscreen mode for sample games and examples, it needs review
// Check fullscreen change events(note this is done on the window since most browsers don't support this on #canvas)
@ -1412,7 +1451,19 @@ static void CursorEnterCallback(GLFWwindow *window, int enter)
// Register fullscreen change events
static EM_BOOL EmscriptenFullscreenChangeCallback(int eventType, const EmscriptenFullscreenChangeEvent *event, void *userData)
{
// TODO: Implement EmscriptenFullscreenChangeCallback()?
// NOTE: 1. Reset the fullscreen flags if the user left fullscreen manually by pressing the Escape key
// 2. Which is a necessary safeguard because that case will bypass the toggles CORE.Window.flags resets
if (platform.ourFullscreen) platform.ourFullscreen = false;
else
{
const bool wasFullscreen = EM_ASM_INT( { if (document.fullscreenElement) return 1; }, 0);
if (!wasFullscreen)
{
CORE.Window.fullscreen = false;
CORE.Window.flags &= ~FLAG_FULLSCREEN_MODE;
CORE.Window.flags &= ~FLAG_BORDERLESS_WINDOWED_MODE;
}
}
return 1; // The event was consumed by the callback handler
}