@tmagic/stage 1.3.16 → 1.4.0-beta.2

package/README.md

@@ -35,7 +35,7 @@ mask是一个盖在画布区域的一个蒙层，主要作用是隔离鼠标事
 ## ActionManager
 - 负责监听鼠标和键盘事件，基于这些事件，形成单选、多选、高亮行为。主要监听的是蒙层上的鼠标事件，通过StageRender.getElementsFromPoint计算获得鼠标下方的组件，实现事件监听和实际组件的解构。
 - 向上负责跟StageCore双向通信，提供接口供core调用，并向core抛出事件
-- 向下管理StageDragResize、StageMultiDragResize、StageHightlight这三个单选、多选、高亮类，让它们协同工作
+- 向下管理StageDragResize、StageMultiDragResize、StageHighlight这三个单选、多选、高亮类，让它们协同工作
 <br/><br/>
 ## StageDragResize
 负责单选相关逻辑，拖拽、改变大小、旋转等行为是依赖于开源库Moveable实现的，这些行为并不是直接作用于组件本身，而是在蒙层上创建了一个跟组件同等大小的边框div，实际拖拽的是边框div，在拖拽过程中同步更新组件。
@@ -47,7 +47,7 @@ mask是一个盖在画布区域的一个蒙层，主要作用是隔离鼠标事
 ## StageMultiDragResize
 功能跟StageDragResize类似，只是这个类是负责多选操作的，通过ctrl健选中多个组件，多选状态下不支持通过表单配置组件。
 <br/><br/>
-## StageHightlight
+## StageHighlight
 在鼠标经过画布中的组件、或者鼠标经过组件目录树中的组件时，会触发组件高亮，高亮也是通过moveable实现的，这个类主要负责初始化moveable并管理高亮状态。
 <br/><br/>
 ## MoveableOptionsManager

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;
@@ -302,7 +323,7 @@ class TargetShadow {
   }
   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);
@@ -478,6 +499,7 @@ class DragResizeHelper {
    */
   onResizeGroup(e) {
     const { events } = e;
+    this.moveableHelper.onResizeGroup(e);
     events.forEach((ev) => {
       const { width, height, beforeTranslate } = ev.drag;
       const frameSnapShot = this.framesSnapShot.find(
@@ -499,23 +521,23 @@ class DragResizeHelper {
       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;
@@ -526,7 +548,6 @@ class DragResizeHelper {
         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 };
@@ -561,7 +582,7 @@ class DragResizeHelper {
       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;
@@ -622,7 +643,7 @@ const MoveableActionsAble = (handler) => ({
         left: 0px;
         top: 0px;
         will-change: transform;
-        transform-origin: 0px 0px;
+        transform-origin: 60px 28px;
         display: flex;
       }
       ${ableCss}
@@ -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() {
@@ -1305,6 +1321,10 @@ class StageMultiDragResize extends MoveableOptionsManager {
       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;
@@ -1364,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 是否进行大小缩放
@@ -1394,7 +1420,7 @@ class ActionManager extends EventEmitter {
   /** 单选、多选、高亮的容器（蒙层的content） */
   container;
   /** 当前选中的节点 */
-  selectedEl;
+  selectedEl = null;
   /** 多选选中的节点组 */
   selectedElList = [];
   /** 当前高亮的节点 */
@@ -1425,7 +1451,7 @@ class ActionManager extends EventEmitter {
       return;
     }
     this.emit("mousemove", event);
-    this.highlight(el);
+    this.highlight(el.id);
   }, throttleTime);
   constructor(config) {
     super();
@@ -1529,6 +1555,7 @@ class ActionManager extends EventEmitter {
         return el;
       }
     }
+    return null;
   }
   /**
    * 判断一个元素能否在当前场景被选中
@@ -1565,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);
   }
@@ -1576,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;
@@ -1655,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,
@@ -1674,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;
@@ -1705,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;
   }
@@ -1743,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);
     }
@@ -2134,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);
+  }
   /**
    * 监听选中元素是否在画布可视区域内，如果目标元素不在可视区域内，通过滚动使该元素出现在可视区域
    */
@@ -2309,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) {
@@ -2372,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;
   }
   /**
    * 销毁实例
@@ -2391,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 : "";
@@ -2421,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 () => {
@@ -2484,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);
     }
   }
@@ -2518,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();
@@ -2615,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);
+  }
   /**
    * 监听页面大小变化
    */
@@ -2644,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;
@@ -2679,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) => {
@@ -2709,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);
     });
@@ -2720,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);
     });
   }