Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixing resize and mouse input coordinates #4734

Closed
wants to merge 1 commit into from
Closed

Fixing resize and mouse input coordinates #4734

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 49 additions & 26 deletions src/platforms/rcore_web.c
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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();
Expand All @@ -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();
}
Expand Down Expand Up @@ -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(););
}
Expand All @@ -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(););
}

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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
}

Expand Down Expand Up @@ -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

Expand Down
Loading