@tmagic/stage 1.4.6 → 1.4.8

package/dist/tmagic-stage.umd.cjs

@@ -136,27 +136,21 @@
     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;
   };
@@ -164,8 +158,7 @@
     const oldEl = doc.querySelector(`.${SELECTED_CLASS}`);
     if (oldEl) {
       utils.removeClassName(oldEl, SELECTED_CLASS);
-      if (oldEl.parentNode)
-        utils.removeClassName(oldEl.parentNode, `${SELECTED_CLASS}-parent`);
+      if (oldEl.parentNode) utils.removeClassName(oldEl.parentNode, `${SELECTED_CLASS}-parent`);
       doc.querySelectorAll(`.${SELECTED_CLASS}-parents`).forEach((item) => {
         utils.removeClassName(item, `${SELECTED_CLASS}-parents`);
       });
@@ -213,13 +206,10 @@
     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;
     }
@@ -494,13 +484,11 @@
         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);
@@ -523,13 +511,11 @@
         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);
@@ -567,14 +553,12 @@
      * 多选状态设置多个节点的快照
      */
     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,
@@ -876,16 +860,13 @@
       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`;
@@ -902,8 +883,7 @@
      */
     isInElementList(ele, eleList) {
       for (const eleItem of eleList) {
-        if (ele === eleItem)
-          return true;
+        if (ele === eleItem) return true;
       }
       return false;
     }
@@ -962,10 +942,8 @@
      * 初始化选中框并渲染出来
      */
     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;
@@ -973,8 +951,7 @@
       this.moveable.updateRect();
     }
     clearSelectStatus() {
-      if (!this.moveable)
-        return;
+      if (!this.moveable) return;
       this.dragResizeHelper.destroyShadowEl();
       this.moveable.target = null;
       this.moveable.updateRect();
@@ -1023,16 +1000,13 @@
       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", () => {
@@ -1041,18 +1015,15 @@
       });
     }
     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;
@@ -1084,14 +1055,12 @@
       });
     }
     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) => {
@@ -1113,14 +1082,12 @@
       });
     }
     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) => {
@@ -1142,8 +1109,7 @@
       });
     }
     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;
@@ -1161,11 +1127,9 @@
       }
     }
     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: [
@@ -1201,8 +1165,7 @@
      * @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) {
@@ -1221,8 +1184,7 @@
      * 清空高亮
      */
     clearHighlight() {
-      if (!this.moveable || !this.target)
-        return;
+      if (!this.moveable || !this.target) return;
       this.moveable.zoom = 0;
       this.moveable.updateRect();
       this.target = void 0;
@@ -1341,10 +1303,8 @@
       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, {
@@ -1359,8 +1319,7 @@
      * 清除多选状态
      */
     clearSelectStatus() {
-      if (!this.moveableForMulti)
-        return;
+      if (!this.moveableForMulti) return;
       this.dragResizeHelper.clearMultiSelectStatus();
       this.moveableForMulti.target = null;
       this.moveableForMulti.updateTarget();
@@ -1384,11 +1343,9 @@
      * @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 {
@@ -1539,8 +1496,7 @@
       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;
         }
       }
@@ -1555,8 +1511,7 @@
      */
     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);
       }
@@ -1610,8 +1565,7 @@
         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);
@@ -1639,8 +1593,7 @@
      */
     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)) {
@@ -1706,8 +1659,7 @@
         this.emit("select-parent");
       }).on(AbleActionEventType.REMOVE, () => {
         const drTarget = this.dr.getTarget();
-        if (!drTarget)
-          return;
+        if (!drTarget) return;
         const data = {
           data: [{ el: drTarget }]
         };
@@ -1734,8 +1686,7 @@
       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;
@@ -1766,8 +1717,7 @@
      */
     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);
@@ -1845,8 +1795,7 @@
       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);
@@ -1855,17 +1804,14 @@
         }
       } else {
         const el = await this.getElementFromPoint(event);
-        if (!el)
-          return;
+        if (!el) return;
         this.emit("before-select", el, event);
       }
       utils.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;
@@ -2107,8 +2053,7 @@
      * @param page 页面Dom节点
      */
     observe(page) {
-      if (!page)
-        return;
+      if (!page) return;
       this.page = page;
       this.initObserverIntersection();
       this.initObserverWrapper();
@@ -2136,19 +2081,16 @@
      * @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();
@@ -2272,23 +2214,16 @@
      * 由于滚动容器变化等因素，会导致当前滚动的距离不正确
      */
     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;
       }
@@ -2374,8 +2309,7 @@
       }
     }
     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);
@@ -2460,8 +2394,7 @@
       if (!this.contentWindow?.magic) {
         this.postTmagicRuntimeReady();
       }
-      if (!this.contentWindow)
-        return;
+      if (!this.contentWindow) return;
       if (this.customizedRender) {
         const el = await this.customizedRender();
         if (el) {
@@ -2520,8 +2453,7 @@
      */
     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);
@@ -2535,8 +2467,7 @@
      */
     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);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.6",
+  "version": "1.4.8",
   "name": "@tmagic/stage",
   "type": "module",
   "sideEffects": [
@@ -16,6 +16,10 @@
     },
     "./*": "./*"
   },
+  "files": [
+    "dist",
+    "types"
+  ],
   "license": "Apache-2.0",
   "engines": {
     "node": ">=18"
@@ -38,13 +42,13 @@
     "@types/node": "^18.19.0",
     "rimraf": "^3.0.2",
     "sass": "^1.77.0",
-    "vite": "^5.2.11"
+    "vite": "^5.3.1"
   },
   "peerDependencies": {
     "typescript": "*",
-    "@tmagic/core": "1.4.6",
-    "@tmagic/schema": "1.4.6",
-    "@tmagic/utils": "1.4.6"
+    "@tmagic/core": "1.4.8",
+    "@tmagic/utils": "1.4.8",
+    "@tmagic/schema": "1.4.8"
   },
   "peerDependenciesMeta": {
     "typescript": {