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

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

@@ -11,7 +11,19 @@ export const Component = defineComponent({
   setup(props) {
     const comp = useCompData(props.compId);
 
-    const { store, controls } = useEditor();
+    const { actions, helper, store, controls } = useEditor();
+
+    function setImageSize(url: string) {
+      if (!helper.isStreamCardChild(props.compId)) return;
+
+      const temImg = new Image();
+      temImg.src = url;
+
+      temImg.onload = function () {
+        comp.setH(comp.getW() / (temImg.width / temImg.height));
+        actions.onCompLayoutUpdated(comp);
+      };
+    }
 
     async function changeVal() {
       try {
@@ -22,6 +34,7 @@ export const Component = defineComponent({
         comp.value.x = 0;
         comp.value.y = 0;
         comp.value.s = 1;
+        setImageSize(url);
       } catch (error) {
         console.log(error);
       }

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

@@ -86,7 +86,7 @@ export const Hudop = defineComponent({
     });
 
     return () => (
-      <div class="hudop" ref={opref}>
+      <div class="hudop shadow" ref={opref}>
         {store.streamCardIds.length > 1 && (
           <IconMove
             class="draganchor"
@@ -135,10 +135,10 @@ const viewStyle = css`
     width: 28px;
     align-items: center;
     border-radius: 4px;
+    z-index: 997;
     .inficon {
       padding: 8px;
     }
-    z-index: 999;
   }
 `;
 

src/modules/editor/components/CompUI/customUI/Cards/Card11/index.ts

@@ -22,7 +22,7 @@ export const { createComp, useCompData, useCreateChild } = createCompHooks({
       createCompId("Text", {
         value: `<p><span style="color:hsl(0, 0%, 30%);font-size:12px;">皮中贵族，触及之处皆舒适，柔韧度高的细腻肌理皮革，触感柔润亲肤，透气</span></p><p><span style="color:hsl(0, 0%, 30%);font-size:12px;">质量经久耐磨，性价比高， 经典之作用不过时。 </span></p>`,
         layout: {
-          textAlign: "center",
+          size: [370, 300],
         },
       }),
     img1: () =>

src/modules/editor/components/CompUI/customUI/Cards/Card13/component.tsx

@@ -18,9 +18,11 @@ export const Component = createUIComp({
             class="w-2.74rem h-2.56rem object-cover"
           />
         </div>
-        <div class="flex-1 mt-1rem py-0.58rem px-0.2rem mb-1.3rem border-2px border-black border-solid leading-loose">
-          <Text.Component compId={children.text} />
-        </div>
+
+        <Text.Component
+          class="flex-1 mt-1rem py-0.58rem mb-1.3rem border-2px border-black border-solid leading-loose"
+          compId={children.text}
+        />
         <div class="absolute bottom-0.1rem left-0.35rem">
           <Image.Component
             compId={children.imgShoe}

src/modules/editor/components/CompUI/customUI/Cards/Card13/index.ts

@@ -19,7 +19,7 @@ export const { createComp, useCompData } = createCompHooks({
       createCompId("Text", {
         value: `<p style="text-align:center;">两面开边珠，无漆皮光亮&nbsp;</p><p style="text-align:center;">却比漆皮更耐用，不容易爆皮&nbsp;</p><p style="text-align:center;">逛着干看起来更加高档&nbsp;</p><p style="text-align:center;">丰富多彩的流行色水，增加无限魅力</p><p style="text-align:center;">既有复古的韵味更有时下的潮流元素</p>`,
         layout: {
-          textAlign: "center",
+          size: [390, 420],
         },
       }),
     img1: () =>

src/modules/editor/components/CompUI/customUI/Cards/Card14/component.tsx

@@ -11,7 +11,7 @@ export const Component = createUIComp({
     const { children } = useCompData(props.compId);
 
     return () => (
-      <div class="pt-0.2rem px-0.35rem">
+      <div class="pt-0.2rem px-0.68rem pr-0.35rem">
         <div class="flex justify-end relative pb-0.22rem  z-10">
           <div class="absolute left-0 bottom-0 z-10">
             <Image.Component
@@ -24,9 +24,12 @@ export const Component = createUIComp({
             class="w-4rem h-3.3rem object-cover"
           />
         </div>
-        <div class="relative mr-0.24rem -mt-0.6rem border-2px border-solid border-dark-400 pt-1rem pb-0.5rem leading-loose">
-          <div class="absolute -right-5px top-0 w-10px h-1rem bg-white"></div>
-          <Text.Component compId={children.text} />
+        <div class="relative">
+          <div class="absolute right-7px top-0 w-10px h-1rem bg-white z-1"></div>
+          <Text.Component
+            compId={children.text}
+            class="-mt-0.6rem border-2px border-solid border-dark-400 pt-1rem pb-0.5rem leading-loose"
+          />
         </div>
       </div>
     );

src/modules/editor/components/CompUI/customUI/Cards/Card14/index.ts

@@ -19,7 +19,7 @@ export const { createComp, useCompData } = createCompHooks({
       createCompId("Text", {
         value: `<p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );font-size:12px;">蓝色是个舒服的颜色，</span></p><p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );font-size:12px;">&nbsp;处处充满着生机和希望，</span></p><p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );font-size:12px;">&nbsp;其明净空旷往往让人迷失其中，&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );font-size:12px;">给人无限的对未来的憧憬，&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );font-size:12px;">不需要过多的言语，让心灵感到平和</span></p>`,
         layout: {
-          textAlign: "center",
+          size: [622, 360],
         },
       }),
     img1: () =>

src/modules/editor/components/CompUI/customUI/Titles/Title1/index.ts

@@ -24,6 +24,7 @@ export const { createComp, useCompData } = createCompHooks({
         value: `<p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:28px;">我的风格我选择</span></p>`,
         layout: {
           textAlign: "center",
+          size: [750, 100],
         },
       }),
     subTitle: () =>
@@ -32,6 +33,7 @@ export const { createComp, useCompData } = createCompHooks({
         layout: {
           textAlign: "center",
           margin: "0.1rem auto 0",
+          size: [260, 60],
         },
       }),
   },

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

@@ -30,6 +30,7 @@ export class CompUICtrl extends ModuleControl<EditorModule> {
     components: new Map<string, CompItem>(),
   });
   init() {
+    this.state.components.clear();
     this.initDefaultUI();
     if (this.store.isEditMode) {
       this.initUserUI();
@@ -48,7 +49,7 @@ export class CompUICtrl extends ModuleControl<EditorModule> {
       });
     });
   }
-  async initUserUI() {
+  private async initUserUI() {
     const listCtrl = new PageListController<
       { _id: string; title: string; thumbnail: string },
       any

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

@@ -16,26 +16,37 @@ export const editActions = EditorModule.action({
       this.store.currStreamCard.$el
     );
     const { currComp } = this.store;
-    let selCtrl = this.controls.selectCtrl
-    selCtrl.translate(this.helper.designSizeToPx(375 - (currComp.layout.size?.[0] || 750) / 2), cardPoints.y);
+    let selCtrl = this.controls.selectCtrl;
+    selCtrl.translate(
+      this.helper.designSizeToPx(375 - (currComp.layout.size?.[0] || 750) / 2),
+      cardPoints.y
+    );
     this.helper.extendStreamCard(this.store.currStreamCardId);
-
   },
   // 通过点击添加组件到画布
   async clickCompToDesign(compKey: ICompKeys, cb?: (comp: DesignComp) => void) {
-
     //点击默认都创建一个容器
     //创建容器
-    const isCreatCard =  compKey != "Text" && compKey != "Image" && compKey != "Video" && compKey != "Web3D";
+    const isCreatCard =
+      compKey != "Text" &&
+      compKey != "Image" &&
+      compKey != "Video" &&
+      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
+      yOffset = bound.y + bound.h;
     }
 
-    if (isCreatCard) { //先创建卡片
-      const index = this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
+    if (isCreatCard) {
+      //先创建卡片
+      const index =
+        this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
       const compId = await this.store.insertDesignContent("Container", index);
       this.actions.pickComp(compId);
     }
@@ -45,7 +56,9 @@ export const editActions = EditorModule.action({
 
     //添加组件到当前选中的组件下面
     const selectCtrl = this.controls.selectCtrl;
-    let xOffset = this.helper.designSizeToPx(375 - (currComp.layout.size?.[0] || 750) / 2);
+    let xOffset = this.helper.designSizeToPx(
+      375 - (currComp.layout.size?.[0] || 750) / 2
+    );
     selectCtrl.translate(xOffset, yOffset);
     selectCtrl.selecteObjs([]);
 
@@ -53,8 +66,6 @@ export const editActions = EditorModule.action({
     this.helper.extendStreamCard(this.store.currStreamCardId);
   },
 
-  
-
   // 添加组件到画布
   async addCompToDesign(compKey: ICompKeys, index?: number) {
     if (!this.store.currStreamCardId) {
@@ -73,10 +84,10 @@ export const editActions = EditorModule.action({
       compKey,
       this.store.currStreamCard
     );
-    const addedComp = this.store.compMap[compId]
+    const addedComp = this.store.compMap[compId];
     this.actions.setCompPositionFloat(addedComp);
 
-    this.controls.selectCtrl.selecteObjs([new CompObject(addedComp)])
+    this.controls.selectCtrl.selecteObjs([new CompObject(addedComp)]);
   },
 
   // 切换当前组件
@@ -199,7 +210,6 @@ export const editActions = EditorModule.action({
       await this.controls.uploader.uploadBlobs(data);
       await this.https.createComp(data);
       queenApi.messageSuccess("保存成功");
-      this.controls.compUICtrl.initUserUI();
     } catch (error: any) {
       throw Exception.error(error.toString());
     } finally {

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,8 +83,12 @@ export const store = EditorModule.store({
     setCurrComp(compId: string) {
       this.store.currCompId = compId;
       const comps = this.helper.getCompTrees(compId);
+
+      if (compId == "root") {
+          return;
+      }
       
-      this.store.currStreamCardId = comps[1]?.id || "";
+      this.store.currStreamCardId = comps[1]?.id || ''
     },
 
     deleteComp(compId: string) {

src/modules/editor/objects/Toolbars/default.ts

@@ -141,8 +141,9 @@ export const toolbars = createToolbars({
     getVisible(comp) {
       return this.helper.isShowSaveComp(comp);
     },
-    onClick(comp) {
-      this.actions.saveAsComp(comp);
+    async onClick(comp) {
+      await this.actions.saveAsComp(comp);
+      this.controls.compUICtrl.init();
     },
   },
   // 取消打组