fix(stage): 标尺销毁后没有移除对应的dom

fix #617
Tencent · Jun 28, 2024 · 0796799 · 0796799
1 parent a164e2b
commit 0796799
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git 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
@@ -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]>(