更新文字的缩放

src/modules/editor/components/CompUI/basicUI/Text/component2.tsx

@@ -7,13 +7,16 @@ import { View } from "../View";
 import HeadlessEditor from "./EditorCustom";
 import { useCompData } from "../../defines/hook";
 import { CompTextObj } from ".";
+import { Matrix } from "@/modules/editor/controllers/SelectCtrl/matrix";
+import { Transform } from "@/modules/editor/controllers/SelectCtrl/objects/transform";
+
 export const Component = defineComponent({
   props: {
     compId: string().def(""),
   },
   setup(props) {
     const comp = useCompData<CompTextObj>(props.compId);
-    const { store, actions, controls } = useEditor();
+    const { store, actions, controls , helper} = useEditor();
 
     const state = reactive({
       editableId: "",
@@ -30,7 +33,28 @@ export const Component = defineComponent({
       });
     }
 
-    return () => (
+    return () => {
+      
+       //样式的scale转 width
+       const m = Matrix.createFromMatrixStr(comp.layout.transformMatrix);
+       const t = new Transform();
+       t.setFromMatrix(m);
+       m.ty = 0
+       m.tx = 0
+       m.rotate( -m.getRotate() )
+
+      const [w, h] = comp.layout.size;
+     
+      const currWidth = w * t.scale.x
+      const textWidth = currWidth / t.scale.y;
+
+      const width = helper.designToNaturalSize(currWidth);
+      const textWidthSize = helper.designToNaturalSize(textWidth);
+      //  const height = helper.designToNaturalSize(h * t.scale.y);
+      m.invert();
+      //m x m1 = m
+
+      return (
       <View
         class={[textStyle]}
         compId={props.compId}
@@ -40,24 +64,31 @@ export const Component = defineComponent({
           }
         }}
       >
-        {state.editableId ? (
-          <EditorComp
-            compId={props.compId}
-            key={state.editableId}
-            onLost={() => {
-              state.editableId = "";
-              controls.textEditorCtrl.setCurrEditor(null);
-            }}
-          />
-        ) : (
-          <div
-            innerHTML={comp.value.text}
-            id={`editor_${props.compId}`}
-            class={[textStyle, store.isEditMode && `pointer-events-none`]}
-          />
-        )}
+
+      <div style={{width: width, transform:`${m.getMatrixStr()}`, transformOrigin: "0 0"}}>
+        <div  style={{width:textWidthSize, transform:`scale(${t.scale.y})`, transformOrigin: "0 0"}}>
+          {state.editableId ? (
+            <EditorComp
+              compId={props.compId}
+              key={state.editableId}
+              onLost={() => {
+                state.editableId = "";
+                controls.textEditorCtrl.setCurrEditor(null);
+              }}
+            />
+          ) : (
+            <div
+              innerHTML={comp.value.text}
+              id={`editor_${props.compId}`}
+              class={[textStyle, store.isEditMode && `pointer-events-none`]}
+            />
+          )}
+        
+          </div>
+        </div>
+        
       </View>
-    );
+    )};
   },
 });
 

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

@@ -94,7 +94,7 @@ export const SelectTransfer = defineComponent({
             <>
               
               {
-                !isTextEdit && <div
+                <div
                   class={[resizeStyle, scaleBottomRightStyle]}
                   style={{ transform: transferStyle.matrixInvert }}
                   id="scaleBottomright"
@@ -102,7 +102,7 @@ export const SelectTransfer = defineComponent({
               }
 
                 {
-                  !isTextEdit &&  <div
+                  <div
                     class={[resizeStyle, scaleBottomLeftStyle]}
                     style={{ transform: transferStyle.matrixInvert }}
                     id="scaleBottomleft"
@@ -110,14 +110,14 @@ export const SelectTransfer = defineComponent({
                 }
 
               {
-                  !isTextEdit && <div
+                <div
                   class={[resizeStyle, scaleTopLeftStyle]}
                   style={{ transform: transferStyle.matrixInvert }}
                   id="scaleTopleft"
                 />
               }
               {
-                !isTextEdit && <div
+                <div
                   class={[resizeStyle, scaleTopRightStyle]}
                   style={{ transform: transferStyle.matrixInvert }}
                   id="scaleTopright"
@@ -318,8 +318,8 @@ const scaleBottomCls = css`
 
 const resizeWidthBtnCls = css`
   position: absolute;
-  width: 8px;
-  height: 30px;
+  width: 6px;
+  height: 18px;
   border-radius: 4px;
   pointer-events: auto;
   cursor: ew-resize;
@@ -332,11 +332,11 @@ const resizeWidthBtnCls = css`
 `;
 
 const scaleRightCls = css`
-  right: -4px;
-  top: calc(50% - 15px);
+  right: -3px;
+  top: calc(50% - 9px);
 `;
 
 const scaleLeftCls = css`
-  left: -4px;
-  top: calc(50% - 15px);
+  left: -3px;
+  top: calc(50% - 9px);
 `;

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

@@ -139,6 +139,7 @@ export class Gizemo extends Events {
             return;
           }
 
+          
           //只是移动操作
           this.parent.x = t.x;
           this.parent.y = t.y;
@@ -151,6 +152,11 @@ export class Gizemo extends Events {
           this.parent.pivot.y = t.py;
           this.parent._boundsID++;
           this.parent.updateTransform();
+          
+          console.log("mouse=>", this.state.mouse);
+          if ( (this.state.mouse == "scaleright" || this.state.mouse == "scaleleft") && this.selected.length == 1 ) {
+             console.log("text width changing....")
+          }
 
           this.updateCompState();
           this.emit("change");

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

@@ -81,7 +81,11 @@ export function createCompStyle(
     adaptiveH: sizeOpts?.unit === "%",
   });
 
-  if (comp.compKey == "Text" ) {
+  // if (comp.compKey == "Text") {
+  //   console.log(comp.value.text, comp.layout.transformMatrix)
+  // }
+
+  if (comp.compKey == "Text") {
     if (layout.transformMatrix) {
       style.transform = layout.transformMatrix;
       style.transformOrigin = "0 0";
@@ -105,7 +109,6 @@ export function createCompStyle(
     }
   }
 
-  
 
   if (layout.background) {
     if (layout.background.color) {