update

src/modules/editor/components/CompUI/basicUI/View.tsx

@@ -53,12 +53,6 @@ export const View = defineComponent({
       const comp = helper.findComp(props.compId);
       if (!comp) return store.isEditMode ? <div>无效组件</div> : null;
       const isStreamCard = helper.isStreamCard(props.compId);
-      const isStreamChild = helper.isStreamCardChild(props.compId);
-      const cardId = helper.getCompTrees(props.compId)[1]?.id;
-      const cardIndex = pageCtrl.streamCardIds.indexOf(cardId)
-      const obj = new CompObject(pageCtrl.compMap[props.compId]);
-      const m = obj.worldTransform.clone();
-      m.invert();
       const gizmo = controls.selectCtrl.gizmo;
       const page = controls.pageCtrl;
 

src/modules/editor/controllers/ReactCtrl/history.ts

@@ -19,6 +19,8 @@ export class HistoryController {
   queues: Map<string, ValueSnap>[] = [];
   cacheSnapValues = new Map<string , ValueSnap>();
 
+  changeCbs:((flag:number)=>void)[]  = [];
+
   // 添加缓存记录
   record(snap: ValueSnap) {
     if ( !this.enable ) return;
@@ -31,7 +33,7 @@ export class HistoryController {
   }
 
   // 保存缓存记录到历史栈中
-  submit() {
+  submit(change:(flag:number)=>void=(flag)=>{console.log("default history changed ", flag)}) {
     if (this.cacheSnapValues.size < 1  || !this.enable) return;
 
     console.log("submiting history=>", this.cacheSnapValues.size);
@@ -39,7 +41,11 @@ export class HistoryController {
     const queue = this.queues;
 
     // 将缓存操作记录保存到当前指针的下一栈中
-    queue[++state.opIndex] = this.cacheSnapValues;
+    const index = ++state.opIndex;
+    queue[index] = this.cacheSnapValues;
+    this.changeCbs[index] = change;
+
+    // 重置缓存记录
     this.cacheSnapValues = new Map<string, ValueSnap>();
 
     // 设置栈的长度为指针的长度，舍弃后面的记录
@@ -57,17 +63,26 @@ export class HistoryController {
     if (!this.refCanUndo.value || !this.enable ) return;
 
     this.cacheSnapValues = new Map<string, ValueSnap>();
-    const snaps = this.queues[this.state.opIndex--]
+    const index = this.state.opIndex--;
+    const snaps = this.queues[index]
 
     snaps.forEach((vn)=>vn.undo())
+
+    const cb = this.changeCbs[index];
+  
+    cb && cb(1);
   }
 
   redo() {
     if (!this.refCanRedo.value  || !this.enable) return;
-    
+
     this.cacheSnapValues = new Map<string, ValueSnap>();
-    const snaps = this.queues[++this.state.opIndex];
+    const index = ++this.state.opIndex;
+    const snaps = this.queues[index];
     snaps.forEach(vn=>vn.redo());
+
+    const cb = this.changeCbs[index];
+    cb && cb(2);
   }
 
   //清除操作
@@ -75,6 +90,7 @@ export class HistoryController {
     if ( !this.enable ) return;
 
     this.queues = [];
+    this.changeCbs = [];
     this.state.currLen = 0;
     this.state.opIndex = -1;
     this.cacheSnapValues = new Map<string, ValueSnap>();

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

@@ -321,7 +321,6 @@ export class ObjsContainer {
     }
 
     updateSize() {
-        this.selected.forEach(s=>s.updateSize());
         this.init();
     }
 }

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

@@ -87,9 +87,7 @@ export class AssistMagnetCtrl {
                 if (rulers[n].horz != undefined) 
                 this.rulerYs.push(box.top *2 + (rulers[n].horz as number));
             }
-            //添加card内的其他对象
-            this.otherSlides = this.ctrl.getUnSelectChilds();
-
+          
             this.otherSlides.forEach(item=>{
                 const b = item.getBox();
                 const y = (b.y + box.top) *2.0
@@ -158,12 +156,15 @@ export class AssistMagnetCtrl {
             this.currRefXs = ret.values;
         }
     }
-
+    onBeforeTest() {
+        this.otherSlides = this.ctrl.getUnSelectChilds();
+    }
     onMouseUp() {
         this.rulerYs = [];
         this.rulerXs = [];
         this.currRefXs = [];
         this.currRefYs = [];
+        this.otherSlides = [];
     }
 
     draw() {

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

@@ -1,4 +1,6 @@
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
+import { history } from "../../objects/DesignTemp/factory";
+import { RxValue } from "../ReactCtrl/rxValue";
 import { Matrix } from "./matrix";
 import { DisplayObject } from "./objects/displayObject";
 import { isRectInter } from "./objects/mathUtils";
@@ -14,61 +16,85 @@ export class CompObject extends DisplayObject {
     comp:DesignComp;
     rect = new Rectangle();
 
-    _width = 0;
-    _height = 0;
-
-    constructor(c:DesignComp) {
+    state = RxValue.create({
+       transform: {
+            x: 0,
+            y: 0,
+            w: 0,
+            h: 0,
+            sx: 0,
+            sy: 0,
+            r: 0,
+       }
+    })
+
+    constructor(c:DesignComp, usHistory = false) {
         super();
         this.comp = c;
-        if (c.layout.size ) {
-            if (c.layout.size[0]) {
-                this._width =  designSizeToPx(c.layout.size[0]);
-            }
-            if (c.layout.size[1]) {
-                this._height =  designSizeToPx(c.layout.size[1]);
-            }
+        
+        // this.transform.setFromMatrix(Matrix.createFromMatrixStr(c.layout.transformMatrix || "matrix(1,0,0,1,0,0)"));
+        // return;
+        // console.log("xxxxxxxxxxxxx2222222222xxxxxxxxxxxxxx");
+
+        const wmtx = Matrix.createFromMatrixStr(c.layout.transformMatrix || "matrix(1,0,0,1,0,0)")
+        const s = wmtx.getScale();
+
+        let t = {
+            x: wmtx.tx,
+            y: wmtx.ty,
+            sx: s.x,
+            sy: s.y,
+            w: designSizeToPx(c.layout.size[0]),
+            h: designSizeToPx(c.layout.size[1]),
+            r: wmtx.getRotate()
         }
-        if (c.$el) {
-            if (!c.layout.size) {
-                this._width = c.$el.clientWidth;
-                this._height = c.$el.clientHeight;
-                c.layout.size = [pxToDesignSize(this._width), pxToDesignSize(this._height)]
-            } else if (!c.layout.size[0]) {
-                this._width = c.$el.clientWidth;
-                c.layout.size[0] = pxToDesignSize(this._width)
-
-            }else if (!c.layout.size[1]) {
-                this._height = c.$el.clientHeight;
-                c.layout.size[1] = pxToDesignSize(this._height)
+        this.state.setTransform(t);
+        let inited = true;
+
+        this.state.onTransformChanged((tsf)=>{
+            const m = new Matrix();
+            m.setTransform(tsf.x, tsf.y, 0, 0, tsf.sx, tsf.sy, tsf.r, 0, 0);
+            this.transform.setFromMatrix(m);
+            this._boundsID++;
+            this.updateTransform();
+            if (!inited) {
+                const s:any = [pxToDesignSize(tsf.w), pxToDesignSize(tsf.h)];
+                this.comp.layout.setSize(s);
+                this.comp.layout.setTransformMatrix(m.getMatrixStr())
             }
+            inited = false;
+        })
+
+        if (usHistory) {
+            this.state.setHistory(history);
         }
-        this.transform.setFromMatrix(Matrix.createFromMatrixStr(c.layout.transformMatrix || "matrix(1,0,0,1,0,0)"));
-        this._boundsID++;
-        
-        this.updateTransform();
     }
 
     get width() {
-        return  this._width
+        return  this.state.transform.w;
     }
+
     set width( value ) {
-        this._width = value;
-        this.comp.layout.size[0] = pxToDesignSize(this._width);
+        const t = {...this.state.transform};
+        t.w = value;
+        this.state.setTransform(t);
     }
+
     set height( value ) {
-        this._height = value;
-        this.comp.layout.size[1] = pxToDesignSize(this._height);
+        const t = {...this.state.transform};
+        t.h = value;
+        this.state.setTransform(t);
     }
     
     get height() {
-        return this._height
+        return this.state.transform.h
     }
 
     translate(x:number, y:number) {
-        this.x = this.x + x;
-        this.y = this.y + y;
-        this.updateTransform();
-        this.comp.layout.setTransformMatrix(this.worldTransform.getMatrixStr());
+        const t = {...this.state.transform};
+        t.x +=x;
+        t.y +=y;
+        this.state.setTransform(t);
     }
     
     getRect(){
@@ -150,19 +176,4 @@ export class CompObject extends DisplayObject {
         this.worldTransform.apply(p,p);
         return p;
     }
-
-    updateSize() {
-        const c = this.comp;
-        if (c.layout.size ) {
-            if (c.layout.size[0]) {
-                this._width =  designSizeToPx(c.layout.size[0]);
-            }
-            if (c.layout.size[1]) {
-                this._height =  designSizeToPx(c.layout.size[1]);
-            }
-        }
-        // this.transform.setFromMatrix(Matrix.createFromMatrixStr(c.layout.transformMatrix || "matrix(1,0,0,1,0,0)"));
-        this.updateTransform();
-        this._boundsID++;
-    }
 }

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

@@ -67,15 +67,19 @@ export class Gizemo extends Events {
         return this.selected.map(item=>item.comp.id);
     }
     
+
+
+
     getBound() {
         //加上parent的旋转和平移
         this.tempBound.clear();
-        this.tempBound.addFrame(this.parent.transform, 0, 0, this.rect.width, this.rect.height);
+        this.tempBound.addFrame(this.parent.transform, 0, 0, this.width, this.height);
         return this.tempBound.getRectangle();
     }
     get width() {
         return  this.rect.width
     }
+
     get height() {
         return this.rect.height;
     }
@@ -104,20 +108,18 @@ export class Gizemo extends Events {
             
             const objs :any= [];
             t.selected.forEach((oid) => {
-              const obj = new CompObject(this.getCompObj(oid))
+              const obj = new CompObject(this.getCompObj(oid), true)
               let box = obj.calculateBounds();
               this.aabb.addBounds(box);
               
               objs.push(obj);
               this.parent.addChildWorldNoChange(obj);
-                let first = true;
-                const s = obj.comp.layout.onSizeChanged(()=>{
-                    if (first) {
-                        first = false;
-                        return;
-                    }
-                    this.updateSize();
-                })
+
+              let first = true;
+              obj.state.onTransformChanged(()=>{
+                if (!first)  this.updateSize();
+                first = false;
+              })
             });
 
             this.selected = objs;
@@ -478,18 +480,16 @@ export class Gizemo extends Events {
     }
 
     updateSize() {
-
-        let selected = this.selected;
-        let n = selected.length;
-        while (n--) {
-            let child = selected[n];
-            this.parent.removeChildWorldNoChange(child)
-            child.comp.layout.transformMatrix = child.worldTransform.getMatrixStr();
-        }
-        this.parent.removeChildren(0, this.parent.children.length);
-
-
-        this.selected.forEach(s=>s.updateSize());
+        // let selected = this.selected;
+        // let n = selected.length;
+        // while (n--) {
+        //     let child = selected[n];
+        //     this.parent.removeChildWorldNoChange(child)
+        //     child.comp.layout.transformMatrix = child.worldTransform.getMatrixStr();
+        // }
+        // this.parent.removeChildren(0, this.parent.children.length);
+
+        this.setPivot(0)
         this.aabb.clear();
         this.selected.forEach((obj) => {
           let box = obj.calculateBounds();
@@ -500,14 +500,24 @@ export class Gizemo extends Events {
         this.parent.y = this.rect.y;
         this.parent.scale.x = 1;
         this.parent.scale.y = 1;
+        this.parent.rotation = 0;
         this.parent.updateTransform();
 
-        n = selected.length;
-        while (n--) {
-            let child = selected[n];
-            this.parent.addChildWorldNoChange(child);
-        }
-
+        this.state.transform.w = this.rect.width;
+        this.state.transform.h = this.rect.height;
+        this.state.transform.x = this.rect.x;
+        this.state.transform.y = this.rect.y;
+        this.state.transform.sx = 1;
+        this.state.transform.sy = 1;
+        this.state.transform.r = 0;
+        this.state.transform.px = 0;
+        this.state.transform.py = 0;
+
+        // n = selected.length;
+        // while (n--) {
+        //     let child = selected[n];
+        //     this.parent.addChildWorldNoChange(child);
+        // }
         this.parent.updateTransform();
         this.emit("change");
     }

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

@@ -132,7 +132,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     while(n--) {
       if (gizmo.selectedIds.indexOf(childs[n]) == -1) {
-        out.push(new CompObject( this.store.compMap[childs[n]]));
+        out.push(new CompObject( page.compMap[childs[n]]));
       }
     }
     return out;
@@ -243,6 +243,10 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     this._initMovePos.x = -1;
     this._initMovePos.y = -1;
     this.gizmo.state.mouse = this._mouseDownFlag;
+
+    if (this._state != 0) {
+      this.assistMagnet?.onBeforeTest();
+    }
   }
 
   _initMovePos = { x: -1, y: -1 };
@@ -582,6 +586,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       return;
     }
 
+    console.log("update gizmo................")
+
     this.assistCtrl?.flashDrawCardDists();
     this.transferStyle.showGizmo = false; 
 

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

@@ -466,7 +466,7 @@ export const editActions = EditorModule.action({
     childs.push(...ids);
     this.controls.pageCtrl.currStreamCard.children.setDefault(childs);
   },
-  
+
   ctrlAndA() {
     const childrens = (this.store.currStreamCard.children.default || []).slice(
       0
@@ -813,12 +813,7 @@ export const editActions = EditorModule.action({
         stepIndexMap[minIndex] = true;
         child.translate(minIndex * step + min - x, 0);
       });
-
-      const selects = gizmo.selectedIds.slice(0)
-      //重新选择当前的元素
-      // gizmo.reSelectCurrElemnts();
-      gizmo.selectObjs(selects, true)
-
+      gizmo.parent.updateTransform();
       history.submit();
       return;
     }
@@ -842,8 +837,7 @@ export const editActions = EditorModule.action({
           break;
       }
     });
-    gizmo.updateSize();
-    selectCtrl.upgateGizmoStyle();
+    gizmo.parent.updateTransform();
     history.submit();
   },
 
@@ -875,6 +869,7 @@ export const editActions = EditorModule.action({
     const anchorBox = this.helper.findComp(gizmo.state.lastId);
     if (!anchorBox) return;
 
+
     const anchor = new CompObject(anchorBox);
     const anchorRect = anchor.getBox();
 
@@ -916,9 +911,9 @@ export const editActions = EditorModule.action({
         stepIndexMap[minIndex] = true;
         child.translate(0, minIndex * step + min - y);
       });
-      objc.updateSize();
-      selectCtrl.upgateGizmoStyle();
-      history.submit();
+
+      gizmo.parent.updateTransform();
+      history.submit()
       return;
     }
 
@@ -941,8 +936,6 @@ export const editActions = EditorModule.action({
           break;
       }
     });
-    objc.updateSize();
-    selectCtrl.upgateGizmoStyle();
     history.submit();
   },
 
@@ -950,7 +943,6 @@ export const editActions = EditorModule.action({
   fullCompWidth(comp: DesignComp) {
     comp.layout.size[0] = this.controls.screenCtrl.getCurrScreenWidth();
   },
-  
 
   // 取消打组
   cancelGroupComps(groupComp: DesignComp) {

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

@@ -94,6 +94,8 @@ export function cloneObj(o: DesignComp ) {
     data.id = nanoid();
     const obj = createObj({compKey: o.compKey}, false)
     obj.fromJson(data);
+
+    
     return obj;
 }