Fix nudge and textbox creation

Author: 0HyperCube

editor/src/input/input_preprocessor_message_handler.rs

@@ -114,13 +114,18 @@ impl MessageHandler<InputPreprocessorMessage, ()> for InputPreprocessorMessageHa
 }
 
 impl InputPreprocessorMessageHandler {
-	fn translate_mouse_event(&mut self, new_state: MouseState, allow_first_button_down: bool, responses: &mut VecDeque<Message>) {
+	fn translate_mouse_event(&mut self, mut new_state: MouseState, allow_first_button_down: bool, responses: &mut VecDeque<Message>) {
 		for (bit_flag, key) in [(MouseKeys::LEFT, Key::Lmb), (MouseKeys::RIGHT, Key::Rmb), (MouseKeys::MIDDLE, Key::Mmb)] {
 			// Calculate the intersection between the two key states
 			let old_down = self.mouse.mouse_keys & bit_flag == bit_flag;
 			let new_down = new_state.mouse_keys & bit_flag == bit_flag;
-			if !old_down && new_down && (allow_first_button_down || self.mouse.mouse_keys != MouseKeys::NONE) {
-				responses.push_back(InputMapperMessage::KeyDown(key).into());
+			if !old_down && new_down {
+				if allow_first_button_down || self.mouse.mouse_keys != MouseKeys::NONE {
+					responses.push_back(InputMapperMessage::KeyDown(key).into());
+				} else {
+					// Required to stop a keyup being emitted for a keydown outside canvas
+					new_state.mouse_keys ^= bit_flag;
+				}
 			}
 			if old_down && !new_down {
 				responses.push_back(InputMapperMessage::KeyUp(key).into());

frontend/src/io-managers/input.ts

@@ -31,6 +31,13 @@ export function createInputManager(editor: Editor, container: HTMLElement, dialo
 
 	let viewportPointerInteractionOngoing = false;
 	let textInput = undefined as undefined | HTMLDivElement;
+	let inCanvas = true;
+
+	const app = window.document.getElementById("app");
+	app?.focus();
+	app?.addEventListener("blur", () => {
+		inCanvas = false;
+	});
 
 	// Keyboard events
 
@@ -66,7 +73,6 @@ export function createInputManager(editor: Editor, container: HTMLElement, dialo
 		if (e.ctrlKey && e.shiftKey && key === "j") return false;
 
 		// Don't redirect tab or enter if not in canvas (to allow navigating elements)
-		const inCanvas = e.target instanceof Element && e.target.closest("[data-canvas]");
 		if (!inCanvas && ["tab", "enter", " ", "arrowdown", "arrowup", "arrowleft", "arrowright"].includes(key.toLowerCase())) return false;
 
 		// Redirect to the backend
@@ -113,6 +119,10 @@ export function createInputManager(editor: Editor, container: HTMLElement, dialo
 		const inFloatingMenu = e.target instanceof Element && e.target.closest("[data-floating-menu-content]");
 		if (!viewportPointerInteractionOngoing && inFloatingMenu) return;
 
+		const { target } = e;
+		inCanvas = (target instanceof Element && target.closest("[data-canvas]")) instanceof Element && !targetIsTextField(window.document.activeElement);
+		if (inCanvas) app?.focus();
+
 		const modifiers = makeKeyboardModifiersBitfield(e);
 		editor.instance.on_mouse_move(e.clientX, e.clientY, e.buttons, modifiers);
 	}
@@ -131,7 +141,7 @@ export function createInputManager(editor: Editor, container: HTMLElement, dialo
 
 		if (!inTextInput) {
 			if (textInput) editor.instance.on_change_text(textInputCleanup(textInput.innerText));
-			else if (inCanvas) viewportPointerInteractionOngoing = true;
+			else viewportPointerInteractionOngoing = inCanvas instanceof Element;
 		}
 
 		if (viewportPointerInteractionOngoing) {
@@ -246,7 +256,7 @@ export function createInputManager(editor: Editor, container: HTMLElement, dialo
 		});
 	}
 
-	function targetIsTextField(target: EventTarget | null): boolean {
+	function targetIsTextField(target: EventTarget | HTMLElement | null): boolean {
 		return target instanceof HTMLElement && (target.nodeName === "INPUT" || target.nodeName === "TEXTAREA" || target.isContentEditable);
 	}