@tmagic/stage 1.3.8 → 1.3.9

package/dist/tmagic-stage.js

@@ -73,7 +73,7 @@ const getOffset = (el) => {
 };
 const getTargetElStyle = (el, zIndex) => {
   const offset = getOffset(el);
-  const { transform } = getComputedStyle(el);
+  const { transform, border } = getComputedStyle(el);
   return `
     position: absolute;
     transform: ${transform};
@@ -81,6 +81,7 @@ const getTargetElStyle = (el, zIndex) => {
     top: ${offset.top}px;
     width: ${el.clientWidth}px;
     height: ${el.clientHeight}px;
+    border: ${border};
     ${typeof zIndex !== "undefined" ? `z-index: ${zIndex};` : ""}
   `;
 };
@@ -231,6 +232,22 @@ const getMarginValue = (el) => {
     marginTop: marginTopValue
   };
 };
+const getBorderWidth = (el) => {
+  if (!el)
+    return {
+      borderLeftWidth: 0,
+      borderRightWidth: 0,
+      borderTopWidth: 0,
+      borderBottomWidth: 0
+    };
+  const { borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomWidth } = getComputedStyle(el);
+  return {
+    borderLeftWidth: parseFloat(borderLeftWidth) || 0,
+    borderRightWidth: parseFloat(borderRightWidth) || 0,
+    borderTopWidth: parseFloat(borderTopWidth) || 0,
+    borderBottomWidth: parseFloat(borderBottomWidth) || 0
+  };
+};
 
 class TargetShadow {
   el;
@@ -382,10 +399,11 @@ class DragResizeHelper {
       this.moveableHelper.onResize(e);
       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.top = `${this.frameSnapShot.top + beforeTranslate[1] - marginTop}px`;
     }
-    this.target.style.width = `${width}px`;
-    this.target.style.height = `${height}px`;
+    const { borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomWidth } = getBorderWidth(this.target);
+    this.target.style.width = `${width + borderLeftWidth + borderRightWidth}px`;
+    this.target.style.height = `${height + borderTopWidth + borderBottomWidth}px`;
   }
   onDragStart(e) {
     this.moveableHelper.onDragStart(e);
@@ -514,8 +532,9 @@ class DragResizeHelper {
     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);
+    const { borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomWidth } = getBorderWidth(el);
+    const width = calcValueByFontsize(doc, el.clientWidth + borderLeftWidth + borderRightWidth);
+    const height = calcValueByFontsize(doc, el.clientHeight + borderTopWidth + borderBottomWidth);
     let shadowEl = this.getShadowEl();
     const shadowEls = this.getShadowEls();
     if (shadowEls.length) {
@@ -1291,7 +1310,7 @@ class StageMultiDragResize extends MoveableOptionsManager {
     }).on("clickGroup", (e) => {
       const { inputTarget, targets } = e;
       if (targets.length > 1 && targets.includes(inputTarget)) {
-        this.emit("change-to-select", inputTarget.id.replace(DRAG_EL_ID_PREFIX, ""));
+        this.emit("change-to-select", inputTarget.id.replace(DRAG_EL_ID_PREFIX, ""), e.inputEvent);
       }
     });
   }
@@ -1684,11 +1703,11 @@ class ActionManager extends EventEmitter {
     });
     multiDr?.on("update", (data) => {
       this.emit("multi-update", data);
-    }).on("change-to-select", async (id) => {
+    }).on("change-to-select", async (id, e) => {
       if (this.isMultiSelectStatus)
         return false;
       const el = this.getTargetElement(id);
-      this.emit("change-to-select", el);
+      this.emit("change-to-select", el, e);
     });
     return multiDr;
   }
@@ -2677,9 +2696,9 @@ class StageCore extends EventEmitter$1 {
    * 初始化MultiDragResize类通过ActionManager抛出来的事件监听
    */
   initMulDrEvent() {
-    this.actionManager.on("change-to-select", (el) => {
+    this.actionManager.on("change-to-select", (el, e) => {
       this.select(el);
-      setTimeout(() => this.emit("select", el));
+      setTimeout(() => this.emit("select", el, e));
     }).on("multi-update", (data) => {
       this.emit("update", data);
     });
@@ -2706,5 +2725,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, RenderType, 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 };
+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, RenderType, SELECTED_CLASS, SelectStatus, StageDragResize, StageDragStatus, StageMask, StageRender, ZIndex, addSelectedClassName, calcValueByFontsize, StageCore as default, down, getAbsolutePosition, getBorderWidth, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };
 //# sourceMappingURL=tmagic-stage.js.map