@tmagic/stage 1.3.0 → 1.3.1

package/dist/tmagic-stage.js

@@ -212,6 +212,20 @@ const up = (deltaTop, target) => {
   };
 };
 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;
@@ -361,8 +375,9 @@ class DragResizeHelper {
       }
     } 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`;
@@ -381,8 +396,9 @@ class DragResizeHelper {
       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);
@@ -452,8 +468,9 @@ class DragResizeHelper {
         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`;
@@ -480,16 +497,18 @@ class DragResizeHelper {
         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();
@@ -544,6 +563,8 @@ class DragResizeHelper {
     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;
   }
@@ -1362,6 +1383,9 @@ class ActionManager extends EventEmitter {
   isContainer;
   getRenderDocument;
   mouseMoveHandler = throttle(async (event) => {
+    if (event.target?.classList?.contains("moveable-direction")) {
+      return;
+    }
     const el = await this.getElementFromPoint(event);
     if (!el) {
       this.clearHighlight();
@@ -2602,5 +2626,5 @@ class StageCore extends EventEmitter$1 {
   }
 }
 
-export { AbleActionEventType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, PAGE_CLASS, SELECTED_CLASS, SelectStatus, StageDragResize, StageDragStatus, StageMask, StageRender, ZIndex, addSelectedClassName, calcValueByFontsize, StageCore as default, down, getAbsolutePosition, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };
+export { AbleActionEventType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, PAGE_CLASS, SELECTED_CLASS, SelectStatus, StageDragResize, StageDragStatus, StageMask, StageRender, ZIndex, addSelectedClassName, calcValueByFontsize, StageCore as default, down, getAbsolutePosition, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };
 //# sourceMappingURL=tmagic-stage.js.map