@tmagic/stage 1.5.0-beta.1 → 1.5.0-beta.3

package/dist/tmagic-stage.umd.cjs

@@ -330,7 +330,7 @@
     /** 目标节点在蒙层上的占位节点，用于跟鼠标交互，避免鼠标事件直接作用到目标节点 */
     targetShadow;
     /** 要操作的原始目标节点 */
-    target;
+    target = null;
     /** 多选:目标节点组 */
     targetList = [];
     /** 响应拖拽的状态事件，修改绝对定位布局下targetShadow的dom。
@@ -361,6 +361,8 @@
       });
     }
     destroy() {
+      this.target = null;
+      this.targetList = [];
       this.targetShadow.destroy();
       this.destroyGhostEl();
       this.moveableHelper.clear();
@@ -967,6 +969,7 @@
      * 销毁实例
      */
     destroy() {
+      this.target = null;
       this.moveable?.destroy();
       this.dragResizeHelper.destroy();
       this.dragStatus = StageDragStatus.END;
@@ -1198,6 +1201,7 @@
      * 销毁实例
      */
     destroy() {
+      this.target = void 0;
       this.moveable?.destroy();
       this.targetShadow?.destroy();
       this.moveable = void 0;
@@ -1366,9 +1370,9 @@
   const throttleTime = 100;
   const defaultContainerHighlightDuration = 800;
   class ActionManager extends EventEmitter {
-    dr;
-    multiDr;
-    highlightLayer;
+    dr = null;
+    multiDr = null;
+    highlightLayer = null;
     /** 单选、多选、高亮的容器（蒙层的content） */
     container;
     /** 当前选中的节点 */
@@ -1435,7 +1439,7 @@
       this.disabledMultiSelect = true;
       if (this.multiDr) {
         this.multiDr.destroy();
-        this.multiDr = void 0;
+        this.multiDr = null;
       }
     }
     enableMultiSelect() {
@@ -1450,14 +1454,14 @@
      * @param guidelines 参考线坐标数组
      */
     setGuidelines(type, guidelines) {
-      this.dr.setGuidelines(type, guidelines);
+      this.dr?.setGuidelines(type, guidelines);
       this.multiDr?.setGuidelines(type, guidelines);
     }
     /**
      * 清空所有参考线
      */
     clearGuides() {
-      this.dr.clearGuides();
+      this.dr?.clearGuides();
       this.multiDr?.clearGuides();
     }
     /**
@@ -1465,7 +1469,7 @@
      * @param el 变更的元素
      */
     updateMoveable(el) {
-      this.dr.updateMoveable(el);
+      this.dr?.updateMoveable(el);
       this.multiDr?.updateMoveable();
     }
     /**
@@ -1484,7 +1488,7 @@
       return this.selectedElList;
     }
     getMoveableOption(key) {
-      if (this.dr.getTarget()) {
+      if (this.dr?.getTarget()) {
         return this.dr.getOption(key);
       }
       if (this.multiDr?.targetList.length) {
@@ -1541,7 +1545,7 @@
     select(el, event) {
       this.setSelectedEl(el);
       this.clearSelectStatus(SelectStatus.MULTI_SELECT);
-      this.dr.select(el, event);
+      this.dr?.select(el, event);
     }
     multiSelect(ids) {
       this.selectedElList = [];
@@ -1573,13 +1577,13 @@
         return;
       }
       if (el === this.highlightedEl || !el) return;
-      this.highlightLayer.highlight(el);
+      this.highlightLayer?.highlight(el);
       this.highlightedEl = el;
       this.emit("highlight", el);
     }
     clearHighlight() {
       this.setHighlightEl(void 0);
-      this.highlightLayer.clearHighlight();
+      this.highlightLayer?.clearHighlight();
     }
     /**
      * 用于在切换选择模式时清除上一次的状态
@@ -1590,7 +1594,7 @@
         this.multiDr?.clearSelectStatus();
         this.selectedElList = [];
       } else {
-        this.dr.clearSelectStatus();
+        this.dr?.clearSelectStatus();
       }
     }
     /**
@@ -1625,7 +1629,7 @@
       return void 0;
     }
     getDragStatus() {
-      return this.dr.getDragStatus();
+      return this.dr?.getDragStatus();
     }
     destroy() {
       this.container.removeEventListener("mousedown", this.mouseDownHandler);
@@ -1633,9 +1637,14 @@
       this.container.removeEventListener("mouseleave", this.mouseLeaveHandler);
       this.container.removeEventListener("wheel", this.mouseWheelHandler);
       this.container.removeEventListener("dblclick", this.dblclickHandler);
-      this.dr.destroy();
+      this.selectedEl = null;
+      this.selectedElList = [];
+      this.dr?.destroy();
       this.multiDr?.destroy();
-      this.highlightLayer.destroy();
+      this.highlightLayer?.destroy();
+      this.dr = null;
+      this.multiDr = null;
+      this.highlightLayer = null;
     }
     on(eventName, listener) {
       return super.on(eventName, listener);
@@ -1665,7 +1674,7 @@
       }).on(AbleActionEventType.SELECT_PARENT, () => {
         this.emit("select-parent");
       }).on(AbleActionEventType.REMOVE, () => {
-        const drTarget = this.dr.getTarget();
+        const drTarget = this.dr?.getTarget();
         if (!drTarget) return;
         const data = {
           data: [{ el: drTarget }]
@@ -2435,9 +2444,9 @@
 
   class StageCore extends EventEmitter.EventEmitter {
     container;
-    renderer;
-    mask;
-    actionManager;
+    renderer = null;
+    mask = null;
+    actionManager = null;
     pageResizeObserver = null;
     autoScrollIntoView;
     customizedRender;
@@ -2469,13 +2478,15 @@
      * @param id 选中的id
      */
     async select(id, event) {
-      const el = this.renderer.getTargetElement(id);
-      if (el === this.actionManager.getSelectedEl()) return;
-      await this.renderer.select([id]);
-      el && this.mask.setLayout(el);
-      this.actionManager.select(el, event);
+      const el = this.renderer?.getTargetElement(id) || null;
+      if (el === this.actionManager?.getSelectedEl()) return;
+      await this.renderer?.select([id]);
+      if (el) {
+        this.mask?.setLayout(el);
+      }
+      this.actionManager?.select(el, event);
       if (el && (this.autoScrollIntoView || el.dataset.autoScrollIntoView)) {
-        this.mask.observerIntersection(el);
+        this.mask?.observerIntersection(el);
       }
     }
     /**
@@ -2483,15 +2494,15 @@
      * @param ids 选中元素的id列表
      */
     async multiSelect(ids) {
-      const els = ids.map((id) => this.renderer.getTargetElement(id)).filter((el) => Boolean(el));
+      const els = ids.map((id) => this.renderer?.getTargetElement(id)).filter((el) => Boolean(el));
       if (els.length === 0) return;
       const lastEl = els[els.length - 1];
       const isReduceSelect = els.length < this.actionManager.getSelectedElList().length;
-      await this.renderer.select(ids);
-      lastEl && this.mask.setLayout(lastEl);
-      this.actionManager.multiSelect(ids);
+      await this.renderer?.select(ids);
+      lastEl && this.mask?.setLayout(lastEl);
+      this.actionManager?.multiSelect(ids);
       if (lastEl && (this.autoScrollIntoView || lastEl.dataset.autoScrollIntoView) && !isReduceSelect) {
-        this.mask.observerIntersection(lastEl);
+        this.mask?.observerIntersection(lastEl);
       }
     }
     /**
@@ -2499,10 +2510,10 @@
      * @param el 要高亮的元素
      */
     highlight(id) {
-      this.actionManager.highlight(id);
+      this.actionManager?.highlight(id);
     }
     clearHighlight() {
-      this.actionManager.clearHighlight();
+      this.actionManager?.clearHighlight();
     }
     /**
      * 更新组件
@@ -2510,11 +2521,11 @@
      */
     async update(data) {
       const { config } = data;
-      await this.renderer.update(data);
+      await this.renderer?.update(data);
       setTimeout(() => {
-        const el = this.renderer.getTargetElement(`${config.id}`);
-        if (el && this.actionManager.isSelectedEl(el)) {
-          this.mask.setLayout(el);
+        const el = this.renderer?.getTargetElement(`${config.id}`);
+        if (el && this.actionManager?.isSelectedEl(el)) {
+          this.mask?.setLayout(el);
           this.actionManager.setSelectedEl(el);
           this.actionManager.updateMoveable(el);
         }
@@ -2525,17 +2536,17 @@
      * @param data 组件信息数据
      */
     async add(data) {
-      return await this.renderer.add(data);
+      return await this.renderer?.add(data);
     }
     /**
      * 从画布删除一个组件
      * @param data 组件信息数据
      */
     async remove(data) {
-      return await this.renderer.remove(data);
+      return await this.renderer?.remove(data);
     }
     setZoom(zoom = DEFAULT_ZOOM) {
-      this.renderer.setZoom(zoom);
+      this.renderer?.setZoom(zoom);
     }
     /**
      * 挂载Dom节点
@@ -2544,16 +2555,16 @@
     async mount(el) {
       this.container = el;
       const { mask, renderer } = this;
-      await renderer.mount(el);
-      mask.mount(el);
+      await renderer?.mount(el);
+      mask?.mount(el);
       this.emit("mounted");
     }
     /**
      * 清空所有参考线
      */
     clearGuides() {
-      this.mask.clearGuides();
-      this.actionManager.clearGuides();
+      this.mask?.clearGuides();
+      this.actionManager?.clearGuides();
     }
     /**
      * @deprecated 废弃接口，建议用delayedMarkContainer代替
@@ -2569,31 +2580,35 @@
      * @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
      */
     delayedMarkContainer(event, excludeElList = []) {
-      return this.actionManager.delayedMarkContainer(event, excludeElList);
+      return this.actionManager?.delayedMarkContainer(event, excludeElList);
     }
     getMoveableOption(key) {
-      return this.actionManager.getMoveableOption(key);
+      return this.actionManager?.getMoveableOption(key);
     }
     getDragStatus() {
-      return this.actionManager.getDragStatus();
+      return this.actionManager?.getDragStatus();
     }
     disableMultiSelect() {
-      this.actionManager.disableMultiSelect();
+      this.actionManager?.disableMultiSelect();
     }
     enableMultiSelect() {
-      this.actionManager.enableMultiSelect();
+      this.actionManager?.enableMultiSelect();
     }
     /**
      * 销毁实例
      */
     destroy() {
       const { mask, renderer, actionManager, pageResizeObserver } = this;
-      renderer.destroy();
-      mask.destroy();
-      actionManager.destroy();
+      renderer?.destroy();
+      mask?.destroy();
+      actionManager?.destroy();
       pageResizeObserver?.disconnect();
       this.removeAllListeners();
       this.container = void 0;
+      this.renderer = null;
+      this.mask = null;
+      this.actionManager = null;
+      this.pageResizeObserver = null;
     }
     on(eventName, listener) {
       return super.on(eventName, listener);
@@ -2610,8 +2625,8 @@
       }
       if (typeof ResizeObserver !== "undefined") {
         this.pageResizeObserver = new ResizeObserver((entries) => {
-          this.mask.pageResize(entries);
-          this.actionManager.updateMoveable();
+          this.mask?.pageResize(entries);
+          this.actionManager?.updateMoveable();
         });
         this.pageResizeObserver.observe(page);
       }
@@ -2636,18 +2651,18 @@
       return actionManagerConfig;
     }
     initRenderEvent() {
-      this.renderer.on("runtime-ready", (runtime) => {
+      this.renderer?.on("runtime-ready", (runtime) => {
         this.emit("runtime-ready", runtime);
       });
-      this.renderer.on("page-el-update", (el) => {
+      this.renderer?.on("page-el-update", (el) => {
         this.mask?.observe(el);
         this.observePageResize(el);
         this.emit("page-el-update", el);
       });
     }
     initMaskEvent() {
-      this.mask.on("change-guides", (data) => {
-        this.actionManager.setGuidelines(data.type, data.guides);
+      this.mask?.on("change-guides", (data) => {
+        this.actionManager?.setGuidelines(data.type, data.guides);
         this.emit("change-guides", data);
       });
     }
@@ -2665,7 +2680,7 @@
      * 初始化ActionManager类本身抛出来的事件监听
      */
     initActionManagerEvent() {
-      this.actionManager.on("before-select", (el, event) => {
+      this.actionManager?.on("before-select", (el, event) => {
         const id = utils.getIdFromEl()(el);
         id && this.select(id, event);
       }).on("select", (selectedEl, event) => {
@@ -2682,7 +2697,7 @@
      * 初始化DragResize类通过ActionManager抛出来的事件监听
      */
     initDrEvent() {
-      this.actionManager.on("update", (data) => {
+      this.actionManager?.on("update", (data) => {
         this.emit("update", data);
       }).on("sort", (data) => {
         this.emit("sort", data);
@@ -2696,10 +2711,10 @@
      * 初始化MultiDragResize类通过ActionManager抛出来的事件监听
      */
     initMulDrEvent() {
-      this.actionManager.on("change-to-select", (id, e) => {
+      this.actionManager?.on("change-to-select", (id, e) => {
         this.select(id);
         setTimeout(() => {
-          const el = this.renderer.getTargetElement(id);
+          const el = this.renderer?.getTargetElement(id);
           el && this.emit("select", el, e);
         });
       }).on("multi-update", (data) => {
@@ -2710,7 +2725,7 @@
      * 初始化Highlight类通过ActionManager抛出来的事件监听
      */
     initHighlightEvent() {
-      this.actionManager.on("highlight", (highlightEl) => {
+      this.actionManager?.on("highlight", (highlightEl) => {
         this.emit("highlight", highlightEl);
       });
     }
@@ -2718,7 +2733,7 @@
      * 初始化Highlight类通过ActionManager抛出来的事件监听
      */
     initMouseEvent() {
-      this.actionManager.on("mousemove", (event) => {
+      this.actionManager?.on("mousemove", (event) => {
         this.emit("mousemove", event);
       }).on("mouseleave", (event) => {
         this.emit("mouseleave", event);

package/package.json

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

package/src/ActionManager.ts

@@ -65,9 +65,9 @@ const defaultContainerHighlightDuration = 800;
  * @extends EventEmitter
  */
 export default class ActionManager extends EventEmitter {
-  private dr: StageDragResize;
-  private multiDr?: StageMultiDragResize;
-  private highlightLayer: StageHighlight;
+  private dr: StageDragResize | null = null;
+  private multiDr: StageMultiDragResize | null = null;
+  private highlightLayer: StageHighlight | null = null;
   /** 单选、多选、高亮的容器（蒙层的content） */
   private container: HTMLElement;
   /** 当前选中的节点 */
@@ -143,7 +143,7 @@ export default class ActionManager extends EventEmitter {
     this.disabledMultiSelect = true;
     if (this.multiDr) {
       this.multiDr.destroy();
-      this.multiDr = undefined;
+      this.multiDr = null;
     }
   }
 
@@ -161,7 +161,7 @@ export default class ActionManager extends EventEmitter {
    * @param guidelines 参考线坐标数组
    */
   public setGuidelines(type: GuidesType, guidelines: number[]): void {
-    this.dr.setGuidelines(type, guidelines);
+    this.dr?.setGuidelines(type, guidelines);
     this.multiDr?.setGuidelines(type, guidelines);
   }
 
@@ -169,7 +169,7 @@ export default class ActionManager extends EventEmitter {
    * 清空所有参考线
    */
   public clearGuides(): void {
-    this.dr.clearGuides();
+    this.dr?.clearGuides();
     this.multiDr?.clearGuides();
   }
 
@@ -178,7 +178,7 @@ export default class ActionManager extends EventEmitter {
    * @param el 变更的元素
    */
   public updateMoveable(el?: HTMLElement): void {
-    this.dr.updateMoveable(el);
+    this.dr?.updateMoveable(el);
     // 多选时不可配置元素，因此不存在多选元素变更，不需要传el
     this.multiDr?.updateMoveable();
   }
@@ -204,7 +204,7 @@ export default class ActionManager extends EventEmitter {
   }
 
   public getMoveableOption<K extends keyof MoveableOptions>(key: K): MoveableOptions[K] | undefined {
-    if (this.dr.getTarget()) {
+    if (this.dr?.getTarget()) {
       return this.dr.getOption(key);
     }
     if (this.multiDr?.targetList.length) {
@@ -271,7 +271,7 @@ export default class ActionManager extends EventEmitter {
   public select(el: HTMLElement | null, event?: MouseEvent): void {
     this.setSelectedEl(el);
     this.clearSelectStatus(SelectStatus.MULTI_SELECT);
-    this.dr.select(el, event);
+    this.dr?.select(el, event);
   }
 
   public multiSelect(ids: Id[]): void {
@@ -310,14 +310,14 @@ export default class ActionManager extends EventEmitter {
     }
     if (el === this.highlightedEl || !el) return;
 
-    this.highlightLayer.highlight(el);
+    this.highlightLayer?.highlight(el);
     this.highlightedEl = el;
     this.emit('highlight', el);
   }
 
   public clearHighlight(): void {
     this.setHighlightEl(undefined);
-    this.highlightLayer.clearHighlight();
+    this.highlightLayer?.clearHighlight();
   }
 
   /**
@@ -329,7 +329,7 @@ export default class ActionManager extends EventEmitter {
       this.multiDr?.clearSelectStatus();
       this.selectedElList = [];
     } else {
-      this.dr.clearSelectStatus();
+      this.dr?.clearSelectStatus();
     }
   }
 
@@ -373,7 +373,7 @@ export default class ActionManager extends EventEmitter {
   }
 
   public getDragStatus() {
-    return this.dr.getDragStatus();
+    return this.dr?.getDragStatus();
   }
 
   public destroy(): void {
@@ -382,9 +382,16 @@ export default class ActionManager extends EventEmitter {
     this.container.removeEventListener('mouseleave', this.mouseLeaveHandler);
     this.container.removeEventListener('wheel', this.mouseWheelHandler);
     this.container.removeEventListener('dblclick', this.dblclickHandler);
-    this.dr.destroy();
+    this.selectedEl = null;
+    this.selectedElList = [];
+
+    this.dr?.destroy();
     this.multiDr?.destroy();
-    this.highlightLayer.destroy();
+    this.highlightLayer?.destroy();
+
+    this.dr = null;
+    this.multiDr = null;
+    this.highlightLayer = null;
   }
 
   public on<Name extends keyof ActionManagerEvents, Param extends ActionManagerEvents[Name]>(
@@ -431,7 +438,7 @@ export default class ActionManager extends EventEmitter {
         this.emit('select-parent');
       })
       .on(AbleActionEventType.REMOVE, () => {
-        const drTarget = this.dr.getTarget();
+        const drTarget = this.dr?.getTarget();
         if (!drTarget) return;
         const data: RemoveEventData = {
           data: [{ el: drTarget }],

package/src/DragResizeHelper.ts

@@ -50,7 +50,7 @@ export default class DragResizeHelper {
   /** 目标节点在蒙层上的占位节点，用于跟鼠标交互，避免鼠标事件直接作用到目标节点 */
   private targetShadow: TargetShadow;
   /** 要操作的原始目标节点 */
-  private target!: HTMLElement;
+  private target: HTMLElement | null = null;
   /** 多选:目标节点组 */
   private targetList: HTMLElement[] = [];
   /** 响应拖拽的状态事件，修改绝对定位布局下targetShadow的dom。
@@ -84,6 +84,8 @@ export default class DragResizeHelper {
   }
 
   public destroy(): void {
+    this.target = null;
+    this.targetList = [];
     this.targetShadow.destroy();
     this.destroyGhostEl();
     this.moveableHelper.clear();
@@ -114,8 +116,8 @@ export default class DragResizeHelper {
   public onResizeStart(e: OnResizeStart): void {
     this.moveableHelper.onResizeStart(e);
 
-    this.frameSnapShot.top = this.target.offsetTop;
-    this.frameSnapShot.left = this.target.offsetLeft;
+    this.frameSnapShot.top = this.target!.offsetTop;
+    this.frameSnapShot.left = this.target!.offsetLeft;
   }
 
   public onResize(e: OnResize): void {
@@ -123,33 +125,33 @@ export default class DragResizeHelper {
     const { beforeTranslate } = drag;
     // 流式布局
     if (this.mode === Mode.SORTABLE) {
-      this.target.style.top = '0px';
+      this.target!.style.top = '0px';
       if (this.targetShadow.el) {
         this.targetShadow.el.style.width = `${width}px`;
         this.targetShadow.el.style.height = `${height}px`;
       }
     } else {
       this.moveableHelper.onResize(e);
-      const { marginLeft, marginTop } = getMarginValue(this.target);
-      this.target.style.left = `${this.frameSnapShot.left + beforeTranslate[0] - marginLeft}px`;
-      this.target.style.top = `${this.frameSnapShot.top + beforeTranslate[1] - marginTop}px`;
+      const { marginLeft, marginTop } = getMarginValue(this.target!);
+      this.target!.style.left = `${this.frameSnapShot.left + beforeTranslate[0] - marginLeft}px`;
+      this.target!.style.top = `${this.frameSnapShot.top + beforeTranslate[1] - marginTop}px`;
     }
 
-    const { borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomWidth } = getBorderWidth(this.target);
+    const { borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomWidth } = getBorderWidth(this.target!);
 
-    this.target.style.width = `${width + borderLeftWidth + borderRightWidth}px`;
-    this.target.style.height = `${height + borderTopWidth + borderBottomWidth}px`;
+    this.target!.style.width = `${width + borderLeftWidth + borderRightWidth}px`;
+    this.target!.style.height = `${height + borderTopWidth + borderBottomWidth}px`;
   }
 
   public onDragStart(e: OnDragStart): void {
     this.moveableHelper.onDragStart(e);
 
     if (this.mode === Mode.SORTABLE) {
-      this.ghostEl = this.generateGhostEl(this.target);
+      this.ghostEl = this.generateGhostEl(this.target!);
     }
 
-    this.frameSnapShot.top = this.target.offsetTop;
-    this.frameSnapShot.left = this.target.offsetLeft;
+    this.frameSnapShot.top = this.target!.offsetTop;
+    this.frameSnapShot.left = this.target!.offsetLeft;
   }
 
   public onDrag(e: OnDrag): void {
@@ -161,10 +163,10 @@ export default class DragResizeHelper {
 
     this.moveableHelper.onDrag(e);
 
-    const { marginLeft, marginTop } = getMarginValue(this.target);
+    const { marginLeft, marginTop } = getMarginValue(this.target!);
 
-    this.target.style.left = `${this.frameSnapShot.left + e.beforeTranslate[0] - marginLeft}px`;
-    this.target.style.top = `${this.frameSnapShot.top + e.beforeTranslate[1] - marginTop}px`;
+    this.target!.style.left = `${this.frameSnapShot.left + e.beforeTranslate[0] - marginLeft}px`;
+    this.target!.style.top = `${this.frameSnapShot.top + e.beforeTranslate[1] - marginTop}px`;
   }
 
   public onRotateStart(e: OnRotateStart): void {
@@ -174,7 +176,7 @@ export default class DragResizeHelper {
   public onRotate(e: OnRotate): void {
     this.moveableHelper.onRotate(e);
     const frame = this.moveableHelper.getFrame(e.target);
-    this.target.style.transform = frame?.toCSSObject().transform || '';
+    this.target!.style.transform = frame?.toCSSObject().transform || '';
   }
 
   public onScaleStart(e: OnScaleStart): void {
@@ -184,7 +186,7 @@ export default class DragResizeHelper {
   public onScale(e: OnScale): void {
     this.moveableHelper.onScale(e);
     const frame = this.moveableHelper.getFrame(e.target);
-    this.target.style.transform = frame?.toCSSObject().transform || '';
+    this.target!.style.transform = frame?.toCSSObject().transform || '';
   }
 
   public getGhostEl(): HTMLElement | undefined {