update

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

@@ -6,6 +6,7 @@ import { View } from "../View";
 import { css } from "@linaria/core";
 import { CompImage, ImageValue } from "@/modules/editor/objects/Elements/image";
 import { useCompData } from "../../defines/createCompHooks";
+import { utils } from "@/modules/editor/objects/Elements/utils";
 
 
 export const Component = defineComponent({
@@ -33,15 +34,17 @@ export const Component = defineComponent({
       const value = comp.value;
       const isCropping = controls.cropCtrl.state.compId == props.compId;
       const sizes = comp.imageObj.state.size;
-      const pos = comp.imageObj.state.pos;
+      // const pos = comp.imageObj.state.pos;
+      console.log( comp.imageObj.state.dirty );
+
       const styleObj = {
-          transform: comp.imageObj.localTransform.getMatrixStr(),
+          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])
+          // left: helper.designToNaturalSize(pos[0]),
+          // top: helper.designToNaturalSize(pos[1])
       }
 
    

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

@@ -19,17 +19,14 @@ class CompBase<T extends object> extends Container {
     
     state = RxValue.create({
         size: [0, 0],
-        pos: [0,0],
-        pivots: [0,0],
-        scale: [1,1],
-        rotation: 0,
         visible: true,
         opacity: 1,
         clipPath: "",
         bgColor: "transparent",
         radius: "", 
         position: "absolute" as "absolute" | "relative",
-        children: [] as string[]
+        children: [] as string[],
+        dirty: 0,
     });
 
     constructor(value:T) {
@@ -51,14 +48,12 @@ class CompBase<T extends object> extends Container {
 
     copyTransform(target:CompBase<any>) {
         this.state.size[0] = target.state.size[0];
-        this.state.size[1] = target.state.size[1];
-        this.state.pos[0] = target.state.pos[0];
-        this.state.pos[1] = target.state.pos[1];
-        this.state.scale[0] = target.state.scale[0];
-        this.state.scale[1] = target.state.scale[1];
-        this.state.pivots[0] = target.state.pivots[0];
-        this.state.pivots[1] = target.state.pivots[1];
-        this.state.rotation = target.state.rotation;
+        // this.state.size[1] = target.state.size[1];
+        // this.state.pos[0] = target.state.pos[0];
+        // this.state.pos[1] = target.state.pos[1];
+        // this.state.scale[0] = target.state.scale[0];
+        // this.state.scale[1] = target.state.scale[1];
+        // this.state.rotation = target.state.rotation;
     }
 
     changeChildNodes(ids: string[], WordNoChange = false) {
@@ -106,8 +101,9 @@ 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;
-        const scale = state.scale;
+        // const pos = state.pos;
+        let _ = state.dirty;
+        // _ = state.rotation as any;
 
         if (!state.visible) {
             style.display = "none";
@@ -130,19 +126,18 @@ class CompBase<T extends object> extends Container {
             if (size[1] > -1) {
                 style.height = utils.designToNaturalSize(size[1]);
             }
-            style.left = utils.designToNaturalSize(pos[0]);
-            style.top = utils.designToNaturalSize(pos[1]);
+            // style.left = utils.designToNaturalSize(pos[0]);
+            // style.top = utils.designToNaturalSize(pos[1]);
         } else {
             style.width = utils.designToNaturalSize(size[0]);
             style.height = utils.designToNaturalSize(size[1]);
-            style.left = utils.designToNaturalSize(pos[0]);
-            style.top = utils.designToNaturalSize(pos[1]);
+            // style.left = utils.designToNaturalSize(pos[0]);
+            // style.top = utils.designToNaturalSize(pos[1]);
 
-            const pivot = state.pivots;
             style.transformOrigin = `0 0`;
-            const transform = new Matrix();
-            transform.setTransform(0, 0, pivot[0], pivot[1], scale[0], scale[1], state.rotation, 0, 0);
-            style.transform = transform.getMatrixStr(utils.designSizeToPx);
+            // const transform = new Matrix();
+           
+            style.transform = this.localTransform.getMatrixStr(utils.designSizeToPx);
         }
 
         return style;
@@ -178,27 +173,6 @@ class CompBase<T extends object> extends Container {
         this.state.onSizeChanged((size)=>{
             this.width = size[0];
             this.height = size[1];
-
-            this.emit("transformChange");
-        })
-
-        this.state.onPosChanged((pos)=>{
-            this.position.x = pos[0]
-            this.position.y = pos[1]
-            this.emit("transformChange");
-        })
-
-        this.state.onScaleChanged((scales)=>{
-            this.scale.x = scales[0]
-            this.scale.y = scales[1]
-            this.emit("transformChange");
-        })
-
-        this.state.onRotationChanged((r)=>{
-            this.rotation = r;
-            this.updateTransform();
-
-            console.log("rr==>", r);
             this.emit("transformChange");
         })
     }
@@ -243,18 +217,12 @@ class CompBase<T extends object> extends Container {
         let targetPivot = pivots[index];
 
         let point = { x: targetPivot.x, y: targetPivot.y } as any;
-        this.transform.localTransform.apply(point, point);
+        this.transform.worldTransform.apply(point, point);
 
         this.transform.pivot = targetPivot as any;
         this.transform.position.x = point.x;
         this.transform.position.y = point.y;
 
-        this.state.pivots[0] = targetPivot.x;
-        this.state.pivots[1] = targetPivot.y;
-
-        this.state.pos[0] = point.x;
-        this.state.pos[1] = point.y;
-
         this.updateTransform();
 
         this.pivotIndex = index;

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

@@ -94,7 +94,7 @@ export async function createImageComp(
           srcOffy = (size[1] - srcHeight) / 2.0;
         }
         obj.imageObj.state.size = [srcWidth, srcHeight];
-        obj.imageObj.state.pos = [srcOffx, srcOffy];
+        obj.imageObj.position = {x: srcOffx, y:srcOffy} as any;
         obj.imageObj.updateTransform();
       }
       obj.init();

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

@@ -34,9 +34,10 @@ export class NodeTransfer extends CompBase<TransferValue> {
         const rect = this._bounds.getRectangle();
         this.state.size[0] = rect.width;
         this.state.size[1] = rect.height;
-        this.state.pos[0] = rect.x;
-        this.state.pos[1] = rect.y;
 
+        this.position = {x: rect.x, y: rect.y} as any;
+
+        this.updateSeleted();
 
         this.value.onSelectedChanged(()=>{
             this.updateSeleted();
@@ -45,14 +46,18 @@ export class NodeTransfer extends CompBase<TransferValue> {
     }
 
     translate(x: number, y:number) {
-        const pos = this.state.pos.slice(0);
-        pos[0] +=x;
-        pos[1] +=y;
-        this.state.setPos(pos);
+       
+        this.x += x;
+        this.y += y;
+        this.state.dirty +=1;
+
+        this.updateTransform();
     }
 
     rotate(r:number) {
-        this.state.setRotation(r);
+        this.rotation = r;
+        this.updateTransform();
+        this.state.dirty +=1;
     }
 
     updateSeleted() {