mirror of
https://github.com/storytold/storyteller-bevy.git
synced 2026-10-17 00:13:17 +00:00
Danny McGee
21a6cb42fe
This PR fixes two issues that can cause a degraded user experience under certain conditions: ### Focus-stealing When focus lands on the `document.body`, it's typically bad for accessibility and a sign of improper input handling. This generally occurs when the currently-focused element is removed from the DOM. In our particular case, it also prevents the Bevy application from correctly handling keyboard events. Previously, the problem of `document.body` focus had been fixed by checking the `document.activeElement` every frame, and redirecting focus to the Bevy canvas whenever it landed on the `document.body`. However, when running in an iframe embedded on https://fakeyou.com, our application will report `document.body` as the `document.activeElement` whenever the parent application has focus, effectively stealing focus from the parent application and making it impossible for the user to, e.g., interact with text fields in the parent app. This PR removes that focus-stealing behavior. Instead, we should properly implement the ARIA specifications for any elements that may disappear from the DOM so that user focus is managed in a precise and predictable way. That will be addressed in follow-up PRs. ### "Stuck" input states In certain circumstances, the browser window hosting our application may lose focus while certain keys/buttons are held down which are bound to long-running actions in the Bevy application, like camera manipulation. When that occurs, Bevy is unable to detect when the bound keys/buttons are released, causing the input state to become "stuck" reading those keys/buttons as being pressed. As a workaround, this PR introduces a listener for "blur" events on the `window`, which dispatches synthetic "keyup"/"pointerup" events to the Bevy canvas for all affected keyboard keys and mouse buttons.
Storyteller Studio
Installing dependencies
- Install Rust
- Install Node.js LTS
- Run
npm ci
Building / Running / Testing stuff
This repo is managed by Nx, a polyglot build system and monorepo framework written in TypeScript. After installing dependencies, dev tasks can be run through the Nx CLI:
npx nx <command> <project> [options]
# OR
npx nx run <project>:<command> [options]
For example, to compile the Bevy app to WebAssembly and serve it via the web frontend project, run:
npx nx serve studio-frontend
You'll need to install the wasm compiler for Rust:
rustup target add wasm32-unknown-unknown
Projects are located in directories at the workspace root. The list of commands
supported by a given project can be found under the target property of its
project.json file, which defines the Nx configuration for that project.
The full list of options for a given command can be discovered by passing the
--help flag:
npx nx <command> <project> --help