Charles Bochet
41571ea377
## Summary Adds `offsetX`, `offsetY`, `movementX`, `movementY` to `SerializedEventData` and the host event serialiser so apps can reason about element-relative pointer positions without trying to read the host element's bounding rect (which is impossible from a remote-DOM worker). ## Motivation I was building a front-component with click-to-drop-pin and trackpad pan/zoom (custom OSM tile renderer). Two real bugs surfaced from the current event-serialisation surface: 1. **Wheel pan/zoom was broken.** The host already forwards `deltaX`/`deltaY`, but app authors naturally read them off the React-style event handler argument as `e.deltaX`/`e.deltaY`. Because remote-DOM bridges everything via `RemoteEvent extends CustomEvent<Detail>`, the payload actually arrives at `e.detail.deltaX`. Reading the wrong place gives `undefined`, and `undefined < 0 === false`, so every wheel notch zoomed in the same direction. App code now uses `e.detail`, but this was a sharp papercut worth flagging in docs / a helper (separate change). 2. **Element-local click coords are unobtainable from a worker.** With only `clientX/Y`, an app needs the stage's bounding rect to translate viewport coordinates to local — which can't be read across the worker boundary. `offsetX`/`offsetY` close that gap with a one-read solution. `movementX`/`movementY` round out the set for any future drag-style interactions if `mousemove` later joins the allow-list.
38 lines
741 B
TypeScript
38 lines
741 B
TypeScript
export type SerializedEventData = {
|
|
type: string;
|
|
altKey?: boolean;
|
|
ctrlKey?: boolean;
|
|
metaKey?: boolean;
|
|
shiftKey?: boolean;
|
|
clientX?: number;
|
|
clientY?: number;
|
|
pageX?: number;
|
|
pageY?: number;
|
|
screenX?: number;
|
|
screenY?: number;
|
|
offsetX?: number;
|
|
offsetY?: number;
|
|
movementX?: number;
|
|
movementY?: number;
|
|
button?: number;
|
|
buttons?: number;
|
|
key?: string;
|
|
code?: string;
|
|
repeat?: boolean;
|
|
value?: string;
|
|
checked?: boolean;
|
|
scrollTop?: number;
|
|
scrollLeft?: number;
|
|
deltaX?: number;
|
|
deltaY?: number;
|
|
deltaZ?: number;
|
|
deltaMode?: number;
|
|
currentTime?: number;
|
|
duration?: number;
|
|
paused?: boolean;
|
|
ended?: boolean;
|
|
volume?: number;
|
|
muted?: boolean;
|
|
playbackRate?: number;
|
|
};
|