Skip to content

Commit

Permalink
Using Module provided canvas id for event binding (#4690)
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@zet23t
zet23t authored Jan 15, 2025
1 parent 35a9257 commit 5c1cce2
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 15 deletions.
23 changes: 21 additions & 2 deletions examples/core/core_input_mouse.c
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
*
********************************************************************************************/

Expand All @@ -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
//---------------------------------------------------------------------------------------
Expand All @@ -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;
Expand All @@ -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();
//----------------------------------------------------------------------------------
Expand Down
44 changes: 31 additions & 13 deletions src/platforms/rcore_web.c
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
//----------------------------------------------------------------------------------
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
}
Expand All @@ -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);
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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

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

0 comments on commit 5c1cce2

Please sign in to comment.