From 95d6263f42ad13c2ac0560704695408634e55d91 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 20 Jun 2025 19:08:10 +0800
Subject: [PATCH] =?UTF-8?q?feat(stage):=20=E6=96=B0=E5=A2=9E=E7=A6=81?=
 =?UTF-8?q?=E7=94=A8=E6=A0=87=E5=B0=BA=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/stage/src/Rule.ts      | 58 ++++++++++++++++++++-------------
 packages/stage/src/StageCore.ts |  1 +
 packages/stage/src/types.ts     |  2 ++
 3 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/packages/stage/src/Rule.ts b/packages/stage/src/Rule.ts
index dff988ed..090278c8 100644
--- a/packages/stage/src/Rule.ts
+++ b/packages/stage/src/Rule.ts
@@ -8,19 +8,23 @@ import type { RuleOptions } from './types';
 const guidesClass = 'tmagic-stage-guides';
 
 export default class Rule extends EventEmitter {
-  public hGuides: Guides;
-  public vGuides: Guides;
+  public hGuides?: Guides;
+  public vGuides?: Guides;
   public horizontalGuidelines: number[] = [];
   public verticalGuidelines: number[] = [];
 
-  private container: HTMLDivElement;
-  private containerResizeObserver: ResizeObserver;
+  private container?: HTMLDivElement;
+  private containerResizeObserver?: ResizeObserver;
   private isShowGuides = true;
   private guidesOptions?: Partial<GuidesOptions>;
 
   constructor(container: HTMLDivElement, options?: RuleOptions) {
     super();
 
+    if (options?.disabledRule) {
+      return;
+    }
+
     this.guidesOptions = options?.guidesOptions || {};
 
     this.container = container;
@@ -28,8 +32,8 @@ export default class Rule extends EventEmitter {
     this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
 
     this.containerResizeObserver = new ResizeObserver(() => {
-      this.vGuides.resize();
-      this.hGuides.resize();
+      this.vGuides?.resize();
+      this.hGuides?.resize();
     });
 
     this.containerResizeObserver.observe(this.container);
@@ -42,11 +46,11 @@ export default class Rule extends EventEmitter {
   public showGuides(isShowGuides = true) {
     this.isShowGuides = isShowGuides;
 
-    this.hGuides.setState({
+    this.hGuides?.setState({
       showGuides: isShowGuides,
     });
 
-    this.vGuides.setState({
+    this.vGuides?.setState({
       showGuides: isShowGuides,
     });
   }
@@ -55,11 +59,11 @@ export default class Rule extends EventEmitter {
     this.horizontalGuidelines = hLines;
     this.verticalGuidelines = vLines;
 
-    this.hGuides.setState({
+    this.hGuides?.setState({
       defaultGuides: hLines,
     });
 
-    this.vGuides.setState({
+    this.vGuides?.setState({
       defaultGuides: vLines,
     });
 
@@ -93,13 +97,13 @@ export default class Rule extends EventEmitter {
       this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
       this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
     } else {
-      this.hGuides.setState({
+      this.hGuides?.setState({
         rulerStyle: {
           visibility: 'hidden',
         },
       });
 
-      this.vGuides.setState({
+      this.vGuides?.setState({
         rulerStyle: {
           visibility: 'hidden',
         },
@@ -108,28 +112,32 @@ export default class Rule extends EventEmitter {
   }
 
   public scrollRule(scrollTop: number) {
-    this.hGuides.scrollGuides(scrollTop);
-    this.hGuides.scroll(0);
+    this.hGuides?.scrollGuides(scrollTop);
+    this.hGuides?.scroll(0);
 
-    this.vGuides.scrollGuides(0);
-    this.vGuides.scroll(scrollTop);
+    this.vGuides?.scrollGuides(0);
+    this.vGuides?.scroll(scrollTop);
   }
 
   public destroy(): void {
     this.destroyGuides();
-    this.hGuides.off('changeGuides', this.hGuidesChangeGuidesHandler);
-    this.vGuides.off('changeGuides', this.vGuidesChangeGuidesHandler);
-    this.containerResizeObserver.disconnect();
+    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.hGuides?.destroy();
+    this.vGuides?.destroy();
 
-    this.container.querySelectorAll(`.${guidesClass}`).forEach((el) => {
+    this.container?.querySelectorAll(`.${guidesClass}`).forEach((el) => {
       el.remove();
     });
+
+    this.hGuides = undefined;
+    this.vGuides = undefined;
+    this.container = undefined;
   }
 
   private getGuidesStyle = (type: GuidesType) => ({
@@ -141,7 +149,11 @@ export default class Rule extends EventEmitter {
     height: type === GuidesType.HORIZONTAL ? '30px' : '100%',
   });
 
-  private createGuides = (type: GuidesType, defaultGuides: number[] = []): Guides => {
+  private createGuides = (type: GuidesType, defaultGuides: number[] = []): Guides | undefined => {
+    if (!this.container) {
+      return;
+    }
+
     const guides = new Guides(this.container, {
       type,
       defaultGuides,
diff --git a/packages/stage/src/StageCore.ts b/packages/stage/src/StageCore.ts
index 34725954..83a2eecf 100644
--- a/packages/stage/src/StageCore.ts
+++ b/packages/stage/src/StageCore.ts
@@ -74,6 +74,7 @@ export default class StageCore extends EventEmitter {
     });
     this.mask = new StageMask({
       guidesOptions: config.guidesOptions,
+      disabledRule: config.disabledRule,
     });
     this.actionManager = new ActionManager(this.getActionManagerConfig(config));
 
diff --git a/packages/stage/src/types.ts b/packages/stage/src/types.ts
index 3ab520f4..29886e70 100644
--- a/packages/stage/src/types.ts
+++ b/packages/stage/src/types.ts
@@ -67,6 +67,7 @@ export interface StageCoreConfig {
   renderType?: RenderType;
   guidesOptions?: Partial<GuidesOptions>;
   disabledMultiSelect?: boolean;
+  disabledRule?: boolean;
 }
 
 export interface ActionManagerConfig {
@@ -240,6 +241,7 @@ export interface TargetShadowConfig {
 
 export interface RuleOptions {
   guidesOptions?: Partial<GuidesOptions>;
+  disabledRule?: boolean;
 }
 
 export interface CoreEvents {