@tmagic/stage 1.5.22 → 1.5.24

package/dist/tmagic-stage.js

@@ -1659,6 +1659,10 @@ class ActionManager extends EventEmitter {
   getDragStatus() {
     return this.dr?.getDragStatus();
   }
+  updateMoveableOptions() {
+    this.dr?.updateMoveable();
+    this.multiDr?.updateMoveable();
+  }
   destroy() {
     this.container.removeEventListener("mousedown", this.mouseDownHandler);
     this.container.removeEventListener("mousemove", this.mouseMoveHandler);
@@ -1907,13 +1911,16 @@ class Rule extends EventEmitter {
   guidesOptions;
   constructor(container, options) {
     super();
+    if (options?.disabledRule) {
+      return;
+    }
     this.guidesOptions = options?.guidesOptions || {};
     this.container = container;
     this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
     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);
   }
@@ -1923,20 +1930,20 @@ class Rule extends EventEmitter {
    */
   showGuides(isShowGuides = true) {
     this.isShowGuides = isShowGuides;
-    this.hGuides.setState({
+    this.hGuides?.setState({
       showGuides: isShowGuides
     });
-    this.vGuides.setState({
+    this.vGuides?.setState({
       showGuides: isShowGuides
     });
   }
   setGuides([hLines, vLines]) {
     this.horizontalGuidelines = hLines;
     this.verticalGuidelines = vLines;
-    this.hGuides.setState({
+    this.hGuides?.setState({
       defaultGuides: hLines
     });
-    this.vGuides.setState({
+    this.vGuides?.setState({
       defaultGuides: vLines
     });
     this.emit("change-guides", {
@@ -1964,12 +1971,12 @@ 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"
         }
@@ -1977,24 +1984,27 @@ class Rule extends EventEmitter {
     }
   }
   scrollRule(scrollTop) {
-    this.hGuides.scrollGuides(scrollTop);
-    this.hGuides.scroll(0);
-    this.vGuides.scrollGuides(0);
-    this.vGuides.scroll(scrollTop);
+    this.hGuides?.scrollGuides(scrollTop);
+    this.hGuides?.scroll(0);
+    this.vGuides?.scrollGuides(0);
+    this.vGuides?.scroll(scrollTop);
   }
   destroy() {
     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();
   }
   destroyGuides() {
-    this.hGuides.destroy();
-    this.vGuides.destroy();
-    this.container.querySelectorAll(`.${guidesClass}`).forEach((el) => {
+    this.hGuides?.destroy();
+    this.vGuides?.destroy();
+    this.container?.querySelectorAll(`.${guidesClass}`).forEach((el) => {
       el.remove();
     });
+    this.hGuides = void 0;
+    this.vGuides = void 0;
+    this.container = void 0;
   }
   getGuidesStyle = (type) => ({
     position: "fixed",
@@ -2005,6 +2015,9 @@ class Rule extends EventEmitter {
     height: type === GuidesType.HORIZONTAL ? "30px" : "100%"
   });
   createGuides = (type, defaultGuides = []) => {
+    if (!this.container) {
+      return;
+    }
     const guides = new Guides(this.container, {
       type,
       defaultGuides,
@@ -2534,7 +2547,8 @@ class StageCore extends EventEmitter$1 {
       }
     });
     this.mask = new StageMask({
-      guidesOptions: config.guidesOptions
+      guidesOptions: config.guidesOptions,
+      disabledRule: config.disabledRule
     });
     this.actionManager = new ActionManager(this.getActionManagerConfig(config));
     this.initRenderEvent();

package/dist/tmagic-stage.umd.cjs

@@ -4132,6 +4132,10 @@
     getDragStatus() {
       return this.dr?.getDragStatus();
     }
+    updateMoveableOptions() {
+      this.dr?.updateMoveable();
+      this.multiDr?.updateMoveable();
+    }
     destroy() {
       this.container.removeEventListener("mousedown", this.mouseDownHandler);
       this.container.removeEventListener("mousemove", this.mouseMoveHandler);
@@ -4380,13 +4384,16 @@
     guidesOptions;
     constructor(container, options) {
       super();
+      if (options?.disabledRule) {
+        return;
+      }
       this.guidesOptions = options?.guidesOptions || {};
       this.container = container;
       this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
       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);
     }
@@ -4396,20 +4403,20 @@
      */
     showGuides(isShowGuides = true) {
       this.isShowGuides = isShowGuides;
-      this.hGuides.setState({
+      this.hGuides?.setState({
         showGuides: isShowGuides
       });
-      this.vGuides.setState({
+      this.vGuides?.setState({
         showGuides: isShowGuides
       });
     }
     setGuides([hLines, vLines]) {
       this.horizontalGuidelines = hLines;
       this.verticalGuidelines = vLines;
-      this.hGuides.setState({
+      this.hGuides?.setState({
         defaultGuides: hLines
       });
-      this.vGuides.setState({
+      this.vGuides?.setState({
         defaultGuides: vLines
       });
       this.emit("change-guides", {
@@ -4437,12 +4444,12 @@
         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"
           }
@@ -4450,24 +4457,27 @@
       }
     }
     scrollRule(scrollTop) {
-      this.hGuides.scrollGuides(scrollTop);
-      this.hGuides.scroll(0);
-      this.vGuides.scrollGuides(0);
-      this.vGuides.scroll(scrollTop);
+      this.hGuides?.scrollGuides(scrollTop);
+      this.hGuides?.scroll(0);
+      this.vGuides?.scrollGuides(0);
+      this.vGuides?.scroll(scrollTop);
     }
     destroy() {
       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();
     }
     destroyGuides() {
-      this.hGuides.destroy();
-      this.vGuides.destroy();
-      this.container.querySelectorAll(`.${guidesClass}`).forEach((el) => {
+      this.hGuides?.destroy();
+      this.vGuides?.destroy();
+      this.container?.querySelectorAll(`.${guidesClass}`).forEach((el) => {
         el.remove();
       });
+      this.hGuides = void 0;
+      this.vGuides = void 0;
+      this.container = void 0;
     }
     getGuidesStyle = (type) => ({
       position: "fixed",
@@ -4478,6 +4488,9 @@
       height: type === GuidesType.HORIZONTAL ? "30px" : "100%"
     });
     createGuides = (type, defaultGuides = []) => {
+      if (!this.container) {
+        return;
+      }
       const guides = new Guides(this.container, {
         type,
         defaultGuides,
@@ -5007,7 +5020,8 @@
         }
       });
       this.mask = new StageMask({
-        guidesOptions: config.guidesOptions
+        guidesOptions: config.guidesOptions,
+        disabledRule: config.disabledRule
       });
       this.actionManager = new ActionManager(this.getActionManagerConfig(config));
       this.initRenderEvent();

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.22",
+  "version": "1.5.24",
   "name": "@tmagic/stage",
   "type": "module",
   "main": "dist/tmagic-stage.umd.cjs",
@@ -37,12 +37,12 @@
     "scenejs": "^1.10.3"
   },
   "devDependencies": {
-    "@types/events": "^3.0.0",
+    "@types/events": "^3.0.3",
     "@types/lodash-es": "^4.17.4"
   },
   "peerDependencies": {
-    "typescript": "*",
-    "@tmagic/core": "1.5.22"
+    "typescript": "^5.8.3",
+    "@tmagic/core": "1.5.24"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/ActionManager.ts

@@ -380,6 +380,11 @@ export default class ActionManager extends EventEmitter {
     return this.dr?.getDragStatus();
   }
 
+  public updateMoveableOptions(): void {
+    this.dr?.updateMoveable();
+    this.multiDr?.updateMoveable();
+  }
+
   public destroy(): void {
     this.container.removeEventListener('mousedown', this.mouseDownHandler);
     this.container.removeEventListener('mousemove', this.mouseMoveHandler);

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

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

package/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 {

package/types/index.d.ts

@@ -189,6 +189,7 @@ interface StageCoreConfig {
     renderType?: RenderType;
     guidesOptions?: Partial<GuidesOptions>;
     disabledMultiSelect?: boolean;
+    disabledRule?: boolean;
 }
 interface ActionManagerConfig {
     container: HTMLElement;
@@ -338,6 +339,7 @@ interface TargetShadowConfig {
 }
 interface RuleOptions {
     guidesOptions?: Partial<GuidesOptions>;
+    disabledRule?: boolean;
 }
 interface CoreEvents {
     mounted: [];
@@ -508,6 +510,7 @@ declare class ActionManager extends EventEmitter {
      */
     delayedMarkContainer(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout | undefined;
     getDragStatus(): StageDragStatus | undefined;
+    updateMoveableOptions(): void;
     destroy(): void;
     on<Name extends keyof ActionManagerEvents, Param extends ActionManagerEvents[Name]>(eventName: Name, listener: (...args: Param) => void): this;
     emit<Name extends keyof ActionManagerEvents, Param extends ActionManagerEvents[Name]>(eventName: Name, ...args: Param): boolean;
@@ -549,12 +552,12 @@ declare class ActionManager extends EventEmitter {
 }
 
 declare class Rule extends EventEmitter {
-    hGuides: Guides;
-    vGuides: Guides;
+    hGuides?: Guides;
+    vGuides?: Guides;
     horizontalGuidelines: number[];
     verticalGuidelines: number[];
-    private container;
-    private containerResizeObserver;
+    private container?;
+    private containerResizeObserver?;
     private isShowGuides;
     private guidesOptions?;
     constructor(container: HTMLDivElement, options?: RuleOptions);