Skip to content

Commit

Permalink
Add id to pointer data to handle multi-touch screens
Browse files Browse the repository at this point in the history
  • Loading branch information
Muhammad AlAref committed Oct 18, 2024
1 parent 385e671 commit 73d22f5
Show file tree
Hide file tree
Showing 4 changed files with 10 additions and 2 deletions.
3 changes: 2 additions & 1 deletion packages/clarity-decode/src/interaction.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ export function decode(tokens: Data.Token[]): InteractionEvent {
let pointerData: Interaction.PointerData = {
target: tokens[2] as number,
x: tokens[3] as number,
y: tokens[4] as number
y: tokens[4] as number,
id: tokens[5] as number | undefined,
};
return { time, event, data: pointerData };
case Data.Event.Click:
Expand Down
1 change: 1 addition & 0 deletions packages/clarity-js/src/interaction/encode.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export default async function (type: Event, ts: number = null): Promise<void> {
tokens.push(pTarget.id);
tokens.push(entry.data.x);
tokens.push(entry.data.y);
if (entry.data.id !== undefined) { tokens.push(entry.data.id); }
queue(tokens);
baseline.track(entry.event, entry.data.x, entry.data.y);
}
Expand Down
7 changes: 6 additions & 1 deletion packages/clarity-js/src/interaction/pointer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,13 @@ function touch(event: Event, root: Node, evt: TouchEvent): void {
x = x && frame ? x + Math.round(frame.offsetLeft) : x;
y = y && frame ? y + Math.round(frame.offsetTop) : y;

// identifier is 0-based, unique for each touch point and resets when all fingers are lifted
// that is not a part of the spec, but it is how it is implemented in browsers
// tested in Chromium-based browsers as well as Firefox
const id = "identifier" in entry ? entry["identifier"] : undefined;

// Check for null values before processing this event
if (x !== null && y !== null) { handler({ time: t, event, data: { target: target(evt), x, y } }); }
if (x !== null && y !== null) { handler({ time: t, event, data: { target: target(evt), x, y, id } }); }
}
}
}
Expand Down
1 change: 1 addition & 0 deletions packages/clarity-js/types/interaction.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ export interface PointerData {
target: Target;
x: number;
y: number;
id?: number;
}

export interface ClickData {
Expand Down

0 comments on commit 73d22f5

Please sign in to comment.