@tmagic/stage 1.1.3 → 1.1.5

package/dist/tmagic-stage.mjs

@@ -22,6 +22,7 @@ var ZIndex = /* @__PURE__ */ ((ZIndex2) => {
   ZIndex2["SELECTED_EL"] = "666";
   ZIndex2["GHOST_EL"] = "700";
   ZIndex2["DRAG_EL"] = "9";
+  ZIndex2["HIGHLIGHT_EL"] = "8";
   return ZIndex2;
 })(ZIndex || {});
 var MouseButton = /* @__PURE__ */ ((MouseButton2) => {
@@ -171,7 +172,9 @@ const calcValueByFontsize = (doc, value) => {
 const down = (deltaTop, target) => {
   let swapIndex = 0;
   let addUpH = target.clientHeight;
-  const brothers = Array.from(target.parentNode?.children || []).filter((node) => !node.id.startsWith(GHOST_EL_ID_PREFIX));
+  const brothers = Array.from(target.parentNode?.children || []).filter(
+    (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX)
+  );
   const index = brothers.indexOf(target);
   const downEls = brothers.slice(index + 1);
   for (let i = 0; i < downEls.length; i++) {
@@ -192,7 +195,9 @@ const down = (deltaTop, target) => {
   };
 };
 const up = (deltaTop, target) => {
-  const brothers = Array.from(target.parentNode?.children || []).filter((node) => !node.id.startsWith(GHOST_EL_ID_PREFIX));
+  const brothers = Array.from(target.parentNode?.children || []).filter(
+    (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX)
+  );
   const index = brothers.indexOf(target);
   const upEls = brothers.slice(0, index);
   let addUpH = target.clientHeight;
@@ -252,6 +257,10 @@ class StageDragResize extends EventEmitter {
   select(el, event) {
     const oldTarget = this.target;
     this.target = el;
+    if (!this.dragEl) {
+      this.dragEl = globalThis.document.createElement("div");
+      this.container.append(this.dragEl);
+    }
     if (!this.moveable || this.target !== oldTarget) {
       this.init(el);
       this.moveableHelper = MoveableHelper.create({
@@ -302,6 +311,7 @@ class StageDragResize extends EventEmitter {
     if (!this.moveable)
       return;
     this.destroyDragEl();
+    this.dragEl = void 0;
     this.moveable.target = null;
     this.moveable.updateTarget();
   }
@@ -321,9 +331,9 @@ class StageDragResize extends EventEmitter {
     }
     this.mode = getMode(el);
     this.destroyGhostEl();
-    this.destroyDragEl();
-    this.dragEl = globalThis.document.createElement("div");
-    this.container.append(this.dragEl);
+    if (!this.dragEl) {
+      return;
+    }
     this.dragEl.style.cssText = getTargetElStyle(el);
     this.dragEl.id = `${DRAG_EL_ID_PREFIX}${el.id}`;
     if (typeof this.core.config.updateDragEl === "function") {
@@ -680,7 +690,7 @@ class TargetCalibrate extends EventEmitter {
       top: ${top}px;
       width: ${el.clientWidth}px;
       height: ${el.clientHeight}px;
-      z-index: ${ZIndex.DRAG_EL};
+      z-index: ${ZIndex.HIGHLIGHT_EL};
     `;
     this.operationEl.id = `${prefix}${el.id}`;
     if (typeof this.core.config.updateDragEl === "function") {
@@ -975,19 +985,22 @@ class StageMask extends Rule {
     this.wrapperResizeObserver?.disconnect();
     this.intersectionObserver?.disconnect();
     if (typeof IntersectionObserver !== "undefined") {
-      this.intersectionObserver = new IntersectionObserver((entries) => {
-        entries.forEach((entry) => {
-          const { target, intersectionRatio } = entry;
-          if (intersectionRatio <= 0) {
-            this.scrollIntoView(target);
-          }
-          this.intersectionObserver?.unobserve(target);
-        });
-      }, {
-        root: this.pageScrollParent,
-        rootMargin: "0px",
-        threshold: 1
-      });
+      this.intersectionObserver = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            const { target, intersectionRatio } = entry;
+            if (intersectionRatio <= 0) {
+              this.scrollIntoView(target);
+            }
+            this.intersectionObserver?.unobserve(target);
+          });
+        },
+        {
+          root: this.pageScrollParent,
+          rootMargin: "0px",
+          threshold: 1
+        }
+      );
     }
     if (typeof ResizeObserver !== "undefined") {
       this.pageResizeObserver = new ResizeObserver((entries) => {
@@ -1163,9 +1176,12 @@ class StageMultiDragResize extends EventEmitter {
     });
     this.moveableForMulti?.destroy();
     this.multiMoveableHelper?.clear();
-    this.moveableForMulti = new Moveable(this.container, this.getOptions({
-      target: this.dragElList
-    }));
+    this.moveableForMulti = new Moveable(
+      this.container,
+      this.getOptions({
+        target: this.dragElList
+      })
+    );
     this.multiMoveableHelper = MoveableHelper.create({
       useBeforeRender: true,
       useRender: false,
@@ -1174,7 +1190,9 @@ class StageMultiDragResize extends EventEmitter {
     const frames = [];
     const setFrames = (events) => {
       events.forEach((ev) => {
-        const matchEventTarget = this.targetList.find((targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ""));
+        const matchEventTarget = this.targetList.find(
+          (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
+        );
         if (!matchEventTarget)
           return;
         frames.push({
@@ -1193,10 +1211,14 @@ class StageMultiDragResize extends EventEmitter {
       const { events } = params;
       events.forEach((ev) => {
         const { width, height, beforeTranslate } = ev.drag;
-        const frameSnapShot = frames.find((frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ""));
+        const frameSnapShot = frames.find(
+          (frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
+        );
         if (!frameSnapShot)
           return;
-        const targeEl = this.targetList.find((targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ""));
+        const targeEl = this.targetList.find(
+          (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
+        );
         if (!targeEl)
           return;
         const isParentIncluded = this.targetList.find((targetItem) => targetItem.id === targeEl.parentElement?.id);
@@ -1220,10 +1242,14 @@ class StageMultiDragResize extends EventEmitter {
     }).on("dragGroup", (params) => {
       const { events } = params;
       events.forEach((ev) => {
-        const frameSnapShot = frames.find((frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ""));
+        const frameSnapShot = frames.find(
+          (frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
+        );
         if (!frameSnapShot)
           return;
-        const targeEl = this.targetList.find((targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ""));
+        const targeEl = this.targetList.find(
+          (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
+        );
         if (!targeEl)
           return;
         const isParentIncluded = this.targetList.find((targetItem) => targetItem.id === targeEl.parentElement?.id);
@@ -1414,9 +1440,12 @@ class StageRender extends EventEmitter {
   postTmagicRuntimeReady() {
     this.contentWindow = this.iframe?.contentWindow;
     this.contentWindow.magic = this.getMagicApi();
-    this.contentWindow.postMessage({
-      tmagicRuntimeReady: true
-    }, "*");
+    this.contentWindow.postMessage(
+      {
+        tmagicRuntimeReady: true
+      },
+      "*"
+    );
   }
 }