From 2a6e73f9c8fb77e35967f8e6ba4d785ae965f686 Mon Sep 17 00:00:00 2001 From: tpby2005 Date: Sat, 10 Feb 2024 13:23:31 -0800 Subject: [PATCH 1/3] added initial support for gestures, namely tapping which is used in core_basic_screen_manager, as well as disabling right-click context menu in the game canvas --- raylib.js | 29 +++++++++++++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/raylib.js b/raylib.js index 0f8da8f..4ac3597 100644 --- a/raylib.js +++ b/raylib.js @@ -32,6 +32,7 @@ class RaylibJs { this.currentPressedKeyState = new Set(); this.currentMouseWheelMoveState = 0; this.currentMousePosition = {x: 0, y: 0}; + this.currentGestureState = 0; this.quit = false; } @@ -59,6 +60,10 @@ class RaylibJs { env: make_environment(this) }); + canvas.oncontextmenu = function(e) { + e.preventDefault(); + }; + const keyDown = (e) => { this.currentPressedKeyState.add(glfwKeyMapping[e.code]); }; @@ -71,10 +76,15 @@ class RaylibJs { const mouseMove = (e) => { this.currentMousePosition = {x: e.clientX, y: e.clientY}; }; + const gestureTap = (e) => { + if (e.target.id === 'game') + this.currentGestureState = gestureMapping.GESTURE_TAP; + }; window.addEventListener("keydown", keyDown); window.addEventListener("keyup", keyUp); window.addEventListener("wheel", wheelMove); window.addEventListener("mousemove", mouseMove); + window.addEventListener("mousedown", gestureTap); this.wasm.instance.exports.main(); const next = (timestamp) => { @@ -131,6 +141,7 @@ class RaylibJs { this.prevPressedKeyState.clear(); this.prevPressedKeyState = new Set(this.currentPressedKeyState); this.currentMouseWheelMoveState = 0.0; + this.currentGestureState = 0; } DrawCircleV(center_ptr, radius, color_ptr) { @@ -178,8 +189,8 @@ class RaylibJs { GetMouseWheelMove() { return this.currentMouseWheelMoveState; } - IsGestureDetected() { - return false; + IsGestureDetected(gesture) { + return this.currentGestureState === gesture; } TextFormat(... args){ @@ -364,6 +375,20 @@ const glfwKeyMapping = { // GLFW_KEY_LAST GLFW_KEY_MENU } +const gestureMapping = { + GESTURE_NONE: 0, + GESTURE_TAP: 1, + GESTURE_DOUBLETAP: 2, + GESTURE_HOLD: 4, + GESTURE_DRAG: 8, + GESTURE_SWIPE_RIGHT: 16, + GESTURE_SWIPE_LEFT: 32, + GESTURE_SWIPE_UP: 64, + GESTURE_SWIPE_DOWN: 128, + GESTURE_PINCH_IN: 256, + GESTURE_PINCH_OUT: 512 +} + function cstrlen(mem, ptr) { let len = 0; while (mem[ptr] != 0) { From 9d5904c297756bc51fe99a5b245100c78b71bcad Mon Sep 17 00:00:00 2001 From: tpby2005 Date: Tue, 13 Feb 2024 10:27:13 -0800 Subject: [PATCH 2/3] Changed gesture event listener to game canvas --- raylib.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/raylib.js b/raylib.js index 4ac3597..8d78bce 100644 --- a/raylib.js +++ b/raylib.js @@ -64,6 +64,8 @@ class RaylibJs { e.preventDefault(); }; + canvas.addEventListener("mousedown", gestureTap); + const keyDown = (e) => { this.currentPressedKeyState.add(glfwKeyMapping[e.code]); }; @@ -77,14 +79,12 @@ class RaylibJs { this.currentMousePosition = {x: e.clientX, y: e.clientY}; }; const gestureTap = (e) => { - if (e.target.id === 'game') - this.currentGestureState = gestureMapping.GESTURE_TAP; + this.currentGestureState = gestureMapping.GESTURE_TAP; }; window.addEventListener("keydown", keyDown); window.addEventListener("keyup", keyUp); window.addEventListener("wheel", wheelMove); window.addEventListener("mousemove", mouseMove); - window.addEventListener("mousedown", gestureTap); this.wasm.instance.exports.main(); const next = (timestamp) => { From 9d9fb9cc2b4aac64725112fd2f35f5b8f0331d78 Mon Sep 17 00:00:00 2001 From: tpby2005 Date: Tue, 13 Feb 2024 17:29:09 -0800 Subject: [PATCH 3/3] changed order because function only needs to be initialized above *sometimes* (js moment) --- raylib.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/raylib.js b/raylib.js index 8d78bce..3d7d385 100644 --- a/raylib.js +++ b/raylib.js @@ -59,13 +59,7 @@ class RaylibJs { this.wasm = await WebAssembly.instantiateStreaming(fetch(wasmPath), { env: make_environment(this) }); - - canvas.oncontextmenu = function(e) { - e.preventDefault(); - }; - - canvas.addEventListener("mousedown", gestureTap); - + const keyDown = (e) => { this.currentPressedKeyState.add(glfwKeyMapping[e.code]); }; @@ -73,19 +67,24 @@ class RaylibJs { this.currentPressedKeyState.delete(glfwKeyMapping[e.code]); }; const wheelMove = (e) => { - this.currentMouseWheelMoveState = Math.sign(-e.deltaY); + this.currentMouseWheelMoveState = Math.sign(-e.deltaY); }; const mouseMove = (e) => { this.currentMousePosition = {x: e.clientX, y: e.clientY}; }; const gestureTap = (e) => { - this.currentGestureState = gestureMapping.GESTURE_TAP; + this.currentGestureState = gestureMapping.GESTURE_TAP; }; window.addEventListener("keydown", keyDown); window.addEventListener("keyup", keyUp); window.addEventListener("wheel", wheelMove); window.addEventListener("mousemove", mouseMove); + canvas.addEventListener("mousedown", gestureTap); + canvas.oncontextmenu = function(e) { + e.preventDefault(); + }; + this.wasm.instance.exports.main(); const next = (timestamp) => { if (this.quit) {