fix: inaccurate mouse position (#522)

1. Position of mouse was inaccurate when replaying and this PR will fix it.
2. Fix the bug that if one nested iframe has a scale transform and the position of mouse was inaccurate as well.

src/replay/index.ts

@@ -1422,9 +1422,9 @@ export class Replayer {
       return this.debugNodeNotFound(d, id);
     }
 
-    const base = getBaseDimension(target);
-    const _x = x + base.x;
-    const _y = y + base.y;
+    const base = getBaseDimension(target, this.iframe);
+    const _x = x * base.absoluteScale + base.x;
+    const _y = y * base.absoluteScale + base.y;
 
     this.mouse.style.left = `${_x}px`;
     this.mouse.style.top = `${_y}px`;

src/types.ts

@@ -467,6 +467,10 @@ export type mediaInteractionCallback = (p: mediaInteractionParam) => void;
 export type DocumentDimension = {
   x: number;
   y: number;
+  // scale value relative to its parent iframe
+  relativeScale: number;
+  // scale value relative to the root iframe
+  absoluteScale: number;
 };
 
 export type Mirror = {

src/utils.ts

@@ -550,19 +550,32 @@ export function isIframeINode(node: INode): node is HTMLIFrameINode {
   return node.__sn.type === NodeType.Element && node.__sn.tagName === 'iframe';
 }
 
-export function getBaseDimension(node: Node): DocumentDimension {
+export function getBaseDimension(
+  node: Node,
+  rootIframe: Node,
+): DocumentDimension {
   const frameElement = node.ownerDocument?.defaultView?.frameElement;
-  if (!frameElement) {
+  if (!frameElement || frameElement === rootIframe) {
     return {
       x: 0,
       y: 0,
+      relativeScale: 1,
+      absoluteScale: 1,
     };
   }
 
   const frameDimension = frameElement.getBoundingClientRect();
-  const frameBaseDimension = getBaseDimension(frameElement);
+  const frameBaseDimension = getBaseDimension(frameElement, rootIframe);
+  // the iframe element may have a scale transform
+  const relativeScale = frameDimension.height / frameElement.clientHeight;
   return {
-    x: frameDimension.x + frameBaseDimension.x,
-    y: frameDimension.y + frameBaseDimension.y,
+    x:
+      frameDimension.x * frameBaseDimension.relativeScale +
+      frameBaseDimension.x,
+    y:
+      frameDimension.y * frameBaseDimension.relativeScale +
+      frameBaseDimension.y,
+    relativeScale,
+    absoluteScale: frameBaseDimension.absoluteScale * relativeScale,
   };
 }

typings/types.d.ts

@@ -332,6 +332,8 @@ export declare type mediaInteractionCallback = (p: mediaInteractionParam) => voi
 export declare type DocumentDimension = {
     x: number;
     y: number;
+    relativeScale: number;
+    absoluteScale: number;
 };
 export declare type Mirror = {
     map: idNodeMap;

typings/utils.d.ts

@@ -61,5 +61,5 @@ export declare type AppendedIframe = {
     builtNode: HTMLIFrameINode;
 };
 export declare function isIframeINode(node: INode): node is HTMLIFrameINode;
-export declare function getBaseDimension(node: Node): DocumentDimension;
+export declare function getBaseDimension(node: Node, rootIframe: Node): DocumentDimension;
 export {};