@tmagic/stage 1.4.9 → 1.4.11

package/dist/tmagic-stage.js

@@ -1848,6 +1848,7 @@ class ActionManager extends EventEmitter {
   };
 }
 
+const guidesClass = "tmagic-stage-guides";
 class Rule extends EventEmitter {
   hGuides;
   vGuides;
@@ -1912,9 +1913,8 @@ class Rule extends EventEmitter {
    */
   showRule(show = true) {
     if (show) {
-      this.hGuides.destroy();
+      this.destroyGuides();
       this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
-      this.vGuides.destroy();
       this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
     } else {
       this.hGuides.setState({
@@ -1936,11 +1936,19 @@ class Rule extends EventEmitter {
     this.vGuides.scroll(scrollTop);
   }
   destroy() {
+    this.destroyGuides();
     this.hGuides.off("changeGuides", this.hGuidesChangeGuidesHandler);
     this.vGuides.off("changeGuides", this.vGuidesChangeGuidesHandler);
     this.containerResizeObserver.disconnect();
     this.removeAllListeners();
   }
+  destroyGuides() {
+    this.hGuides.destroy();
+    this.vGuides.destroy();
+    this.container.querySelectorAll(`.${guidesClass}`).forEach((el) => {
+      el.remove();
+    });
+  }
   getGuidesStyle = (type) => ({
     position: "fixed",
     zIndex: 1,
@@ -1954,6 +1962,7 @@ class Rule extends EventEmitter {
       type,
       defaultGuides,
       displayDragPos: true,
+      className: guidesClass,
       backgroundColor: "#fff",
       lineColor: "#000",
       textColor: "#000",
@@ -2102,11 +2111,11 @@ class StageMask extends Rule {
    * 销毁实例
    */
   destroy() {
+    super.destroy();
     this.content?.remove();
     this.page = null;
     this.pageScrollParent = null;
     this.wrapperResizeObserver?.disconnect();
-    super.destroy();
   }
   on(eventName, listener) {
     return super.on(eventName, listener);

package/dist/tmagic-stage.umd.cjs

@@ -1845,6 +1845,7 @@
     };
   }
 
+  const guidesClass = "tmagic-stage-guides";
   class Rule extends EventEmitter {
     hGuides;
     vGuides;
@@ -1909,9 +1910,8 @@
      */
     showRule(show = true) {
       if (show) {
-        this.hGuides.destroy();
+        this.destroyGuides();
         this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
-        this.vGuides.destroy();
         this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
       } else {
         this.hGuides.setState({
@@ -1933,11 +1933,19 @@
       this.vGuides.scroll(scrollTop);
     }
     destroy() {
+      this.destroyGuides();
       this.hGuides.off("changeGuides", this.hGuidesChangeGuidesHandler);
       this.vGuides.off("changeGuides", this.vGuidesChangeGuidesHandler);
       this.containerResizeObserver.disconnect();
       this.removeAllListeners();
     }
+    destroyGuides() {
+      this.hGuides.destroy();
+      this.vGuides.destroy();
+      this.container.querySelectorAll(`.${guidesClass}`).forEach((el) => {
+        el.remove();
+      });
+    }
     getGuidesStyle = (type) => ({
       position: "fixed",
       zIndex: 1,
@@ -1951,6 +1959,7 @@
         type,
         defaultGuides,
         displayDragPos: true,
+        className: guidesClass,
         backgroundColor: "#fff",
         lineColor: "#000",
         textColor: "#000",
@@ -2099,11 +2108,11 @@
      * 销毁实例
      */
     destroy() {
+      super.destroy();
       this.content?.remove();
       this.page = null;
       this.pageScrollParent = null;
       this.wrapperResizeObserver?.disconnect();
-      super.destroy();
     }
     on(eventName, listener) {
       return super.on(eventName, listener);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.9",
+  "version": "1.4.11",
   "name": "@tmagic/stage",
   "type": "module",
   "main": "dist/tmagic-stage.umd.cjs",
@@ -44,9 +44,9 @@
   },
   "peerDependencies": {
     "typescript": "*",
-    "@tmagic/core": "1.4.9",
-    "@tmagic/schema": "1.4.9",
-    "@tmagic/utils": "1.4.9"
+    "@tmagic/schema": "1.4.11",
+    "@tmagic/utils": "1.4.11",
+    "@tmagic/core": "1.4.11"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/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',

package/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]>(

package/types/Rule.d.ts

@@ -29,6 +29,7 @@ export default class Rule extends EventEmitter {
     showRule(show?: boolean): void;
     scrollRule(scrollTop: number): void;
     destroy(): void;
+    destroyGuides(): void;
     private getGuidesStyle;
     private createGuides;
     private hGuidesChangeGuidesHandler;