From e7b3b20526b99642d0402d614e272dbcfa8b8035 Mon Sep 17 00:00:00 2001
From: Rohit <rohit.rajan031101@gmail.com>
Date: Fri, 14 Mar 2025 12:41:09 +0530
Subject: [PATCH] feat: map coords for highlighter component

---
 src/components/recorder/Highlighter.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/recorder/Highlighter.tsx b/src/components/recorder/Highlighter.tsx
index 562fd81e..a63c3c23 100644
--- a/src/components/recorder/Highlighter.tsx
+++ b/src/components/recorder/Highlighter.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from "styled-components";
+import { coordinateMapper } from '../../helpers/coordinateMapper';
 
 interface HighlighterProps {
   unmodifiedRect: DOMRect;
@@ -13,13 +14,15 @@ export const Highlighter = ({ unmodifiedRect, displayedSelector = '', width, hei
   if (!unmodifiedRect) {
     return null;
   } else {
+    const mappedRect = coordinateMapper.mapBrowserRectToCanvas(unmodifiedRect);
+
     const rect = {
-      top: unmodifiedRect.top + canvasRect.top + window.scrollY,
-      left: unmodifiedRect.left + canvasRect.left + window.scrollX,
-      right: unmodifiedRect.right + canvasRect.left,
-      bottom: unmodifiedRect.bottom + canvasRect.top,
-      width: unmodifiedRect.width,
-      height: unmodifiedRect.height,
+      top: mappedRect.top + canvasRect.top + window.scrollY,
+      left: mappedRect.left + canvasRect.left + window.scrollX,
+      right: mappedRect.right + canvasRect.left,
+      bottom: mappedRect.bottom + canvasRect.top,
+      width: mappedRect.width,
+      height: mappedRect.height,
     };