[rcore] Fix fullscreen known issue 1 for PLATFORM_WEB

[ghost]

Context

• This PR implements the following behavior:

  1. SetWindowState(FLAG_FULLSCREEN_MODE) will activate the "standard fullscreen" only when:

     1. There's no "type" of "fullscreen" currently active.
     2. There's "borderless windowed fullscreen" (either ours or external, aka, called by a button) active ("hot swap").

  2. SetWindowState(FLAG_BORDERLESS_WINDOWED_MODE) will activate the "borderless windowed fullscreen" only when:

     1. There's no "type" of "fullscreen" currently active.
     2. There's "standard fullscreen" (either ours or external, aka, called by a button) active ("hot swap").

  3. ClearWindowState(FLAG_FULLSCREEN_MODE) will only leave "fullscreen" if "standard fullscreen" (either ours or external, aka, called by a button) is active.

  4. ClearWindowState(FLAG_BORDERLESS_WINDOWED_MODE) will only leave "fullscreen" if "borderless windowed fullscreen" (either ours or external, aka, called by a button) is active.

Changes

1. Fixes [rcore] Add ToggleFullscreen() implementation for PLATFORM_WEB #3634 e. Known issues 1 (i, ii, iii, iv).

2. Does that by implemented the behavior described on the Context section in the following way:

   1. For SetWindowState(FLAG_FULLSCREEN_MODE):

      1. It will first check if there's some "type" of "fullscreen" (R341).
      2. If there isn't, it will proceed to ToggleFullscreen() (R348).
      3. If there is (R342), it will check if it's ours FLAG_BORDERLESS_WINDOWED_MODE or if it's an "external" "borderless windowed fullscreen" (that is done by check if the screenWidth is equal to the canvasWidth). If it's some kind of "borderless windowed fullscreen", it will then ToggleFullscreen() ("hot swap") (R344-R346).
      4. On all other cases it will do nothing.

   2. For SetWindowState(FLAG_BORDERLESS_WINDOWED_MODE):

      1. It will first check if there's some "type" of "fullscreen" (R327).
      2. If there isn't, it will proceed to ToggleBorderlessWindowed() (R334).
      3. If there is (R328), it will check if it's ours FLAG_FULLSCREEN_MODE or if it's an "external" "standard fullscreen" (that is done by check if the canvasStyleWidth is larger than the canvasWidth). If it's some kind of "standard fullscreen", it will then ToggleBorderlessWindowed() ("hot swap") (R330-R332).
      4. On all other cases it will do nothing.

   3. For ClearWindowState(FLAG_FULLSCREEN_MODE):

      1. It will first check if there's some "type" of "fullscreen" (R463).
      2. If there is (R464), it will check if it's ours FLAG_FULLSCREEN_MODE or if it's an "external" "standard fullscreen" (that is done by check if the canvasStyleWidth is larger than the canvasWidth). If it's some kind of "standard fullscreen", it will then leave "fullscreen" (R466-R468).
      3. Either way it will reset the respective flags (R471-R472).

   4. For ClearWindowState(FLAG_BORDERLESS_WINDOWED_MODE):

      1. It will first check if there's some "type" of "fullscreen" (R449).
      2. If there is (R450), it will check if it's ours FLAG_BORDERLESS_WINDOWED_MODE or if it's an "external" "borderless windowed fullscreen" (that is done by check if the screenWidth is equal to the canvasWidth). If it's some kind of "borderless windowed fullscreen", it will then leave "fullscreen" (R452-R454).
      3. Either way it will reset the respective flag (R457).

   5. Adjusts the ToggleFullscreen() implementation by:

      1. Moving the leave "fullscreen" to after the "fullscreen" "type" detection (R160).
      2. Adding a check for a FLAG_BORDERLESS_WINDOWED_MODE ("hot swap") (R151).
      3. Adding a check for external "borderless windowed fullscreen" by checking if the canvasStyleWidth is larger than the canvasWidth (R154-R157).

   6. Adjusts the ToggleBorderlessWindowed() implementation by:

      1. Moving the leave "fullscreen" to after the "fullscreen" "type" detection (R267).
      2. Adding a check for a FLAG_FULLSCREEN_MODE ("hot swap") (R258).
      3. Adding a check for external "standard fullscreen" by checking if the screenWidth is equal to the canvasWidth (R261-R264).

References

• [rcore] Add ToggleFullscreen() implementation for PLATFORM_WEB #3634

• e. Known issues 1 (i, ii, iii, iv).

Notes

Note

Although there's a lot of mentions of Toggles "hot swap" on the PR, everything related to that is very easy to remove/revert if/when necessary.

Important

The checking for canvasWidth, canvasStyleWidth and screenWidth is necessary (regardless of Toggles "hot swap") because we still need to identify external "fullscreen" equivalents to ours (e.g.: like the ones issues by web page buttons).

Code example

• This change can be tested for PLATFORM_WEB (requires ASYNCIFY) with:

#include "raylib.h"

int main(void) {
    InitWindow(800, 450, "test");
    SetTargetFPS(60);
    while (!WindowShouldClose()) {

        if (IsKeyPressed(KEY_F)) ToggleFullscreen();
        if (IsKeyPressed(KEY_G)) SetWindowState(FLAG_FULLSCREEN_MODE);
        if (IsKeyPressed(KEY_H)) ClearWindowState(FLAG_FULLSCREEN_MODE);

        if (IsKeyPressed(KEY_B)) ToggleBorderlessWindowed();
        if (IsKeyPressed(KEY_N)) SetWindowState(FLAG_BORDERLESS_WINDOWED_MODE);
        if (IsKeyPressed(KEY_M)) ClearWindowState(FLAG_BORDERLESS_WINDOWED_MODE);

        BeginDrawing();
        ClearBackground(RAYWHITE);

        DrawText("[F] ToggleFullscreen()", 20, 20, 20, BLACK);
        DrawText("[G] SetWindowState(FLAG_FULLSCREEN_MODE)", 20, 40, 20, BLACK);
        DrawText("[H] ClearWindowState(FLAG_FULLSCREEN_MODE)", 20, 60, 20, BLACK);

        DrawText("[B] ToggleBorderlessWindowed()", 20, 100, 20, BLACK);
        DrawText("[N] SetWindowState(FLAG_BORDERLESS_WINDOWED_MODE)", 20, 120, 20, BLACK);
        DrawText("[M] ClearWindowState(FLAG_BORDERLESS_WINDOWED_MODE)", 20, 140, 20, BLACK);

        EndDrawing();
    }
    CloseWindow();
    return 0;
}

Tip

Just while testing this PR, it helps adding a second fullscreen button to shell.html that will call a "borderless windowed fullscreen". For example, by adding the following between lines L181-L182:

<span><input type="button" value="BORDERLESS" onclick="Module.requestFullscreen(false, true)"></span>

Environment

• Compiled on Linux (Ubuntu 22.04 64-bit) and tested on Firefox (115.3.1esr 64-bit) and Chromium (117.0.5938.149 64-bit) for both minshell.html and shell.html files.

Edits

• 1: editing.
• 2: editing and added line marks.

[raysan5]

@ubkp Wow! Thank you very much for the review and the detailed report about the fix and multiple fullscreen switch possibilities! You really analyzed probably all switch cases! Amazing work!

[ghost]

@raysan5 Thank you! Glad to help. :)