UnrealXR/raylib
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Using Module provided canvas id for event binding (#4690)

Browse source 
This change is replacing the hardcoded "#canvas" element references in
rcore_web to allow using canvas elements that use different names
(which is necessary when using multiple canvas elements on one page).

Also adding a cursor hiding example to mouse example.
This commit is contained in:
Eike Decker 2025-01-16 00:32:58 +01:00 • committed by GitHub
parent 35a9257d20
commit 5c1cce28a7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 52 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

23
examples/core/core_input_mouse.c
View file

@ -2,12 +2,12 @@
*
* raylib [core] example - Mouse input
*
* Example originally created with raylib 1.0, last time updated with raylib 4.0
* Example originally created with raylib 1.0, last time updated with raylib 5.5
*
* Example licensed under an unmodified zlib/libpng license, which is an OSI-certified,
* BSD-like license that allows static linking with closed source software
*
* Copyright (c) 2014-2024 Ramon Santamaria (@raysan5)
* Copyright (c) 2014-2025 Ramon Santamaria (@raysan5)
*
********************************************************************************************/
@ -27,6 +27,7 @@ int main(void)
Vector2 ballPosition = { -100.0f, -100.0f };
Color ballColor = DARKBLUE;
int isCursorHidden = 0;
SetTargetFPS(60); // Set our game to run at 60 frames-per-second
//---------------------------------------------------------------------------------------
@ -36,6 +37,20 @@ int main(void)
{
// Update
//----------------------------------------------------------------------------------
if (IsKeyPressed(KEY_H))
{
if (isCursorHidden == 0)
{
HideCursor();
isCursorHidden = 1;
}
else
{
ShowCursor();
isCursorHidden = 0;
}
}
ballPosition = GetMousePosition();
if (IsMouseButtonPressed(MOUSE_BUTTON_LEFT)) ballColor = MAROON;
@ -56,6 +71,10 @@ int main(void)
DrawCircleV(ballPosition, 40, ballColor);
DrawText("move ball with mouse and click mouse button to change color", 10, 10, 20, DARKGRAY);
DrawText("Press 'H' to toggle cursor visibility", 10, 30, 20, DARKGRAY);
if (isCursorHidden == 1) DrawText("CURSOR HIDDEN", 20, 60, 20, RED);
else DrawText("CURSOR VISIBLE", 20, 60, 20, LIME);
EndDrawing();
//----------------------------------------------------------------------------------

44
src/platforms/rcore_web.c
View file

@ -142,6 +142,8 @@ static EM_BOOL EmscriptenPointerlockCallback(int eventType, const EmscriptenPoin
static EM_BOOL EmscriptenTouchCallback(int eventType, const EmscriptenTouchEvent *touchEvent, void *userData);
static EM_BOOL EmscriptenGamepadCallback(int eventType, const EmscriptenGamepadEvent *gamepadEvent, void *userData);
static const char *GetCanvasId(void);
//----------------------------------------------------------------------------------
// Module Functions Declaration
//----------------------------------------------------------------------------------
@ -824,7 +826,7 @@ void ShowCursor(void)
{
if (CORE.Input.Mouse.cursorHidden)
{
EM_ASM( { document.getElementById("canvas").style.cursor = UTF8ToString($0); }, cursorLUT[CORE.Input.Mouse.cursor]);
EM_ASM( { Module.canvas.style.cursor = UTF8ToString($0); }, cursorLUT[CORE.Input.Mouse.cursor]);
CORE.Input.Mouse.cursorHidden = false;
}
@ -835,7 +837,7 @@ void HideCursor(void)
{
if (!CORE.Input.Mouse.cursorHidden)
{
EM_ASM(document.getElementById('canvas').style.cursor = 'none';);
EM_ASM(Module.canvas.style.cursor = 'none';);
CORE.Input.Mouse.cursorHidden = true;
}
@ -856,7 +858,7 @@ void EnableCursor(void)
void DisableCursor(void)
{
// TODO: figure out how not to hard code the canvas ID here.
emscripten_request_pointerlock("#canvas", 1);
emscripten_request_pointerlock(GetCanvasId(), 1);
// Set cursor position in the middle
SetMousePosition(CORE.Window.screen.width/2, CORE.Window.screen.height/2);
@ -1355,25 +1357,25 @@ int InitPlatform(void)
// emscripten_set_keydown_callback("#canvas", NULL, 1, EmscriptenKeyboardCallback);
// Support mouse events
emscripten_set_click_callback("#canvas", NULL, 1, EmscriptenMouseCallback);
emscripten_set_click_callback(GetCanvasId(), NULL, 1, EmscriptenMouseCallback);
emscripten_set_pointerlockchange_callback(EMSCRIPTEN_EVENT_TARGET_WINDOW, NULL, 1, EmscriptenPointerlockCallback);
// Following the mouse delta when the mouse is locked
emscripten_set_mousemove_callback("#canvas", NULL, 1, EmscriptenMouseMoveCallback);
emscripten_set_mousemove_callback(GetCanvasId(), NULL, 1, EmscriptenMouseMoveCallback);
// Support touch events
emscripten_set_touchstart_callback("#canvas", NULL, 1, EmscriptenTouchCallback);
emscripten_set_touchend_callback("#canvas", NULL, 1, EmscriptenTouchCallback);
emscripten_set_touchmove_callback("#canvas", NULL, 1, EmscriptenTouchCallback);
emscripten_set_touchcancel_callback("#canvas", NULL, 1, EmscriptenTouchCallback);
emscripten_set_touchstart_callback(GetCanvasId(), NULL, 1, EmscriptenTouchCallback);
emscripten_set_touchend_callback(GetCanvasId(), NULL, 1, EmscriptenTouchCallback);
emscripten_set_touchmove_callback(GetCanvasId(), NULL, 1, EmscriptenTouchCallback);
emscripten_set_touchcancel_callback(GetCanvasId(), NULL, 1, EmscriptenTouchCallback);
// Support gamepad events (not provided by GLFW3 on emscripten)
emscripten_set_gamepadconnected_callback(NULL, 1, EmscriptenGamepadCallback);
emscripten_set_gamepaddisconnected_callback(NULL, 1, EmscriptenGamepadCallback);
// Support focus events
emscripten_set_blur_callback("#canvas", platform.handle, 1, EmscriptenFocusCallback);
emscripten_set_focus_callback("#canvas", platform.handle, 1, EmscriptenFocusCallback);
emscripten_set_blur_callback(GetCanvasId(), platform.handle, 1, EmscriptenFocusCallback);
emscripten_set_focus_callback(GetCanvasId(), platform.handle, 1, EmscriptenFocusCallback);
//----------------------------------------------------------------------------
// Initialize timing system
@ -1674,7 +1676,7 @@ static EM_BOOL EmscriptenResizeCallback(int eventType, const EmscriptenUiEvent *
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("#canvas", width, height);
emscripten_set_canvas_element_size(GetCanvasId(), width, height);
SetupViewport(width, height); // Reset viewport and projection matrix for new size
@ -1760,7 +1762,7 @@ static EM_BOOL EmscriptenTouchCallback(int eventType, const EmscriptenTouchEvent
// NOTE: emscripten_get_canvas_element_size() returns canvas.width and canvas.height but
// we are looking for actual CSS size: canvas.style.width and canvas.style.height
// EMSCRIPTEN_RESULT res = emscripten_get_canvas_element_size("#canvas", &canvasWidth, &canvasHeight);
emscripten_get_element_css_size("#canvas", &canvasWidth, &canvasHeight);
emscripten_get_element_css_size(GetCanvasId(), &canvasWidth, &canvasHeight);
for (int i = 0; (i < CORE.Input.Touch.pointCount) && (i < MAX_TOUCH_POINTS); i++)
{
@ -1835,4 +1837,20 @@ static EM_BOOL EmscriptenTouchCallback(int eventType, const EmscriptenTouchEvent
return 1; // The event was consumed by the callback handler
}
// obtaining the canvas id provided by the module configuration
EM_JS(char*, GetCanvasIdJs, (), {
var canvasId = "#" + Module.canvas.id;
var lengthBytes = lengthBytesUTF8(canvasId) + 1;
var stringOnWasmHeap = _malloc(lengthBytes);
stringToUTF8(canvasId, stringOnWasmHeap, lengthBytes);
return stringOnWasmHeap;
});
static const char *GetCanvasId(void)
{
static char *canvasId = NULL;
if (canvasId == NULL) canvasId = GetCanvasIdJs();
return canvasId;
}
// EOF