update

src/modules/editor/module/actions/edit.ts

@@ -2,8 +2,8 @@ import { cloneDeep, pick, set } from "lodash";
 import { Exception, queenApi } from "queenjs";
 import { EditorModule } from "..";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
-import { ICompKeys, Layout } from "../../typings";
 import { Matrix } from "../../objects/DesignTemp/creates/Matrix";
+import { ICompKeys, Layout } from "../../typings";
 
 export const editActions = EditorModule.action({
   // 添加组件到画布
@@ -332,32 +332,47 @@ export const editActions = EditorModule.action({
   // 取消打组
   cancelGroupComps(groupComp: DesignComp) {
     const { helper } = this;
-    const groupIds = groupComp.children.default as string[];
+    const groupChildIds = groupComp.children.default as string[];
 
     const parentComp = helper.findParentComp(groupComp.id) as DesignComp;
 
     const parentMatrix = new Matrix();
 
-    groupIds.forEach((id) => {
+    groupChildIds.forEach((id) => {
       const comp = helper.findComp(id) as DesignComp;
 
-      parentMatrix.setFormDiv(parentComp.$el);
+      parentMatrix.setFormDiv(groupComp.$el);
+      const originArr = window.getComputedStyle(groupComp.$el).transformOrigin.split(" ").map(parseFloat);
+
+      const porigin = new Matrix();
+      porigin.translate(originArr[0], originArr[1])
+      const invOrigin = new Matrix();
+      invOrigin.translate(-originArr[0], -originArr[1])
+
+      const childOrigArr = window.getComputedStyle(comp.$el).transformOrigin.split(" ").map(parseFloat);
+      const corigin = new Matrix();
+      corigin.translate(childOrigArr[0], childOrigArr[1])
+      const cinvOrigin = new Matrix();
+      cinvOrigin.translate(-childOrigArr[0], -childOrigArr[1])
+
 
-      const compMatrix = new Matrix();
-      compMatrix.setFormDiv(comp.$el);
-      compMatrix.multipy(parentMatrix);
+      const childMatrix = new Matrix();
+      childMatrix.setFormDiv(comp.$el);
+    
+      const result = cinvOrigin.multipy(porigin).multipy(parentMatrix).multipy(invOrigin).multipy(corigin).multipy(childMatrix);
+      
 
       comp.layout.transform || (comp.layout.transform = {});
-      comp.layout.transform.x = helper.pxToDesignSize(compMatrix.getX());
-      comp.layout.transform.y = helper.pxToDesignSize(compMatrix.getY());
-      comp.layout.transform.s = compMatrix.getScale();
-      comp.layout.transform.r = compMatrix.getRotate();
+      comp.layout.transform.x = helper.pxToDesignSize(result.getX());
+      comp.layout.transform.y = helper.pxToDesignSize(result.getY());
+      comp.layout.transform.s = result.getScale();
+      comp.layout.transform.r = result.getRotate();
     });
 
     const childIds = [...(parentComp.children.default as string[])];
 
     const groupIndex = childIds.findIndex((id) => groupComp.id === id);
-    childIds.splice(groupIndex, 1, ...groupIds);
+    childIds.splice(groupIndex, 1, ...groupChildIds);
 
     parentComp.children.default = childIds;
   },

src/modules/editor/objects/DesignTemp/creates/Matrix.ts

@@ -190,10 +190,10 @@ export class Matrix {
   //  * @param {number} tx - translation for x
   //  * @param {number} ty - translation for y
   //  */
-  // translate(tx, ty) {
-  //   this.transform(1, 0, 0, 1, tx, ty);
-  //   return this;
-  // }
+  translate(tx: any, ty: any) {
+    this.transform(1, 0, 0, 1, tx, ty);
+    return this;
+  }
 
   // /**
   //  * Translate current matrix on x axis accumulative.

src/modules/editor/objects/DesignTemp/creates/createCompStyle.ts

@@ -71,9 +71,16 @@ export function createCompStyle(module: EditorModule, layout: Layout) {
 }
 
 export function parseTransform(trans: any) {
-  const transforms: string[] = [];
-  Object.entries(trans).forEach(([key, value]) => {
-    transforms.push(`${key}(${value})`);
-  });
-  return transforms.join(" ");
+  let transform = "";
+
+  if (trans.translateX || trans.translateY) {
+    transform = `translate(${trans.translateX || 0}, ${trans.translateY || 0})`;
+  }
+  if (trans.scale) {
+    transform += ` scale(${trans.scale})`;
+  }
+  if (trans.rotate) {
+    transform += ` rotate(${trans.rotate})`;
+  }
+  return transform;
 }