feat: map coords for highlighter component

This commit is contained in:
Rohit
2025-03-14 12:41:09 +05:30
parent d043aba06e
commit e7b3b20526

View File

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