update

src/modules/editor/components/CompUI/basicUI/Transfer/index.tsx

@@ -37,7 +37,7 @@ export const Transfer = defineComponent({
       return (
         transferStyle.width && (
           <div
-            class="absolute transfer"
+            class="absolute transfer z-999"
             style={{
               top: transferStyle.top,
               left: transferStyle.left,

src/modules/editor/components/CompUI/basicUI/Transfer/streamCard.tsx

@@ -30,7 +30,7 @@ export const StreamCardTransfer = defineComponent({
       return (
         transferStyle.width && (
           <div
-            class="transfer absolute"
+            class="transfer absolute z-998"
             style={{
               top: transferStyle.top,
               left: transferStyle.left,
@@ -79,7 +79,7 @@ const borderStyle = css`
   height: 100%;
   outline: 2px solid @inf-primary-color;
   pointer-events: none;
-  z-index: 999;
+  /* z-index: 999; */
   box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.4);
 `;
 

src/modules/editor/controllers/TransferCtrl/index.ts

@@ -34,12 +34,18 @@ export class TransferCtrl extends ModuleControl<EditorModule> {
     width: "",
     height: "",
     transform: {
+      scale: 1,
       rotate: "0deg",
       translateX: "-50%",
       translateY: "-50%",
     },
   });
 
+  originPiont = {
+    x: 0,
+    y: 0,
+  };
+
   init(pageEl: HTMLElement) {
     this.currComp = this.module.store.currComp;
     this.compEl = this.currComp.$el;
@@ -104,26 +110,33 @@ export class TransferCtrl extends ModuleControl<EditorModule> {
 
   initStyle() {
     if (!this.compEl) return;
-    
+
     const rect = this.compEl.getBoundingClientRect();
     const pageRect = this.pageEl.getBoundingClientRect();
 
     const transform = getTransform(this.compEl);
 
-    this.transferStyle.width = this.compEl.clientWidth + "px";
-    this.transferStyle.height = this.compEl.clientHeight + "px";
+    const width = this.compEl.clientWidth * transform.scale;
+    const height = this.compEl.clientHeight * transform.scale;
+
+    this.transferStyle.width = width + "px";
+    this.transferStyle.height = height + "px";
     this.transferStyle.top = rect.top + rect.height / 2 - pageRect.top + "px";
     this.transferStyle.left = rect.left + rect.width / 2 - pageRect.left + "px";
     if (!this.transferStyle.transform) {
       this.transferStyle.transform = {
+        scale: 1,
         rotate: "0deg",
         translateX: "-50%",
         translateY: "-50%",
       };
     }
+    this.transferStyle.transform.scale = transform.scale;
     this.transferStyle.transform.rotate = transform.rotate;
-    this.transferStyle.transform.translateY =
-      "-" + this.compEl.clientHeight / 2 + "px";
+    this.transferStyle.transform.translateY = "-" + height / 2 + "px";
+
+    this.originPiont.x = rect.left + rect.width / 2;
+    this.originPiont.y = rect.top + rect.height / 2;
   }
 
   resetStyle() {
@@ -153,6 +166,7 @@ export function getTransform(el: HTMLElement) {
   if (tr == "none")
     return {
       rotate: "0deg",
+      scale: 1,
     };
 
   // rotation matrix - http://en.wikipedia.org/wiki/Rotation_matrix
@@ -161,11 +175,12 @@ export function getTransform(el: HTMLElement) {
   // console.error("values: ", values);
   const a: any = values[0];
   const b: any = values[1];
-  const c: any = values[2];
-  const d: any = values[3];
 
   const angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
+  const scale = Math.sqrt(a * a + b * b);
+
   return {
     rotate: `${angle}deg`,
+    scale,
   };
 }

src/modules/editor/controllers/TransferCtrl/transforms/transform.ts

@@ -1,7 +1,7 @@
 import { TransCreateFn, TransferCtrl } from "..";
 
 function getTransform(this: TransferCtrl, transType: string) {
-  const { transEvent } = this;
+  const { transEvent, originPiont } = this;
   const { transform = {} } = this.currComp?.layout || {};
   const offset = {
     x: transform.x || 0,
@@ -9,13 +9,23 @@ function getTransform(this: TransferCtrl, transType: string) {
     r: transform.r || 0,
     s: transform.s || 1,
   };
+
+  const offsetX = transEvent.offsetX + transEvent.startX - originPiont.x;
+  const offsetY = transEvent.offsetY + transEvent.startY - originPiont.y;
+
   switch (transType) {
     case "move":
       offset.x += transEvent.offsetX * 2;
       offset.y += transEvent.offsetY * 2;
       break;
     case "rotate":
-      offset.r = (offset.r + transEvent.offsetX * -1) % 360;
+      if (offsetY > 0) {
+        offset.r = (Math.atan(-offsetX / offsetY) * 180) / Math.PI;
+      } else if (offsetX < 0) {
+        offset.r = (Math.atan(offsetY / offsetX) * 180) / Math.PI + 90;
+      } else {
+        offset.r = (Math.atan(offsetY / offsetX) * 180) / Math.PI - 90;
+      }
       break;
     case "scale":
       offset.s = +(