@tmagic/stage 1.4.0-beta.1 → 1.4.0-beta.2

package/dist/tmagic-stage.js

@@ -44,6 +44,27 @@ var AbleActionEventType = /* @__PURE__ */ ((AbleActionEventType2) => {
   AbleActionEventType2["REMOVE"] = "remove";
   return AbleActionEventType2;
 })(AbleActionEventType || {});
+var ContainerHighlightType = /* @__PURE__ */ ((ContainerHighlightType2) => {
+  ContainerHighlightType2["DEFAULT"] = "default";
+  ContainerHighlightType2["ALT"] = "alt";
+  return ContainerHighlightType2;
+})(ContainerHighlightType || {});
+var RenderType = /* @__PURE__ */ ((RenderType2) => {
+  RenderType2["IFRAME"] = "iframe";
+  RenderType2["NATIVE"] = "native";
+  return RenderType2;
+})(RenderType || {});
+var SelectStatus = /* @__PURE__ */ ((SelectStatus2) => {
+  SelectStatus2["SELECT"] = "select";
+  SelectStatus2["MULTI_SELECT"] = "multiSelect";
+  return SelectStatus2;
+})(SelectStatus || {});
+var StageDragStatus = /* @__PURE__ */ ((StageDragStatus2) => {
+  StageDragStatus2["START"] = "start";
+  StageDragStatus2["ING"] = "ing";
+  StageDragStatus2["END"] = "end";
+  return StageDragStatus2;
+})(StageDragStatus || {});
 
 const getParents = (el, relative) => {
   let cur = el.parentElement;
@@ -899,31 +920,9 @@ class MoveableOptionsManager extends EventEmitter {
   }
 }
 
-var ContainerHighlightType = /* @__PURE__ */ ((ContainerHighlightType2) => {
-  ContainerHighlightType2["DEFAULT"] = "default";
-  ContainerHighlightType2["ALT"] = "alt";
-  return ContainerHighlightType2;
-})(ContainerHighlightType || {});
-var RenderType = /* @__PURE__ */ ((RenderType2) => {
-  RenderType2["IFRAME"] = "iframe";
-  RenderType2["NATIVE"] = "native";
-  return RenderType2;
-})(RenderType || {});
-var SelectStatus = /* @__PURE__ */ ((SelectStatus2) => {
-  SelectStatus2["SELECT"] = "select";
-  SelectStatus2["MULTI_SELECT"] = "multiSelect";
-  return SelectStatus2;
-})(SelectStatus || {});
-var StageDragStatus = /* @__PURE__ */ ((StageDragStatus2) => {
-  StageDragStatus2["START"] = "start";
-  StageDragStatus2["ING"] = "ing";
-  StageDragStatus2["END"] = "end";
-  return StageDragStatus2;
-})(StageDragStatus || {});
-
 class StageDragResize extends MoveableOptionsManager {
   /** 目标节点 */
-  target;
+  target = null;
   /** Moveable拖拽类实例 */
   moveable;
   /** 拖动状态 */
@@ -956,6 +955,11 @@ class StageDragResize extends MoveableOptionsManager {
    * @param event 鼠标事件
    */
   select(el, event) {
+    if (!el) {
+      this.moveable?.destroy();
+      this.moveable = void 0;
+      return;
+    }
     if (!this.moveable || el !== this.target) {
       this.initMoveable(el);
     } else {
@@ -998,6 +1002,12 @@ class StageDragResize extends MoveableOptionsManager {
     this.dragStatus = StageDragStatus.END;
     this.removeAllListeners();
   }
+  on(eventName, listener) {
+    return super.on(eventName, listener);
+  }
+  emit(eventName, ...args) {
+    return super.emit(eventName, ...args);
+  }
   init(el) {
     if (/(auto|scroll)/.test(el.style.overflow)) {
       el.style.overflow = "hidden";
@@ -1098,16 +1108,19 @@ class StageDragResize extends MoveableOptionsManager {
     }).on("rotateEnd", (e) => {
       this.dragStatus = StageDragStatus.END;
       const frame = this.dragResizeHelper?.getFrame(e.target);
-      this.emit("update", {
-        data: [
-          {
-            el: this.target,
-            style: {
-              transform: frame?.get("transform")
+      if (this.target && frame) {
+        this.emit("update", {
+          data: [
+            {
+              el: this.target,
+              style: {
+                transform: frame.get("transform")
+              }
             }
-          }
-        ]
-      });
+          ],
+          parentEl: null
+        });
+      }
     });
   }
   bindScaleEvent() {
@@ -1124,16 +1137,19 @@ class StageDragResize extends MoveableOptionsManager {
     }).on("scaleEnd", (e) => {
       this.dragStatus = StageDragStatus.END;
       const frame = this.dragResizeHelper.getFrame(e.target);
-      this.emit("update", {
-        data: [
-          {
-            el: this.target,
-            style: {
-              transform: frame?.get("transform")
+      if (this.target && frame) {
+        this.emit("update", {
+          data: [
+            {
+              el: this.target,
+              style: {
+                transform: frame.get("transform")
+              }
             }
-          }
-        ]
-      });
+          ],
+          parentEl: null
+        });
+      }
     });
   }
   sort() {
@@ -1368,6 +1384,12 @@ class StageMultiDragResize extends MoveableOptionsManager {
     this.moveableForMulti?.destroy();
     this.dragResizeHelper.destroy();
   }
+  on(eventName, listener) {
+    return super.on(eventName, listener);
+  }
+  emit(eventName, ...args) {
+    return super.emit(eventName, ...args);
+  }
   /**
    * 拖拽完成后将更新的位置信息暴露给上层业务方，业务方可以接收事件进行保存
    * @param isResize 是否进行大小缩放
@@ -1398,7 +1420,7 @@ class ActionManager extends EventEmitter {
   /** 单选、多选、高亮的容器（蒙层的content） */
   container;
   /** 当前选中的节点 */
-  selectedEl;
+  selectedEl = null;
   /** 多选选中的节点组 */
   selectedElList = [];
   /** 当前高亮的节点 */
@@ -1429,7 +1451,7 @@ class ActionManager extends EventEmitter {
       return;
     }
     this.emit("mousemove", event);
-    this.highlight(el);
+    this.highlight(el.id);
   }, throttleTime);
   constructor(config) {
     super();
@@ -1533,6 +1555,7 @@ class ActionManager extends EventEmitter {
         return el;
       }
     }
+    return null;
   }
   /**
    * 判断一个元素能否在当前场景被选中
@@ -1569,8 +1592,14 @@ class ActionManager extends EventEmitter {
     this.clearSelectStatus(SelectStatus.MULTI_SELECT);
     this.dr.select(el, event);
   }
-  multiSelect(idOrElList) {
-    this.selectedElList = idOrElList.map((idOrEl) => this.getTargetElement(idOrEl));
+  multiSelect(ids) {
+    this.selectedElList = [];
+    ids.forEach((id) => {
+      const el = this.getTargetElement(id);
+      if (el) {
+        this.selectedElList.push(el);
+      }
+    });
     this.clearSelectStatus(SelectStatus.SELECT);
     this.multiDr?.multiSelect(this.selectedElList);
   }
@@ -1580,10 +1609,10 @@ class ActionManager extends EventEmitter {
   setHighlightEl(el) {
     this.highlightedEl = el;
   }
-  highlight(idOrEl) {
+  highlight(id) {
     let el;
     try {
-      el = this.getTargetElement(idOrEl);
+      el = this.getTargetElement(id);
     } catch (error) {
       this.clearHighlight();
       return;
@@ -1659,6 +1688,12 @@ class ActionManager extends EventEmitter {
     this.multiDr?.destroy();
     this.highlightLayer.destroy();
   }
+  on(eventName, listener) {
+    return super.on(eventName, listener);
+  }
+  emit(eventName, ...args) {
+    return super.emit(eventName, ...args);
+  }
   createDr(config) {
     const createDrHelper = () => new DragResizeHelper({
       container: config.container,
@@ -1678,9 +1713,9 @@ class ActionManager extends EventEmitter {
       setTimeout(() => this.emit("update", data));
     }).on("sort", (data) => {
       setTimeout(() => this.emit("sort", data));
-    }).on("select-parent", () => {
+    }).on(AbleActionEventType.SELECT_PARENT, () => {
       this.emit("select-parent");
-    }).on("remove", () => {
+    }).on(AbleActionEventType.REMOVE, () => {
       const drTarget = this.dr.getTarget();
       if (!drTarget)
         return;
@@ -1709,11 +1744,10 @@ class ActionManager extends EventEmitter {
     });
     multiDr?.on("update", (data) => {
       this.emit("multi-update", data);
-    }).on("change-to-select", async (id, e) => {
+    }).on("change-to-select", (id, e) => {
       if (this.isMultiSelectStatus)
-        return false;
-      const el = this.getTargetElement(id);
-      this.emit("change-to-select", el, e);
+        return;
+      this.emit("change-to-select", id, e);
     });
     return multiDr;
   }
@@ -1747,11 +1781,13 @@ class ActionManager extends EventEmitter {
       return;
     if (this.selectedEl && !this.selectedEl.className.includes(PAGE_CLASS)) {
       this.selectedElList.push(this.selectedEl);
-      this.setSelectedEl(void 0);
+      this.setSelectedEl(null);
     }
     const existIndex = this.selectedElList.findIndex((selectedDom) => selectedDom.id === el.id);
     if (existIndex !== -1) {
-      this.selectedElList.splice(existIndex, 1);
+      if (this.selectedElList.length > 1) {
+        this.selectedElList.splice(existIndex, 1);
+      }
     } else {
       this.selectedElList.push(el);
     }
@@ -2138,6 +2174,12 @@ class StageMask extends Rule {
     this.wrapperResizeObserver?.disconnect();
     super.destroy();
   }
+  on(eventName, listener) {
+    return super.on(eventName, listener);
+  }
+  emit(eventName, ...args) {
+    return super.emit(eventName, ...args);
+  }
   /**
    * 监听选中元素是否在画布可视区域内，如果目标元素不在可视区域内，通过滚动使该元素出现在可视区域
    */
@@ -2313,14 +2355,11 @@ class StageRender extends EventEmitter$1 {
     const runtime = await this.getRuntime();
     runtime?.update?.(data);
   }
-  async select(els) {
+  async select(ids) {
     const runtime = await this.getRuntime();
-    for (const el of els) {
-      await runtime?.select?.(el.id);
-      if (runtime?.beforeSelect) {
-        await runtime.beforeSelect(el);
-      }
-      this.flagSelectedEl(el);
+    for (const id of ids) {
+      await runtime?.select?.(id);
+      this.flagSelectedEl(this.getTargetElement(id));
     }
   }
   setZoom(zoom = DEFAULT_ZOOM) {
@@ -2376,14 +2415,8 @@ class StageRender extends EventEmitter$1 {
     }
     return this.getDocument()?.elementsFromPoint(x / this.zoom, y / this.zoom);
   }
-  getTargetElement(idOrEl) {
-    if (typeof idOrEl === "string" || typeof idOrEl === "number") {
-      const el = this.getDocument()?.getElementById(`${idOrEl}`);
-      if (!el)
-        throw new Error(`不存在ID为${idOrEl}的元素`);
-      return el;
-    }
-    return idOrEl;
+  getTargetElement(id) {
+    return this.getDocument()?.getElementById(`${id}`) || null;
   }
   /**
    * 销毁实例
@@ -2395,6 +2428,12 @@ class StageRender extends EventEmitter$1 {
     this.iframe = void 0;
     this.removeAllListeners();
   }
+  on(eventName, listener) {
+    return super.on(eventName, listener);
+  }
+  emit(eventName, ...args) {
+    return super.emit(eventName, ...args);
+  }
   createIframe() {
     this.iframe = globalThis.document.createElement("iframe");
     this.iframe.src = this.runtimeUrl && isSameDomain(this.runtimeUrl) ? this.runtimeUrl : "";
@@ -2425,7 +2464,7 @@ class StageRender extends EventEmitter$1 {
     const doc = this.getDocument();
     if (doc) {
       removeSelectedClassName(doc);
-      addSelectedClassName(el, doc);
+      el && addSelectedClassName(el, doc);
     }
   }
   iframeLoadHandler = async () => {
@@ -2488,33 +2527,33 @@ class StageCore extends EventEmitter$1 {
   }
   /**
    * 单选选中元素
-   * @param idOrEl 选中的id或者元素
+   * @param id 选中的id
    */
-  async select(idOrEl, event) {
-    const el = this.renderer.getTargetElement(idOrEl);
+  async select(id, event) {
+    const el = this.renderer.getTargetElement(id);
     if (el === this.actionManager.getSelectedEl())
       return;
-    await this.renderer.select([el]);
-    this.mask.setLayout(el);
+    await this.renderer.select([id]);
+    el && this.mask.setLayout(el);
     this.actionManager.select(el, event);
-    if (this.autoScrollIntoView || el.dataset.autoScrollIntoView) {
+    if (el && (this.autoScrollIntoView || el.dataset.autoScrollIntoView)) {
       this.mask.observerIntersection(el);
     }
   }
   /**
    * 多选选中多个元素
-   * @param idOrElList 选中元素的id或元素列表
+   * @param ids 选中元素的id列表
    */
-  async multiSelect(idOrElList) {
-    const els = idOrElList.map((idOrEl) => this.renderer.getTargetElement(idOrEl));
+  async multiSelect(ids) {
+    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(els);
-    this.mask.setLayout(lastEl);
-    this.actionManager.multiSelect(idOrElList);
-    if ((this.autoScrollIntoView || lastEl.dataset.autoScrollIntoView) && !isReduceSelect) {
+    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);
     }
   }
@@ -2522,8 +2561,8 @@ class StageCore extends EventEmitter$1 {
    * 高亮选中元素
    * @param el 要高亮的元素
    */
-  highlight(idOrEl) {
-    this.actionManager.highlight(idOrEl);
+  highlight(id) {
+    this.actionManager.highlight(id);
   }
   clearHighlight() {
     this.actionManager.clearHighlight();
@@ -2619,6 +2658,12 @@ class StageCore extends EventEmitter$1 {
     this.removeAllListeners();
     this.container = void 0;
   }
+  on(eventName, listener) {
+    return super.on(eventName, listener);
+  }
+  emit(eventName, ...args) {
+    return super.emit(eventName, ...args);
+  }
   /**
    * 监听页面大小变化
    */
@@ -2648,7 +2693,7 @@ class StageCore extends EventEmitter$1 {
       updateDragEl: config.updateDragEl,
       getRootContainer: () => this.container,
       getRenderDocument: () => this.renderer.getDocument(),
-      getTargetElement: (idOrEl) => this.renderer.getTargetElement(idOrEl),
+      getTargetElement: (id) => this.renderer.getTargetElement(id),
       getElementsFromPoint: (point) => this.renderer.getElementsFromPoint(point)
     };
     return actionManagerConfig;
@@ -2683,12 +2728,12 @@ class StageCore extends EventEmitter$1 {
    * 初始化ActionManager类本身抛出来的事件监听
    */
   initActionManagerEvent() {
-    this.actionManager.on("before-select", (idOrEl, event) => {
-      this.select(idOrEl, event);
+    this.actionManager.on("before-select", (el, event) => {
+      this.select(el.id, event);
     }).on("select", (selectedEl, event) => {
       this.emit("select", selectedEl, event);
-    }).on("before-multi-select", (idOrElList) => {
-      this.multiSelect(idOrElList);
+    }).on("before-multi-select", (els) => {
+      this.multiSelect(els.map((el) => el.id));
     }).on("multi-select", (selectedElList, event) => {
       this.emit("multi-select", selectedElList, event);
     }).on("dblclick", (event) => {
@@ -2713,9 +2758,12 @@ class StageCore extends EventEmitter$1 {
    * 初始化MultiDragResize类通过ActionManager抛出来的事件监听
    */
   initMulDrEvent() {
-    this.actionManager.on("change-to-select", (el, e) => {
-      this.select(el);
-      setTimeout(() => this.emit("select", el, e));
+    this.actionManager.on("change-to-select", (id, e) => {
+      this.select(id);
+      setTimeout(() => {
+        const el = this.renderer.getTargetElement(id);
+        el && this.emit("select", el, e);
+      });
     }).on("multi-update", (data) => {
       this.emit("update", data);
     });
@@ -2724,7 +2772,7 @@ class StageCore extends EventEmitter$1 {
    * 初始化Highlight类通过ActionManager抛出来的事件监听
    */
   initHighlightEvent() {
-    this.actionManager.on("highlight", async (highlightEl) => {
+    this.actionManager.on("highlight", (highlightEl) => {
       this.emit("highlight", highlightEl);
     });
   }