UniqAI/bolt.diy
1
0
Fork 0
mirror of https://github.com/stackblitz-labs/bolt.diy synced 2025-06-26 18:26:38 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Record pointer moves (#14)

Browse Source
This commit is contained in:
Mateusz Burzyński 2025-02-07 15:37:39 +01:00 committed by GitHub
parent ce1eed19bb
commit d143863285
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/lib/replay/Recording.ts
View File

@ -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),
}); });
} }
}, },

4
app/lib/replay/SimulationData.ts
View File

@ -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;