update

src/modules/editor/components/CompUI/basicUI/Image2/component.tsx

@@ -30,23 +30,9 @@ export const Component = defineComponent({
 
    
     return () => {
-
       const value = comp.value;
       const isCropping = controls.cropCtrl.state.compId == props.compId;
-      const sizes = comp.imageObj.state.size;
-      // const pos = comp.imageObj.state.pos;
-      console.log( comp.imageObj.state.dirty );
-
-      const styleObj = {
-          transform: comp.imageObj.localTransform.getMatrixStr(utils.designSizeToPx),
-          transformOrigin: "0 0 ",
-          width: helper.designToNaturalSize(sizes[0]),
-          height: helper.designToNaturalSize(sizes[1]),
-          position: "absolute",
-          // left: helper.designToNaturalSize(pos[0]),
-          // top: helper.designToNaturalSize(pos[1])
-      }
-
+      const styleObj = comp.imageObj.createStyle();
    
       return (
         <View

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

@@ -216,6 +216,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
           box = card.getBoundingClientRect();
           const cardX = this.helper.pxToDesignSize(pageX);
           const cardY = this.helper.pxToDesignSize(e.clientY - box.top);
+          console.log( cardX, cardY);
+          
           isClickSelRect = this._objTransfor.testWorldClick(cardX, cardY);
           if (isClickSelRect) {
             this._state = MODE_MOVING;
@@ -403,12 +405,9 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     const magnet = this.assistMagnet as AssistMagnetCtrl;
 
     console.log("movinging")
-    if (this._initMovePos.x == -1 && this._initMovePos.y == -1) {
-        this._initMovePos = { x: objContainer.x, y: objContainer.y };
-    }
+ 
     magnet.test(e);
 
-    objContainer.setPivot(0);
     objContainer.translate(
       this.helper.pxToDesignSize( magnet.clientX - this._movePreClientX),
       this.helper.pxToDesignSize(magnet.clientY - this._movePreClientY),
@@ -707,7 +706,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       if (angle < 0) angle += 2 * Math.PI;
       this.ratatePre = angle;
 
-      this.objinitAngleRad = objContainer.parent.rotation;
+      this.objinitAngleRad = objContainer.rotation;
 
       this.rotateCmd = true;
       return;
@@ -749,7 +748,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   rotateMouseUp(e: MouseEvent) {
     this.rotateCenter = undefined;
     if (!this.rotateCmd) return;
-    // this._objTransfor?.setPivot(0);
+
     this.rotateCmd = false;
   }
 

src/modules/editor/controllers/SelectCtrl/objects/displayObject.ts

@@ -124,7 +124,7 @@ transform = new Transform();
     const parentRef = this.parent;
 
     this.parent = undefined;
-    // this.transform = this._tempDisplayObjectParent.transform;
+    this.transform = this._tempDisplayObjectParent.transform;
 
     if (!rect) {
       if (!this._localBoundsRect) {
@@ -137,7 +137,7 @@ transform = new Transform();
     const bounds = this.getBounds(false, rect);
 
     this.parent = parentRef;
-    // this.transform = transformRef;
+    this.transform = transformRef;
 
     return bounds;
   }

src/modules/editor/objects/Elements/base.ts

@@ -26,7 +26,7 @@ class CompBase<T extends object> extends Container {
         radius: "", 
         position: "absolute" as "absolute" | "relative",
         children: [] as string[],
-        dirty: 0,
+        matrix: "matrix(1,0,0,1,0,0)",
     });
 
     constructor(value:T) {
@@ -101,9 +101,7 @@ class CompBase<T extends object> extends Container {
         const state = this.state;
         const style :any = {opacity: state.opacity}
         const size = state.size;
-        // const pos = state.pos;
-        let _ = state.dirty;
-        // _ = state.rotation as any;
+   
 
         if (!state.visible) {
             style.display = "none";
@@ -136,8 +134,7 @@ class CompBase<T extends object> extends Container {
 
             style.transformOrigin = `0 0`;
             // const transform = new Matrix();
-           
-            style.transform = this.localTransform.getMatrixStr(utils.designSizeToPx);
+            style.transform = this.state.matrix;
         }
 
         return style;
@@ -187,7 +184,7 @@ class CompBase<T extends object> extends Container {
             const obj = CompBase.objsMap.get(c) as any;
             worldNoChange ? this.addChildWorldNoChange(obj) :  this.addChild(obj);
         })
-        this.updateTransform();
+        this.updateMatrix();
         this.changingChildWordNoChange=undefined;
     }
 
@@ -217,19 +214,25 @@ class CompBase<T extends object> extends Container {
         let targetPivot = pivots[index];
 
         let point = { x: targetPivot.x, y: targetPivot.y } as any;
-        this.transform.worldTransform.apply(point, point);
+        this.transform.localTransform.apply(point, point);
 
         this.transform.pivot = targetPivot as any;
         this.transform.position.x = point.x;
         this.transform.position.y = point.y;
 
-        this.updateTransform();
+        this.updateMatrix();
 
         this.pivotIndex = index;
 
+     
         return { x: point.x, y: point.y};
     }
 
+    updateMatrix() {
+        this.updateTransform();
+        this.state.setMatrix(this.localTransform.getMatrixStr(utils.designSizeToPx))
+    }
+
 }
 
 export {CompBase};

src/modules/editor/objects/Elements/image.ts

@@ -46,7 +46,6 @@ export class CompImage extends CompBase<ImageValue> {
         //重新把对象放置在容器中间
       }
     });
-    this.updateTransform();
   }
 }
 
@@ -95,7 +94,7 @@ export async function createImageComp(
         }
         obj.imageObj.state.size = [srcWidth, srcHeight];
         obj.imageObj.position = {x: srcOffx, y:srcOffy} as any;
-        obj.imageObj.updateTransform();
+        obj.imageObj.updateMatrix();
       }
       obj.init();
       obj.setHistory(h);

src/modules/editor/objects/Elements/transfer.ts

@@ -37,27 +37,27 @@ export class NodeTransfer extends CompBase<TransferValue> {
 
         this.position = {x: rect.x, y: rect.y} as any;
 
-        this.updateSeleted();
 
         this.value.onSelectedChanged(()=>{
             this.updateSeleted();
         })
+
         super.init();
+        
+        this.updateMatrix();
     }
 
     translate(x: number, y:number) {
        
         this.x += x;
         this.y += y;
-        this.state.dirty +=1;
 
-        this.updateTransform();
+        this.updateMatrix();
     }
 
     rotate(r:number) {
         this.rotation = r;
-        this.updateTransform();
-        this.state.dirty +=1;
+        this.updateMatrix();
     }
 
     updateSeleted() {