@tmagic/stage 1.0.0-rc.6 → 1.0.0-rc.7

package/dist/tmagic-stage.es.js

@@ -46,29 +46,9 @@ const getParents = (el, relative) => {
   return parents;
 };
 const getOffset = (el) => {
-  const { transform } = getComputedStyle(el);
   const { offsetParent } = el;
-  let left = el.offsetLeft;
-  let top = el.offsetTop;
-  if (transform.indexOf("matrix") > -1) {
-    let a = 1;
-    let b = 1;
-    let c = 1;
-    let d = 1;
-    let e = 0;
-    let f = 0;
-    transform.replace(/matrix\((.+), (.+), (.+), (.+), (.+), (.+)\)/, ($0, $1, $2, $3, $4, $5, $6) => {
-      a = +$1;
-      b = +$2;
-      c = +$3;
-      d = +$4;
-      e = +$5;
-      f = +$6;
-      return transform;
-    });
-    left = a * left + c * top + e;
-    top = b * left + d * top + f;
-  }
+  const left = el.offsetLeft;
+  const top = el.offsetTop;
   if (offsetParent) {
     const parentOffset = getOffset(offsetParent);
     return {
@@ -305,35 +285,34 @@ class StageDragResize extends EventEmitter {
     });
     this.bindResizeEvent();
     this.bindDragEvent();
+    this.bindRotateEvent();
+    this.bindScaleEvent();
   }
   bindResizeEvent() {
     if (!this.moveable)
       throw new Error("moveable \u4E3A\u521D\u59CB\u5316");
+    const frame = {
+      left: 0,
+      top: 0
+    };
     this.moveable.on("resizeStart", (e) => {
-      if (e.dragStart) {
-        const rect = this.moveable.getRect();
-        const offset = getAbsolutePosition(e.target, rect);
-        e.dragStart.set([offset.left, offset.top]);
-      }
-    }).on("resize", ({ width, height, drag }) => {
+      if (!this.target)
+        return;
+      this.dragStatus = "start" /* START */;
+      this.moveableHelper?.onResizeStart(e);
+      frame.top = this.target.offsetTop;
+      frame.left = this.target.offsetLeft;
+    }).on("resize", (e) => {
+      const { width, height, drag } = e;
       if (!this.moveable || !this.target || !this.dragEl)
         return;
       const { beforeTranslate } = drag;
       this.dragStatus = "ing" /* ING */;
+      this.moveableHelper?.onResize(e);
       this.target.style.width = `${width}px`;
       this.target.style.height = `${height}px`;
-      this.dragEl.style.width = `${width}px`;
-      this.dragEl.style.height = `${height}px`;
-      if (this.mode === Mode.SORTABLE) {
-        this.dragEl.style.top = `${beforeTranslate[1]}px`;
-        this.target.style.top = `0px`;
-        return;
-      }
-      this.dragEl.style.left = `${beforeTranslate[0]}px`;
-      this.dragEl.style.top = `${beforeTranslate[1]}px`;
-      const offset = getAbsolutePosition(this.target, { left: beforeTranslate[0], top: beforeTranslate[1] });
-      this.target.style.left = `${offset.left}px`;
-      this.target.style.top = `${offset.top}px`;
+      this.target.style.left = `${frame.left + beforeTranslate[0]}px`;
+      this.target.style.top = `${frame.top + beforeTranslate[1]}px`;
     }).on("resizeEnd", () => {
       this.dragStatus = "end" /* END */;
       this.update(true);
@@ -382,6 +361,54 @@ class StageDragResize extends EventEmitter {
       this.destroyGhostEl();
     });
   }
+  bindRotateEvent() {
+    if (!this.moveable)
+      throw new Error("moveable \u4E3A\u521D\u59CB\u5316");
+    this.moveable.on("rotateStart", (e) => {
+      this.dragStatus = "start" /* START */;
+      this.moveableHelper?.onRotateStart(e);
+    }).on("rotate", (e) => {
+      if (!this.target || !this.dragEl)
+        return;
+      this.dragStatus = "ing" /* ING */;
+      this.moveableHelper?.onRotate(e);
+      const frame = this.moveableHelper?.getFrame(e.target);
+      this.target.style.transform = frame?.toCSSObject().transform || "";
+    }).on("rotateEnd", (e) => {
+      this.dragStatus = "end" /* END */;
+      const frame = this.moveableHelper?.getFrame(e.target);
+      this.emit("update", {
+        el: this.target,
+        style: {
+          transform: frame?.get("transform")
+        }
+      });
+    });
+  }
+  bindScaleEvent() {
+    if (!this.moveable)
+      throw new Error("moveable \u4E3A\u521D\u59CB\u5316");
+    this.moveable.on("scaleStart", (e) => {
+      this.dragStatus = "start" /* START */;
+      this.moveableHelper?.onScaleStart(e);
+    }).on("scale", (e) => {
+      if (!this.target || !this.dragEl)
+        return;
+      this.dragStatus = "ing" /* ING */;
+      this.moveableHelper?.onScale(e);
+      const frame = this.moveableHelper?.getFrame(e.target);
+      this.target.style.transform = frame?.toCSSObject().transform || "";
+    }).on("scaleEnd", (e) => {
+      this.dragStatus = "end" /* END */;
+      const frame = this.moveableHelper?.getFrame(e.target);
+      this.emit("update", {
+        el: this.target,
+        style: {
+          transform: frame?.get("transform")
+        }
+      });
+    });
+  }
   sort() {
     if (!this.target || !this.ghostEl)
       throw new Error("\u672A\u77E5\u9519\u8BEF");
@@ -402,12 +429,13 @@ class StageDragResize extends EventEmitter {
     }
   }
   update(isResize = false) {
-    const rect = this.moveable.getRect();
-    const offset = this.mode === Mode.SORTABLE ? { left: 0, top: 0 } : getAbsolutePosition(this.target, rect);
+    if (!this.target)
+      return;
+    const offset = this.mode === Mode.SORTABLE ? { left: 0, top: 0 } : { left: this.target.offsetLeft, top: this.target.offsetTop };
     const left = this.calcValueByFontsize(offset.left);
     const top = this.calcValueByFontsize(offset.top);
-    const width = this.calcValueByFontsize(rect.width);
-    const height = this.calcValueByFontsize(rect.height);
+    const width = this.calcValueByFontsize(this.target.clientWidth);
+    const height = this.calcValueByFontsize(this.target.clientHeight);
     this.emit("update", {
       el: this.target,
       style: isResize ? { left, top, width, height } : { left, top }
@@ -433,14 +461,15 @@ class StageDragResize extends EventEmitter {
     this.ghostEl = void 0;
   }
   updateDragEl(el) {
-    const { width, height } = el.getBoundingClientRect();
     const offset = getOffset(el);
+    const { transform } = getComputedStyle(el);
     this.dragEl.style.cssText = `
       position: absolute;
+      transform: ${transform};
       left: ${offset.left}px;
       top: ${offset.top}px;
-      width: ${width}px;
-      height: ${height}px;
+      width: ${el.clientWidth}px;
+      height: ${el.clientHeight}px;
       z-index: ${ZIndex.DRAG_EL};
     `;
     this.dragEl.id = `${DRAG_EL_ID_PREFIX}${el.id}`;
@@ -469,6 +498,8 @@ class StageDragResize extends EventEmitter {
       dragArea: false,
       draggable: true,
       resizable: true,
+      scalable: false,
+      rotatable: false,
       snappable: isAbsolute || isFixed,
       snapGap: isAbsolute || isFixed,
       snapThreshold: 5,
@@ -571,14 +602,15 @@ class TargetCalibrate extends EventEmitter {
     this.parent.append(this.operationEl);
   }
   update(el, prefix) {
-    const { width, height } = el.getBoundingClientRect();
     const { left, top } = this.getOffset(el);
+    const { transform } = getComputedStyle(el);
     this.operationEl.style.cssText = `
       position: absolute;
+      transform: ${transform};
       left: ${left}px;
       top: ${top}px;
-      width: ${width}px;
-      height: ${height}px;
+      width: ${el.clientWidth}px;
+      height: ${el.clientHeight}px;
     `;
     this.operationEl.id = `${prefix}${el.id}`;
     return this.operationEl;
@@ -587,29 +619,9 @@ class TargetCalibrate extends EventEmitter {
     this.operationEl?.remove();
   }
   getOffset(el) {
-    const { transform } = getComputedStyle(el);
     const { offsetParent } = el;
-    let left = el.offsetLeft;
-    let top = el.offsetTop;
-    if (transform.indexOf("matrix") > -1) {
-      let a = 1;
-      let b = 1;
-      let c = 1;
-      let d = 1;
-      let e = 0;
-      let f = 0;
-      transform.replace(/matrix\((.+), (.+), (.+), (.+), (.+), (.+)\)/, ($0, $1, $2, $3, $4, $5, $6) => {
-        a = +$1;
-        b = +$2;
-        c = +$3;
-        d = +$4;
-        e = +$5;
-        f = +$6;
-        return transform;
-      });
-      left = a * left + c * top + e;
-      top = b * left + d * top + f;
-    }
+    const left = el.offsetLeft;
+    const top = el.offsetTop;
     if (offsetParent) {
       const parentOffset = this.getOffset(offsetParent);
       return {