MrMonopoly/raylib
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixing resize and mouse input coordinates

Browse Source 
Also replacing hardcoded canvas id references with module variable usages
This commit is contained in:
Eike Decker 2025-01-28 23:26:13 +01:00
parent 2492dd3d0a
commit 91b108d789
1 changed files with 49 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/platforms/rcore_web.c
View File

@ -185,8 +185,8 @@ void ToggleFullscreen(void)
else if (CORE.Window.flags & FLAG_BORDERLESS_WINDOWED_MODE) enterFullscreen = true;
else
{
const int canvasWidth = EM_ASM_INT( { return document.getElementById('canvas').width; }, 0);
const int canvasStyleWidth = EM_ASM_INT( { return parseInt(document.getElementById('canvas').style.width); }, 0);
const int canvasWidth = EM_ASM_INT( { return Module.canvas.width; }, 0);
const int canvasStyleWidth = EM_ASM_INT( { return parseInt(Module.canvas.style.width); }, 0);
if (canvasStyleWidth > canvasWidth) enterFullscreen = false;
else enterFullscreen = true;
}
@ -293,7 +293,7 @@ void ToggleBorderlessWindowed(void)
else if (CORE.Window.flags & FLAG_FULLSCREEN_MODE) enterBorderless = true;
else
{
const int canvasWidth = EM_ASM_INT( { return document.getElementById('canvas').width; }, 0);
const int canvasWidth = EM_ASM_INT( { return Module.canvas.width; }, 0);
const int screenWidth = EM_ASM_INT( { return screen.width; }, 0);
if (screenWidth == canvasWidth) enterBorderless = false;
else enterBorderless = true;
@ -379,8 +379,8 @@ void SetWindowState(unsigned int flags)
const bool wasFullscreen = EM_ASM_INT( { if (document.fullscreenElement) return 1; }, 0);
if (wasFullscreen)
{
const int canvasWidth = EM_ASM_INT( { return document.getElementById('canvas').width; }, 0);
const int canvasStyleWidth = EM_ASM_INT( { return parseInt(document.getElementById('canvas').style.width); }, 0);
const int canvasWidth = EM_ASM_INT( { return Module.canvas.width; }, 0);
const int canvasStyleWidth = EM_ASM_INT( { return parseInt(Module.canvas.style.width); }, 0);
if ((CORE.Window.flags & FLAG_FULLSCREEN_MODE) || canvasStyleWidth > canvasWidth) ToggleBorderlessWindowed();
}
else ToggleBorderlessWindowed();
@ -393,7 +393,7 @@ void SetWindowState(unsigned int flags)
const bool wasFullscreen = EM_ASM_INT( { if (document.fullscreenElement) return 1; }, 0);
if (wasFullscreen)
{
const int canvasWidth = EM_ASM_INT( { return document.getElementById('canvas').width; }, 0);
const int canvasWidth = EM_ASM_INT( { return Module.canvas.width; }, 0);
const int screenWidth = EM_ASM_INT( { return screen.width; }, 0);
if ((CORE.Window.flags & FLAG_BORDERLESS_WINDOWED_MODE) || screenWidth == canvasWidth ) ToggleFullscreen();
}
@ -512,7 +512,7 @@ void ClearWindowState(unsigned int flags)
const bool wasFullscreen = EM_ASM_INT( { if (document.fullscreenElement) return 1; }, 0);
if (wasFullscreen)
{
const int canvasWidth = EM_ASM_INT( { return document.getElementById('canvas').width; }, 0);
const int canvasWidth = EM_ASM_INT( { return Module.canvas.width; }, 0);
const int screenWidth = EM_ASM_INT( { return screen.width; }, 0);
if ((CORE.Window.flags & FLAG_BORDERLESS_WINDOWED_MODE) || (screenWidth == canvasWidth)) EM_ASM(document.exitFullscreen(););
}
@ -526,8 +526,8 @@ void ClearWindowState(unsigned int flags)
const bool wasFullscreen = EM_ASM_INT( { if (document.fullscreenElement) return 1; }, 0);
if (wasFullscreen)
{
const int canvasWidth = EM_ASM_INT( { return document.getElementById('canvas').width; }, 0);
const int canvasStyleWidth = EM_ASM_INT( { return parseInt(document.getElementById('canvas').style.width); }, 0);
const int canvasWidth = EM_ASM_INT( { return Module.canvas.width; }, 0);
const int canvasStyleWidth = EM_ASM_INT( { return parseInt(Module.canvas.style.width); }, 0);
if ((CORE.Window.flags & FLAG_FULLSCREEN_MODE) || (canvasStyleWidth > canvasWidth)) EM_ASM(document.exitFullscreen(););
}
@ -685,7 +685,7 @@ void SetWindowOpacity(float opacity)
{
if (opacity >= 1.0f) opacity = 1.0f;
else if (opacity <= 0.0f) opacity = 0.0f;
EM_ASM({ document.getElementById('canvas').style.opacity = $0; }, opacity);
EM_ASM({ Module.canvas.style.opacity = $0; }, opacity);
}
// Set window focused
@ -962,7 +962,7 @@ void SetMouseCursor(int cursor)
{
if (CORE.Input.Mouse.cursor != cursor)
{
if (!CORE.Input.Mouse.cursorHidden) EM_ASM( { document.getElementById('canvas').style.cursor = UTF8ToString($0); }, cursorLUT[cursor]);
if (!CORE.Input.Mouse.cursorHidden) EM_ASM( { Module.canvas.style.cursor = UTF8ToString($0); }, cursorLUT[cursor]);
CORE.Input.Mouse.cursor = cursor;
}
@ -1303,7 +1303,9 @@ int InitPlatform(void)
glfwSetKeyCallback(platform.handle, KeyCallback);
glfwSetCharCallback(platform.handle, CharCallback);
glfwSetMouseButtonCallback(platform.handle, MouseButtonCallback);
glfwSetCursorPosCallback(platform.handle, MouseCursorPosCallback); // Track mouse position changes
// For some reason, GLFW mouse inputs are not properly working
// Using emscripten mouse inputs instead (which was formerly ignored in favor of GLFW)
// glfwSetCursorPosCallback(platform.handle, MouseCursorPosCallback); // Track mouse position changes
glfwSetScrollCallback(platform.handle, MouseScrollCallback);
glfwSetCursorEnterCallback(platform.handle, CursorEnterCallback);
@ -1621,7 +1623,24 @@ static EM_BOOL EmscriptenMouseMoveCallback(int eventType, const EmscriptenMouseE
CORE.Input.Mouse.previousPosition.x = lockedMousePos.x - mouseEvent->movementX;
CORE.Input.Mouse.previousPosition.y = lockedMousePos.y - mouseEvent->movementY;
}
else
{
// canvasX and canvasY are 0 0 (no idea why) - clientX and clientY are provided but are
// not relative to the canvas, so we have to obtain the top-left corner of the canvas
// Moreover, the canvas size can be different from the window size, so we have to normalize
// the mouse position to the window size to make sure it's correct
double canvasLeft = EM_ASM_DOUBLE( return Module.canvas.getBoundingClientRect().left; );
double canvasTop = EM_ASM_DOUBLE( return Module.canvas.getBoundingClientRect().top; );
double canvasRight = EM_ASM_DOUBLE( return Module.canvas.getBoundingClientRect().right; );
double canvasBottom = EM_ASM_DOUBLE( return Module.canvas.getBoundingClientRect().bottom; );
double normalizedX = (mouseEvent->clientX - canvasLeft) / (canvasRight - canvasLeft);
double normalizedY = (mouseEvent->clientY - canvasTop) / (canvasBottom - canvasTop);
CORE.Input.Mouse.currentPosition.x = (float) (normalizedX * CORE.Window.screen.width);
CORE.Input.Mouse.currentPosition.y = (float) (normalizedY * CORE.Window.screen.height);
}
return 1; // The event was consumed by the callback handler
}
@ -1674,28 +1693,32 @@ static EM_BOOL EmscriptenResizeCallback(int eventType, const EmscriptenUiEvent *
// 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; );
int windowWidth = EM_ASM_INT( return window.innerWidth; );
int windowHeight = EM_ASM_INT( return window.innerHeight; );
int canvasWidth = EM_ASM_INT( return Module.canvas.width; );
int canvasHeight = EM_ASM_INT( return Module.canvas.height; );
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 (windowWidth < (int)CORE.Window.screenMin.width) windowWidth = CORE.Window.screenMin.width;
else if ((windowWidth > (int)CORE.Window.screenMax.width) && (CORE.Window.screenMax.width > 0)) windowWidth = 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;
if (windowHeight < (int)CORE.Window.screenMin.height) windowHeight = CORE.Window.screenMin.height;
else if ((windowHeight > (int)CORE.Window.screenMax.height) && (CORE.Window.screenMax.height > 0)) windowHeight = CORE.Window.screenMax.height;
emscripten_set_canvas_element_size(GetCanvasId(), width, height);
if (IsWindowFullscreen()) {
canvasWidth = windowWidth;
canvasHeight = windowHeight;
}
emscripten_set_canvas_element_size(GetCanvasId(), canvasWidth, canvasHeight);
SetupViewport(width, height); // Reset viewport and projection matrix for new size
SetupViewport(canvasWidth, canvasHeight); // Reset viewport and projection matrix for new size
CORE.Window.currentFbo.width = width;
CORE.Window.currentFbo.height = height;
CORE.Window.currentFbo.width = canvasWidth;
CORE.Window.currentFbo.height = canvasHeight;
CORE.Window.resizedLastFrame = true;
if (IsWindowFullscreen()) return 1;
// Set current screen size
CORE.Window.screen.width = width;
CORE.Window.screen.height = height;
CORE.Window.screen.width = canvasWidth;
CORE.Window.screen.height = canvasHeight;
// NOTE: Postprocessing texture is not scaled to new size