From 079679997aed97bb28c8dc03f53565be93abf3fe Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 28 Jun 2024 19:12:36 +0800
Subject: [PATCH] =?UTF-8?q?fix(stage):=20=E6=A0=87=E5=B0=BA=E9=94=80?=
 =?UTF-8?q?=E6=AF=81=E5=90=8E=E6=B2=A1=E6=9C=89=E7=A7=BB=E9=99=A4=E5=AF=B9?=
 =?UTF-8?q?=E5=BA=94=E7=9A=84dom?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix #617
---
 packages/stage/src/Rule.ts      | 20 ++++++++++++++++----
 packages/stage/src/StageMask.ts |  4 ++--
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/stage/src/Rule.ts b/packages/stage/src/Rule.ts
index f6259981..dff988ed 100644
--- a/packages/stage/src/Rule.ts
+++ b/packages/stage/src/Rule.ts
@@ -5,6 +5,8 @@ import Guides, { type GuidesEvents, type GuidesOptions } from '@scena/guides';
 import { GuidesType } from './const';
 import type { RuleOptions } from './types';
 
+const guidesClass = 'tmagic-stage-guides';
+
 export default class Rule extends EventEmitter {
   public hGuides: Guides;
   public vGuides: Guides;
@@ -84,12 +86,11 @@ export default class Rule extends EventEmitter {
    * @param show 是否显示
    */
   public showRule(show = true) {
-    // 当尺子隐藏时发现大小变化，显示后会变形，所以这里做重新初始化处理
+    // 当尺子隐藏时发生大小变化，显示后会变形，所以这里做重新初始化处理
     if (show) {
-      this.hGuides.destroy();
-      this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
+      this.destroyGuides();
 
-      this.vGuides.destroy();
+      this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
       this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
     } else {
       this.hGuides.setState({
@@ -115,12 +116,22 @@ export default class Rule extends EventEmitter {
   }
 
   public destroy(): void {
+    this.destroyGuides();
     this.hGuides.off('changeGuides', this.hGuidesChangeGuidesHandler);
     this.vGuides.off('changeGuides', this.vGuidesChangeGuidesHandler);
     this.containerResizeObserver.disconnect();
     this.removeAllListeners();
   }
 
+  public destroyGuides(): void {
+    this.hGuides.destroy();
+    this.vGuides.destroy();
+
+    this.container.querySelectorAll(`.${guidesClass}`).forEach((el) => {
+      el.remove();
+    });
+  }
+
   private getGuidesStyle = (type: GuidesType) => ({
     position: 'fixed',
     zIndex: 1,
@@ -135,6 +146,7 @@ export default class Rule extends EventEmitter {
       type,
       defaultGuides,
       displayDragPos: true,
+      className: guidesClass,
       backgroundColor: '#fff',
       lineColor: '#000',
       textColor: '#000',
diff --git a/packages/stage/src/StageMask.ts b/packages/stage/src/StageMask.ts
index e6c838bd..a0f1b5af 100644
--- a/packages/stage/src/StageMask.ts
+++ b/packages/stage/src/StageMask.ts
@@ -170,12 +170,12 @@ export default class StageMask extends Rule {
    * 销毁实例
    */
   public destroy(): void {
+    super.destroy();
+
     this.content?.remove();
     this.page = null;
     this.pageScrollParent = null;
     this.wrapperResizeObserver?.disconnect();
-
-    super.destroy();
   }
 
   public on<Name extends keyof MaskEvents, Param extends MaskEvents[Name]>(