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

package/dist/tmagic-stage.umd.js

@@ -23,6 +23,8 @@
   var ZIndex = /* @__PURE__ */ ((ZIndex2) => {
     ZIndex2["MASK"] = "99999";
     ZIndex2["SELECTED_EL"] = "666";
+    ZIndex2["GHOST_EL"] = "700";
+    ZIndex2["DRAG_EL"] = "9";
     return ZIndex2;
   })(ZIndex || {});
   var MouseButton = /* @__PURE__ */ ((MouseButton2) => {
@@ -51,29 +53,9 @@
     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 {
@@ -279,13 +261,11 @@
       this.mode = getMode(el);
       this.destroyGhostEl();
       this.updateDragEl(el);
-      this.setElementGuidelines(el);
       this.moveableOptions = this.getOptions({
         target: this.dragEl
       });
     }
-    setElementGuidelines(el) {
-      const nodes = el.parentElement?.children || [];
+    setElementGuidelines(nodes) {
       this.elementGuidelines.forEach((node) => {
         node.remove();
       });
@@ -294,7 +274,7 @@
         const frame = document.createDocumentFragment();
         for (const node of nodes) {
           const { width, height } = node.getBoundingClientRect();
-          if (node === el)
+          if (node === this.target)
             continue;
           const { left, top } = getOffset(node);
           const elementGuideline = document.createElement("div");
@@ -312,35 +292,34 @@
       });
       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);
@@ -389,6 +368,54 @@
         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");
@@ -409,12 +436,13 @@
       }
     }
     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 }
@@ -427,7 +455,7 @@
       const ghostEl = el.cloneNode(true);
       const { top, left } = getAbsolutePosition(el, getOffset(el));
       ghostEl.id = `${GHOST_EL_ID_PREFIX}${el.id}`;
-      ghostEl.style.zIndex = "5";
+      ghostEl.style.zIndex = ZIndex.GHOST_EL;
       ghostEl.style.opacity = ".5";
       ghostEl.style.position = "absolute";
       ghostEl.style.left = `${left}px`;
@@ -440,15 +468,16 @@
       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;
-      z-index: 9;
+      width: ${el.clientWidth}px;
+      height: ${el.clientHeight}px;
+      z-index: ${ZIndex.DRAG_EL};
     `;
       this.dragEl.id = `${DRAG_EL_ID_PREFIX}${el.id}`;
     }
@@ -464,6 +493,11 @@
       if (typeof moveableOptions === "function") {
         moveableOptions = moveableOptions(this.core);
       }
+      const elementGuidelines = moveableOptions.elementGuidelines || this.target.parentElement?.children || [];
+      this.setElementGuidelines(elementGuidelines);
+      if (moveableOptions.elementGuidelines) {
+        delete moveableOptions.elementGuidelines;
+      }
       return {
         origin: false,
         rootContainer: this.core.container,
@@ -471,6 +505,8 @@
         dragArea: false,
         draggable: true,
         resizable: true,
+        scalable: false,
+        rotatable: false,
         snappable: isAbsolute || isFixed,
         snapGap: isAbsolute || isFixed,
         snapThreshold: 5,
@@ -573,14 +609,15 @@
       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;
@@ -589,29 +626,9 @@
       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 {
@@ -1054,16 +1071,6 @@
             this.iframe?.contentDocument?.body?.appendChild(el);
           }
         }
-        if (this.contentWindow) {
-          const style = this.contentWindow.document.createElement("style");
-          style.id = "tmagic-stage-render";
-          style.innerHTML = `
-        .${SELECTED_CLASS}, .${SELECTED_CLASS}-parent {
-          z-index: ${ZIndex.SELECTED_EL};
-        }
-      `;
-          this.contentWindow.document.head.appendChild(style);
-        }
       };
       this.core = core;
       this.runtimeUrl = core.config.runtimeUrl || "";