From 6a46f987666da3cf98c1855f6df5487aca505a3d Mon Sep 17 00:00:00 2001
From: parisma <parisma@tencent.com>
Date: Thu, 31 Mar 2022 19:31:27 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E9=AB=98=E4=BA=AE=E5=81=8F=E7=A7=BB=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/stage/src/StageCore.ts      | 2 +-
 packages/stage/src/StageHighlight.ts | 9 +++++++++
 packages/stage/src/StageMask.ts      | 1 +
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/stage/src/StageCore.ts b/packages/stage/src/StageCore.ts
index 810fe880..f7b5f30c 100644
--- a/packages/stage/src/StageCore.ts
+++ b/packages/stage/src/StageCore.ts
@@ -61,7 +61,7 @@ export default class StageCore extends EventEmitter {
     this.renderer = new StageRender({ core: this });
     this.mask = new StageMask({ core: this });
     this.dr = new StageDragResize({ core: this, container: this.mask.content });
-    this.highlightLayer = new StageHighlight({ core: this, container: this.mask.content });
+    this.highlightLayer = new StageHighlight({ core: this, container: this.mask.wrapper });
 
     this.renderer.on('runtime-ready', (runtime: Runtime) => this.emit('runtime-ready', runtime));
     this.renderer.on('page-el-update', (el: HTMLElement) => this.mask?.observe(el));
diff --git a/packages/stage/src/StageHighlight.ts b/packages/stage/src/StageHighlight.ts
index 4d09c2b0..f6e95489 100644
--- a/packages/stage/src/StageHighlight.ts
+++ b/packages/stage/src/StageHighlight.ts
@@ -46,6 +46,15 @@ export default class StageHighlight extends EventEmitter {
     this.moveable?.destroy();
     this.moveable = new Moveable(this.container, {
       target: this.target,
+      scrollable: true,
+      origin: true,
+      zoom: 1,
+      bounds: {
+        top: 0,
+        left: 0,
+        right: this.container.clientWidth,
+        bottom: this.container.clientHeight,
+      },
     });
   }
 
diff --git a/packages/stage/src/StageMask.ts b/packages/stage/src/StageMask.ts
index 03a821ce..17f47311 100644
--- a/packages/stage/src/StageMask.ts
+++ b/packages/stage/src/StageMask.ts
@@ -240,6 +240,7 @@ export default class StageMask extends Rule {
   };
 
   private mouseWheelHandler = (event: WheelEvent) => {
+    this.emit('clearHighlight');
     if (!this.page) throw new Error('page 未初始化');
 
     const { deltaY, deltaX } = event;