diff --git a/packages/core/src/enhancers/events/translateFramePositionIntoPage.ts b/packages/core/src/enhancers/events/translateFramePositionIntoPage.ts index 6d8132a7..764c9dd5 100644 --- a/packages/core/src/enhancers/events/translateFramePositionIntoPage.ts +++ b/packages/core/src/enhancers/events/translateFramePositionIntoPage.ts @@ -1,10 +1,14 @@ -import { getFrameViewportInfo } from "../../utils/frames" - +/** + * Take the relative position of the event in the iframe and translate + * it to the page coordinates. + * + * For example the page 2 of an iframe could be at x=600 but + * the cursor on the page would be at x=100. That is for a + * webpage of 500px of width and not using spread. + */ export const translateFramePositionIntoPage = ({ position, frameElement, - pageWidth, - pageHeight, }: { position: { clientX: number @@ -14,22 +18,19 @@ export const translateFramePositionIntoPage = ({ pageWidth: number pageHeight: number }) => { - const { - height: viewportHeight = pageHeight, - width: viewportWidth = pageWidth, - } = getFrameViewportInfo(frameElement) - const computedWidthScale = pageWidth / viewportWidth - const computedScale = Math.min( - computedWidthScale, - pageHeight / viewportHeight, - ) + // Get the frame's current transform scale + const frameRect = frameElement.getBoundingClientRect() + const scaleX = frameRect.width / frameElement.offsetWidth + const scaleY = frameRect.height / frameElement.offsetHeight + + // Get the frame's position relative to the viewport + const { left = 0, top = 0 } = frameRect - // Here we use getBoundingClientRect meaning we will get relative value for left / top based on current - // window (viewport). This is handy because we can easily get the translated x/y without any extra information - // such as page index, etc. However this might be a bit less performance to request heavily getBoundingClientRect - const { left = 0, top = 0 } = frameElement?.getBoundingClientRect() || {} - const adjustedX = position.clientX * computedScale + left - const adjustedY = position.clientY * computedScale + top + // Transform the coordinates: + // 1. Scale the position from iframe coordinates + // 2. Add the frame's offset relative to viewport + const adjustedX = position.clientX * scaleX + left + const adjustedY = position.clientY * scaleY + top return { clientX: adjustedX,