@tmagic/stage 1.3.16 → 1.4.0-beta.2

package/dist/tmagic-stage.umd.cjs

@@ -41,6 +41,27 @@
     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;
@@ -299,7 +320,7 @@
     }
     updateEl(target, src) {
       const el = src || globalThis.document.createElement("div");
-      el.id = `${this.idPrefix}${target.id}`;
+      el.id = `${this.idPrefix}_${target.id}`;
       el.style.cssText = getTargetElStyle(target, this.zIndex);
       if (typeof this.updateDragEl === "function") {
         this.updateDragEl(el, target, this.container);
@@ -475,6 +496,7 @@
      */
     onResizeGroup(e) {
       const { events } = e;
+      this.moveableHelper.onResizeGroup(e);
       events.forEach((ev) => {
         const { width, height, beforeTranslate } = ev.drag;
         const frameSnapShot = this.framesSnapShot.find(
@@ -496,23 +518,23 @@
         targeEl.style.width = `${width}px`;
         targeEl.style.height = `${height}px`;
       });
-      this.moveableHelper.onResizeGroup(e);
     }
     onDragGroupStart(e) {
-      const { events } = e;
       this.moveableHelper.onDragGroupStart(e);
+      const { events } = e;
       this.setFramesSnapShot(events);
     }
     onDragGroup(e) {
+      this.moveableHelper.onDragGroup(e);
       const { events } = e;
       events.forEach((ev) => {
         const frameSnapShot = this.framesSnapShot.find(
-          (frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
+          (frameItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(frameItem.id)
         );
         if (!frameSnapShot)
           return;
         const targeEl = this.targetList.find(
-          (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
+          (targetItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(targetItem.id)
         );
         if (!targeEl)
           return;
@@ -523,7 +545,6 @@
           targeEl.style.top = `${frameSnapShot.top + ev.beforeTranslate[1] - marginTop}px`;
         }
       });
-      this.moveableHelper.onDragGroup(e);
     }
     getUpdatedElRect(el, parentEl, doc) {
       const offset = this.mode === Mode.SORTABLE ? { left: 0, top: 0 } : { left: el.offsetLeft, top: el.offsetTop };
@@ -558,7 +579,7 @@
         return;
       events.forEach((ev) => {
         const matchEventTarget = this.targetList.find(
-          (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
+          (targetItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(targetItem.id)
         );
         if (!matchEventTarget)
           return;
@@ -619,7 +640,7 @@
         left: 0px;
         top: 0px;
         will-change: transform;
-        transform-origin: 0px 0px;
+        transform-origin: 60px 28px;
         display: flex;
       }
       ${ableCss}
@@ -896,31 +917,9 @@
     }
   }
 
-  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;
     /** 拖动状态 */
@@ -953,6 +952,11 @@
      * @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 {
@@ -995,6 +999,12 @@
       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";
@@ -1095,16 +1105,19 @@
       }).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() {
@@ -1121,16 +1134,19 @@
       }).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() {
@@ -1302,6 +1318,10 @@
         this.dragResizeHelper.onDragGroup(e);
         this.dragStatus = StageDragStatus.ING;
       }).on("dragGroupEnd", () => {
+        if (timeout) {
+          globalThis.clearTimeout(timeout);
+          timeout = void 0;
+        }
         const parentEl = this.markContainerEnd();
         this.update(false, parentEl);
         this.dragStatus = StageDragStatus.END;
@@ -1361,6 +1381,12 @@
       this.moveableForMulti?.destroy();
       this.dragResizeHelper.destroy();
     }
+    on(eventName, listener) {
+      return super.on(eventName, listener);
+    }
+    emit(eventName, ...args) {
+      return super.emit(eventName, ...args);
+    }
     /**
      * 拖拽完成后将更新的位置信息暴露给上层业务方，业务方可以接收事件进行保存
      * @param isResize 是否进行大小缩放
@@ -1391,7 +1417,7 @@
     /** 单选、多选、高亮的容器（蒙层的content） */
     container;
     /** 当前选中的节点 */
-    selectedEl;
+    selectedEl = null;
     /** 多选选中的节点组 */
     selectedElList = [];
     /** 当前高亮的节点 */
@@ -1422,7 +1448,7 @@
         return;
       }
       this.emit("mousemove", event);
-      this.highlight(el);
+      this.highlight(el.id);
     }, throttleTime);
     constructor(config) {
       super();
@@ -1526,6 +1552,7 @@
           return el;
         }
       }
+      return null;
     }
     /**
      * 判断一个元素能否在当前场景被选中
@@ -1562,8 +1589,14 @@
       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);
     }
@@ -1573,10 +1606,10 @@
     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;
@@ -1652,6 +1685,12 @@
       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,
@@ -1671,9 +1710,9 @@
         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;
@@ -1702,11 +1741,10 @@
       });
       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;
     }
@@ -1740,11 +1778,13 @@
         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);
       }
@@ -2131,6 +2171,12 @@
       this.wrapperResizeObserver?.disconnect();
       super.destroy();
     }
+    on(eventName, listener) {
+      return super.on(eventName, listener);
+    }
+    emit(eventName, ...args) {
+      return super.emit(eventName, ...args);
+    }
     /**
      * 监听选中元素是否在画布可视区域内，如果目标元素不在可视区域内，通过滚动使该元素出现在可视区域
      */
@@ -2306,14 +2352,11 @@
       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) {
@@ -2369,14 +2412,8 @@
       }
       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;
     }
     /**
      * 销毁实例
@@ -2388,6 +2425,12 @@
       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 && utils.isSameDomain(this.runtimeUrl) ? this.runtimeUrl : "";
@@ -2418,7 +2461,7 @@
       const doc = this.getDocument();
       if (doc) {
         removeSelectedClassName(doc);
-        addSelectedClassName(el, doc);
+        el && addSelectedClassName(el, doc);
       }
     }
     iframeLoadHandler = async () => {
@@ -2481,33 +2524,33 @@
     }
     /**
      * 单选选中元素
-     * @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);
       }
     }
@@ -2515,8 +2558,8 @@
      * 高亮选中元素
      * @param el 要高亮的元素
      */
-    highlight(idOrEl) {
-      this.actionManager.highlight(idOrEl);
+    highlight(id) {
+      this.actionManager.highlight(id);
     }
     clearHighlight() {
       this.actionManager.clearHighlight();
@@ -2612,6 +2655,12 @@
       this.removeAllListeners();
       this.container = void 0;
     }
+    on(eventName, listener) {
+      return super.on(eventName, listener);
+    }
+    emit(eventName, ...args) {
+      return super.emit(eventName, ...args);
+    }
     /**
      * 监听页面大小变化
      */
@@ -2641,7 +2690,7 @@
         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;
@@ -2676,12 +2725,12 @@
      * 初始化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) => {
@@ -2706,9 +2755,12 @@
      * 初始化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);
       });
@@ -2717,7 +2769,7 @@
      * 初始化Highlight类通过ActionManager抛出来的事件监听
      */
     initHighlightEvent() {
-      this.actionManager.on("highlight", async (highlightEl) => {
+      this.actionManager.on("highlight", (highlightEl) => {
         this.emit("highlight", highlightEl);
       });
     }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.16",
+  "version": "1.4.0-beta.2",
   "name": "@tmagic/stage",
   "type": "module",
   "sideEffects": [
@@ -26,9 +26,9 @@
   },
   "dependencies": {
     "@scena/guides": "^0.29.2",
-    "@tmagic/core": "1.3.16",
-    "@tmagic/schema": "1.3.16",
-    "@tmagic/utils": "1.3.16",
+    "@tmagic/core": "1.4.0-beta.2",
+    "@tmagic/schema": "1.4.0-beta.2",
+    "@tmagic/utils": "1.4.0-beta.2",
     "events": "^3.3.0",
     "keycon": "^1.4.0",
     "lodash-es": "^4.17.21",
@@ -41,8 +41,8 @@
     "@types/node": "^18.19.0",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
-    "typescript": "^5.0.4",
-    "vite": "^5.0.7"
+    "typescript": "^5.4.2",
+    "vite": "^5.1.6"
   },
   "scripts": {
     "build": "npm run build:type && vite build",