mirror of
https://github.com/stackblitz-labs/bolt.diy
synced 2025-06-26 18:26:38 +00:00
Record pointer moves (#14)
This commit is contained in:
parent
ce1eed19bb
commit
d143863285
@ -89,6 +89,10 @@ function addRecordingMessageHandler() {
|
||||
requestBody: string;
|
||||
}
|
||||
|
||||
function clamp(value: number, min: number, max: number) {
|
||||
return Math.min(Math.max(value, min), max);
|
||||
}
|
||||
|
||||
function addTextResource(info: RequestInfo, text: string, responseHeaders: Record<string, string>) {
|
||||
const url = new URL(info.url, window.location.href).href;
|
||||
resources.push({
|
||||
@ -190,7 +194,7 @@ function addRecordingMessageHandler() {
|
||||
});
|
||||
|
||||
// Evaluated function to find the selector and associated data.
|
||||
function getMouseEventData(event: MouseEvent) {
|
||||
function getMouseEventTargetData(event: MouseEvent) {
|
||||
assert(event.target);
|
||||
|
||||
const target = event.target as Element;
|
||||
@ -201,12 +205,19 @@ function addRecordingMessageHandler() {
|
||||
selector,
|
||||
width: rect.width,
|
||||
height: rect.height,
|
||||
x: event.clientX - rect.x,
|
||||
y: event.clientY - rect.y,
|
||||
|
||||
/*
|
||||
* at times `event.clientX` and `event.clientY` can be slighly off in relation to the element's position
|
||||
* it's possible that this position might lie outside the element's bounds
|
||||
* the difference likely comes from a subpixel rounding or hit target calculation in the browser
|
||||
* it's possible that we should account for `event.width` and `event.height` here but clamping the values to the bounds of the element should be good enough
|
||||
*/
|
||||
x: clamp(event.clientX - rect.x, 0, rect.width),
|
||||
y: clamp(event.clientY - rect.y, 0, rect.height),
|
||||
};
|
||||
}
|
||||
|
||||
function getKeyboardEventData(event: KeyboardEvent) {
|
||||
function getKeyboardEventTargetData(event: KeyboardEvent) {
|
||||
assert(event.target);
|
||||
|
||||
const target = event.target as Element;
|
||||
@ -257,7 +268,9 @@ function addRecordingMessageHandler() {
|
||||
interactions.push({
|
||||
kind: 'click',
|
||||
time: Date.now() - startTime,
|
||||
...getMouseEventData(event),
|
||||
...getMouseEventTargetData(event),
|
||||
...(event.button && { button: event.button }),
|
||||
clickCount: event.detail,
|
||||
});
|
||||
}
|
||||
},
|
||||
@ -265,13 +278,13 @@ function addRecordingMessageHandler() {
|
||||
);
|
||||
|
||||
window.addEventListener(
|
||||
'dblclick',
|
||||
'pointermove',
|
||||
(event) => {
|
||||
if (event.target) {
|
||||
interactions.push({
|
||||
kind: 'dblclick',
|
||||
kind: 'pointermove',
|
||||
time: Date.now() - startTime,
|
||||
...getMouseEventData(event),
|
||||
...getMouseEventTargetData(event),
|
||||
});
|
||||
}
|
||||
},
|
||||
@ -285,7 +298,7 @@ function addRecordingMessageHandler() {
|
||||
interactions.push({
|
||||
kind: 'keydown',
|
||||
time: Date.now() - startTime,
|
||||
...getKeyboardEventData(event),
|
||||
...getKeyboardEventTargetData(event),
|
||||
});
|
||||
}
|
||||
},
|
||||
|
@ -47,7 +47,7 @@ interface SimulationPacketResource {
|
||||
resource: NetworkResource;
|
||||
}
|
||||
|
||||
export type UserInteractionKind = 'click' | 'dblclick' | 'keydown';
|
||||
export type UserInteractionKind = 'click' | 'pointermove' | 'keydown';
|
||||
|
||||
export interface UserInteraction {
|
||||
kind: UserInteractionKind;
|
||||
@ -64,6 +64,8 @@ export interface UserInteraction {
|
||||
height?: number;
|
||||
x?: number;
|
||||
y?: number;
|
||||
button?: number;
|
||||
clickCount?: number;
|
||||
|
||||
// For keydown interactions, the key pressed.
|
||||
key?: string;
|
||||
|
Loading…
Reference in New Issue
Block a user