Merge pull request #680 from microsoft/malaref/multi-touch

Add id to pointer data to handle multi-touch screens
microsoft · Oct 18, 2024 · 32d2b6a · 32d2b6a
2 parents 385e671 + 73d22f5
commit 32d2b6a
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git a/packages/clarity-decode/src/interaction.ts b/packages/clarity-decode/src/interaction.ts
@@ -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:

diff --git a/packages/clarity-js/src/interaction/encode.ts b/packages/clarity-js/src/interaction/encode.ts
@@ -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);
                 }

diff --git a/packages/clarity-js/src/interaction/pointer.ts b/packages/clarity-js/src/interaction/pointer.ts
@@ -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 } }); }
         }
     }
 }

diff --git a/packages/clarity-js/types/interaction.d.ts b/packages/clarity-js/types/interaction.d.ts
@@ -104,6 +104,7 @@ export interface PointerData {
     target: Target;
     x: number;
     y: number;
+    id?: number;
 }
 
 export interface ClickData {