update

src/modules/editor/components/CompUI/basicUI/Page/index.ts

@@ -14,6 +14,7 @@ export const { createComp, useCompData } = createCompHooks({
     default: () => [] as string[],
   },
   layout: {
+    size: [750, 800],
     background: {
       color: "#ffffff",
     },

src/modules/editor/components/CompUI/customUI/Cards/Card11/index.ts

@@ -14,6 +14,7 @@ export const { createComp, useCompData, useCreateChild } = createCompHooks({
   layout: {
     padding: "0.5rem 0",
     // margin: "0.3rem 0.35rem",
+    size: [750, 500],
   },
   value: {
     columns: 3,

src/modules/editor/components/CompUI/customUI/Cards/Card12/index.ts

@@ -17,6 +17,7 @@ export const { createComp, useCompData } = createCompHooks({
   layout: {
     padding: "0.5rem 0",
     // margin: "0.5rem 0.35rem",
+    size: [750, 500],
   },
   children: {
     text: () =>

src/modules/editor/components/CompUI/customUI/Cards/Card13/index.ts

@@ -14,6 +14,7 @@ export const { createComp, useCompData } = createCompHooks({
   layout: {
     padding: "0.5rem 0",
     // margin: "0 0.35rem",
+    size: [750, 500],
   },
   children: {
     text: () =>

src/modules/editor/components/CompUI/customUI/Cards/Card14/index.ts

@@ -14,6 +14,7 @@ export const { createComp, useCompData } = createCompHooks({
   layout: {
     padding: "0.5rem 0",
     // margin: "0 0.35rem",
+    size: [750, 500],
   },
   children: {
     text: () =>

src/modules/editor/components/CompUI/customUI/Cards/Card15/index.ts

@@ -17,6 +17,7 @@ export const { createComp, useCompData } = createCompHooks({
   layout: {
     padding: "0.5rem 0",
     // margin: "0.5rem 0.35rem",
+    size: [750, 500],
   },
   children: {
     title: () =>

src/modules/editor/components/CompUI/customUI/Cards/Card2/index.tsx

@@ -17,6 +17,7 @@ export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
     padding: "0 0 0.2rem 0",
+    size: [750, 500],
   },
   children: {
     bgImg: () =>

src/modules/editor/components/CompUI/customUI/Cards/Card3/index.ts

@@ -17,6 +17,7 @@ export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
     padding: "0.2rem",
+    size: [750, 600],
   },
   children: {
     bgImg: () =>

src/modules/editor/components/CompUI/customUI/Cards/Card4/index.ts

@@ -17,6 +17,7 @@ export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
     padding: "0.2rem",
+    size: [750, 300],
   },
   children: {
     bgImg: () =>

src/modules/editor/components/CompUI/customUI/Cards/Card5/index.ts

@@ -15,7 +15,9 @@ export const options = {
 
 export const { createComp, useCompData } = createCompHooks({
   value: {},
-  layout: {},
+  layout: {
+    size: [750, 500]
+  },
   children: {
     bgImg: () =>
       createCompId("Image", {

src/modules/editor/components/CompUI/customUI/Texts/Text1/index.ts

@@ -36,6 +36,7 @@ export const options = {
 export const { createComp, useCompData, useCreateChild } = createCompHooks({
   layout: {
     padding: " 0 0.2rem",
+    size: [750, 100]
   },
   value: {
     columns: 5,

src/modules/editor/components/CompUI/customUI/Titles/Title2/index.ts

@@ -13,6 +13,7 @@ export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
     padding: "0.5rem 0",
+    size: [750, 300]
   },
   children: {
     title: () =>

src/modules/editor/components/CompUI/customUI/Titles/Title3/index.ts

@@ -16,6 +16,7 @@ export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
     padding: "0.2rem",
+    size: [750,300]
   },
   children: {
     title: () =>

src/modules/editor/components/Preview/index.tsx

@@ -8,7 +8,7 @@ export default defineUI({
     return () => (
       <div
         class="overflow-hidden min-h-100vh"
-        style={helper.createStyle(helper.findRootComp()?.layout || {})}
+        style={helper.createStyle(helper.findRootComp()?.layout || {size: [750, 800]})}
       >
         {store.pageCompIds.map((id) => {
           const compKey = store.designData.compMap[id]?.compKey;

src/modules/editor/controllers/SelectCtrl/ObjsContainer.ts

@@ -75,9 +75,16 @@ export class ObjsContainer {
 
         if (n == 1) { //单对象
             let obj = selected[0];
-            //构建当前对象的转换矩阵
-            let rect = new Rectangle(0, 0, obj.width, obj.height);
+
+            const s = obj.worldTransform.getScale();
+            let rect = new Rectangle(0, 0, obj.width * s.x, obj.height*s.y);
             this.rect = rect;
+            obj.transform.scale.x = 1;
+            obj.transform.scale.y = 1;
+            obj.width = rect.width;
+            obj.height = rect.height;
+            obj.updateTransform();
+
             this.parent.transform.setFromMatrix(obj.worldTransform);
             this.parent.updateTransform();
             this.parent.addChildWorldNoChange(obj);
@@ -85,6 +92,7 @@ export class ObjsContainer {
             return;
         }
 
+
         while (n--) {
             let obj = selected[n];
             let box = obj.calculateBounds();
@@ -98,6 +106,7 @@ export class ObjsContainer {
 
         this.rect = rect;
 
+
         //设置位置
         let p = this.parent.position;
         p.x = center.x;
@@ -110,6 +119,8 @@ export class ObjsContainer {
 
         //设置旋转
         this.parent.scale = { x: 1, y: 1 } as any;
+        this.parent.width = rect.width;
+        this.parent.height = rect.height;
 
         //设置旋转
         this.parent.rotation = selectedRotation;
@@ -200,18 +211,40 @@ export class ObjsContainer {
         this.parent.scale.x = x;
         this.parent.scale.y = y;
         this.parent.updateTransform();
-
         this.updateCompState();
     }
 
     scaleX(x:number) {
         this.parent.scale.x = x;
+
         this.parent.updateTransform();
         this.updateCompState();
     }
+
     scaleY(y:number) {
         this.parent.scale.y = y;
+
         this.parent.updateTransform();
+
+       
+        this.updateCompState();
+    }
+
+    //清除当前元素的缩放 改为类容的宽度
+    applyScaleToChildSize() {
+        if (this.selected.length  != 1 ) return;
+       
+        const w = this.width *this.parent.scale.x;
+        const h = this.height  *this.parent.scale.y;
+        this.parent.scale.x = 1;
+        this.parent.scale.y = 1;
+        this.parent.updateTransform();
+
+        this.rect.width = w;
+        this.rect.height = h;
+        this.selected[0].width = w;
+        this.selected[0].height = h;
+
         this.updateCompState();
     }
 

src/modules/editor/controllers/SelectCtrl/compObj.ts

@@ -50,7 +50,15 @@ export class CompObject extends DisplayObject {
     get width() {
         return  this._width
     }
-
+    set width( value ) {
+        this._width = value;
+        this.comp.layout.size[0] = pxToDesignSize(this._width);
+    }
+    set height( value ) {
+        this._height = value;
+        this.comp.layout.size[1] = pxToDesignSize(this._height);
+    }
+    
     get height() {
         return this._height
     }

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

@@ -678,6 +678,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
         scaleIndex = dirOrth.indexOf(dir);
         if (scaleIndex == 2) scaleIndex = 0;
       }
+      
       let pivot = objContainer.setPivot(scaleIndex);
 
       this.scaleIndex = scaleIndex;
@@ -729,6 +730,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
         objContainer.scaleY(this.lastScale.y);
       }
     }
+
     this.upgateGizmoStyle();
   }
 
@@ -738,7 +740,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       let preScale = { x: this.initScale.x, y: this.initScale.y };
       let scaleIndex = this.scaleIndex;
       let lastScale = { x: this.lastScale.x, y: this.lastScale.y };
-
+      this.objContainer?.applyScaleToChildSize();
+      this.upgateGizmoStyle();
       // this.editor.history.record({
       //     undo:()=>{
       //         this.objContainer.setPivot( scaleIndex );

src/modules/editor/controllers/SelectCtrl/matrix.ts

@@ -39,7 +39,7 @@ export class Matrix {
     out.setMatrixStr(str);
     return out;
   }
-  
+
   setMatrixStr(transformMatrix:string) {
     const values = transformMatrix.split("(")[1].split(")")[0].split(",");
     this.a = +values[0];
@@ -170,6 +170,13 @@ export class Matrix {
     return this;
   }
 
+  getScale() {
+    const a = this.a, b = this.b, c = this.c, d = this.d;
+    const x = Math.sqrt((a * a) + (b * b));
+    const y = Math.sqrt((c * c) + (d * d));
+    return {x, y};
+  }
+  
   rotate(angle: number) {
     const cos = Math.cos(angle);
     const sin = Math.sin(angle);

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

@@ -41,6 +41,7 @@ const transform: TransCreateFn = (transType: string) => ({
   mousemove() {
     const style = this.module.helper.createStyle({
       transform: getTransform.call(this, transType),
+      size: [0,0]
     });
     Object.entries(style).forEach(([key, value]: any[]) => {
       this.compEl.style[key] = value;

src/modules/editor/module/helpers/index.ts

@@ -70,7 +70,7 @@ export const helpers = EditorModule.helper({
     getParentComp(compId);
     return comps;
   },
-  createStyle(layout: Partial<Layout>) {
+  createStyle(layout: Partial<Layout> & {size:any[]}) {
     return createCompStyle(this, layout);
   },
   isCurrComp(compId: string) {

src/modules/editor/objects/DesignTemp/DesignComp.ts

@@ -11,7 +11,7 @@ export class DesignComp {
   thumbnail = "";
   compKey: ICompKeys = "Text";
   value: any = undefined;
-  layout: Layout = {};
+  layout: Layout = {size: [200, 200]};
   background: Background = {};
   children: Record<string, any> & { default?: string[] } = {};
 
@@ -71,4 +71,14 @@ export class DesignComp {
     if (!this.layout.size) this.layout.size = [];
     this.layout.size[1] = height;
   }
+  setW(w: number) {
+    if (!this.layout.size) this.layout.size = [];
+    this.layout.size[0] = w;
+  }
+  setSize(w: number, h: number) {
+    if (!this.layout.size) this.layout.size = [];
+
+    this.layout.size[0] = w;
+    this.layout.size[1] = h;
+  }
 }

src/modules/editor/typings.ts

@@ -7,7 +7,7 @@ export type EditorMode = "editPage" | "editComp" | "preview";
 export type Layout = {
   position?: "absolute";
   visible?: boolean;
-  size?: number[]; // width height
+  size: number[]; // width height
   mask?: string;
   alignSelf?: string;
   transform?: {
@@ -20,7 +20,7 @@ export type Layout = {
   margin?: string;
   padding?: string;
   transformMatrix?: string;
-  
+
   background?: Background;
 };