@tmagic/stage 1.5.0-beta.2 → 1.5.0-beta.4

package/dist/tmagic-stage.js

@@ -333,7 +333,7 @@ class DragResizeHelper {
   /** 目标节点在蒙层上的占位节点，用于跟鼠标交互，避免鼠标事件直接作用到目标节点 */
   targetShadow;
   /** 要操作的原始目标节点 */
-  target;
+  target = null;
   /** 多选:目标节点组 */
   targetList = [];
   /** 响应拖拽的状态事件，修改绝对定位布局下targetShadow的dom。
@@ -364,6 +364,8 @@ class DragResizeHelper {
     });
   }
   destroy() {
+    this.target = null;
+    this.targetList = [];
     this.targetShadow.destroy();
     this.destroyGhostEl();
     this.moveableHelper.clear();
@@ -970,6 +972,7 @@ class StageDragResize extends MoveableOptionsManager {
    * 销毁实例
    */
   destroy() {
+    this.target = null;
     this.moveable?.destroy();
     this.dragResizeHelper.destroy();
     this.dragStatus = StageDragStatus.END;
@@ -1201,6 +1204,7 @@ class StageHighlight extends EventEmitter$1 {
    * 销毁实例
    */
   destroy() {
+    this.target = void 0;
     this.moveable?.destroy();
     this.targetShadow?.destroy();
     this.moveable = void 0;
@@ -1369,9 +1373,9 @@ class StageMultiDragResize extends MoveableOptionsManager {
 const throttleTime = 100;
 const defaultContainerHighlightDuration = 800;
 class ActionManager extends EventEmitter {
-  dr;
-  multiDr;
-  highlightLayer;
+  dr = null;
+  multiDr = null;
+  highlightLayer = null;
   /** 单选、多选、高亮的容器（蒙层的content） */
   container;
   /** 当前选中的节点 */
@@ -1438,7 +1442,7 @@ class ActionManager extends EventEmitter {
     this.disabledMultiSelect = true;
     if (this.multiDr) {
       this.multiDr.destroy();
-      this.multiDr = void 0;
+      this.multiDr = null;
     }
   }
   enableMultiSelect() {
@@ -1453,14 +1457,14 @@ class ActionManager extends EventEmitter {
    * @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();
   }
   /**
@@ -1468,7 +1472,7 @@ class ActionManager extends EventEmitter {
    * @param el 变更的元素
    */
   updateMoveable(el) {
-    this.dr.updateMoveable(el);
+    this.dr?.updateMoveable(el);
     this.multiDr?.updateMoveable();
   }
   /**
@@ -1487,7 +1491,7 @@ class ActionManager extends EventEmitter {
     return this.selectedElList;
   }
   getMoveableOption(key) {
-    if (this.dr.getTarget()) {
+    if (this.dr?.getTarget()) {
       return this.dr.getOption(key);
     }
     if (this.multiDr?.targetList.length) {
@@ -1544,7 +1548,7 @@ class ActionManager extends EventEmitter {
   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 = [];
@@ -1576,13 +1580,13 @@ class ActionManager extends EventEmitter {
       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();
   }
   /**
    * 用于在切换选择模式时清除上一次的状态
@@ -1593,7 +1597,7 @@ class ActionManager extends EventEmitter {
       this.multiDr?.clearSelectStatus();
       this.selectedElList = [];
     } else {
-      this.dr.clearSelectStatus();
+      this.dr?.clearSelectStatus();
     }
   }
   /**
@@ -1628,7 +1632,7 @@ class ActionManager extends EventEmitter {
     return void 0;
   }
   getDragStatus() {
-    return this.dr.getDragStatus();
+    return this.dr?.getDragStatus();
   }
   destroy() {
     this.container.removeEventListener("mousedown", this.mouseDownHandler);
@@ -1636,9 +1640,14 @@ 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;
   }
   on(eventName, listener) {
     return super.on(eventName, listener);
@@ -1668,7 +1677,7 @@ class ActionManager extends EventEmitter {
     }).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 }]
@@ -2438,9 +2447,9 @@ class StageRender extends EventEmitter$1 {
 
 class StageCore extends EventEmitter$1 {
   container;
-  renderer;
-  mask;
-  actionManager;
+  renderer = null;
+  mask = null;
+  actionManager = null;
   pageResizeObserver = null;
   autoScrollIntoView;
   customizedRender;
@@ -2472,13 +2481,15 @@ class StageCore extends EventEmitter$1 {
    * @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);
     }
   }
   /**
@@ -2486,15 +2497,15 @@ class StageCore extends EventEmitter$1 {
    * @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);
     }
   }
   /**
@@ -2502,10 +2513,10 @@ class StageCore extends EventEmitter$1 {
    * @param el 要高亮的元素
    */
   highlight(id) {
-    this.actionManager.highlight(id);
+    this.actionManager?.highlight(id);
   }
   clearHighlight() {
-    this.actionManager.clearHighlight();
+    this.actionManager?.clearHighlight();
   }
   /**
    * 更新组件
@@ -2513,11 +2524,11 @@ class StageCore extends EventEmitter$1 {
    */
   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);
       }
@@ -2528,17 +2539,17 @@ class StageCore extends EventEmitter$1 {
    * @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节点
@@ -2547,16 +2558,16 @@ class StageCore extends EventEmitter$1 {
   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代替
@@ -2572,31 +2583,35 @@ class StageCore extends EventEmitter$1 {
    * @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);
@@ -2613,8 +2628,8 @@ class StageCore extends EventEmitter$1 {
     }
     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);
     }
@@ -2639,18 +2654,18 @@ class StageCore extends EventEmitter$1 {
     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);
     });
   }
@@ -2668,7 +2683,7 @@ class StageCore extends EventEmitter$1 {
    * 初始化ActionManager类本身抛出来的事件监听
    */
   initActionManagerEvent() {
-    this.actionManager.on("before-select", (el, event) => {
+    this.actionManager?.on("before-select", (el, event) => {
       const id = getIdFromEl()(el);
       id && this.select(id, event);
     }).on("select", (selectedEl, event) => {
@@ -2685,7 +2700,7 @@ class StageCore extends EventEmitter$1 {
    * 初始化DragResize类通过ActionManager抛出来的事件监听
    */
   initDrEvent() {
-    this.actionManager.on("update", (data) => {
+    this.actionManager?.on("update", (data) => {
       this.emit("update", data);
     }).on("sort", (data) => {
       this.emit("sort", data);
@@ -2699,10 +2714,10 @@ class StageCore extends EventEmitter$1 {
    * 初始化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) => {
@@ -2713,7 +2728,7 @@ class StageCore extends EventEmitter$1 {
    * 初始化Highlight类通过ActionManager抛出来的事件监听
    */
   initHighlightEvent() {
-    this.actionManager.on("highlight", (highlightEl) => {
+    this.actionManager?.on("highlight", (highlightEl) => {
       this.emit("highlight", highlightEl);
     });
   }
@@ -2721,7 +2736,7 @@ class StageCore extends EventEmitter$1 {
    * 初始化Highlight类通过ActionManager抛出来的事件监听
    */
   initMouseEvent() {
-    this.actionManager.on("mousemove", (event) => {
+    this.actionManager?.on("mousemove", (event) => {
       this.emit("mousemove", event);
     }).on("mouseleave", (event) => {
       this.emit("mouseleave", event);