From 9fa6e886dd1433a3f6b28e5680c9e3ec3a5fd2b1 Mon Sep 17 00:00:00 2001
From: Bowen Tan <bowen.tan@smartx.com>
Date: Wed, 22 Jun 2022 14:25:02 +0800
Subject: [PATCH] fix(mask): fix the bug that mask location is wrong position
 when editor is scrolled

---
 .../EditorMaskWrapper/EditorMaskManager.ts    | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/components/EditorMaskWrapper/EditorMaskManager.ts b/packages/editor/src/components/EditorMaskWrapper/EditorMaskManager.ts
index 22fd8bab..ec9675cb 100644
--- a/packages/editor/src/components/EditorMaskWrapper/EditorMaskManager.ts
+++ b/packages/editor/src/components/EditorMaskWrapper/EditorMaskManager.ts
@@ -142,8 +142,16 @@ export class EditorMaskManager {
     return {
       id,
       style: {
-        top: rect.top - this.maskContainerRect.top - this.MaskPadding,
-        left: rect.left - this.maskContainerRect.left - this.MaskPadding,
+        top:
+          rect.top -
+          this.maskContainerRect.top -
+          this.MaskPadding +
+          this.wrapperScrollTop,
+        left:
+          rect.left -
+          this.maskContainerRect.left -
+          this.MaskPadding +
+          this.wrapperScrollLeft,
         height: rect.height + this.MaskPadding * 2,
         width: rect.width + this.MaskPadding * 2,
       },
@@ -161,7 +169,10 @@ export class EditorMaskManager {
   }
 
   private refreshHoverElement() {
-    const hoverElement = document.elementFromPoint(...this.mousePosition);
+    const hoverElement = document.elementFromPoint(
+      this.mousePosition[0] - this.wrapperScrollLeft,
+      this.mousePosition[1] - this.wrapperScrollTop
+    );
     if (!hoverElement) return;
     if (hoverElement === this.lastHoverElement) return;
     const root = this.wrapperRef.current;
@@ -210,6 +221,14 @@ export class EditorMaskManager {
   private get eleMap() {
     return this.services.editorStore.eleMap;
   }
+
+  private get wrapperScrollTop() {
+    return this.wrapperRef.current?.scrollTop || 0;
+  }
+
+  private get wrapperScrollLeft() {
+    return this.wrapperRef.current?.scrollLeft || 0;
+  }
 }
 
 function buildThresholdList() {