Interactivity
The recent version of Red Otter includes new systems for handling user inputs. This required the layout to become more opinionated.
API
Example of a simple app loop that reads events:
TypeScript
import { EventManager, WebGPURenderer, View, compose, paint } from "red-otter";
const eventManager = new EventManager();
const renderer = new WebGPURenderer(/* ... */);
const root = new View(/* ... */);
function render() {
// Deliver events to views.
eventManager.deliverEvents(root);
// Update scroll offsets etc. in response to events.
compose(renderer, root);
// Dispatch commands for renderer.
paint(renderer, root);
// Prepare rendering instructions and dispatch them to the GPU.
const commandEncoder = device.createCommandEncoder();
renderer.render(commandEncoder);
device.queue.submit([commandEncoder.finish()]);
// Request next frame.
requestAnimationFrame(render);
}
render();
class
EventManager
/EventManager.ts ↗Responsible for dispatching events to the correct views.
method
deliverEvents
Processes all events in the queue, leaving it empty, by visiting all views in the given root tree and offering them to the views in the reverse DFS order.
Type declaration
TypeScript
(root: View) => void