Add modifier keys to every keyboard and mouse input (#247)

* Add modifier keys to every keyboard and mouse input

* Fix bad naming convention in Typescript

* Added some tests related to modifier keys
This commit is contained in:
Simon Desloges
2021-07-11 23:46:00 -04:00
committed by Keavon Chambers
parent 1454be24d3
commit bb79bbd0e4
6 changed files with 159 additions and 32 deletions

View File

@@ -228,32 +228,42 @@ function redirectKeyboardEventToBackend(e: KeyboardEvent): boolean {
return true;
}
function makeModifiersBitfield(control: boolean, shift: boolean, alt: boolean): number {
// eslint-disable-next-line no-bitwise
return Number(control) | (Number(shift) << 1) | (Number(alt) << 2);
}
export default defineComponent({
methods: {
async canvasMouseDown(e: MouseEvent) {
const { on_mouse_down } = await wasm;
on_mouse_down(e.offsetX, e.offsetY, e.buttons);
const modifiers = makeModifiersBitfield(e.ctrlKey, e.shiftKey, e.altKey);
on_mouse_down(e.offsetX, e.offsetY, e.buttons, modifiers);
},
async canvasMouseUp(e: MouseEvent) {
const { on_mouse_up } = await wasm;
on_mouse_up(e.offsetX, e.offsetY, e.buttons);
const modifiers = makeModifiersBitfield(e.ctrlKey, e.shiftKey, e.altKey);
on_mouse_up(e.offsetX, e.offsetY, e.buttons, modifiers);
},
async canvasMouseMove(e: MouseEvent) {
const { on_mouse_move } = await wasm;
on_mouse_move(e.offsetX, e.offsetY);
const modifiers = makeModifiersBitfield(e.ctrlKey, e.shiftKey, e.altKey);
on_mouse_move(e.offsetX, e.offsetY, modifiers);
},
async keyDown(e: KeyboardEvent) {
if (redirectKeyboardEventToBackend(e)) {
e.preventDefault();
const { on_key_down } = await wasm;
on_key_down(e.key);
const modifiers = makeModifiersBitfield(e.ctrlKey, e.shiftKey, e.altKey);
on_key_down(e.key, modifiers);
}
},
async keyUp(e: KeyboardEvent) {
if (redirectKeyboardEventToBackend(e)) {
e.preventDefault();
const { on_key_up } = await wasm;
on_key_up(e.key);
const modifiers = makeModifiersBitfield(e.ctrlKey, e.shiftKey, e.altKey);
on_key_up(e.key, modifiers);
}
},
async selectTool(toolName: string) {

View File

@@ -1,6 +1,7 @@
use crate::shims::Error;
use crate::wrappers::{translate_key, translate_tool, Color};
use crate::EDITOR_STATE;
use editor_core::input::input_preprocessor::ModifierKeys;
use editor_core::message_prelude::*;
use editor_core::{
input::mouse::{MouseState, ViewportPosition},
@@ -39,43 +40,48 @@ pub fn new_document() -> Result<(), JsValue> {
// TODO: When a mouse button is down that started in the viewport, this should trigger even when the mouse is outside the viewport (or even the browser window if the browser supports it)
/// Mouse movement within the screenspace bounds of the viewport
#[wasm_bindgen]
pub fn on_mouse_move(x: u32, y: u32) -> Result<(), JsValue> {
pub fn on_mouse_move(x: u32, y: u32, modifiers: u8) -> Result<(), JsValue> {
let mods = ModifierKeys::from_bits(modifiers).expect("invalid modifier keys");
// TODO: Convert these screenspace viewport coordinates to canvas coordinates based on the current zoom and pan
let ev = InputPreprocessorMessage::MouseMove(ViewportPosition { x, y });
let ev = InputPreprocessorMessage::MouseMove(ViewportPosition { x, y }, mods);
EDITOR_STATE.with(|editor| editor.borrow_mut().handle_message(ev)).map_err(convert_error)
}
/// A mouse button depressed within screenspace the bounds of the viewport
#[wasm_bindgen]
pub fn on_mouse_down(x: u32, y: u32, mouse_keys: u8) -> Result<(), JsValue> {
pub fn on_mouse_down(x: u32, y: u32, mouse_keys: u8, modifiers: u8) -> Result<(), JsValue> {
let pos = ViewportPosition { x, y };
let ev = InputPreprocessorMessage::MouseDown(MouseState::from_u8_pos(mouse_keys, pos));
let mods = ModifierKeys::from_bits(modifiers).expect("invalid modifier keys");
let ev = InputPreprocessorMessage::MouseDown(MouseState::from_u8_pos(mouse_keys, pos), mods);
EDITOR_STATE.with(|editor| editor.borrow_mut().handle_message(ev)).map_err(convert_error)
}
/// A mouse button released
#[wasm_bindgen]
pub fn on_mouse_up(x: u32, y: u32, mouse_keys: u8) -> Result<(), JsValue> {
pub fn on_mouse_up(x: u32, y: u32, mouse_keys: u8, modifiers: u8) -> Result<(), JsValue> {
let pos = ViewportPosition { x, y };
let ev = InputPreprocessorMessage::MouseUp(MouseState::from_u8_pos(mouse_keys, pos));
let mods = ModifierKeys::from_bits(modifiers).expect("invalid modifier keys");
let ev = InputPreprocessorMessage::MouseUp(MouseState::from_u8_pos(mouse_keys, pos), mods);
EDITOR_STATE.with(|editor| editor.borrow_mut().handle_message(ev)).map_err(convert_error)
}
/// A keyboard button depressed within screenspace the bounds of the viewport
#[wasm_bindgen]
pub fn on_key_down(name: String) -> Result<(), JsValue> {
pub fn on_key_down(name: String, modifiers: u8) -> Result<(), JsValue> {
let key = translate_key(&name);
log::trace!("key down {:?}, name: {}", key, name);
let ev = InputPreprocessorMessage::KeyDown(key);
let mods = ModifierKeys::from_bits(modifiers).expect("invalid modifier keys");
log::trace!("key down {:?}, name: {}, modifiers: {:?}", key, name, mods);
let ev = InputPreprocessorMessage::KeyDown(key, mods);
EDITOR_STATE.with(|editor| editor.borrow_mut().handle_message(ev)).map_err(convert_error)
}
/// A keyboard button released
#[wasm_bindgen]
pub fn on_key_up(name: String) -> Result<(), JsValue> {
pub fn on_key_up(name: String, modifiers: u8) -> Result<(), JsValue> {
let key = translate_key(&name);
log::trace!("key up {:?}, name: {}", key, name);
let ev = InputPreprocessorMessage::KeyUp(key);
let mods = ModifierKeys::from_bits(modifiers).expect("invalid modifier keys");
log::trace!("key up {:?}, name: {}, modifiers: {:?}", key, name, mods);
let ev = InputPreprocessorMessage::KeyUp(key, mods);
EDITOR_STATE.with(|editor| editor.borrow_mut().handle_message(ev)).map_err(convert_error)
}