From 4e27930c70dbb5f855ab6eb3ce53bf2eeda7fd09 Mon Sep 17 00:00:00 2001
From: ShiKhu <alex.kaminsky.11@gmail.com>
Date: Wed, 1 Dec 2021 21:36:53 +0100
Subject: [PATCH] fix(frontend-player): internal coordinates consider scroll

---
 .../StatedScreen/Screen/BaseScreen.ts         | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/frontend/app/player/MessageDistributor/StatedScreen/Screen/BaseScreen.ts b/frontend/app/player/MessageDistributor/StatedScreen/Screen/BaseScreen.ts
index 1ec4f5932..f3e332aa7 100644
--- a/frontend/app/player/MessageDistributor/StatedScreen/Screen/BaseScreen.ts
+++ b/frontend/app/player/MessageDistributor/StatedScreen/Screen/BaseScreen.ts
@@ -76,9 +76,8 @@ export default abstract class BaseScreen {
     //return this.boundingRect;
   }
 
-  getInternalCoordinates({ x, y }: Point): Point {
+  getInternalViewportCoordinates({ x, y }: Point): Point {
     const { x: overlayX, y: overlayY, width } = this.getBoundingClientRect();
-    //console.log("x y ", x,y,'ovx y', overlayX, overlayY, width)
 
     const screenWidth = this.overlay.offsetWidth;
 
@@ -89,7 +88,19 @@ export default abstract class BaseScreen {
     return { x: screenX, y: screenY };
   }
 
+  getInternalCoordinates(p: Point): Point {
+    const { x, y } = this.getInternalViewportCoordinates(p);
+
+    const docEl = this.document?.documentElement
+    const scrollX = docEl ? docEl.scrollLeft : 0
+    const scrollY = docEl ? docEl.scrollTop : 0
+
+    return { x: x+scrollX, y: y+scrollY };
+  }
+
   getElementFromInternalPoint({ x, y }: Point): Element | null {
+    // elementFromPoint && elementFromPoints require viewpoint-related coordinates, 
+    //                                                 not document-related
     return this.document?.elementFromPoint(x, y) || null;
   }
 
@@ -108,11 +119,11 @@ export default abstract class BaseScreen {
   }
 
   getElementFromPoint(point: Point): Element | null {
-    return this.getElementFromInternalPoint(this.getInternalCoordinates(point));
+    return this.getElementFromInternalPoint(this.getInternalViewportCoordinates(point));
   }
 
   getElementsFromPoint(point: Point): Element[] {
-    return this.getElementsFromInternalPoint(this.getInternalCoordinates(point));
+    return this.getElementsFromInternalPoint(this.getInternalViewportCoordinates(point));
   }
 
   getElementBySelector(selector: string): Element | null {