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;
|
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>) {
|
function addTextResource(info: RequestInfo, text: string, responseHeaders: Record<string, string>) {
|
||||||
const url = new URL(info.url, window.location.href).href;
|
const url = new URL(info.url, window.location.href).href;
|
||||||
resources.push({
|
resources.push({
|
||||||
@ -190,7 +194,7 @@ function addRecordingMessageHandler() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Evaluated function to find the selector and associated data.
|
// Evaluated function to find the selector and associated data.
|
||||||
function getMouseEventData(event: MouseEvent) {
|
function getMouseEventTargetData(event: MouseEvent) {
|
||||||
assert(event.target);
|
assert(event.target);
|
||||||
|
|
||||||
const target = event.target as Element;
|
const target = event.target as Element;
|
||||||
@ -201,12 +205,19 @@ function addRecordingMessageHandler() {
|
|||||||
selector,
|
selector,
|
||||||
width: rect.width,
|
width: rect.width,
|
||||||
height: rect.height,
|
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);
|
assert(event.target);
|
||||||
|
|
||||||
const target = event.target as Element;
|
const target = event.target as Element;
|
||||||
@ -257,7 +268,9 @@ function addRecordingMessageHandler() {
|
|||||||
interactions.push({
|
interactions.push({
|
||||||
kind: 'click',
|
kind: 'click',
|
||||||
time: Date.now() - startTime,
|
time: Date.now() - startTime,
|
||||||
...getMouseEventData(event),
|
...getMouseEventTargetData(event),
|
||||||
|
...(event.button && { button: event.button }),
|
||||||
|
clickCount: event.detail,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -265,13 +278,13 @@ function addRecordingMessageHandler() {
|
|||||||
);
|
);
|
||||||
|
|
||||||
window.addEventListener(
|
window.addEventListener(
|
||||||
'dblclick',
|
'pointermove',
|
||||||
(event) => {
|
(event) => {
|
||||||
if (event.target) {
|
if (event.target) {
|
||||||
interactions.push({
|
interactions.push({
|
||||||
kind: 'dblclick',
|
kind: 'pointermove',
|
||||||
time: Date.now() - startTime,
|
time: Date.now() - startTime,
|
||||||
...getMouseEventData(event),
|
...getMouseEventTargetData(event),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -285,7 +298,7 @@ function addRecordingMessageHandler() {
|
|||||||
interactions.push({
|
interactions.push({
|
||||||
kind: 'keydown',
|
kind: 'keydown',
|
||||||
time: Date.now() - startTime,
|
time: Date.now() - startTime,
|
||||||
...getKeyboardEventData(event),
|
...getKeyboardEventTargetData(event),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -47,7 +47,7 @@ interface SimulationPacketResource {
|
|||||||
resource: NetworkResource;
|
resource: NetworkResource;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type UserInteractionKind = 'click' | 'dblclick' | 'keydown';
|
export type UserInteractionKind = 'click' | 'pointermove' | 'keydown';
|
||||||
|
|
||||||
export interface UserInteraction {
|
export interface UserInteraction {
|
||||||
kind: UserInteractionKind;
|
kind: UserInteractionKind;
|
||||||
@ -64,6 +64,8 @@ export interface UserInteraction {
|
|||||||
height?: number;
|
height?: number;
|
||||||
x?: number;
|
x?: number;
|
||||||
y?: number;
|
y?: number;
|
||||||
|
button?: number;
|
||||||
|
clickCount?: number;
|
||||||
|
|
||||||
// For keydown interactions, the key pressed.
|
// For keydown interactions, the key pressed.
|
||||||
key?: string;
|
key?: string;
|
||||||
|
Loading…
Reference in New Issue
Block a user