Extend baseline to hold pointer move data

microsoft · Feb 3, 2025 · ca36df0 · ca36df0
1 parent 9d4999b
commit ca36df0
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 4 deletions.
diff --git a/packages/clarity-decode/src/data.ts b/packages/clarity-decode/src/data.ts
@@ -58,7 +58,14 @@ export function decode(tokens: Data.Token[]): DataEvent {
                 pointerX: tokens[9] as number,
                 pointerY: tokens[10] as number,
                 activityTime: tokens[11] as number,
-                scrollTime: tokens.length > 12 ? tokens[12] as number: null
+                scrollTime: tokens.length > 12 ? tokens[12] as number: null,
+                pointerTime: tokens.length > 13 ? tokens[13] as number: null,
+                moveX: tokens.length > 14 ? tokens[14] as number: null,
+                moveY: tokens.length > 15 ? tokens[15] as number: null,
+                moveTime: tokens.length > 16 ? tokens[16] as number: null,
+                downX: tokens.length > 17 ? tokens[17] as number: null, 
+                downY: tokens.length > 18 ? tokens[18] as number: null,
+                downTime: tokens.length > 19 ? tokens[19] as number: null,
             }
             return { time, event, data: baselineData };
         case Data.Event.Variable:

diff --git a/packages/clarity-js/src/data/baseline.ts b/packages/clarity-js/src/data/baseline.ts
@@ -27,7 +27,14 @@ export function reset(): void {
             pointerX: buffer.pointerX,
             pointerY: buffer.pointerY,
             activityTime: buffer.activityTime,
-            scrollTime: buffer.scrollTime
+            scrollTime: buffer.scrollTime,
+            pointerTime: buffer.pointerTime,
+            moveX: buffer.moveX,
+            moveY: buffer.moveY,
+            moveTime: buffer.moveTime,
+            downX: buffer.downX,
+            downY: buffer.downY,
+            downTime: buffer.downTime,
           }
         };
     }
@@ -42,7 +49,14 @@ export function reset(): void {
         pointerX: 0,
         pointerY: 0,
         activityTime: 0,
-        scrollTime: 0
+        scrollTime: 0,
+        pointerTime: 0,
+        moveX: 0,
+        moveY: 0,
+        moveTime: 0,
+        downX: 0,
+        downY: 0,
+        downTime: 0,
     };
 }
 
@@ -61,9 +75,20 @@ export function track(event: Event, x: number, y: number, time?: number): void {
             buffer.scrollY = y;
             buffer.scrollTime = time;
             break;
+        case Event.MouseMove:
+            buffer.moveX = x;
+            buffer.moveY = y;
+            buffer.moveTime = time;
+        // intentionally skipping break to ensure pointer data is also updated for mouse move event
+        case Event.MouseDown:
+            buffer.downX = x;
+            buffer.downY = y;
+            buffer.downTime = time;
+        // intentionally skipping break to ensure pointer data is also updated for mouse down event
         default:
             buffer.pointerX = x;
             buffer.pointerY = y;
+            buffer.pointerTime = time;
             break;
     }
     update = true;

diff --git a/packages/clarity-js/src/data/encode.ts b/packages/clarity-js/src/data/encode.ts
@@ -31,6 +31,13 @@ export default function(event: Event): void {
                 tokens.push(b.data.pointerY);
                 tokens.push(b.data.activityTime);
                 tokens.push(b.data.scrollTime);
+                tokens.push(b.data.pointerTime);
+                tokens.push(b.data.moveX);
+                tokens.push(b.data.moveY);
+                tokens.push(b.data.moveTime);
+                tokens.push(b.data.downX);
+                tokens.push(b.data.downY);
+                tokens.push(b.data.downTime);
                 queue(tokens, false);
             }
             baseline.reset();

diff --git a/packages/clarity-js/src/interaction/encode.ts b/packages/clarity-js/src/interaction/encode.ts
@@ -45,7 +45,7 @@ export default async function (type: Event, ts: number = null): Promise<void> {
                         }
                     }
                     queue(tokens);
-                    baseline.track(entry.event, entry.data.x, entry.data.y);
+                    baseline.track(entry.event, entry.data.x, entry.data.y, entry.time);
                 }
             }
             pointer.reset();

diff --git a/packages/clarity-js/types/data.d.ts b/packages/clarity-js/types/data.d.ts
@@ -426,6 +426,13 @@ export interface BaselineData {
     pointerY: number;
     activityTime: number;
     scrollTime: number;
+    pointerTime: number;
+    moveX: number;
+    moveY: number;
+    moveTime: number;
+    downX: number;
+    downY: number;
+    downTime: number;
 }
 
 export interface IdentityData {