feat(stage): 新增禁用标尺配置

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,

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));
 

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 {