Merge pull request #4945 from Moros1138/master

[rcore][web] Review resizable canvas on `FLAG_WINDOW_RESIZABLE`

src/platforms/rcore_web.c

@@ -1132,7 +1132,15 @@ int InitPlatform(void)
     if ((CORE.Window.flags & FLAG_WINDOW_UNDECORATED) > 0) glfwWindowHint(GLFW_DECORATED, GLFW_FALSE); // Border and buttons on Window
     else glfwWindowHint(GLFW_DECORATED, GLFW_TRUE); // Decorated window
 
-    if ((CORE.Window.flags & FLAG_WINDOW_RESIZABLE) > 0) glfwWindowHint(GLFW_RESIZABLE, GLFW_TRUE); // Resizable window
+    if ((CORE.Window.flags & FLAG_WINDOW_RESIZABLE) > 0)
+    {
+        glfwWindowHint(GLFW_RESIZABLE, GLFW_TRUE); // Resizable window
+        
+        // bypass hidpi code block in libglfw.js
+        // https://github.com/raysan5/raylib/pull/4945#issuecomment-2906956170
+        //------------------------------------------------------------------------
+        glfwWindowHint(GLFW_SCALE_TO_MONITOR, GLFW_TRUE); 
+    }
     else glfwWindowHint(GLFW_RESIZABLE, GLFW_FALSE); // Avoid window being resizable
 
     // Disable FLAG_WINDOW_MINIMIZED, not supported on initialization
@@ -1625,7 +1633,24 @@ static void MouseEnterCallback(GLFWwindow *window, int enter)
 static EM_BOOL EmscriptenKeyboardCallback(int eventType, const EmscriptenKeyboardEvent *keyboardEvent, void *userData)
 {
     // WARNING: Keyboard inputs already processed through GLFW callback
-    
+
+    // 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;
+        }
+    }
+
+    // Trigger resize event after a brief pause to ensure the canvas exists to resize
+    EM_ASM({ setTimeout(function() { window.dispatchEvent(new Event("resize")); }, 50); });
+
     return 1; // The event was consumed by the callback handler
 }
 */
@@ -1633,7 +1658,42 @@ static EM_BOOL EmscriptenKeyboardCallback(int eventType, const EmscriptenKeyboar
 // Emscripten: Called on mouse input events
 static EM_BOOL EmscriptenMouseCallback(int eventType, const EmscriptenMouseEvent *mouseEvent, void *userData)
 {
-    // This is only for registering mouse click events with emscripten and doesn't need to do anything
+    // NOTE: Current code solves mouse position problems with the 3 possible approaches to canvas scaling
+    // 1. Canvas not scaled, framebuffer size is fixed
+    // 2. Canvas is scaled to 100% browser size, framebuffer size is fixed
+    // 3. Canvas is resized to browser size, framebuffer is resized
+  
+    // Don't resize non-resizeable windows
+    if ((CORE.Window.flags & FLAG_WINDOW_RESIZABLE) == 0) return 1;
+
+    // This event is called whenever the window changes sizes,
+    // so the size of the canvas object is explicitly retrieved below
+    int width = EM_ASM_INT( return window.innerWidth; );
+    int height = EM_ASM_INT( return window.innerHeight; );
+    
+    if (width < (int)CORE.Window.screenMin.width) width = CORE.Window.screenMin.width;
+    else if ((width > (int)CORE.Window.screenMax.width) && (CORE.Window.screenMax.width > 0)) width = CORE.Window.screenMax.width;
+
+    if (height < (int)CORE.Window.screenMin.height) height = CORE.Window.screenMin.height;
+    else if ((height > (int)CORE.Window.screenMax.height) && (CORE.Window.screenMax.height > 0)) height = CORE.Window.screenMax.height;
+
+    emscripten_set_canvas_element_size(GetCanvasId(), width, height);
+
+    glfwSetWindowSize(platform.handle, width, height); // Inform glfw of the new size
+
+    SetupViewport(width, height); // Reset viewport and projection matrix for new size
+
+    CORE.Window.currentFbo.width = width;
+    CORE.Window.currentFbo.height = height;
+    CORE.Window.resizedLastFrame = true;
+
+    if (IsWindowFullscreen()) return 1;
+
+    // Set current screen size
+    CORE.Window.screen.width = width;
+    CORE.Window.screen.height = height;
+
+    // WARNING: RenderTextures are not scaled to new size
 
     return 1; // The event was consumed by the callback handler
 }