@tmagic/stage 1.3.0 → 1.3.1

package/dist/tmagic-stage.umd.cjs

@@ -209,6 +209,20 @@
     };
   };
   const isMoveableButton = (target) => target.classList.contains("moveable-button") || target.parentElement?.classList.contains("moveable-button");
+  const getMarginValue = (el) => {
+    if (!el)
+      return {
+        marginLeft: 0,
+        marginTop: 0
+      };
+    const { marginLeft, marginTop } = getComputedStyle(el);
+    const marginLeftValue = parseFloat(marginLeft) || 0;
+    const marginTopValue = parseFloat(marginTop) || 0;
+    return {
+      marginLeft: marginLeftValue,
+      marginTop: marginTopValue
+    };
+  };
 
   class TargetShadow {
     el;
@@ -358,8 +372,9 @@
         }
       } else {
         this.moveableHelper.onResize(e);
-        this.target.style.left = `${this.frameSnapShot.left + beforeTranslate[0]}px`;
-        this.target.style.top = `${this.frameSnapShot.top + beforeTranslate[1]}px`;
+        const { marginLeft, marginTop } = getMarginValue(this.target);
+        this.target.style.left = `${this.frameSnapShot.left + beforeTranslate[0] - marginLeft}px`;
+        this.target.style.top = `${this.frameSnapShot.top + beforeTranslate[1] - marginTop} - marginToppx`;
       }
       this.target.style.width = `${width}px`;
       this.target.style.height = `${height}px`;
@@ -378,8 +393,9 @@
         return;
       }
       this.moveableHelper.onDrag(e);
-      this.target.style.left = `${this.frameSnapShot.left + e.beforeTranslate[0]}px`;
-      this.target.style.top = `${this.frameSnapShot.top + e.beforeTranslate[1]}px`;
+      const { marginLeft, marginTop } = getMarginValue(this.target);
+      this.target.style.left = `${this.frameSnapShot.left + e.beforeTranslate[0] - marginLeft}px`;
+      this.target.style.top = `${this.frameSnapShot.top + e.beforeTranslate[1] - marginTop}px`;
     }
     onRotateStart(e) {
       this.moveableHelper.onRotateStart(e);
@@ -449,8 +465,9 @@
           return;
         const isParentIncluded = this.targetList.find((targetItem) => targetItem.id === targeEl.parentElement?.id);
         if (!isParentIncluded) {
-          targeEl.style.left = `${frameSnapShot.left + beforeTranslate[0]}px`;
-          targeEl.style.top = `${frameSnapShot.top + beforeTranslate[1]}px`;
+          const { marginLeft, marginTop } = getMarginValue(targeEl);
+          targeEl.style.left = `${frameSnapShot.left + beforeTranslate[0] - marginLeft}px`;
+          targeEl.style.top = `${frameSnapShot.top + beforeTranslate[1] - marginTop}px`;
         }
         targeEl.style.width = `${width}px`;
         targeEl.style.height = `${height}px`;
@@ -477,16 +494,18 @@
           return;
         const isParentIncluded = this.targetList.find((targetItem) => targetItem.id === targeEl.parentElement?.id);
         if (!isParentIncluded) {
-          targeEl.style.left = `${frameSnapShot.left + ev.beforeTranslate[0]}px`;
-          targeEl.style.top = `${frameSnapShot.top + ev.beforeTranslate[1]}px`;
+          const { marginLeft, marginTop } = getMarginValue(targeEl);
+          targeEl.style.left = `${frameSnapShot.left + ev.beforeTranslate[0] - marginLeft}px`;
+          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 };
-      let left = calcValueByFontsize(doc, offset.left);
-      let top = calcValueByFontsize(doc, offset.top);
+      const { marginLeft, marginTop } = getMarginValue(el);
+      let left = calcValueByFontsize(doc, offset.left) - marginLeft;
+      let top = calcValueByFontsize(doc, offset.top) - marginTop;
       const width = calcValueByFontsize(doc, el.clientWidth);
       const height = calcValueByFontsize(doc, el.clientHeight);
       let shadowEl = this.getShadowEl();
@@ -541,6 +560,8 @@
       ghostEl.style.position = "absolute";
       ghostEl.style.left = `${left}px`;
       ghostEl.style.top = `${top}px`;
+      ghostEl.style.marginLeft = "0";
+      ghostEl.style.marginTop = "0";
       el.after(ghostEl);
       return ghostEl;
     }
@@ -1359,6 +1380,9 @@
     isContainer;
     getRenderDocument;
     mouseMoveHandler = lodashEs.throttle(async (event) => {
+      if (event.target?.classList?.contains("moveable-direction")) {
+        return;
+      }
       const el = await this.getElementFromPoint(event);
       if (!el) {
         this.clearHighlight();
@@ -2622,6 +2646,7 @@
   exports.default = StageCore;
   exports.down = down;
   exports.getAbsolutePosition = getAbsolutePosition;
+  exports.getMarginValue = getMarginValue;
   exports.getMode = getMode;
   exports.getOffset = getOffset;
   exports.getScrollParent = getScrollParent;