@tmagic/stage 1.5.21 → 1.5.23

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,
@@ -2211,6 +2224,10 @@ class StageMask extends Rule {
         const { clientHeight, clientWidth } = entry.target;
         this.wrapperHeight = clientHeight;
         this.wrapperWidth = clientWidth;
+        if (this.mode === Mode.FIXED) {
+          this.content.style.width = `${this.wrapperWidth}px`;
+          this.content.style.height = `${this.wrapperHeight}px`;
+        }
         this.setMaxScrollLeft();
         this.setMaxScrollTop();
       });
@@ -2250,7 +2267,9 @@ class StageMask extends Rule {
   setHeight(height) {
     this.height = height;
     this.setMaxScrollTop();
-    this.content.style.height = `${height}px`;
+    if (this.mode !== Mode.FIXED) {
+      this.content.style.height = `${height}px`;
+    }
   }
   /**
    * 设置蒙层宽度
@@ -2259,7 +2278,9 @@ class StageMask extends Rule {
   setWidth(width) {
     this.width = width;
     this.setMaxScrollLeft();
-    this.content.style.width = `${width}px`;
+    if (this.mode !== Mode.FIXED) {
+      this.content.style.width = `${width}px`;
+    }
   }
   /**
    * 计算并设置最大滚动宽度
@@ -2324,7 +2345,10 @@ class StageRender extends EventEmitter$1 {
     }
   }
   getMagicApi = () => ({
-    onPageElUpdate: (el) => this.emit("page-el-update", el),
+    id: guid(),
+    onPageElUpdate: (el) => {
+      this.emit("page-el-update", el);
+    },
     onRuntimeReady: (runtime) => {
       if (this.runtime) {
         return;
@@ -2523,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,
@@ -4684,6 +4697,10 @@
           const { clientHeight, clientWidth } = entry.target;
           this.wrapperHeight = clientHeight;
           this.wrapperWidth = clientWidth;
+          if (this.mode === Mode.FIXED) {
+            this.content.style.width = `${this.wrapperWidth}px`;
+            this.content.style.height = `${this.wrapperHeight}px`;
+          }
           this.setMaxScrollLeft();
           this.setMaxScrollTop();
         });
@@ -4723,7 +4740,9 @@
     setHeight(height) {
       this.height = height;
       this.setMaxScrollTop();
-      this.content.style.height = `${height}px`;
+      if (this.mode !== Mode.FIXED) {
+        this.content.style.height = `${height}px`;
+      }
     }
     /**
      * 设置蒙层宽度
@@ -4732,7 +4751,9 @@
     setWidth(width) {
       this.width = width;
       this.setMaxScrollLeft();
-      this.content.style.width = `${width}px`;
+      if (this.mode !== Mode.FIXED) {
+        this.content.style.width = `${width}px`;
+      }
     }
     /**
      * 计算并设置最大滚动宽度
@@ -4797,7 +4818,10 @@
       }
     }
     getMagicApi = () => ({
-      onPageElUpdate: (el) => this.emit("page-el-update", el),
+      id: core.guid(),
+      onPageElUpdate: (el) => {
+        this.emit("page-el-update", el);
+      },
       onRuntimeReady: (runtime) => {
         if (this.runtime) {
           return;
@@ -4996,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.21",
+  "version": "1.5.23",
   "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.21"
+    "typescript": "^5.8.3",
+    "@tmagic/core": "1.5.23"
   },
   "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/StageMask.ts

@@ -236,6 +236,12 @@ export default class StageMask extends Rule {
         const { clientHeight, clientWidth } = entry.target;
         this.wrapperHeight = clientHeight;
         this.wrapperWidth = clientWidth;
+
+        if (this.mode === Mode.FIXED) {
+          this.content.style.width = `${this.wrapperWidth}px`;
+          this.content.style.height = `${this.wrapperHeight}px`;
+        }
+
         this.setMaxScrollLeft();
         this.setMaxScrollTop();
       });
@@ -286,7 +292,9 @@ export default class StageMask extends Rule {
   private setHeight(height: number): void {
     this.height = height;
     this.setMaxScrollTop();
-    this.content.style.height = `${height}px`;
+    if (this.mode !== Mode.FIXED) {
+      this.content.style.height = `${height}px`;
+    }
   }
 
   /**
@@ -296,7 +304,9 @@ export default class StageMask extends Rule {
   private setWidth(width: number): void {
     this.width = width;
     this.setMaxScrollLeft();
-    this.content.style.width = `${width}px`;
+    if (this.mode !== Mode.FIXED) {
+      this.content.style.width = `${width}px`;
+    }
   }
 
   /**

package/src/StageRender.ts

@@ -19,7 +19,7 @@
 import { EventEmitter } from 'events';
 
 import type { Id } from '@tmagic/core';
-import { getElById, getHost, injectStyle, isSameDomain } from '@tmagic/core';
+import { getElById, getHost, guid, injectStyle, isSameDomain } from '@tmagic/core';
 
 import { DEFAULT_ZOOM, RenderType } from './const';
 import style from './style.css?raw';
@@ -54,7 +54,10 @@ export default class StageRender extends EventEmitter {
   }
 
   public getMagicApi = () => ({
-    onPageElUpdate: (el: HTMLElement) => this.emit('page-el-update', el),
+    id: guid(),
+    onPageElUpdate: (el: HTMLElement) => {
+      this.emit('page-el-update', el);
+    },
     onRuntimeReady: (runtime: Runtime) => {
       if (this.runtime) {
         return;

package/src/types.ts

@@ -67,6 +67,7 @@ export interface StageCoreConfig {
   renderType?: RenderType;
   guidesOptions?: Partial<GuidesOptions>;
   disabledMultiSelect?: boolean;
+  disabledRule?: boolean;
 }
 
 export interface ActionManagerConfig {
@@ -214,6 +215,7 @@ export interface Runtime {
 }
 
 export interface Magic {
+  id: string;
   /** 当前页面的根节点变化时调用该方法，编辑器会同步该el和stage的大小，该方法由stage注入到iframe.contentWindow中 */
   onPageElUpdate: (el: HTMLElement) => void;
 
@@ -239,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;
@@ -317,6 +318,7 @@ interface Runtime {
     [key: string]: any;
 }
 interface Magic {
+    id: string;
     /** 当前页面的根节点变化时调用该方法，编辑器会同步该el和stage的大小，该方法由stage注入到iframe.contentWindow中 */
     onPageElUpdate: (el: HTMLElement) => void;
     onRuntimeReady: (runtime: Runtime) => void;
@@ -337,6 +339,7 @@ interface TargetShadowConfig {
 }
 interface RuleOptions {
     guidesOptions?: Partial<GuidesOptions>;
+    disabledRule?: boolean;
 }
 interface CoreEvents {
     mounted: [];
@@ -507,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;
@@ -548,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);
@@ -680,7 +684,8 @@ declare class StageRender extends EventEmitter$1 {
     private customizedRender?;
     constructor({ runtimeUrl, zoom, customizedRender, renderType }: StageRenderConfig);
     getMagicApi: () => {
-        onPageElUpdate: (el: HTMLElement) => boolean;
+        id: string;
+        onPageElUpdate: (el: HTMLElement) => void;
         onRuntimeReady: (runtime: Runtime) => void;
     };
     add(data: UpdateData): Promise<void>;