@tmagic/stage 1.1.3 → 1.1.5

package/dist/tmagic-stage.umd.js

@@ -28,6 +28,7 @@
     ZIndex2["SELECTED_EL"] = "666";
     ZIndex2["GHOST_EL"] = "700";
     ZIndex2["DRAG_EL"] = "9";
+    ZIndex2["HIGHLIGHT_EL"] = "8";
     return ZIndex2;
   })(ZIndex || {});
   var MouseButton = /* @__PURE__ */ ((MouseButton2) => {
@@ -177,7 +178,9 @@
   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++) {
@@ -198,7 +201,9 @@
     };
   };
   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;
@@ -258,6 +263,10 @@
     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__default.default.create({
@@ -308,6 +317,7 @@
       if (!this.moveable)
         return;
       this.destroyDragEl();
+      this.dragEl = void 0;
       this.moveable.target = null;
       this.moveable.updateTarget();
     }
@@ -327,9 +337,9 @@
       }
       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") {
@@ -686,7 +696,7 @@
       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") {
@@ -981,19 +991,22 @@
       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) => {
@@ -1169,9 +1182,12 @@
       });
       this.moveableForMulti?.destroy();
       this.multiMoveableHelper?.clear();
-      this.moveableForMulti = new Moveable__default.default(this.container, this.getOptions({
-        target: this.dragElList
-      }));
+      this.moveableForMulti = new Moveable__default.default(
+        this.container,
+        this.getOptions({
+          target: this.dragElList
+        })
+      );
       this.multiMoveableHelper = MoveableHelper__default.default.create({
         useBeforeRender: true,
         useRender: false,
@@ -1180,7 +1196,9 @@
       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({
@@ -1199,10 +1217,14 @@
         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);
@@ -1226,10 +1248,14 @@
       }).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);
@@ -1420,9 +1446,12 @@
     postTmagicRuntimeReady() {
       this.contentWindow = this.iframe?.contentWindow;
       this.contentWindow.magic = this.getMagicApi();
-      this.contentWindow.postMessage({
-        tmagicRuntimeReady: true
-      }, "*");
+      this.contentWindow.postMessage(
+        {
+          tmagicRuntimeReady: true
+        },
+        "*"
+      );
     }
   }