From 5c1cce28a7fefbb184dc4bc922325a46e047f7dd Mon Sep 17 00:00:00 2001 From: Eike Decker Date: Thu, 16 Jan 2025 00:32:58 +0100 Subject: [PATCH] Using Module provided canvas id for event binding (#4690) 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. --- examples/core/core_input_mouse.c | 23 +++++++++++++++-- src/platforms/rcore_web.c | 44 ++++++++++++++++++++++---------- 2 files changed, 52 insertions(+), 15 deletions(-) diff --git a/examples/core/core_input_mouse.c b/examples/core/core_input_mouse.c index e6a3e15d..e4c6f20e 100644 --- a/examples/core/core_input_mouse.c +++ b/examples/core/core_input_mouse.c @@ -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(); //---------------------------------------------------------------------------------- diff --git a/src/platforms/rcore_web.c b/src/platforms/rcore_web.c index 78fd46f5..4faf5b87 100644 --- a/src/platforms/rcore_web.c +++ b/src/platforms/rcore_web.c @@ -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