@tmagic/stage 1.4.6 → 1.4.8

package/dist/tmagic-stage.js

@@ -139,27 +139,21 @@ const isFixedParent = (el) => {
   return fixed;
 };
 const getMode = (el) => {
-  if (isFixedParent(el))
-    return Mode.FIXED;
+  if (isFixedParent(el)) return Mode.FIXED;
   const style = getComputedStyle(el);
-  if (isStatic(style) || isRelative(style))
-    return Mode.SORTABLE;
+  if (isStatic(style) || isRelative(style)) return Mode.SORTABLE;
   return Mode.ABSOLUTE;
 };
 const getScrollParent = (element, includeHidden = false) => {
   let style = getComputedStyle(element);
   const overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
-  if (isFixed(style))
-    return null;
+  if (isFixed(style)) return null;
   for (let parent = element; parent.parentElement; ) {
     parent = parent.parentElement;
-    if (parent.tagName === "HTML")
-      return parent;
+    if (parent.tagName === "HTML") return parent;
     style = getComputedStyle(parent);
-    if (isAbsolute(style) && isStatic(style))
-      continue;
-    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX))
-      return parent;
+    if (isAbsolute(style) && isStatic(style)) continue;
+    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) return parent;
   }
   return null;
 };
@@ -167,8 +161,7 @@ const removeSelectedClassName = (doc) => {
   const oldEl = doc.querySelector(`.${SELECTED_CLASS}`);
   if (oldEl) {
     removeClassName(oldEl, SELECTED_CLASS);
-    if (oldEl.parentNode)
-      removeClassName(oldEl.parentNode, `${SELECTED_CLASS}-parent`);
+    if (oldEl.parentNode) removeClassName(oldEl.parentNode, `${SELECTED_CLASS}-parent`);
     doc.querySelectorAll(`.${SELECTED_CLASS}-parents`).forEach((item) => {
       removeClassName(item, `${SELECTED_CLASS}-parents`);
     });
@@ -216,13 +209,10 @@ const up = (deltaTop, target) => {
   let swapIndex = upEls.length - 1;
   for (let i = upEls.length - 1; i >= 0; i--) {
     const ele = upEls[i];
-    if (!ele)
-      continue;
-    if (ele.style.position === "fixed")
-      continue;
+    if (!ele) continue;
+    if (ele.style.position === "fixed") continue;
     addUpH += ele.clientHeight / 2;
-    if (-deltaTop <= addUpH)
-      break;
+    if (-deltaTop <= addUpH) break;
     addUpH += ele.clientHeight / 2;
     swapIndex = i;
   }
@@ -497,13 +487,11 @@ class DragResizeHelper {
       const frameSnapShot = this.framesSnapShot.find(
         (frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
       );
-      if (!frameSnapShot)
-        return;
+      if (!frameSnapShot) return;
       const targeEl = this.targetList.find(
         (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
       );
-      if (!targeEl)
-        return;
+      if (!targeEl) return;
       const isParentIncluded = this.targetList.find((targetItem) => targetItem.id === targeEl.parentElement?.id);
       if (!isParentIncluded) {
         const { marginLeft, marginTop } = getMarginValue(targeEl);
@@ -526,13 +514,11 @@ class DragResizeHelper {
       const frameSnapShot = this.framesSnapShot.find(
         (frameItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(frameItem.id)
       );
-      if (!frameSnapShot)
-        return;
+      if (!frameSnapShot) return;
       const targeEl = this.targetList.find(
         (targetItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(targetItem.id)
       );
-      if (!targeEl)
-        return;
+      if (!targeEl) return;
       const isParentIncluded = this.targetList.find((targetItem) => targetItem.id === targeEl.parentElement?.id);
       if (!isParentIncluded) {
         const { marginLeft, marginTop } = getMarginValue(targeEl);
@@ -570,14 +556,12 @@ class DragResizeHelper {
    * 多选状态设置多个节点的快照
    */
   setFramesSnapShot(events) {
-    if (this.framesSnapShot.length > 0)
-      return;
+    if (this.framesSnapShot.length > 0) return;
     events.forEach((ev) => {
       const matchEventTarget = this.targetList.find(
         (targetItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(targetItem.id)
       );
-      if (!matchEventTarget)
-        return;
+      if (!matchEventTarget) return;
       this.framesSnapShot.push({
         left: matchEventTarget.offsetLeft,
         top: matchEventTarget.offsetTop,
@@ -879,16 +863,13 @@ class MoveableOptionsManager extends EventEmitter {
     const frame = globalThis.document.createDocumentFragment();
     for (const element of allElList) {
       let node = element.element || element;
-      if (!node || typeof node === "string")
-        continue;
+      if (!node || typeof node === "string") continue;
       if (typeof node === "function") {
         node = node();
       }
-      if (this.isInElementList(node, selectedElList))
-        continue;
+      if (this.isInElementList(node, selectedElList)) continue;
       const { width, height } = node.getBoundingClientRect();
-      if (!width || !height)
-        continue;
+      if (!width || !height) continue;
       const { left, top } = getOffset(node);
       const elementGuideline = globalThis.document.createElement("div");
       elementGuideline.style.cssText = `position: absolute;width: ${width}px;height: ${height}px;top: ${top}px;left: ${left}px`;
@@ -905,8 +886,7 @@ class MoveableOptionsManager extends EventEmitter {
    */
   isInElementList(ele, eleList) {
     for (const eleItem of eleList) {
-      if (ele === eleItem)
-        return true;
+      if (ele === eleItem) return true;
     }
     return false;
   }
@@ -965,10 +945,8 @@ class StageDragResize extends MoveableOptionsManager {
    * 初始化选中框并渲染出来
    */
   updateMoveable(el = this.target) {
-    if (!this.moveable)
-      return;
-    if (!el)
-      throw new Error("未选中任何节点");
+    if (!this.moveable) return;
+    if (!el) throw new Error("未选中任何节点");
     const options = this.init(el);
     Object.entries(options).forEach(([key, value]) => {
       this.moveable[key] = value;
@@ -976,8 +954,7 @@ class StageDragResize extends MoveableOptionsManager {
     this.moveable.updateRect();
   }
   clearSelectStatus() {
-    if (!this.moveable)
-      return;
+    if (!this.moveable) return;
     this.dragResizeHelper.destroyShadowEl();
     this.moveable.target = null;
     this.moveable.updateRect();
@@ -1026,16 +1003,13 @@ class StageDragResize extends MoveableOptionsManager {
     this.bindScaleEvent();
   }
   bindResizeEvent() {
-    if (!this.moveable)
-      throw new Error("moveable 未初始化");
+    if (!this.moveable) throw new Error("moveable 未初始化");
     this.moveable.on("resizeStart", (e) => {
-      if (!this.target)
-        return;
+      if (!this.target) return;
       this.dragStatus = StageDragStatus.START;
       this.dragResizeHelper.onResizeStart(e);
     }).on("resize", (e) => {
-      if (!this.moveable || !this.target || !this.dragResizeHelper.getShadowEl())
-        return;
+      if (!this.moveable || !this.target || !this.dragResizeHelper.getShadowEl()) return;
       this.dragStatus = StageDragStatus.ING;
       this.dragResizeHelper.onResize(e);
     }).on("resizeEnd", () => {
@@ -1044,18 +1018,15 @@ class StageDragResize extends MoveableOptionsManager {
     });
   }
   bindDragEvent() {
-    if (!this.moveable)
-      throw new Error("moveable 未初始化");
+    if (!this.moveable) throw new Error("moveable 未初始化");
     let timeout;
     this.moveable.on("dragStart", (e) => {
-      if (!this.target)
-        throw new Error("未选中组件");
+      if (!this.target) throw new Error("未选中组件");
       this.dragStatus = StageDragStatus.START;
       this.dragResizeHelper.onDragStart(e);
       this.emit("drag-start", e);
     }).on("drag", (e) => {
-      if (!this.target || !this.dragResizeHelper.getShadowEl())
-        return;
+      if (!this.target || !this.dragResizeHelper.getShadowEl()) return;
       if (timeout) {
         globalThis.clearTimeout(timeout);
         timeout = void 0;
@@ -1087,14 +1058,12 @@ class StageDragResize extends MoveableOptionsManager {
     });
   }
   bindRotateEvent() {
-    if (!this.moveable)
-      throw new Error("moveable 未初始化");
+    if (!this.moveable) throw new Error("moveable 未初始化");
     this.moveable.on("rotateStart", (e) => {
       this.dragStatus = StageDragStatus.START;
       this.dragResizeHelper.onRotateStart(e);
     }).on("rotate", (e) => {
-      if (!this.target || !this.dragResizeHelper.getShadowEl())
-        return;
+      if (!this.target || !this.dragResizeHelper.getShadowEl()) return;
       this.dragStatus = StageDragStatus.ING;
       this.dragResizeHelper.onRotate(e);
     }).on("rotateEnd", (e) => {
@@ -1116,14 +1085,12 @@ class StageDragResize extends MoveableOptionsManager {
     });
   }
   bindScaleEvent() {
-    if (!this.moveable)
-      throw new Error("moveable 未初始化");
+    if (!this.moveable) throw new Error("moveable 未初始化");
     this.moveable.on("scaleStart", (e) => {
       this.dragStatus = StageDragStatus.START;
       this.dragResizeHelper.onScaleStart(e);
     }).on("scale", (e) => {
-      if (!this.target || !this.dragResizeHelper.getShadowEl())
-        return;
+      if (!this.target || !this.dragResizeHelper.getShadowEl()) return;
       this.dragStatus = StageDragStatus.ING;
       this.dragResizeHelper.onScale(e);
     }).on("scaleEnd", (e) => {
@@ -1145,8 +1112,7 @@ class StageDragResize extends MoveableOptionsManager {
     });
   }
   sort() {
-    if (!this.target || !this.dragResizeHelper.getGhostEl())
-      throw new Error("未知错误");
+    if (!this.target || !this.dragResizeHelper.getGhostEl()) throw new Error("未知错误");
     const { top } = this.dragResizeHelper.getGhostEl().getBoundingClientRect();
     const { top: oriTop } = this.target.getBoundingClientRect();
     const deltaTop = top - oriTop;
@@ -1164,11 +1130,9 @@ class StageDragResize extends MoveableOptionsManager {
     }
   }
   update(isResize = false, parentEl = null) {
-    if (!this.target)
-      return;
+    if (!this.target) return;
     const doc = this.getRenderDocument();
-    if (!doc)
-      return;
+    if (!doc) return;
     const rect = this.dragResizeHelper.getUpdatedElRect(this.target, parentEl, doc);
     this.emit("update", {
       data: [
@@ -1204,8 +1168,7 @@ class StageHighlight extends EventEmitter$1 {
    * @param el 选中组件的Dom节点元素
    */
   highlight(el) {
-    if (!el || el === this.target)
-      return;
+    if (!el || el === this.target) return;
     this.target = el;
     this.targetShadow?.update(el);
     if (this.moveable) {
@@ -1224,8 +1187,7 @@ class StageHighlight extends EventEmitter$1 {
    * 清空高亮
    */
   clearHighlight() {
-    if (!this.moveable || !this.target)
-      return;
+    if (!this.moveable || !this.target) return;
     this.moveable.zoom = 0;
     this.moveable.updateRect();
     this.target = void 0;
@@ -1344,10 +1306,8 @@ class StageMultiDragResize extends MoveableOptionsManager {
     return true;
   }
   updateMoveable(eleList = this.targetList) {
-    if (!this.moveableForMulti)
-      return;
-    if (!eleList)
-      throw new Error("未选中任何节点");
+    if (!this.moveableForMulti) return;
+    if (!eleList) throw new Error("未选中任何节点");
     this.targetList = eleList;
     this.dragResizeHelper.setTargetList(eleList);
     const options = this.getOptions(true, {
@@ -1362,8 +1322,7 @@ class StageMultiDragResize extends MoveableOptionsManager {
    * 清除多选状态
    */
   clearSelectStatus() {
-    if (!this.moveableForMulti)
-      return;
+    if (!this.moveableForMulti) return;
     this.dragResizeHelper.clearMultiSelectStatus();
     this.moveableForMulti.target = null;
     this.moveableForMulti.updateTarget();
@@ -1387,11 +1346,9 @@ class StageMultiDragResize extends MoveableOptionsManager {
    * @param isResize 是否进行大小缩放
    */
   update(isResize = false, parentEl = null) {
-    if (this.targetList.length === 0)
-      return;
+    if (this.targetList.length === 0) return;
     const doc = this.getRenderDocument();
-    if (!doc)
-      return;
+    if (!doc) return;
     const data = this.targetList.map((targetItem) => {
       const rect = this.dragResizeHelper.getUpdatedElRect(targetItem, parentEl, doc);
       return {
@@ -1542,8 +1499,7 @@ class ActionManager extends EventEmitter {
     const stop = () => stopped = true;
     for (const el of els) {
       if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.isElCanSelect(el, event, stop)) {
-        if (stopped)
-          break;
+        if (stopped) break;
         return el;
       }
     }
@@ -1558,8 +1514,7 @@ class ActionManager extends EventEmitter {
    */
   async isElCanSelect(el, event, stop) {
     const canSelectByProp = await this.canSelect(el, event, stop);
-    if (!canSelectByProp)
-      return false;
+    if (!canSelectByProp) return false;
     if (this.isMultiSelectStatus) {
       return this.canMultiSelect(el, stop);
     }
@@ -1613,8 +1568,7 @@ class ActionManager extends EventEmitter {
       this.clearHighlight();
       return;
     }
-    if (el === this.highlightedEl || !el)
-      return;
+    if (el === this.highlightedEl || !el) return;
     this.highlightLayer.highlight(el);
     this.highlightedEl = el;
     this.emit("highlight", el);
@@ -1642,8 +1596,7 @@ class ActionManager extends EventEmitter {
    */
   async addContainerHighlightClassName(event, excludeElList) {
     const doc = this.getRenderDocument();
-    if (!doc)
-      return;
+    if (!doc) return;
     const els = this.getElementsFromPoint(event);
     for (const el of els) {
       if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.isContainer?.(el) && !excludeElList.includes(el)) {
@@ -1709,8 +1662,7 @@ class ActionManager extends EventEmitter {
       this.emit("select-parent");
     }).on(AbleActionEventType.REMOVE, () => {
       const drTarget = this.dr.getTarget();
-      if (!drTarget)
-        return;
+      if (!drTarget) return;
       const data = {
         data: [{ el: drTarget }]
       };
@@ -1737,8 +1689,7 @@ class ActionManager extends EventEmitter {
     multiDr?.on("update", (data) => {
       this.emit("multi-update", data);
     }).on("change-to-select", (id, e) => {
-      if (this.isMultiSelectStatus)
-        return;
+      if (this.isMultiSelectStatus) return;
       this.emit("change-to-select", id, e);
     });
     return multiDr;
@@ -1769,8 +1720,7 @@ class ActionManager extends EventEmitter {
    */
   async beforeMultiSelect(event) {
     const el = await this.getElementFromPoint(event);
-    if (!el)
-      return;
+    if (!el) return;
     if (this.selectedEl && !this.selectedEl.className.includes(PAGE_CLASS)) {
       this.selectedElList.push(this.selectedEl);
       this.setSelectedEl(null);
@@ -1848,8 +1798,7 @@ class ActionManager extends EventEmitter {
     this.clearHighlight();
     event.stopImmediatePropagation();
     event.stopPropagation();
-    if (this.isStopTriggerSelect(event))
-      return;
+    if (this.isStopTriggerSelect(event)) return;
     this.container.removeEventListener("mousemove", this.mouseMoveHandler);
     if (this.isMultiSelectStatus) {
       await this.beforeMultiSelect(event);
@@ -1858,17 +1807,14 @@ class ActionManager extends EventEmitter {
       }
     } else {
       const el = await this.getElementFromPoint(event);
-      if (!el)
-        return;
+      if (!el) return;
       this.emit("before-select", el, event);
     }
     getDocument().addEventListener("mouseup", this.mouseUpHandler);
   };
   isStopTriggerSelect(event) {
-    if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT)
-      return true;
-    if (!event.target)
-      return true;
+    if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT) return true;
+    if (!event.target) return true;
     const targetClassList = event.target.classList;
     if (!this.isMultiSelectStatus && targetClassList.contains("moveable-area")) {
       return true;
@@ -2110,8 +2056,7 @@ class StageMask extends Rule {
    * @param page 页面Dom节点
    */
   observe(page) {
-    if (!page)
-      return;
+    if (!page) return;
     this.page = page;
     this.initObserverIntersection();
     this.initObserverWrapper();
@@ -2139,19 +2084,16 @@ class StageMask extends Rule {
    * @param el 将蒙层挂载到该Dom节点上
    */
   mount(el) {
-    if (!this.content)
-      throw new Error("content 不存在");
+    if (!this.content) throw new Error("content 不存在");
     el.appendChild(this.wrapper);
   }
   setLayout(el) {
     this.setMode(isFixedParent(el) ? Mode.FIXED : Mode.ABSOLUTE);
   }
   scrollIntoView(el) {
-    if (!this.page || el.getBoundingClientRect().left >= this.page.scrollWidth)
-      return;
+    if (!this.page || el.getBoundingClientRect().left >= this.page.scrollWidth) return;
     el.scrollIntoView();
-    if (!this.pageScrollParent)
-      return;
+    if (!this.pageScrollParent) return;
     this.scrollLeft = this.pageScrollParent.scrollLeft;
     this.scrollTop = this.pageScrollParent.scrollTop;
     this.scroll();
@@ -2275,23 +2217,16 @@ class StageMask extends Rule {
    * 由于滚动容器变化等因素，会导致当前滚动的距离不正确
    */
   fixScrollValue() {
-    if (this.scrollTop < 0)
-      this.scrollTop = 0;
-    if (this.scrollLeft < 0)
-      this.scrollLeft = 0;
-    if (this.maxScrollTop < this.scrollTop)
-      this.scrollTop = this.maxScrollTop;
-    if (this.maxScrollLeft < this.scrollLeft)
-      this.scrollLeft = this.maxScrollLeft;
+    if (this.scrollTop < 0) this.scrollTop = 0;
+    if (this.scrollLeft < 0) this.scrollLeft = 0;
+    if (this.maxScrollTop < this.scrollTop) this.scrollTop = this.maxScrollTop;
+    if (this.maxScrollLeft < this.scrollLeft) this.scrollLeft = this.maxScrollLeft;
   }
   mouseWheelHandler = (event) => {
-    if (!this.page)
-      throw new Error("page 未初始化");
+    if (!this.page) throw new Error("page 未初始化");
     const { deltaY, deltaX } = event;
-    if (this.page.clientHeight < this.wrapperHeight && deltaY)
-      return;
-    if (this.page.clientWidth < this.wrapperWidth && deltaX)
-      return;
+    if (this.page.clientHeight < this.wrapperHeight && deltaY) return;
+    if (this.page.clientWidth < this.wrapperWidth && deltaX) return;
     if (this.maxScrollTop > 0) {
       this.scrollTop = this.scrollTop + deltaY;
     }
@@ -2377,8 +2312,7 @@ class StageRender extends EventEmitter$1 {
     }
   }
   getRuntime = () => {
-    if (this.runtime)
-      return Promise.resolve(this.runtime);
+    if (this.runtime) return Promise.resolve(this.runtime);
     return new Promise((resolve) => {
       const listener = (runtime) => {
         this.off("runtime-ready", listener);
@@ -2463,8 +2397,7 @@ class StageRender extends EventEmitter$1 {
     if (!this.contentWindow?.magic) {
       this.postTmagicRuntimeReady();
     }
-    if (!this.contentWindow)
-      return;
+    if (!this.contentWindow) return;
     if (this.customizedRender) {
       const el = await this.customizedRender();
       if (el) {
@@ -2523,8 +2456,7 @@ class StageCore extends EventEmitter$1 {
    */
   async select(id, event) {
     const el = this.renderer.getTargetElement(id);
-    if (el === this.actionManager.getSelectedEl())
-      return;
+    if (el === this.actionManager.getSelectedEl()) return;
     await this.renderer.select([id]);
     el && this.mask.setLayout(el);
     this.actionManager.select(el, event);
@@ -2538,8 +2470,7 @@ class StageCore extends EventEmitter$1 {
    */
   async multiSelect(ids) {
     const els = ids.map((id) => this.renderer.getTargetElement(id)).filter((el) => Boolean(el));
-    if (els.length === 0)
-      return;
+    if (els.length === 0) return;
     const lastEl = els[els.length - 1];
     const isReduceSelect = els.length < this.actionManager.getSelectedElList().length;
     await this.renderer.select(ids);