Merge branch 'dev' of http://124.70.149.18:10880/lianghj/queenshow into dev

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

@@ -219,55 +219,69 @@ export class ObjsContainer {
         this.updateCompState();
     }
 
-    applyChildWidth(option:{Width?:number, Height?:number}) {
-        if (this.selected.length != 1) return;
+    applyChildWidth(option:{scaleX?:number, scaleY?:number}) {
+        // if (this.selected.length != 1) return;
         const obj = this.selected[0];
 
         //先移除
         this.parent.removeChildWorldNoChange(obj);
         const m = new Matrix();
-        m.scale(option.Width ? option.Width/obj.width :1 , option.Height? option.Height / obj.height: 1)
+        m.scale(option.scaleX ? option.scaleX : 1, option.scaleY? option.scaleY  : 1)
         m.invert();
         m.prepend(obj.worldTransform)
         obj.transform.setFromMatrix(m)
-        if (option.Width) {
-            obj.width = option.Width
+        if (option.scaleX) {
+            obj.width = option.scaleX * obj.width;
         }
-        if (option.Height) {
-            obj.height = option.Height
+        if (option.scaleY) {
+            obj.height = option.scaleY * obj.height;
         }
+        
         obj.updateTransform();
         this.parent.addChildWorldNoChange(obj);
     }
-    scaleSize(Width:number, Height:number) {
-        this.parent.scale.y = Height / this.rect.height
-        this.parent.scale.x = Width / this.rect.width
+    scaleSize(x:number, y:number) {
+
+        let preW = this.parent.scale.x * this.rect.width;
+        let preH = this.parent.scale.y * this.rect.height;
+
+        this.parent.scale.y = y 
+        this.parent.scale.x = x
+
+        const Width = this.parent.scale.x * this.rect.width;
+        const Height = this.parent.scale.y * this.rect.height;
+
         this.parent.updateTransform();
-        this.applyChildWidth({Width, Height})
+
+        this.applyChildWidth({scaleX: Width / preW, scaleY: Height/preH})
         this.updateCompState();
+        
     }
 
-    scaleWidth(Width:number) {
+    scaleWidth(x:number) {
+        const prew = this.parent.scale.x * this.rect.width;
         //怎么改对应的偏移值
-        this.parent.scale.x = Width / this.rect.width
+        this.parent.scale.x = x
+        const w = this.parent.scale.x * this.rect.width;
+
         this.parent.updateTransform();
-        this.applyChildWidth({Width})
+        this.applyChildWidth({scaleX: w / prew })
         this.updateCompState();
     }
 
-    scaleHeight(Height:number) {
-        this.parent.scale.y = Height / this.rect.height
+    scaleHeight(y:number) {
+        const preH = this.parent.scale.y * this.rect.height;
+        this.parent.scale.y = y
+        const h = this.parent.scale.y * this.rect.height;
         this.parent.updateTransform();
-        this.applyChildWidth({Height});
+        this.applyChildWidth({scaleY: h / preH});
         this.updateCompState();
     }
 
     translate(x:number, y:number) {
         this.parent.x += x;
         this.parent.y += y;
-
         this.parent.updateTransform();
-
         this.updateCompState();
     }
 
@@ -287,6 +301,7 @@ export class ObjsContainer {
             child._lastBoundsID = 0;
         }
     }
+
     updateCompState() {
         let n = this.selected.length;
         while (n--) {

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

@@ -33,7 +33,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     showGizmo: false,
     width: 0,
     height: 0,
-    relWidth: 0, 
+    relWidth: 0,
     relHeight: 0,
     matrix: "matrix(1,0,0,1,0,0)",
     matrixInvert: "matrix(1,0,0,1,0,0)",
@@ -77,7 +77,9 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     this._selCanvaseSize.w = selCanvas.width * 2;
     this._selCanvaseSize.h = selCanvas.height * 2;
 
-    viewport.addEventListener("mousedown", this.onDocMouseDown.bind(this), {capture: true});
+    viewport.addEventListener("mousedown", this.onDocMouseDown.bind(this), {
+      capture: true,
+    });
     window.addEventListener("resize", this.onResize.bind(this));
   }
 
@@ -89,10 +91,15 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     if (!this.pageEl || !this.selCanvas) return;
     if (this.store.textEditingState) return;
-    
-    document.addEventListener("mousemove", this.onDocMouseMove, {capture: true});
+
+    document.addEventListener("mousemove", this.onDocMouseMove, {
+      capture: true,
+    });
     //mouseup和click都会被触发, 监听click事件可以阻止子组件的点击行为
-    document.addEventListener("click", this.onDocMouseUp.bind(this), {capture: true, once: true});
+    document.addEventListener("click", this.onDocMouseUp.bind(this), {
+      capture: true,
+      once: true,
+    });
 
     let box = this.pageEl.getBoundingClientRect();
     const pageX = e.clientX - box?.left;
@@ -131,17 +138,16 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       if (!isClickSelRect) {
         //判断是否有点击到card stream
         const comps = this.compClickTest(e);
-        console.log("comps=>", comps);       
+        console.log("comps=>", comps);
         if (comps.length < 1) {
-
-          const test = this.streamCardClickTest(e)
+          const test = this.streamCardClickTest(e);
           if (test) {
             const childs = this.compMap[test.id].children.default || [];
             if (childs.length < 1) {
-               return;
+              return;
             }
           }
-          
+
           const view = this.viewport?.getBoundingClientRect() as any;
           const isOut =
             e.clientX < view.left ||
@@ -151,7 +157,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
           if (!isOut) {
             this._state = MODE_SEL_RECT;
           }
-        } 
+        }
         //else {
         //   this._state = MODE_MOVING;
         //   const obj = this.compMap[comps[0].id];
@@ -168,8 +174,13 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     this._movePreClientX = this._downClientX;
     this._movePreClientY = this._downClientY;
-    
+
+    if (this._state == MODE_MOVING) {
+      const obj = this.objContainer as ObjsContainer;
+      this._initMovePos = { x: obj.parent.x, y: obj.parent.y };
+    }
   }
+  _initMovePos = { x: 0, y: 0 };
 
   getDivFlag(div: HTMLElement) {
     let c: any = div;
@@ -193,7 +204,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     const pbox = this.pageEl.getBoundingClientRect();
     const pageX = e.clientX - pbox?.left;
 
-    const Out:any[] = [];
+    const Out: any[] = [];
     while (n--) {
       const cardComp = compMap[cards[n]];
       const box = cardComp.$el.getBoundingClientRect();
@@ -220,7 +231,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
               cardY: cardY,
               cardId: cards[n],
               startMatrix: m,
-            }
+            };
           }
         }
       }
@@ -278,8 +289,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     //   return;
     // }
     if (this._state) {
-        e.preventDefault();
-        e.stopPropagation();
+      e.preventDefault();
+      e.stopPropagation();
     }
 
     switch (this._state) {
@@ -298,14 +309,16 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     this._movePreClientY = e.clientY;
     this._movePreClientX = e.clientX;
-  }
+  };
 
   get compMap() {
     return this.store.designData.compMap;
   }
 
   onDocMouseUp(e: MouseEvent) {
-    document.removeEventListener("mousemove", this.onDocMouseMove, {capture: true});
+    document.removeEventListener("mousemove", this.onDocMouseMove, {
+      capture: true,
+    });
 
     if (this._mouseDownFlag == "toolbar") {
       return;
@@ -318,15 +331,19 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     if (dx < 2 && dy < 2 && !this.store.textEditingState && offsetT < 200) {
       isClick = true;
     }
-    if (isClick) {    
+    if (isClick) {
       this._state = MODE_NONE;
       const comps = this.compClickTest(e);
       if (comps.length < 1) {
         setTimeout(() => {
+          if (this.historySelected ) {
+            this.histroySelectObjs([])
+          } else {
             this.selecteObjs([]);
+          }
         }, 0);
       }
-    } else{
+    } else {
       e.stopPropagation();
     }
     console.log("up");
@@ -345,10 +362,12 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     if (this._state == MODE_ROTATE) {
       this.rotateMouseUp(e);
-    }
-    if (this._state == MODE_SCALE) {
+    } else if (this._state == MODE_SCALE) {
       this.scaleMouseUp(e);
+    } else if (this._state == MODE_MOVING) {
+      this.moveMouseUp(e);
     }
+
     this._state = MODE_NONE;
     this._downed = false;
     this._moveSelectUpdated = false;
@@ -360,6 +379,38 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     );
     this.upgateGizmoStyle();
   }
+  moveMouseUp(e: MouseEvent) {
+    const history = this.controls.historyCtrl.history;
+
+    const obj = this.objContainer as ObjsContainer;
+    const lastX = obj.parent.x,
+      lastY = obj.parent.y;
+
+    const initX = this._initMovePos.x,
+      initY = this._initMovePos.y;
+
+    history.record({
+      undo: () => {
+        console.log("undo ");
+
+        const currObj = this.objContainer as ObjsContainer;
+        currObj.parent.x = initX;
+        currObj.parent.y = initY;
+        currObj.parent.updateTransform();
+        currObj.updateCompState();
+        this.upgateGizmoStyle();
+      },
+      redo: () => {
+        const currObj = this.objContainer as ObjsContainer;
+        currObj.parent.x = lastX;
+        currObj.parent.y = lastY;
+        currObj.parent.updateTransform();
+        currObj.updateCompState();
+        this.upgateGizmoStyle();
+      },
+    } as any);
+    history.submit();
+  }
 
   rectSelect(x: number, y: number, width: number, height: number) {
     const childs =
@@ -375,7 +426,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     }
     console.log(outs);
 
-    this.selecteObjs(outs);
+    this.histroySelectObjs(outs)
+    // this.selecteObjs(outs);
   }
 
   upgateGizmoStyle() {
@@ -389,8 +441,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     this.transferStyle.showGizmo = false;
 
-     //@ts-ignore
-    const yoff = this.store.currStreamCard.$el.getBoundingClientRect().top -  this.pageEl?.getBoundingClientRect().top;
+    //@ts-ignore
+    const yoff = this.store.currStreamCard.$el.getBoundingClientRect().top - this.pageEl?.getBoundingClientRect().top;
     this.transferStyle.baseCardTop = yoff + "px";
 
     const selector = this.objContainer as ObjsContainer;
@@ -407,11 +459,10 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     tmp.copyFrom(obj.worldTransform);
     let matrix = `matrix(${tmp.a},${tmp.b},${tmp.c},${tmp.d},${tmp.tx},${tmp.ty})`;
 
-    tmp.rotate( -tmp.getRotate() )
+    tmp.rotate(-tmp.getRotate());
     tmp.invert();
     let matrixInvert = `matrix(${tmp.a},${tmp.b},${tmp.c},${tmp.d},0,0)`;
 
-  
     this.transferStyle.width = w;
     this.transferStyle.height = h;
     this.transferStyle.relWidth = w * obj.scale.x;
@@ -484,6 +535,53 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   }
   objContainer?: ObjsContainer;
 
+  historySelected = false;
+  histroySelectObjs(objs: any[]) {
+
+    const preObjContainer = this.objContainer;
+    const history = this.controls.historyCtrl.history;
+    const pre = this.selected;
+    this.selecteObjs(objs);
+    const lastContainer = this.objContainer;
+    const lastObjs = objs;
+    this.historySelected = true;
+
+    history.record({
+      undo: () => {
+        this.selected = pre;
+        if (preObjContainer) {
+          let parent = preObjContainer.parent;
+          pre.forEach((obj) => {
+            parent.addChildWorldNoChange(obj);
+          });
+          parent.updateTransform();
+          this.objContainer = preObjContainer;
+        } else {
+          this.objContainer = undefined;
+        }
+        this.upgateGizmoStyle();
+      },
+      redo: () => {
+        this.selected = lastObjs;
+        if (preObjContainer) {
+          preObjContainer.destroy();
+        }
+        if (lastContainer) {
+          let parent = lastContainer.parent;
+          objs.forEach((obj) => {
+            parent.addChildWorldNoChange(obj);
+          });
+          parent.updateTransform();
+          this.objContainer = lastContainer;
+        } else {
+          this.objContainer = undefined;
+        }
+        this.upgateGizmoStyle();
+      },
+    } as any);
+    history.submit();
+  }
+
   selecteObjs(objs: any[], ContainerBox?: ObjsContainer) {
     if (this.selected.length == 0 && objs.length == 0) return;
 
@@ -495,6 +593,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       return;
 
     // objs = this.getSceneObjOrderArr(objs);
+    this.historySelected = false;
 
     const preObjContainer = this.objContainer;
 
@@ -653,15 +752,22 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     let last = this.lastRad;
     let initrad = scope.objinitAngleRad;
 
-    // this.editor.history.record({undo:function(){
-    //         scope.objContainer.setPivot(4);
-    //         scope.objContainer.rotate( initrad );
-    //         scope.emitChange();
-    //     }, redo:function(){
-    //         scope.objContainer.setPivot(4);
-    //         scope.objContainer.rotate( last );
-    //         scope.emitChange();
-    // }});
+    const history = this.controls.historyCtrl.history;
+    history.record({
+      undo: () => {
+        console.log("undo ");
+        this.objContainer?.setPivot(4);
+        this.objContainer?.rotate(initrad);
+        this.upgateGizmoStyle();
+      },
+      redo: () => {
+        console.log("redo ");
+        this.objContainer?.setPivot(4);
+        this.objContainer?.rotate(last);
+        this.upgateGizmoStyle();
+      },
+    } as any);
+    history.submit();
     this.rotateCmd = false;
   }
 
@@ -678,7 +784,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   scaleCmd = false;
   lastScale = { x: 1, y: 1 };
 
-  initScaleWith = {w: 0, h:0};
+  initScaleWith = { w: 0, h: 0 };
 
   scaleMousemove(event: MouseEvent) {
     let dirIndexs = [
@@ -702,7 +808,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
         scaleIndex = dirOrth.indexOf(dir);
         if (scaleIndex == 2) scaleIndex = 0;
       }
-      
+
       let pivot = objContainer.setPivot(scaleIndex);
 
       this.scaleIndex = scaleIndex;
@@ -711,7 +817,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       this.mainAxisVector = { x: StartX - pivot.x, y: StartY - pivot.y };
       let scale = objContainer.parent.scale;
       this.initScale = { x: scale.x, y: scale.y };
-      this.initScaleWith = {w: objContainer.width, h: objContainer.height}
+      this.initScaleWith = { w: objContainer.width, h: objContainer.height };
 
       this.mainAxisVectorLenth = VectorLenth(
         this.mainAxisVector.x,
@@ -738,37 +844,28 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       let dtaY = Project(vec, this.yAxisVector) / this.yAxisVectorLength;
       this.lastScale.x = dtaX * this.initScale.x;
       this.lastScale.y = dtaY * this.initScale.y;
-    //   objContainer.scale(this.lastScale.x, this.lastScale.y);
-        const currW = this.initScaleWith.w * this.lastScale.x;
-        objContainer.scaleSize(currW, this.lastScale.y * this.initScaleWith.h);
-
+      //   objContainer.scale(this.lastScale.x, this.lastScale.y);
+      const currW = this.initScaleWith.w * this.lastScale.x;
+      objContainer.scaleSize(currW, this.lastScale.y * this.initScaleWith.h);
     } else {
       let mainVec = this.mainAxisVector;
       let dtaScale = Project(vec, mainVec) / this.mainAxisVectorLenth;
-      console.log( "dtaScale=>" , dtaScale );
+      console.log("dtaScale=>", dtaScale);
 
       let i = dirOrth.indexOf(this._mouseDownFlag);
       if (i == -1) {
         this.lastScale.x = dtaScale * this.initScale.x;
         this.lastScale.y = dtaScale * this.initScale.y;
         // objContainer.scale(this.lastScale.x, this.lastScale.y);
-        const currW = this.initScaleWith.w * this.lastScale.x;
-        objContainer.scaleSize(currW, this.initScaleWith.h *this.lastScale.y);
-        // objContainer.scaleHeight(, dtaScale);
-
+        objContainer.scaleSize(this.lastScale.x, this.lastScale.y);
       } else if (i == 0 || i == 1) {
-
-        
         this.lastScale.x = dtaScale * this.initScale.x;
         // objContainer.scaleX(this.lastScale.x);
-        const currW = this.initScaleWith.w * this.lastScale.x;
-        objContainer.scaleWidth(currW);
-
+        objContainer.scaleWidth(this.lastScale.x);
       } else if (i == 2 || i == 3) {
         this.lastScale.y = dtaScale * this.initScale.y;
-
         // objContainer.scaleY(this.lastScale.y);
-        objContainer.scaleHeight(this.lastScale.y * this.initScaleWith.h);
+        objContainer.scaleHeight(this.lastScale.y);
       }
     }
 
@@ -781,27 +878,26 @@ 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 );
-      //         this.objContainer.scale(preScale.x, preScale.y);
-
-      //         this.emitChange();
-      //     },
-      //     redo:()=>{
-      //         this.objContainer.setPivot( scaleIndex );
-      //         this.objContainer.scale(lastScale.x, lastScale.y);
-
-      //         this.emitChange();
-      //     }
-      // });
-      this.scaleCmd = false;
 
-      // this.emit("objSizeChanged");
-      // this.editor.draw();
+      const history = this.controls.historyCtrl.history;
+
+      history.record({
+        undo: () => {
+          console.log("undo ");
+
+          this.objContainer?.setPivot(scaleIndex);
+          this.objContainer?.scaleSize(preScale.x, preScale.y);
+          this.upgateGizmoStyle();
+        },
+        redo: () => {
+          console.log("redo ");
+          this.objContainer?.setPivot(scaleIndex);
+          this.objContainer?.scaleSize(lastScale.x, lastScale.y);
+          this.upgateGizmoStyle();
+        },
+      } as any);
+      history.submit();
+      this.scaleCmd = false;
     }
-    // this.emitTransformed  = false;
   }
 }

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

@@ -34,7 +34,11 @@ export const editActions = EditorModule.action({
       compKey != "Web3D";
 
     let yOffset = 0;
-    if (this.store.currCompId != this.store.currStreamCardId && !isCreatCard) {
+    if (
+      this.store.currCompId != this.store.currStreamCardId &&
+      !isCreatCard &&
+      this.store.currCompId != "root"
+    ) {
       const bound = this.helper.getCardCompBound(this.store.currCompId);
       yOffset = bound.y + bound.h;
     }

src/modules/editor/module/actions/editWithManualHistory.ts

@@ -4,31 +4,46 @@ import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { CompObject } from "../../controllers/SelectCtrl/compObj";
 
 export const manualActions = EditorModule.action({
+
   pickComp(compId: string) {
-    if (this.store.currCompId == compId) {
-      if (this.controls.selectCtrl.selected.length < 1 ) {
-        const paths = this.helper.getCompTrees(compId)
+
+    const selectCardChild = (id:string)=>{
+      const paths = this.helper.getCompTrees(id)
         const cardChilds = paths[2];
         if (cardChilds) {
             this.controls.selectCtrl.selecteObjs([new CompObject(cardChilds)]);
+        } else  {
+          this.controls.selectCtrl.selecteObjs([])
+        }
+    }
+
+    if (this.store.currCompId == compId) {
+      if (this.controls.selectCtrl.selected.length < 1 ) {
+        selectCardChild(compId);
+      }else {
+          this.controls.selectCtrl.upgateGizmoStyle();
         }
-      }
       return;
     }
-    const { historyCtrl } = this.controls;
-    const isActionRoot = !historyCtrl.historyActionDoing;
 
-    if (isActionRoot) historyCtrl.historyActionDoing = true;
-    historyCtrl.historyCombine = true;
-    this.store.setCurrComp(compId);
-    historyCtrl.historyCombine = false;
-    if (isActionRoot) historyCtrl.historyActionDoing = false;
+    //const { historyCtrl } = this.controls;
+    const history = this.controls.historyCtrl.history;
+    let preCompId = this.store.currCompId;
+    let lasCompId = compId;
 
-    const paths = this.helper.getCompTrees(compId)
-    const cardChilds = paths[2];
-    if (cardChilds) {
-        this.controls.selectCtrl.selecteObjs([new CompObject(cardChilds)]);
-    }
+    history.record({undo:()=>{
+      
+      this.store.setCurrComp(preCompId);
+      selectCardChild(preCompId);
+
+    }, redo:()=>{
+      this.store.setCurrComp(lasCompId);
+      selectCardChild(lasCompId);
+    }} as any)
+    history.submit();
+
+    this.store.setCurrComp(compId);
+    selectCardChild(compId);
   },
   updateCompData(comp: DesignComp, path: string, value: any) {
     const { historyCtrl } = this.controls;
@@ -38,6 +53,7 @@ export const manualActions = EditorModule.action({
     historyCtrl.historyCombine = false;
     historyCtrl.historyActionDoing = false;
   },
+
   submitUpdate() {
     this.controls.historyCtrl.history.submit();
   },

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

@@ -83,6 +83,10 @@ export const store = EditorModule.store({
 
       const comps = this.helper.getCompTrees(compId);
 
+      if (compId == "root") {
+          return;
+      }
+      
       this.store.currStreamCardId = comps[1]?.id || ''
     },