@tmagic/stage 1.3.7 → 1.3.9

package/dist/tmagic-stage.umd.cjs

@@ -70,7 +70,7 @@
   };
   const getTargetElStyle = (el, zIndex) => {
     const offset = getOffset(el);
-    const { transform } = getComputedStyle(el);
+    const { transform, border } = getComputedStyle(el);
     return `
     position: absolute;
     transform: ${transform};
@@ -78,6 +78,7 @@
     top: ${offset.top}px;
     width: ${el.clientWidth}px;
     height: ${el.clientHeight}px;
+    border: ${border};
     ${typeof zIndex !== "undefined" ? `z-index: ${zIndex};` : ""}
   `;
   };
@@ -228,6 +229,22 @@
       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;
@@ -379,10 +396,11 @@
         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);
@@ -511,8 +529,9 @@
       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) {
@@ -1288,7 +1307,7 @@
       }).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);
         }
       });
     }
@@ -1681,11 +1700,11 @@
       });
       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;
     }
@@ -2674,9 +2693,9 @@
      * 初始化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);
       });
@@ -2727,6 +2746,7 @@
   exports.default = StageCore;
   exports.down = down;
   exports.getAbsolutePosition = getAbsolutePosition;
+  exports.getBorderWidth = getBorderWidth;
   exports.getMarginValue = getMarginValue;
   exports.getMode = getMode;
   exports.getOffset = getOffset;