@tmagic/stage 1.3.0-beta.8 → 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();
@@ -1791,8 +1815,6 @@ class Rule extends EventEmitter {
     this.container = container;
     this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
     this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
-    this.hGuides.on("changeGuides", this.hGuidesChangeGuidesHandler);
-    this.vGuides.on("changeGuides", this.vGuidesChangeGuidesHandler);
     this.containerResizeObserver = new ResizeObserver(() => {
       this.vGuides.resize();
       this.hGuides.resize();
@@ -1879,16 +1901,26 @@ class Rule extends EventEmitter {
     width: type === GuidesType.HORIZONTAL ? "100%" : "30px",
     height: type === GuidesType.HORIZONTAL ? "30px" : "100%"
   });
-  createGuides = (type, defaultGuides = []) => new Guides(this.container, {
-    type,
-    defaultGuides,
-    displayDragPos: true,
-    backgroundColor: "#fff",
-    lineColor: "#000",
-    textColor: "#000",
-    style: this.getGuidesStyle(type),
-    showGuides: this.isShowGuides
-  });
+  createGuides = (type, defaultGuides = []) => {
+    const guides = new Guides(this.container, {
+      type,
+      defaultGuides,
+      displayDragPos: true,
+      backgroundColor: "#fff",
+      lineColor: "#000",
+      textColor: "#000",
+      style: this.getGuidesStyle(type),
+      showGuides: this.isShowGuides
+    });
+    const changEventHandler = {
+      [GuidesType.HORIZONTAL]: this.hGuidesChangeGuidesHandler,
+      [GuidesType.VERTICAL]: this.vGuidesChangeGuidesHandler
+    }[type];
+    if (changEventHandler) {
+      guides.on("changeGuides", changEventHandler);
+    }
+    return guides;
+  };
   hGuidesChangeGuidesHandler = (e) => {
     this.horizontalGuidelines = e.guides;
     this.emit("change-guides", {
@@ -2594,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